Who wants to help me learn enhanced gui building?

[Wombat]

Alright, here's what I'm working on:

I am going to attempt to make an "add-on" to another piece of software. I plan to do this by simply making a tool that will (1) Keep the software up-to-date, (2) be able to edit the software's options/ini/properties files, and (3) will have an enhanced GUI (meaning using .png's that contain transparent color-space).

I will break it down into sections so it will be more manageable:

Section-1:
learning to check a files version;
learning to "update" the file via downloading the new version from a website;

Section-2:
I already know this one but will be posting my code for reference and improvement;

Section-3:
learning to use GDI or regular GUI to create a GUI that has transparent parts;
learning to position my GUI according to the position of the software's window;
learning to create and use progress bars;
learning other implementations the community may advise;

The 3rd section will be the hardest, mostly because I've been using KODA to make a skeleton GUI then editing it, I'm hoping to learning to make them from scratch so that I'm not reliant on KODA (no offense its a great piece of software but i'm seeking improvement and it could be considered a crutch)

Here's what I'm visualizing per the GUI (example):

Edited August 3, 2013 by Wombat

[Wombat]

I've added a spoiler tag to help others avoid unwanted padding in the thread, the images are contained within the spoiler

This would be the main body of the GUI:

This shows the positioning relative to my test window:

and these are the number functions I would like to add:

[1]: A close button

[2]: Where information is shown (text, data, etc.)

[3]: Where the progress bar would appear when working (e.g. downloading, checking for updates, changing settings)

[4]: "Help" window button

[5]: "About" window button

[6]: Dynamic buttons

Btw, all that skyrim stuff is my desktop and not the game...

Edited August 3, 2013 by Wombat

[PhoenixXL]

Coded after a long.

Check the example

expandcollapse popup

#include <GDIPlus.au3>
#include <WindowsConstants.au3>
#include <GuiConstantsEx.au3>
#include <StaticConstants.au3>
#include <Constants.au3>
#include <Array.au3>

Global Const $AC_SRC_ALPHA = 1
Global $iWidth, $iHeight, $hRegion
Global $___hNew_WndProc, $___pNew_WndProc, $___pOld_WndProc

_GDIPlus_Startup()

$s_Bitmap = @ScriptDir & "\ciik.png"    ;http://img823.imageshack.us/img823/8938/ciik.png - link given by the OP at http://www.autoitscript.com/forum/topic/153261-who-wants-to-help-me-learn-enhanced-gui-building/#entry1102795
$hLayeredGUI = _GUICreate_Alpha("LayeredWin | Phoenix XL", $s_Bitmap, $iWidth, $iHeight)

GUISetState() ;show the main gui

;when the background color and the transcolor are the same of a layered GUI we recieve transparent background
;this would create an invisible window
$hControls_GUI = GUICreate("ControlGUI", $iWidth, $iHeight, 0, 0, $WS_POPUP, BitOR($WS_EX_MDICHILD, $WS_EX_LAYERED), $hLayeredGUI)
GUISetBkColor(0xABCDEF)
_WinAPI_SetLayeredWindowAttributes($hControls_GUI, 0xABCDEF, 230) ;set transparency to 230


;the close button you can use icon also
$iCloseButton = GUICtrlCreateLabel("X", 26, 30, 10, 10)
GUICtrlSetCursor(-1, 0)
GUICtrlSetColor(-1, 0xFFFFFF)

;now lets create the so required controls to sync the user interaction
$iProgressBar = GUICtrlCreateProgress(80, 50, 360, 30)
GUICtrlSetData(-1, 20) ;set the initial position of the progress to 20


$iText = GUICtrlCreateLabel("You will get all the status updates and the information here...." & @CRLF & "Stay Tuned..", 80, 90, 279, 205)

GUISetState() ;show the controls window

Local $iMsg, $aInfo, $f_ClkThrough = False

