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

[goldenix]

I made 1 simple Udf for Beginners check it out:

testgui.png 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

expandcollapse popup

;~ ==========================================================================================
;~  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

UDF_Skin_GUI.au3

Edited June 9, 2008 by goldenix

[Sunaj]

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!

[goldenix]

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.

[tic]

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

[SxyfrG]

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
EndFuncoÝ÷ Ù.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)¹Õ¹

[tic]

Did nobody have any interest in this:

Hover buttons example

[goldenix]

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 June 9, 2008 by goldenix

[tic]

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 June 9, 2008 by tic

[Tomb]

Did nobody have any interest in this:

Hover buttons example

yes very much interest.

i wonder if anyone can recreate this in autoit.

[Valuater]

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 June 11, 2008 by Valuater

[NELyon]

Cool. I will have to use this sometime.

[tic]

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...

[Valuater]

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 June 11, 2008 by Valuater

[tic]

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 June 11, 2008 by tic

[StAbb]

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 June 24, 2008 by StAbb

[lod3n]

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!

[RegorTheGreat]

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)

[Acanis]

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 August 4, 2010 by Acanis

[iTechTed89]

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