Jump to content



Photo

PNG as GUI, drop shadows, curved edges... _UDF


  • Please log in to reply
18 replies to this topic

#1 goldenix

goldenix

    Universalist

  • Active Members
  • PipPipPipPipPipPip
  • 735 posts

Posted 09 June 2008 - 08:20 PM

I made 1 simple Udf for Beginners check it out:

Posted Image Posted Image testgui.png Posted Image grey.gif

Original topic can be found Hire, Where I took the code From: http://www.autoitscript.com/forum/index.php?showtopic=47651

Get: testgui.png & grey.gif Put them, UDF & Sample in same Folder
Run Sample. Vuala.

AutoIt Version.: 3.2.12.0 IS REQUIRED FOR THIS!!!!
1 more thing, This is How It works, We create Gui1 the background, Then we put the Gui2(This is ur gui now) on top of GUI1. So If you want to hide the GUI you will need to Hide Both GUIS!


If you wonder Why the code is not in Between Autoit Tags, its because the forum wont let me post it, Gives me a TAG Error...

Usage Sample
Plain Text         
;~ ========================================================================================== ;~  Description ...: Skin Your GUI With GDIPlus.au3, Fast & Easy ;~  Syntax ........: ;~              _UDF_SKINGUI_MAKE($GUI_NAME) ;~              _UDF_SKINGUI_label($TEXT_COLOR,$TEXT,$LEFT,$TOP,$WIDTH,$HEIGHT) ;~              _UDF_SKINGUI_BUTTON($TEXT_COLOR,$TEXT_BKCOLOR,$TEXT,$LEFT,$TOP,$WIDTH,$HEIGHT) ;~              _UDF_SKINGUI_Checkbox($TEXT_COLOR,$TEXT_BKCOLOR,$TEXT,$LEFT,$TOP,$WIDTH,$HEIGHT,$STATE) ;~              _UDF_SKINGUI_RADIO($TEXT_COLOR,$TEXT_BKCOLOR,$TEXT,$LEFT,$TOP,$WIDTH,$HEIGHT,$STATE) ;~              _UDF_SKINGUI_DELETE($Form1_GUI) ;~  ;~              $MY_GUIIMAGE = 'testgui.png' ;~              $MY_GUIIMAGE2 = 'grey.gif' ;~  ;~               FileInstall('testgui.png', "testgui.png",0); use this To install ur GUI Image When you compile ur Script ;~              FileInstall('grey.gif', "grey.gif",0); use this To install ur GUI Image When you compile ur Script ;~  Remarks .......: ;~                  Fore some Reason you cant make the Checkbox & Radio Background Transparent, so you will h ave to set the color manually. ;~                  GUICtrlSetBkColor(-1, $GUI_BKCOLOR_TRANSPARENT) is not working for some reason ;~  AutoIt Version.: 3.2.12.0 ;~ ========================================================================================== FileInstall('testgui.png', "testgui.png",0); use this To install ur GUI Image When you compile ur Script FileInstall('grey.gif', "grey.gif",0); use this To install ur GUI Image When you compile ur Script $MY_GUIIMAGE = 'testgui.png' $MY_GUIIMAGE2 = 'grey.gif' #include <GUIConstantsEx.au3> #include <UDF_Skin_GUI.au3> Opt("GUIOnEventMode", 1); Change to OnEvent mode HotKeySet('{esc}','CLOSEClicked'); ALT+1 Show / Hode Gui to tray #Region ### START Koda GUI section ### Form= $Form1 = _UDF_SKINGUI_MAKE('Form1')     $Button1 =  _UDF_SKINGUI_BUTTON(0x000000,0xD0DAF1,"Button1", 68, 128, 75, 25);~ [T_Color],[BG_Color],[Text],[LEFT],[TOP],[WIDTH],[HEIGHT]                 _UDF_SKINGUI_Checkbox(0x000000,0xD0DAF1,"Checkbox1", 46, 80, 97, 17,-1);~ [T_Color],[BG_Color],[Text],[LEFT],[TOP],[WIDTH],[HEIGHT],[State -1 = Checkked / State 0 = UNCheckked ]                 _UDF_SKINGUI_label(0x000000,'Hit Esc To exit',40, 56, 86, 17);~ [T_Color],[Text],[LEFT],[TOP],[WIDTH],[HEIGHT]                 _UDF_SKINGUI_RADIO(0x000000,0xD0DAF1,"Radio1", 68, 104, 80, 17,0);~ [T_Color],[BG_Color],[Text],[LEFT],[TOP],[WIDTH],[HEIGHT],[State -1 = Checkked / State 0 = UNCheckked ]                 GUICtrlCreateList("", 172, 56, 129, 97) GUISetState(@SW_SHOW) #EndRegion ### END Koda GUI section ### ; GUI events GUICtrlSetOnEvent($Button1, "_Buttonclick") ;~ ======================================= Func _Buttonclick()         MsgBox(0,'','You hit The button') EndFunc ;~ ======================================= Func CLOSEClicked()     _UDF_SKINGUI_DELETE($Form1)   Exit EndFunc ;~ ======================================= While 1     Sleep(1000); Idle around WEnd