Do

    $iMsg = GUIGetMsg(1)    ;use advanced method for there are multiple GUIs


    Switch $iMsg[1]
        Case $hControls_GUI ;msg is received from controls gui
            Switch $iMsg[0]

                Case $iCloseButton  ;close btn is clicked
                    ExitLoop

            EndSwitch

    EndSwitch



    $aInfo = GUIGetCursorInfo($hControls_GUI)
    If @error Then ContinueLoop

    ;enable clickthrough for the invisible control gui
    If $aInfo[4] = 0 And $f_ClkThrough = False Then
        _WinSetClickThrough($hControls_GUI)
        $f_ClkThrough = True

    ElseIf $aInfo[4] And $f_ClkThrough Then
        _WinSetClickThrough($hControls_GUI, False)
        $f_ClkThrough = False

    EndIf


Until $iMsg[0] = $GUI_EVENT_CLOSE

_GDIPlus_Shutdown()
Exit


Func _WinSetClickThrough($hWin, $iCLickThrough = True)

    Local $iExStyle = GUIGetStyle($hWin)
    $iExStyle = $iExStyle[1]

    If $iCLickThrough Then
        $iExStyle = BitOR($iExStyle, $WS_EX_TRANSPARENT)
    Else
        $iExStyle = BitXOR($iExStyle, $WS_EX_TRANSPARENT)
    EndIf

    Return GUISetStyle(Default, $iExStyle)
EndFunc   ;==>_WinSetClickThrough



;I have not created the following functions..

Func _GUICreate_Alpha($sTitle, $sPath, ByRef $iWidth, ByRef $iHeight, $iX = -1, $iY = -1, $iOpacity = 255)
    Local $hGUI, $hImage
    $hImage = _GDIPlus_ImageLoadFromFile($sPath)
    $iWidth = _GDIPlus_ImageGetWidth($hImage)
    $iHeight = _GDIPlus_ImageGetHeight($hImage)
    $hGUI = GUICreate($sTitle, $iWidth, $iHeight, $iX, $iY, $WS_POPUP, $WS_EX_LAYERED)

    SetBitmap($hGUI, $hImage, $iOpacity)

    _GDIPlus_ImageDispose($hImage)

    Return $hGUI
EndFunc   ;==>_GUICreate_Alpha

Func SetBitmap($hGUI, $hImage, $iOpacity)
    Local $hScrDC, $hMemDC, $hBitmap, $hOld, $pSize, $tSize, $pSource, $tSource, $pBlend, $tBlend
    $hScrDC = _WinAPI_GetDC(0)
    $hMemDC = _WinAPI_CreateCompatibleDC($hScrDC)
    $hBitmap = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hImage)
    $hOld = _WinAPI_SelectObject($hMemDC, $hBitmap)
    $tSize = DllStructCreate($tagSIZE)
    $pSize = DllStructGetPtr($tSize)
    DllStructSetData($tSize, "X", _GDIPlus_ImageGetWidth($hImage))
    DllStructSetData($tSize, "Y", _GDIPlus_ImageGetHeight($hImage))
    $tSource = DllStructCreate($tagPOINT)
    $pSource = DllStructGetPtr($tSource)
    $tBlend = DllStructCreate($tagBLENDFUNCTION)
    $pBlend = DllStructGetPtr($tBlend)
    DllStructSetData($tBlend, "Alpha", $iOpacity)
    DllStructSetData($tBlend, "Format", $AC_SRC_ALPHA)
    _WinAPI_UpdateLayeredWindow($hGUI, $hScrDC, 0, $pSize, $hMemDC, $pSource, 0, $pBlend, $ULW_ALPHA)
    _WinAPI_ReleaseDC(0, $hScrDC)
    _WinAPI_SelectObject($hMemDC, $hOld)
    _WinAPI_DeleteObject($hBitmap)
    _WinAPI_DeleteDC($hMemDC)
EndFunc   ;==>SetBitmap

I hope now you can modify by yourself.

Regards

Edited September 22, 2013 by PhoenixXL

[Wombat]

Coded after a long.

Check the example

CODE:

expandcollapse popup

#include <GDIPlus.au3>
#include <WindowsConstants.au3>
#include <GuiConstantsEx.au3>
#include <StaticConstants.au3>
#include <Constants.au3>
#include <Array.au3>

Global Const $AC_SRC_ALPHA = 1
Global $iWidth, $iHeight, $hRegion
Global $___hNew_WndProc, $___pNew_WndProc, $___pOld_WndProc

_GDIPlus_Startup()

