DarkMode UDF for AutoIt's Win32GUIs

[argumentum]

4 hours ago, WildByDesign said:

I would like to switch to using Base64 for these same PNG images so that we can have maximum sharpness

23 hours ago, argumentum said:

Base64:
"Base64 encoding works by converting binary data (like images, files) into a text format using 64 printable ASCII characters, allowing it to be safely sent over text-based systems (email, HTTP). It groups input data into 24-bit blocks (three 8-bit bytes), splits these into four 6-bit chunks, and maps each 6-bit value to a character from its 64-character set (A-Z, a-z, 0-9, +, /), adding padding ( == or = ) for incomplete blocks. "

Image with transparency:
"While standard RGB images use three channels (red, green, and blue) to display color, images with transparency add this fourth alpha channel that controls opacity. Each pixel in the alpha channel contains a value that determines how transparent that pixel should be, from completely invisible to fully opaque."

What is base64 to you ?

[WildByDesign]

5 minutes ago, argumentum said:

What is base64 to you ?

To be completely honest, I don’t know much at all about Base64 and have zero experience with it.

I know that you quoted details about it, but even then I still don’t really understand it well.

Does that mean that I would lose any transparency?

[SOLVE-SMART]

Hi @WildByDesign,

base64 is a encoding schema which converts binary data to a readable string. It's encoding, not encryption.
Base64 doesn't effect the transparancy feature of a PNG image. So you basically create a "sharp" PNG file (which is stored as binary) and convert it to a string which can be processed in AutoIt for example.

So in case your source (origin) file is sharper as PNG, use it like you would use it as an ICO.
I didn't read the whole thread, so maybe I missed something, but as far as I could see, you're looking for a way to load the PNG file by GDIPlus? If so, you will find several examples in the forum 👍 .

Best regards
Sven

[WildByDesign]

2 hours ago, SOLVE-SMART said:

So in case your source (origin) file is sharper as PNG, use it like you would use it as an ICO.
I didn't read the whole thread, so maybe I missed something, but as far as I could see, you're looking for a way to load the PNG file by GDIPlus? If so, you will find several examples in the forum 👍 .

Yes, this is exactly it. Thank you. And you're right, there are many great examples throughout the forum.

[WildByDesign]

@UEZ I might have an idea. We can actually draw these checkboxes from the theme. The size could be derived from DPI, but basically quite easy in general.

But the main question: Could we draw these checkbox states and store them into an ImageList?

The following will show dark mode checkboxes as long as the window has dark mode enabled:

expandcollapse popup

DllCall("user32.dll", "bool", "SetProcessDpiAwarenessContext", @AutoItX64 ? "int64" : "int", -2)

#include <FontConstants.au3>
#include <GUIConstantsEx.au3>
#include <SendMessage.au3>
#include <StaticConstants.au3>
#include <WinAPIGdi.au3>
#include <WinAPIGdiDC.au3>
#include <WinAPIHObj.au3>
#include <WinAPIMisc.au3>
#include <WinAPISysWin.au3>
#include <WinAPITheme.au3>
#include <WindowsSysColorConstants.au3>

#include "GUIDarkTheme.au3"

_Example()

