Jump to content

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


goldenix
 Share

Recommended Posts

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

;~ ==========================================================================================
;~  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 by goldenix
My Projects:[list][*]Guide - ytube step by step tut for reading memory with autoitscript + samples[*]WinHide - tool to show hide windows, Skinned With GDI+[*]Virtualdub batch job list maker - Batch Process all files with same settings[*]Exp calc - Exp calculator for online games[*]Automated Microsoft SQL Server 2000 installer[*]Image sorter helper for IrfanView - 1 click opens img & move ur mouse to close opened img[/list]
Link to comment
Share on other sites

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.

My Projects:[list][*]Guide - ytube step by step tut for reading memory with autoitscript + samples[*]WinHide - tool to show hide windows, Skinned With GDI+[*]Virtualdub batch job list maker - Batch Process all files with same settings[*]Exp calc - Exp calculator for online games[*]Automated Microsoft SQL Server 2000 installer[*]Image sorter helper for IrfanView - 1 click opens img & move ur mouse to close opened img[/list]
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)¹Õ¹

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

Link to comment
Share on other sites

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
My Projects:[list][*]Guide - ytube step by step tut for reading memory with autoitscript + samples[*]WinHide - tool to show hide windows, Skinned With GDI+[*]Virtualdub batch job list maker - Batch Process all files with same settings[*]Exp calc - Exp calculator for online games[*]Automated Microsoft SQL Server 2000 installer[*]Image sorter helper for IrfanView - 1 click opens img & move ur mouse to close opened img[/list]
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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

NEWHeader1.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

NEWHeader1.png

Link to comment
Share on other sites

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
Link to comment
Share on other sites

  • 2 weeks later...

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
Link to comment
Share on other sites

  • 1 year later...

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)

Link to comment
Share on other sites

  • 4 months later...
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...