$s_Bitmap = @ScriptDir & "\GUI.png" ;http://img823.imageshack.us/img823/8938/ciik.png - link given by the OP at http://www.autoitscript.com/forum/topic/153261-who-wants-to-help-me-learn-enhanced-gui-building/#entry1102795
$hLayeredGUI = _GUICreate_Alpha("LayeredWin | Phoenix XL", $s_Bitmap, $iWidth, $iHeight)

GUISetState() ;show the main gui

;when the background color and the transcolor are the same of a layered GUI we recieve transparent background
;this would create an invisible window
$hControls_GUI = GUICreate("ControlGUI", $iWidth, $iHeight, 0, 0, $WS_POPUP, BitOR($WS_EX_MDICHILD, $WS_EX_LAYERED), $hLayeredGUI)
GUISetBkColor(0xABCDEF)
_WinAPI_SetLayeredWindowAttributes($hControls_GUI, 0xABCDEF, 230) ;set transparency to 230


;the close button you can use icon also
$iCloseButton = GUICtrlCreateLabel("X", 26, 30, 10, 10)
GUICtrlSetCursor(-1, 0)
GUICtrlSetColor(-1, 0xFFFFFF)

;now lets create the so required controls to sync the user interaction
$iProgressBar = GUICtrlCreateProgress(80, 50, 360, 30)
GUICtrlSetData(-1, 20) ;set the initial position of the progress to 20


$iText = GUICtrlCreateLabel("You will get all the status updates and the information here...." & @CRLF & "Stay Tuned..", 80, 90, 279, 205)

GUISetState() ;show the controls window

Local $iMsg, $aInfo, $f_ClkThrough = False

Do

    $iMsg = GUIGetMsg(1)    ;use advanced method for there are multiple GUIs


    Switch $iMsg[1]
        Case $hControls_GUI ;msg is received from controls gui
            Switch $iMsg[0]

                Case $iCloseButton  ;close btn is clicked
                    ExitLoop

            EndSwitch

    EndSwitch



    $aInfo = GUIGetCursorInfo($hControls_GUI)
    If @error Then ContinueLoop

    ;enable clickthrough for the invisible control gui
    If $aInfo[4] = 0 And $f_ClkThrough = False Then
        _WinSetClickThrough($hControls_GUI)
        $f_ClkThrough = True

    ElseIf $aInfo[4] And $f_ClkThrough Then
        _WinSetClickThrough($hControls_GUI, False)
        $f_ClkThrough = False

    EndIf


Until $iMsg[0] = $GUI_EVENT_CLOSE

_GDIPlus_Shutdown()
Exit


Func _WinSetClickThrough($hWin, $iCLickThrough = True)

    Local $iExStyle = GUIGetStyle($hWin)
    $iExStyle = $iExStyle[1]

    If $iCLickThrough Then
        $iExStyle = BitOR($iExStyle, $WS_EX_TRANSPARENT)
    Else
        $iExStyle = BitXOR($iExStyle, $WS_EX_TRANSPARENT)
    EndIf

    Return GUISetStyle(Default, $iExStyle)
EndFunc   ;==>_WinSetClickThrough



;I have not created the following functions..

Func _GUICreate_Alpha($sTitle, $sPath, ByRef $iWidth, ByRef $iHeight, $iX = -1, $iY = -1, $iOpacity = 255)
    Local $hGUI, $hImage, $hScrDC, $hMemDC, $hBitmap, $hOld, $pSize, $tSize, $pSource, $tSource, $pBlend, $tBlend
    $hImage = _GDIPlus_ImageLoadFromFile($sPath)
    $iWidth = _GDIPlus_ImageGetWidth($hImage)
    $iHeight = _GDIPlus_ImageGetHeight($hImage)
    $hGUI = GUICreate($sTitle, $iWidth, $iHeight, $iX, $iY, $WS_POPUP, $WS_EX_LAYERED)

    SetBitmap($hGUI, $hImage, $iOpacity)

    _GDIPlus_ImageDispose($hImage)

    Return $hGUI
EndFunc   ;==>_GUICreate_Alpha