Func _Example()
    ; Create GUI
    Local $hForm = GUICreate('Test ' & StringReplace(@ScriptName, '.au3', '()'), 160, 199)
    GUICtrlCreateLabel("test", 1, 1)
    _ApplyDarkTheme($hForm, True)
    #forceref $hForm
    Local $idPic = GUICtrlCreatePic('', 0, 0, 160, 199)
    Local $hPic = GUICtrlGetHandle($idPic)

    ; Create bitmap
    Local $hDev = _WinAPI_GetDC($hPic)
    Local $hDC = _WinAPI_CreateCompatibleDC($hDev)
    Local $hSource = _WinAPI_CreateCompatibleBitmapEx($hDev, 160, 199, _WinAPI_SwitchColor(_WinAPI_GetSysColor($COLOR_3DFACE)))
    Local $hSv = _WinAPI_SelectObject($hDC, $hSource)

    ; Draw objects
    Local $tRECT = _WinAPI_CreateRectEx(16, 16, 16, 16)
    Local $hFont = _WinAPI_CreateFont(12, 0, 0, 0, $FW_NORMAL, 0, 0, 0, $DEFAULT_CHARSET, $OUT_DEFAULT_PRECIS, $CLIP_DEFAULT_PRECIS, $DEFAULT_QUALITY, $DEFAULT_PITCH, 'MS Shell Dlg')
    _WinAPI_SetBkMode($hDC, $TRANSPARENT)
    _WinAPI_SelectObject($hDC, $hFont)
    Local $hTheme = _WinAPI_OpenThemeData($hForm, 'Button')
    If Not @error Then
        For $i = 1 To 11
            _WinAPI_DrawThemeBackground($hTheme, 3, $i, $hDC, $tRECT)
            ;_WinAPI_DrawThemeText($hTheme, 1, $i, $hDC, 'OK', $tRECT, BitOR($DT_CENTER, $DT_SINGLELINE, $DT_VCENTER))
            _WinAPI_OffsetRect($tRECT, 0, 31)
        Next
        _WinAPI_CloseThemeData($hTheme)
    EndIf

    ; Merge bitmap
    Local $hBitmap = _WinAPI_CreateCompatibleBitmap($hDev, 160, 199)
    _WinAPI_SelectObject($hDC, $hBitmap)
    _WinAPI_DrawBitmap($hDC, 0, 0, $hSource, $MERGECOPY)
    _WinAPI_ReleaseDC($hPic, $hDev)
    _WinAPI_SelectObject($hDC, $hSv)
    _WinAPI_DeleteObject($hSource)
    _WinAPI_DeleteDC($hDC)

    ; Set bitmap to control
    _SendMessage($hPic, $STM_SETIMAGE, 0, $hBitmap)
    Local $hObj = _SendMessage($hPic, $STM_GETIMAGE)
    If $hObj <> $hBitmap Then
        _WinAPI_DeleteObject($hBitmap)
    EndIf

    GUISetState(@SW_SHOW)

    Do
    Until GUIGetMsg() = $GUI_EVENT_CLOSE
EndFunc   ;==>_Example

 

[UEZ]

I changed in my example the drawing from GDI to GDI+ completely.

 

expandcollapse popup

Func _GDIPlus_DrawRoundRect($hGfx, $iX, $iY, $iW, $iH, $iDiameter, $iBrushARGB, $iPenARGB, $fPenWidth = 1.0)
    Local Const $hPath = _GDIPlus_PathCreate()
       
    ; Top-left arc
    _GDIPlus_PathAddArc($hPath, $iX, $iY, $iDiameter, $iDiameter, 180, 90)
    ; Top-right arc
    _GDIPlus_PathAddArc($hPath, $iX + $iW - $iDiameter, $iY, $iDiameter, $iDiameter, 270, 90)
    ; Bottom-right arc
    _GDIPlus_PathAddArc($hPath, $iX + $iW - $iDiameter, $iY + $iH - $iDiameter, $iDiameter, $iDiameter, 0, 90)
    ; Bottom-left arc
    _GDIPlus_PathAddArc($hPath, $iX, $iY + $iH - $iDiameter, $iDiameter, $iDiameter, 90, 90)

    _GDIPlus_PathCloseFigure($hPath)

    If $iBrushARGB <> 0 Then 
        Local Const $hBrush = _GDIPlus_BrushCreateSolid($iBrushARGB)
        _GDIPlus_GraphicsFillPath($hGfx, $hPath, $hBrush)
        _GDIPlus_BrushDispose($hBrush)
    EndIf
    
    If $iPenARGB <> 0 Then
        Local Const $hPen = _GDIPlus_PenCreate($iPenARGB, $fPenWidth)
        _GDIPlus_GraphicsDrawPath($hGfx, $hPath, $hPen)
        _GDIPlus_PenDispose($hPen)
    EndIf

    _GDIPlus_PathDispose($hPath)
EndFunc   ;==>_GDIPlus_DrawRoundRect