Attached Files


Edited by goldenix, 09 June 2008 - 09:55 PM.






#2 Sunaj

Sunaj

    Prodigy

  • Active Members
  • PipPipPip
  • 185 posts

Posted 09 June 2008 - 09:18 PM

Very nice work goldennix - good to see a update of the PNG as GUI code for 3.2.12.0! :) One thing; is it possible to eliminate the brief flickering seen when the sample starts?!

Cheers for the effort!

#3 goldenix

goldenix

    Universalist

  • Active Members
  • PipPipPipPipPipPip
  • 735 posts

Posted 09 June 2008 - 09:53 PM

Very nice work goldennix - good to see a update of the PNG as GUI code for 3.2.12.0! :) One thing; is it possible to eliminate the brief flickering seen when the sample starts?!

Cheers for the effort!


flickering? Im Afraid No mather How many Times I run the code I see No flickering. Try posting a vid.

#4 tic

tic

    Seeker

  • Active Members
  • 23 posts

Posted 09 June 2008 - 10:30 PM

You know that these could be made into 1 gui? A nasty way is to draw the other gui offscreen and then bitblt the controls onto your gui, but a better way is to simply make the controls with gdi+. it would be very easy

#5 SxyfrG

SxyfrG

    Adventurer

  • Active Members
  • PipPip
  • 129 posts

Posted 09 June 2008 - 10:35 PM

This looks great Goldenix, but you use a lot of undeclared variables in your functions.

i.e.

Func _UDF_SKINGUI_MAKE($GUI_NAME)       ; create child MDI gui window to hold controls     ; this part could use some work - there is some flicker sometimes...     $GUI_NAME = GUICreate($GUI_NAME, $width, $height, 4, 0, $WS_POPUP, BitOR($WS_EX_LAYERED, $WS_EX_MDICHILD), $GUI) ;<<<<<<< $GUI not declared!     ; child window transparency is required to accomplish the full effect, so $WS_EX_LAYERED above, and     ; I think the way this works is the transparent window color is based on the image you set here:     GUICtrlCreatePic($MY_GUIIMAGE2, 0, 0, $width, $height)     GUICtrlSetState(-1, $GUI_DISABLE)     Return $GUI_NAME EndFuncƒo݊÷ ي.r‹¥v¯y«­¢+ÙÕ¹Œ}U}M-%9U%}5- ˜ŒÀÌØíU%}95°€˜ŒÀÌØíA…É•¹ÑU$¤$($쁍ɕ…Ñ”¡¥±5$Õ¤Ý¥¹‘½ÜÑ¼¡½±½¹Ñɽ±Ì($ìÑ¡¥ÌÁ…ÉЁ½Õ±Õ͔Í½µ”Ý½É¬€´Ñ¡•É”¥ÌÍ½µ”™±¥­•ȁͽµ•Ñ¥µ•̸¸¸($˜ŒÀÌØíU%}95€ôU% ɕ…Ñ” ˜ŒÀÌØíU%}95°€˜ŒÀÌØíÝ¥‘Ñ °€˜ŒÀÌØí¡•¥¡Ð°€Ð°€À°€˜ŒÀÌØí]M}A=AU@°    ¥Ñ=H ˜ŒÀÌØí]M}a}1eI°€˜ŒÀÌØí]M}a}5% !%1¤°€˜ŒÀÌØíA…É•¹ÑU$¤€ì™±Ðì´´´ ¡…¹”µ…‘”¡•É”(($쁍¡¥±Ý¥¹‘½ÜÑɅ¹ÍÁ…É•¹ä¥ÌÉ•ÅեɕÑ¼…½µÁ±¥Í Ñ¡”™Õ±°•™™•Ð°Í¼€˜ŒÀÌØí]M}a}1eI…‰½Ù”°…¹($ì$Ñ¡¥¹¬Ñ¡”Ý…äÑ¡¥ÌÝ½É­Ì¥ÌÑ¡”ÑɅ¹ÍÁ…É•¹ÐÝ¥¹‘½Ü½±½È¥Ì‰…Í•½¸Ñ¡”¥µ…”å½ÔÍ•Ё¡•É”è(%U% Ñɱ ɕ…Ñ•A¥Œ ˜ŒÀÌØí5e}U%%5Ȱ€À°€À°€˜ŒÀÌØíÝ¥‘Ñ °€˜ŒÀÌØí¡•¥¡Ð¤(%U% ÑɱM•ÑMхє ´Ä°€˜ŒÀÌØíU%}%M   1((%I•ÑÕɸ€˜ŒÀÌØíU%}95)¹‘Õ¹

My scripts:AppLauncherTRAY - Awesome app launcher that runs from the system tray NEW VERSION! | Run Length Encoding - VERY simple compression in pure autoit | Simple Minesweeper Game - Fun little game :)My website