Func SetBitmap($hGUI, $hImage, $iOpacity)
    Local $hScrDC, $hMemDC, $hBitmap, $hOld, $pSize, $tSize, $pSource, $tSource, $pBlend, $tBlend
    $hScrDC = _WinAPI_GetDC(0)
    $hMemDC = _WinAPI_CreateCompatibleDC($hScrDC)
    $hBitmap = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hImage)
    $hOld = _WinAPI_SelectObject($hMemDC, $hBitmap)
    $tSize = DllStructCreate($tagSIZE)
    $pSize = DllStructGetPtr($tSize)
    DllStructSetData($tSize, "X", _GDIPlus_ImageGetWidth($hImage))
    DllStructSetData($tSize, "Y", _GDIPlus_ImageGetHeight($hImage))
    $tSource = DllStructCreate($tagPOINT)
    $pSource = DllStructGetPtr($tSource)
    $tBlend = DllStructCreate($tagBLENDFUNCTION)
    $pBlend = DllStructGetPtr($tBlend)
    DllStructSetData($tBlend, "Alpha", $iOpacity)
    DllStructSetData($tBlend, "Format", $AC_SRC_ALPHA)
    _WinAPI_UpdateLayeredWindow($hGUI, $hScrDC, 0, $pSize, $hMemDC, $pSource, 0, $pBlend, $ULW_ALPHA)
    _WinAPI_ReleaseDC(0, $hScrDC)
    _WinAPI_SelectObject($hMemDC, $hOld)
    _WinAPI_DeleteObject($hBitmap)
    _WinAPI_DeleteDC($hMemDC)
EndFunc   ;==>SetBitmap

I hope now you can modify by yourself.

Regards

 

Thank you, I most certainly can tear through this with the help file and build from it!

 

I'll post my edited version later today

[Edano]

makes me smile. it was me who initiated GUISetStyle() to be added to autoit functions many many years ago. the mods told me they doubt that anyone will ever need it.

edit: pre gdi+ times times of course

Edited August 4, 2013 by Edano

[michaelslamet]

When I run this, it display nothing. Just a task bar said "LayeredWin | Phoenix XL".

Do I miss something here?

WinXP, AutoIT 3.8.8.1

[Edano]

When I run this, it display nothing. Just a task bar said "LayeredWin | Phoenix XL".

Do I miss something here?

WinXP, AutoIT 3.8.8.1

.

the GUI.png in the first spoiler

[michaelslamet]

.

the GUI.png in the first spoiler

 

Opss, stupid me

Thanks Edano, it's working great now

[Wombat]

When I run this, it display nothing. Just a task bar said "LayeredWin | Phoenix XL".

Do I miss something here?

WinXP, AutoIT 3.8.8.1

 

Here's a version that downloads the .png temporarily  for use then deletes it after the gui is closed:

expandcollapse popup

#Region ;**** Directives created by AutoIt3Wrapper_GUI ****
#AutoIt3Wrapper_Outfile=example gui.exe
#EndRegion ;**** Directives created by AutoIt3Wrapper_GUI ****
#include <GDIPlus.au3>
#include <WindowsConstants.au3>
#include <GuiConstantsEx.au3>
#include <StaticConstants.au3>
#include <Constants.au3>
#include <Array.au3>

Global $sTempFolder = @TempDir & "\PNGS"
TrayTip("GUI Download", "Please wait while the GUI is downloaded and processed", 15, 1)
DirCreate($sTempFolder)

Global $sFile = $sTempFolder & "\ciik.png"
If Not FileExists($sFile) Then InetGet("http://imageshack.us/a/img823/8938/ciik.png", $sFile)

Global Const $AC_SRC_ALPHA = 1
Global $iWidth, $iHeight, $hRegion
Global $___hNew_WndProc, $___pNew_WndProc, $___pOld_WndProc

_GDIPlus_Startup()

$s_Bitmap = $sFile ;http://img823.imageshack.us/img823/8938/ciik.png - link given by the OP at http://www.autoitscript.com/forum/topic/153261-who-wants-to-help-me-learn-enhanced-gui-building/#entry1102795
$hLayeredGUI = _GUICreate_Alpha("LayeredWin | Phoenix XL", $s_Bitmap, $iWidth, $iHeight)

GUISetState() ;show the main gui