Func _SetDarkTreeViewCheckboxes($hTreeView, $iW = 16, $iH = 16)
    Local $hImageList = _GUIImageList_Create($iW, $iH, 5, 3)

    Local $hBmp = _GDIPlus_BitmapCreateFromScan0($iW, $iH)
    Local $hGfx = _GDIPlus_ImageGetGraphicsContext($hBmp)
    _GDIPlus_GraphicsSetSmoothingMode($hGfx, $GDIP_SMOOTHINGMODE_HIGHQUALITY)

    ; --- Index 0: Unchecked ---
    _GDIPlus_GraphicsClear($hGfx, 0xFF000000 + $COLOR_EDIT_BG)
    _GDIPlus_DrawRoundRect($hGfx, 2 / 16 * $iW, 2 / 16 * $iH, 12 / 16 * $iW, 12 / 16 * $iH, 3, 0, 0xFF000000 + $COLOR_BORDER2, 1.5)

    Local $hBmp_GDI = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hBmp, 0)
    _GUIImageList_Add($hImageList, $hBmp_GDI)
    _WinAPI_DeleteObject($hBmp_GDI)

    ; --- Index 1: Checked ---
    _GDIPlus_GraphicsClear($hGfx, 0xFF000000 + $COLOR_EDIT_BG)
    _GDIPlus_DrawRoundRect($hGfx, 2 / 16 * $iW, 2 / 16 * $iH, 12 / 16 * $iW, 12 / 16 * $iH, 3, 0xFF60CDFF, 0xFF60CDFF, 1.0)

    Local $hCheckPen = _GDIPlus_PenCreate(0xFF0F2028, 1.5)
    _GDIPlus_GraphicsDrawLine($hGfx, 5 / 16 * $iW,  8 / 16 * $iH,  7 / 16 * $iW, 10 / 16 * $iH, $hCheckPen)
    _GDIPlus_GraphicsDrawLine($hGfx, 7 / 16 * $iW, 10 / 16 * $iH, 11 / 16 * $iW,  6 / 16 * $iH, $hCheckPen)

    $hBmp_GDI = _GDIPlus_BitmapCreateHBITMAPFromBitmap($hBmp, 0)
    _GUIImageList_Add($hImageList, $hBmp_GDI)
    _WinAPI_DeleteObject($hBmp_GDI)

    ; --- Cleanup ---
    _GDIPlus_PenDispose($hCheckPen)
    _GDIPlus_GraphicsDispose($hGfx)
    _GDIPlus_ImageDispose($hBmp)
    _GUICtrlTreeView_SetStateImageList($hTreeView, $hImageList)

    Return True
EndFunc   ;==>_SetDarkTreeViewCheckboxes

It gives much more smoother drawings with aa.

 

To your new idea - I like it. You can draw to a GDI bitmap and add it to ImageList. Let me check it and add it to the example...

[UEZ]

2 hours ago, WildByDesign said:

@UEZ I might have an idea. We can actually draw these checkboxes from the theme. The size could be derived from DPI, but basically quite easy in general.

But the main question: Could we draw these checkbox states and store them into an ImageList?

The following will show dark mode checkboxes as long as the window has dark mode enabled:

expandcollapse popup

DllCall("user32.dll", "bool", "SetProcessDpiAwarenessContext", @AutoItX64 ? "int64" : "int", -2)

#include <FontConstants.au3>
#include <GUIConstantsEx.au3>
#include <SendMessage.au3>
#include <StaticConstants.au3>
#include <WinAPIGdi.au3>
#include <WinAPIGdiDC.au3>
#include <WinAPIHObj.au3>
#include <WinAPIMisc.au3>
#include <WinAPISysWin.au3>
#include <WinAPITheme.au3>
#include <WindowsSysColorConstants.au3>

#include "GUIDarkTheme.au3"

_Example()