#6 tic

tic

    Seeker

  • Active Members
  • 23 posts

Posted 09 June 2008 - 11:38 PM

Did nobody have any interest in this:

Hover buttons example

Posted Image

#7 goldenix

goldenix

    Universalist

  • Active Members
  • PipPipPipPipPipPip
  • 735 posts

Posted 09 June 2008 - 11:47 PM

You know that these could be made into 1 gui? A nasty way is to draw the other gui offscreen and then bitblt the controls onto your gui, but a better way is to simply make the controls with gdi+. it would be very easy


You know that these could be made into 1 gui?
Really? Unfortunately I have no idea how. Please feel Free, if you have some time to make an example.

but a better way is to simply make the controls with gdi+. it would be very easy
In the help File I found Only How to Draw A text string(we can use it as label). Maybe you could provide Some examples?

@SxyfrG
if its not declared then its useless variable & can as good as be removed, Right? Try removing it, It will crash ur pc in infinite loop.

Hopefully tic feels like to post some examples of his ideas ( All in 1 gui & making controls with gdi+ ), This would make things a lot more interesting.


EDIT Tic: I had intrest in that Buttons Example, But its in some weird language & it has Freakin Alot.. I really mean it, loads & loads of code & I Dont know how to use it.

Edited by goldenix, 09 June 2008 - 11:51 PM.


#8 tic

tic

    Seeker

  • Active Members
  • 23 posts

Posted 09 June 2008 - 11:54 PM

Unfortunately I am not very proficient at au3. I can write the stuff in ahk and perhaps someone could try and port it. It would make things a lot easier if I could get help porting the ahk gdi+ library across (I havent had time to document it so it would be doubly hard! :)) It is quite easy to make simple edit boxes, check boxes, buttons etc.....but you have to know gdi+ quite well to create an alphablended listview/drop down list and then handle all the events. I could perhaps show a more complex gui tomorrow and see if anyone wants to help porting it?? :)

Edit:

Ha goldenix. you dont need to look in Gdip.ahk. That is the equivalent of your GDIPlus.au3. It is just the standard library. Just needs to be added via an #include. The language is ahk. It is identical to autv2. All the actual code excluding the library is only like 25 lines

Edited by tic, 09 June 2008 - 11:57 PM.


#9 Tomb

Tomb

    Universalist

  • Active Members
  • PipPipPipPipPipPip
  • 701 posts

Posted 10 June 2008 - 12:08 AM

Did nobody have any interest in this:

Hover buttons example

Posted Image

yes very much interest.
i wonder if anyone can recreate this in autoit.

#10 Valuater

Valuater

    www.PayFreeWireless.com

  • MVPs
  • 11,078 posts

Posted 11 June 2008 - 12:31 AM

yes very much interest.
i wonder if anyone can recreate this in autoit.


very easy, use _ButtonHover() with the png above

to look "exact" change the buttoncreate to labelcreate with an underline

this is what EzSkin does ( with the buttons )

8)

Edited by Valuater, 11 June 2008 - 12:48 AM.

Posted Image

Clic The Pic!!!


#11 NELyon

NELyon

    Do you wanna brew my avatar?

  • Active Members
  • PipPipPipPipPipPip
  • 3,526 posts

Posted 11 June 2008 - 12:41 AM

Cool. I will have to use this sometime.

#12 tic

tic

    Seeker

  • Active Members
  • 23 posts

Posted 11 June 2008 - 12:45 AM

Sorry dude but did you try the example above? "EzSkin" doesn't do that....

Please could you curb my skepticism and show us the easy way to recreate it looking "exactly" the same. I have a feeling it will not look anywhere near as nice :) as i looked at ezskin, but hopefully I am mistaken...