;when the background color and the transcolor are the same of a layered GUI we recieve transparent background
;this would create an invisible window
$hControls_GUI = GUICreate("ControlGUI", $iWidth, $iHeight, 0, 0, $WS_POPUP, BitOR($WS_EX_MDICHILD, $WS_EX_LAYERED, $GUI_WS_EX_PARENTDRAG), $hLayeredGUI)
GUISetBkColor(0xABCDEF)
_WinAPI_SetLayeredWindowAttributes($hControls_GUI, 0xABCDEF, 230) ;set transparency to 230


;the close button you can use icon also
$iCloseButton = GUICtrlCreateLabel("X", 29, 29, 10, 10)
GUICtrlSetCursor(-1, 0)
GUICtrlSetColor(-1, 0xFFFFFF)

;now lets create the so required controls to sync the user interaction
$iProgressBar = GUICtrlCreateProgress(80, 50, 360, 30)
GUICtrlSetData(-1, 20) ;set the initial position of the progress to 20


$iText = GUICtrlCreateLabel("You will get all the status updates and the information here...." & @CRLF & "Stay Tuned..", 80, 90, 279, 205)
GUICtrlSetFont(-1, 10, 1000, 0, "MS Sans Serif")
GUICtrlSetColor(-1, 0xFF0000)

GUISetState() ;show the controls window

Local $iMsg, $aInfo, $f_ClkThrough = False

Do

    $iMsg = GUIGetMsg(1)    ;use advanced method for there are multiple GUIs


    Switch $iMsg[1]
        Case $hControls_GUI ;msg is received from controls gui
            Switch $iMsg[0]

                Case $iCloseButton  ;close btn is clicked
                    ExitLoop


            EndSwitch

    EndSwitch



    $aInfo = GUIGetCursorInfo($hControls_GUI)
    If @error Then ContinueLoop

    ;enable clickthrough for the invisible control gui
    If $aInfo[4] = 0 And $f_ClkThrough = False Then
        _WinSetClickThrough($hControls_GUI)
        $f_ClkThrough = True

    ElseIf $aInfo[4] And $f_ClkThrough Then
        _WinSetClickThrough($hControls_GUI, False)
        $f_ClkThrough = False

    EndIf


Until $iMsg[0] = $GUI_EVENT_CLOSE

_GDIPlus_Shutdown()
FileDelete($sFile)
Exit


Func _WinSetClickThrough($hWin, $iCLickThrough = True)

    Local $iExStyle = GUIGetStyle($hWin)
    $iExStyle = $iExStyle[1]

    If $iCLickThrough Then
        $iExStyle = BitOR($iExStyle, $WS_EX_TRANSPARENT)
    Else
        $iExStyle = BitXOR($iExStyle, $WS_EX_TRANSPARENT)
    EndIf

    Return GUISetStyle(Default, $iExStyle)
EndFunc   ;==>_WinSetClickThrough



;I have not created the following functions..

Func _GUICreate_Alpha($sTitle, $sPath, ByRef $iWidth, ByRef $iHeight, $iX = -1, $iY = -1, $iOpacity = 255)
    Local $hGUI, $hImage, $hScrDC, $hMemDC, $hBitmap, $hOld, $pSize, $tSize, $pSource, $tSource, $pBlend, $tBlend
    $hImage = _GDIPlus_ImageLoadFromFile($sPath)
    $iWidth = _GDIPlus_ImageGetWidth($hImage)
    $iHeight = _GDIPlus_ImageGetHeight($hImage)
    $hGUI = GUICreate($sTitle, $iWidth, $iHeight, $iX, $iY, $WS_POPUP, $WS_EX_LAYERED)

    SetBitmap($hGUI, $hImage, $iOpacity)

    _GDIPlus_ImageDispose($hImage)

    Return $hGUI
EndFunc   ;==>_GUICreate_Alpha