Func _Example()
    ; Create GUI
    Local $hForm = GUICreate('Test ' & StringReplace(@ScriptName, '.au3', '()'), 160, 199)
    GUICtrlCreateLabel("test", 1, 1)
    _ApplyDarkTheme($hForm, True)
    #forceref $hForm
    Local $idPic = GUICtrlCreatePic('', 0, 0, 160, 199)
    Local $hPic = GUICtrlGetHandle($idPic)

    ; Create bitmap
    Local $hDev = _WinAPI_GetDC($hPic)
    Local $hDC = _WinAPI_CreateCompatibleDC($hDev)
    Local $hSource = _WinAPI_CreateCompatibleBitmapEx($hDev, 160, 199, _WinAPI_SwitchColor(_WinAPI_GetSysColor($COLOR_3DFACE)))
    Local $hSv = _WinAPI_SelectObject($hDC, $hSource)

    ; Draw objects
    Local $tRECT = _WinAPI_CreateRectEx(16, 16, 16, 16)
    Local $hFont = _WinAPI_CreateFont(12, 0, 0, 0, $FW_NORMAL, 0, 0, 0, $DEFAULT_CHARSET, $OUT_DEFAULT_PRECIS, $CLIP_DEFAULT_PRECIS, $DEFAULT_QUALITY, $DEFAULT_PITCH, 'MS Shell Dlg')
    _WinAPI_SetBkMode($hDC, $TRANSPARENT)
    _WinAPI_SelectObject($hDC, $hFont)
    Local $hTheme = _WinAPI_OpenThemeData($hForm, 'Button')
    If Not @error Then
        For $i = 1 To 11
            _WinAPI_DrawThemeBackground($hTheme, 3, $i, $hDC, $tRECT)
            ;_WinAPI_DrawThemeText($hTheme, 1, $i, $hDC, 'OK', $tRECT, BitOR($DT_CENTER, $DT_SINGLELINE, $DT_VCENTER))
            _WinAPI_OffsetRect($tRECT, 0, 31)
        Next
        _WinAPI_CloseThemeData($hTheme)
    EndIf

    ; Merge bitmap
    Local $hBitmap = _WinAPI_CreateCompatibleBitmap($hDev, 160, 199)
    _WinAPI_SelectObject($hDC, $hBitmap)
    _WinAPI_DrawBitmap($hDC, 0, 0, $hSource, $MERGECOPY)
    _WinAPI_ReleaseDC($hPic, $hDev)
    _WinAPI_SelectObject($hDC, $hSv)
    _WinAPI_DeleteObject($hSource)
    _WinAPI_DeleteDC($hDC)

    ; Set bitmap to control
    _SendMessage($hPic, $STM_SETIMAGE, 0, $hBitmap)
    Local $hObj = _SendMessage($hPic, $STM_GETIMAGE)
    If $hObj <> $hBitmap Then
        _WinAPI_DeleteObject($hBitmap)
    EndIf

    GUISetState(@SW_SHOW)

    Do
    Until GUIGetMsg() = $GUI_EVENT_CLOSE
EndFunc   ;==>_Example

 

This works in my example:
 

Func _SetDarkTreeViewCheckboxes($hTreeView)
    Local $hImageList = _GUIImageList_Create(16, 16, 5, 3)

    Local $hBmp_GDI = _WinAPI_ExtractThemeBackground($g_hGUI, 2) ;thanks to WildByDesign for the idea!
    _GUIImageList_Add($hImageList, $hBmp_GDI)
    _WinAPI_DeleteObject($hBmp_GDI)

    $hBmp_GDI = _WinAPI_ExtractThemeBackground($g_hGUI, 5)
    _GUIImageList_Add($hImageList, $hBmp_GDI)
    _WinAPI_DeleteObject($hBmp_GDI)

    _GUICtrlTreeView_SetStateImageList($hTreeView, $hImageList)

    Return True
EndFunc   ;==>_SetDarkTreeViewCheckboxes

Func _WinAPI_ExtractThemeBackground($hGUI, $iState, $iPart = 3, $iWidth = 16, $iHeight = 16)
    Local $hTheme = _WinAPI_OpenThemeData($hGUI, "DarkMode_DarkTheme::Button")
    If @error Then Return SetError(1, 0, 0)
    Local $hDC = _WinAPI_GetDC($hGUI)
    Local $hHBitmap = _WinAPI_CreateCompatibleBitmap($hDC, $iWidth, $iHeight)
    Local $hMemDC = _WinAPI_CreateCompatibleDC($hDC)
    Local $hObjOld = _WinAPI_SelectObject($hMemDC, $hHBitmap)
    Local $tRECT = _WinAPI_CreateRectEx(0, 0, $iWidth, $iHeight)
    _WinAPI_DrawThemeBackground($hTheme, $iPart, $iState, $hMemDC, $tRECT)
    If @error Then
        _WinAPI_CloseThemeData($hTheme)
        Return SetError(2, 0, 0)
    EndIf
    _WinAPI_SelectObject($hMemDC, $hObjOld)
    _WinAPI_ReleaseDC($hGUI, $hDC)
    _WinAPI_DeleteDC($hMemDC)
    _WinAPI_CloseThemeData($hTheme)
    Return $hHBitmap
EndFunc   ;==>_WinAPI_ExtractThemeBackground

Important is to use: "DarkMode_DarkTheme::Button"

Edited 46 minutes ago by UEZ

[WildByDesign]

47 minutes ago, UEZ said:

Important is to use: "DarkMode_DarkTheme::Button

Your example works wonderfully. Sharp and perfectly matching the regular checkbox (button) control. Thank you. Now I should be able to get rid of the included png images.

By the way, I think we might need the newer function in AutoIt for OpenThemeDataForDpi for proper loading of resources. I’m not 100% sure, but the previous method may be resizing the resources.

 

Edited 2 minutes ago by WildByDesign