How to create a gutter net overlay as GUI? - user-interface

Question

I want a fullscreen GUI with a gutter net of 96x96 pixels and a small gutter border (maybe a pixel). The GUI should be a transparent overlay (just the gutter net should be displayed).
Why? I often work with sprite-sheet images (create, resize or rearrange them). I do not have software which supports gutter lines as help view. It would be great to have for a quick accurate adjustment.
I use a fullscreen GUI as $WS_POPUP (borderless) window. The gutter is a label with specific background color. I have to manually create these so I hope you have a better idea.
My code so far:
#include <GuiConstantsEx.au3>
#include <WindowsConstants.au3>
$iGuiW = #DesktopWidth
$iGuiH = #DesktopHeight
$iGuiGutterSize = 96
$hColor = 0x00FF00
$hGui = GUICreate("", #DesktopWidth, #DesktopHeight, 0, 0, $WS_POPUP, $WS_EX_TOOLWINDOW + $WS_EX_TOPMOST)
; From left to right.
GUICtrlCreateLabel("", 0, 0, $iGuiW, 1)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", 0, $iGuiGutterSize, $iGuiW, 1)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", 0, $iGuiGutterSize * 2, $iGuiW, 1)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", 0, $iGuiGutterSize * 3, $iGuiW, 1)
GUICtrlSetBkColor(-1, $hColor)
; From top to bottom.
GUICtrlCreateLabel("", 0, 0, 1, $iGuiH)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", $iGuiGutterSize, 0, 1, $iGuiH)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", $iGuiGutterSize * 2, 0, 1, $iGuiH)
GUICtrlSetBkColor(-1, $hColor)
GUICtrlCreateLabel("", $iGuiGutterSize * 3, 0, 1, $iGuiH)
GUICtrlSetBkColor(-1, $hColor)
GUISetState( #SW_SHOW, $hGui )
While 1
Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
GUIDelete($hGui)
Exit
EndSwitch
WEnd
How to get the GUI to be transparent except the gutter lines?
How can I do it without manually setting label by label for each line (row and column)?
Yes it's like a grid design but just the borders as lines.

Answer 1

Notice:
It's a bit unclear that my suggestion fits your imaginations, but I guess you mean something like a grid design. As you mentioned the GUI is like a overlay (transparent) and just the grid lines are visible.
The solution is in the _createGridStructure() function which uses some WinAPI functions to provide such a grid (rectangle design). I extracted your GUIDelete($hGui) and Exit in a separat function _disposeAndExit(). I also extracted the GUI creation part in a function to be a bit more flexible.
Approach:
#include-once
#include <GuiConstantsEx.au3>
#include <WinAPI.au3>
#include <WindowsConstants.au3>
Global $iGuiWidth = #DesktopWidth
Global $iGuiHeight = #DesktopHeight
Global $iGridSize = 96 ; change the size if you want
Global $vGridColor = 0x00FF00 ; change the grid line color if you want
Global $hMainGui
Func _createGui()
$hMainGui = GUICreate( '', $iGuiWidth, $iGuiHeight, 0, 0, $WS_POPUP, $WS_EX_TOOLWINDOW + $WS_EX_TOPMOST )
GUISetBkColor( $vGridColor )
GUISetState( #SW_SHOW, $hMainGui )
EndFunc
Func _createGridStructure()
Local $iGridLinesX = Floor( $iGuiWidth / $iGridSize )
Local $iGridLinesY = Floor( $iGuiHeight / $iGridSize )
Local $hMainRegion = _WinAPI_CreateRectRgn( 0, 0, 0, 0 )
For $i = 0 To $iGridLinesX Step 1
$hRegion = _WinAPI_CreateRectRgn( $i * $iGridSize, 0, ( $i * $iGridSize ) + 1, $iGuiHeight )
_WinAPI_CombineRgn( $hMainRegion, $hRegion, $hMainRegion, 2 )
_WinAPI_DeleteObject( $hRegion )
Next
For $i = 0 To $iGridLinesY Step 1
$hRegion = _WinAPI_CreateRectRgn( 0, $i * $iGridSize, $iGuiWidth, ( $i * $iGridSize ) + 1 )
_WinAPI_CombineRgn( $hMainRegion, $hRegion, $hMainRegion, 2 )
_WinAPI_DeleteObject( $hRegion )
Next
_WinAPI_SetWindowRgn( $hMainGui, $hMainRegion )
EndFunc
Func _disposeAndExit()
GUIDelete( $hMainGui )
Exit
EndFunc
_createGui()
_createGridStructure()
While 1
Switch GUIGetMsg()
Case $GUI_EVENT_CLOSE
_disposeAndExit()
EndSwitch
WEnd
Now you don't have to manually adjust the grid lines if you switch the monitor resolution.