Func SetBitmap($hGUI, $hImage, $iOpacity)
    Local $hScrDC, $hMemDC, $hBitmap, $hOld, $pSize, $tSize, $pSource, $tSource, $pBlend, $tBlend
    $hScrDC = _WinAPI_GetDC(0)
    $hMemDC = _WinAPI_CreateCompatibleDC($hScrDC)
    $hBitmap = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hImage)
    $hOld = _WinAPI_SelectObject($hMemDC, $hBitmap)
    $tSize = DllStructCreate($tagSIZE)
    $pSize = DllStructGetPtr($tSize)
    DllStructSetData($tSize, "X", _GDIPlus_ImageGetWidth($hImage))
    DllStructSetData($tSize, "Y", _GDIPlus_ImageGetHeight($hImage))
    $tSource = DllStructCreate($tagPOINT)
    $pSource = DllStructGetPtr($tSource)
    $tBlend = DllStructCreate($tagBLENDFUNCTION)
    $pBlend = DllStructGetPtr($tBlend)
    DllStructSetData($tBlend, "Alpha", $iOpacity)
    DllStructSetData($tBlend, "Format", $AC_SRC_ALPHA)
    _WinAPI_UpdateLayeredWindow($hGUI, $hScrDC, 0, $pSize, $hMemDC, $pSource, 0, $pBlend, $ULW_ALPHA)
    _WinAPI_ReleaseDC(0, $hScrDC)
    _WinAPI_SelectObject($hMemDC, $hOld)
    _WinAPI_DeleteObject($hBitmap)
    _WinAPI_DeleteDC($hMemDC)
EndFunc   ;==>SetBitmap

in case anyone wants to use the code and see it working

Edited August 4, 2013 by Wombat

[guinness]

makes me smile. it was me who initiated GUISetStyle() to be added to autoit functions many many years ago. the mods told me they doubt that anyone will ever need it.

How's that possible when you only joined in April 2013?

Edited August 4, 2013 by guinness

[Edano]

How's that possible when you only joined in April 2013?

.

i was born before april 2013

Edited August 4, 2013 by Edano

[Edano]

on winclicktru nothing happens for me. winxppro sp3.

[PhoenixXL]

forgot to mention.

I have tested the script in Win7 32-Bit Ultimate only.

Thereafter,

on winclicktru nothing happens for me. winxppro sp3.

Have you tried it with a normal GUI (single-layered). WS_EX_TRANSPARENT style is enabled from WinXP I guess !!

Edited August 4, 2013 by PhoenixXL

[Edano]

i am not sure what is supposed to happen. the rectangular window is blueish transparent, but nothing on clicking.

[FireFox]

Works on WinXP SP2 (32bits).

[Edano]

please, what works ?

[Wombat]

i am not sure what is supposed to happen. the rectangular window is blueish transparent, but nothing on clicking.

 

if im not mistaken, the click through function is for all the transparency around the image. The blue-ish window is for description data, text, etc. not to be clicked through so it is working just I needed it to. I'm running Win 7 x64 Ultimate and it works perfect. Only thing I'm having trouble with is locating where to place ws ex styles at to effect it, though that is something i will find along the process of reverse engineering the code.

I am currently trying to figure out how to have one script call up and use another script, sort of like _RecFileListToArray so that I can compile this to use other scripts in its install directory for other jobs such as the file version check and update, or the options/ini configurator, etc. so that I dont have to code it all into one script.

Really I'm just looking for the best coding practices. Any tips or pointers?

 

Edit:  also if you were meaning that when you click inside the blue window nothing happens that's because nothing is supposed to happen, the text there doesn not have an GUISetOnEvent listed as I didn't want the text being anything other than just information regarding the add-on/software/user interactions.

Edited August 4, 2013 by Wombat

[Edano]

normally i would recommend to put all in one script. you can call the same script from the script with command line parameters so that a second instance runs.

if you have several scripts than you can fileinstall them, but that makes more stress than everything in one.

.

$PID=Run(@ScriptFullPath&" "&$param); you can pass values to the new instance

Edited August 4, 2013 by Edano

[Wombat]

 

normally i would recommend to put all in one script. you can call the same script from the script with command line parameters so that a second instance runs.

if you have several scripts than you can fileinstall them, but that makes more stress than everything in one.

.

$PID=Run(@ScriptFullPath&" "&$param); you can pass values to the new instance

 

I just didnt know how many lines are too many, I didnt want my add-on to take forever to load, Secondly, those [+]/[-] used to collapse and expand parts of code, are those something that scite does automatically or are they something i can add?

[Edano]

well i have 10,000 line script in work and it starts immediately. it depends where you put the configuration stuff and how complex the gui is. but if you do it in a smart way, it starts immediately.

 

and you can add #region as often as you like that will structure your script and is collapsible

 

and take a look at UEZ' >loading animations. they are fantastic.

Edited August 4, 2013 by Edano