#13 Valuater

Valuater

    www.PayFreeWireless.com

  • MVPs
  • 11,078 posts

Posted 11 June 2008 - 01:26 AM

Sorry dude but did you try the example above? "EzSkin" doesn't do that....

Please could you curb my skepticism and show us the easy way to recreate it looking "exactly" the same. I have a feeling it will not look anywhere near as nice :) as i looked at ezskin, but hopefully I am mistaken...

yes, I ran your program.

Again, this can be re-created easily!

again. again.... use the png-gui from above and use button hover [ _ButtonHover() ]

it works even better because there are three stages, you only use two

standard, over and pressed, you only use standard and over

.... after ALL my work here ... I dont need to respond to your "skepticism" and build the script

just ...LOOK AT THE UDF

8)

Edited by Valuater, 11 June 2008 - 01:27 AM.

Posted Image

Clic The Pic!!!


#14 tic

tic

    Seeker

  • Active Members
  • 23 posts

Posted 11 June 2008 - 02:22 AM

You are right. Nobody needs to prove anything. I didn't do 3 states as I made that gui in under 15 minutes. I did look at ezskin and even went through the code that it created. To me it didnt even look nearly comparable. But to me this is obvious....The text has no antialiasing. No blur effects. No possibilities for skewing/warping/colour correction. It can't use any other interpolation mode other than standard/low quality opposed to high quality bicubic. There is no per-pixel alphablending. No transparency levels (Only 1 possible unless multiple guis are used), over 4x the length of code (when unused functions from library are removed), it does not make use of clipping regions to increase speed (15ms to startup opposed to 44ms)......

I'm not slating you or your code, I'm just saying that it's common sense that gdi cant compete with gdi+/opengl/d3d in terms graphical prowess. Why would they have made gdi+ if gdi was better? I guess though if people think ezskin looks nicer and is better then I'm not one to judge. I guess I'll leave it then if everybody is happy with ezskin and not interested in getting their skins to work using gdi+

If you're at all interested Valuator and your reservation is that it doesn't have 3 hover states I can add that in 2 more lines (1 if im cheeky and put a comma between them lol)

Edited by tic, 11 June 2008 - 02:23 AM.


#15 StAbb

StAbb

    Seeker

  • Active Members
  • 49 posts

Posted 24 June 2008 - 06:57 PM

Wow nice job bro, this came out amazing. Props. I never understood the point of having the second image gray.png? If you don't mind do you think you can explain. I just wanna grab the full concept you know. Thanks man.

Edited by StAbb, 24 June 2008 - 07:10 PM.


#16 lod3n

lod3n

    Another day, another mind-boggling adventure!

  • Active Members
  • PipPipPipPipPipPip
  • 874 posts

Posted 24 June 2008 - 07:15 PM

FYI, the original was already updated for AutoIt v3.2.12.0:
http://www.autoitscript.com/forum/index.php?showtopic=47651

It's nice to see some new examples though. Keep up the good work!

#17 RegorTheGreat

RegorTheGreat

    Seeker

  • New Members
  • 1 posts

Posted 28 March 2010 - 02:48 AM

I found a bug, I think, in your code Goldenix. The Function: _UDF_SKINGUI_DELETE($Form1_GUI) tries to release the Image resource with this code:

; Release resources
_WinAPI_DeleteObject($hImage)
_GDIPlus_Shutdown()

FileDelete($MY_GUIIMAGE)


I don't think it was working properly. It may just be due to you not using #Include <WinAPI.au3>. I didn't spend enough time trying to find out why it wasn't working. I did, though, get it working by adding ImageDispose using the GDIPlus function. I added he following line of code in Blue: (I just left the other code in case it is supposed to work some sort of way...

; Release resources
_WinAPI_DeleteObject($hImage) ; I don't think this is doing anything without the WinAPI.au3 Include...
_GDIPlus_ImageDispose($hImage)
_GDIPlus_Shutdown()

FileDelete($MY_GUIIMAGE)



#18 Acanis

Acanis

    Seeker

  • Active Members
  • 19 posts

Posted 04 August 2010 - 02:56 PM

Its so nice, but you cant use it to "easy" to make a own GUI...
If you replace the "testgui.png" its fine...^^


Regards...
.

Edited by Acanis, 04 August 2010 - 03:09 PM.


#19 iTechTed89

iTechTed89

    Seeker

  • Active Members
  • 10 posts

Posted 20 May 2012 - 05:52 PM

hmm i cant seem to get the controls to load ... didnt change anything but the png/gif




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users