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

goldenix · June 9, 2008

I made 1 simple Udf for Beginners check it out:

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

;~ ==========================================================================================
;~  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 · June 9, 2008

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

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

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

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

Did nobody have any interest in this:

Hover buttons example

Posted Image

goldenix · June 9, 2008

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

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 · June 10, 2008

Did nobody have any interest in this:
Hover buttons example

yes very much interest.

i wonder if anyone can recreate this in autoit.

Valuater · June 11, 2008

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

Cool. I will have to use this sometime.

tic · June 11, 2008

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

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

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

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

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 · March 28, 2010

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

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 · May 20, 2012

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

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members