Draw a colored outline on a GUI [Solved] Topic is solved

[JJohnston2]

Anyone have a pointer on the easiest way I might draw a colored outline on a GUI?

i.e., looking to draw a generic colored box or border around several controls, maybe similar to this http://blogs.sitepointstatic.com/images ... rs-box.png

[TheDewd]

How about this?

https://autohotkey.com/boards/viewtopic.php?f=5&t=7312

Code: Select all

#SingleInstance, Force

Gui, Add, Picture, % "x" 0 " y" 0 " w" 400 " h" 4 " +0x4E +HWNDhPicture1"
CreatePixel("000000", hPicture1)

Gui, Add, Picture, % "x" 0 " y" 196 " w" 400 " h" 4 " +0x4E +HWNDhPicture2"
CreatePixel("000000", hPicture2)

Gui, Add, Picture, % "x" 0 " y" 0 " w" 4 " h" 200 " +0x4E +HWNDhPicture3"
CreatePixel("000000", hPicture3)

Gui, Add, Picture, % "x" 396 " y" 0 " w" 4 " h" 200 " +0x4E +HWNDhPicture4"
CreatePixel("000000", hPicture4)

Gui, Show, % " w" 400 " h" 200, % "Example"
return

CreatePixel(Color, Handle) {
	VarSetCapacity(BMBITS, 4, 0), Numput("0x" . Color, &BMBITS, 0, "UInt")
	hBM := DllCall("Gdi32.dll\CreateBitmap", "Int", 1, "Int", 1, "UInt", 1, "UInt", 24, "Ptr", 0, "Ptr")
	hBM := DllCall("User32.dll\CopyImage", "Ptr", hBM, "UInt", 0, "Int", 0, "Int", 0, "UInt", 0x2008, "Ptr")
	DllCall("Gdi32.dll\SetBitmapBits", "Ptr", hBM, "UInt", 3, "Ptr", &BMBITS) 
	DllCall("User32.dll\SendMessage", "Ptr", Handle, "UInt", 0x172, "Ptr", 0, "Ptr", hBM)
}

[just me]

... or this (a modernized version of an old function)?

Code: Select all

#NoEnv
Gui, Margin, 10, 10
GuiAddBorder("Red", 4, "xm ym w400 h200")
Gui, Add, Text, xp yp wp hp Center +0x0200 BackgroundTrans, Border Example ; 0x0200 centers single-line text vertically
Gui, Show, , Border Example
Return
GuiClose:
ExitApp
; ==================================================================================================================================
; Adds a border-like text control to the current default GUI
; ==================================================================================================================================
GuiAddBorder(Color, Width, PosAndSize) {
   ; -------------------------------------------------------------------------------------------------------------------------------
   ; Color        -  border color as used with the 'Gui, Color, ...' command, must be a "string"
   ; Width        -  the width of the border in pixels
   ; PosAndSize   -  a string defining the position and size like Gui commands, e.g. "xm ym w400 h200".
   ;                 You should not pass other control options!
   ; -------------------------------------------------------------------------------------------------------------------------------
   LFW := WinExist() ; save the last-found window, if any
   DefGui := A_DefaultGui ; save the current default GUI
   Gui, Add, Text, %PosAndSize% +hwndHTXT
   GuiControlGet, T, Pos, %HTXT%
   Gui, New, +Parent%HTXT% +LastFound -Caption ; create a unique child Gui for the text control
   Gui, Color, %Color%
   X1 := Width, X2 := TW - Width, Y1 := Width, Y2 := TH - Width
   WinSet, Region, 0-0 %TW%-0 %TW%-%TH% 0-%TH% 0-0   %X1%-%Y1% %X2%-%Y1% %X2%-%Y2% %X1%-%Y2% %X1%-%Y1%
   Gui, Show, x0 y0 w%TW% h%TH%
   Gui, %DefGui%:Default ; restore the default Gui
   If (LFW) ; restore the last-found window, if any
      WinExist(LFW)
}

[JJohnston2]

Wow!!! These are both great... exactly what I was hoping to find.

The GuiAddBorder function is especially easy to use since I can give it a return value of the text control handle and subsequently modify the border or turn it on/off... almost too easy to use, although I would have never dreamed up how to implement it from scratch, which looks quite clever.

Thanks a bunch for posting these code items and the link to other post as well... appreciated.

[takayo97]

... or this (a modernized version of an old function)?

Code: Select all

#NoEnv
Gui, Margin, 10, 10
GuiAddBorder("Red", 4, "xm ym w400 h200")
Gui, Add, Text, xp yp wp hp Center +0x0200 BackgroundTrans, Border Example ; 0x0200 centers single-line text vertically
Gui, Show, , Border Example
Return
GuiClose:
ExitApp
; ==================================================================================================================================
; Adds a border-like text control to the current default GUI
; ==================================================================================================================================
GuiAddBorder(Color, Width, PosAndSize) {
   ; -------------------------------------------------------------------------------------------------------------------------------
   ; Color        -  border color as used with the 'Gui, Color, ...' command, must be a "string"
   ; Width        -  the width of the border in pixels
   ; PosAndSize   -  a string defining the position and size like Gui commands, e.g. "xm ym w400 h200".
   ;                 You should not pass other control options!
   ; -------------------------------------------------------------------------------------------------------------------------------
   LFW := WinExist() ; save the last-found window, if any
   DefGui := A_DefaultGui ; save the current default GUI
   Gui, Add, Text, %PosAndSize% +hwndHTXT
   GuiControlGet, T, Pos, %HTXT%
   Gui, New, +Parent%HTXT% +LastFound -Caption ; create a unique child Gui for the text control
   Gui, Color, %Color%
   X1 := Width, X2 := TW - Width, Y1 := Width, Y2 := TH - Width
   WinSet, Region, 0-0 %TW%-0 %TW%-%TH% 0-%TH% 0-0   %X1%-%Y1% %X2%-%Y1% %X2%-%Y2% %X1%-%Y2% %X1%-%Y1%
   Gui, Show, x0 y0 w%TW% h%TH%
   Gui, %DefGui%:Default ; restore the default Gui
   If (LFW) ; restore the last-found window, if any
      WinExist(LFW)
}

How to modify to support any of windows id if a script has more than one gui window.
The function could create on default gui #1 window. I canno draw a border on gui #2 window on the same script

[Hellbent]

How to modify to support any of windows id if a script has more than one gui window.
The function could create on default gui #1 window. I canno draw a border on gui #2 window on the same script

Here is one way you can go about adding simple Scalable graphics to any number of gui's using GDIP and this script
https://www.autohotkey.com/boards/viewtopic.php?f=6&t=62550

***Add the path to your copy of GDIP at the top of the script***

This is just one of many ways this can be done / used

Code: Select all

;***************************************************************************************************
;***************************************************************************************************
;***************************************************************************************************
#Include <My Altered Gdip Lib>  ;<------       Replace with your copy of GDIP
;***************************************************************************************************
;***************************************************************************************************
;***************************************************************************************************
#SingleInstance,Force
OnExit, GuiClose
pToken:=Gdip_Startup()

Loop 25	{
	AddWindow()  ;Adding multiple gui's for the purpose of this demo
}
return

GuiClose:
GuiContextMenu:
*ESC::
	Gdip_Shutdown(pToken)
	ExitApp
	
AddWindow(){
	static WinName:=0
	WinName++
	Obj:="Border" WinName
	Gui,% WinName ":New",+AlwaysOnTop -DPIScale
	Gui,% WinName ":Color",666666
	Gui,% WinName ":Margin",0,0
	Gui,% WinName ":Font",cwhite s10 Bold ,Segoe UI
	Gui,% WinName ":Add",Picture,xm ym BackgroundTrans 0xE hwndhwnd,
	HB_BITMAP_MAKER(%OBJ%:={w:Ran(100,900),h:Ran(100,500),Hwnd:hwnd})
	Gui,% WinName ":Add",Text,% "x30 ym w" %OBJ%.W-60 " h" %OBJ%.H " Center BackgroundTrans 0x200",Your Text Here
	Gui,% WinName ":Show",% "w" %OBJ%.W " h" %OBJ%.H
	%OBJ%:=""
}

Ran(Min,Max){
	Random,Out,Min,Max
	return Out
}

HB_BITMAP_MAKER(Obj){
	;Bitmap Created Using: HB Bitmap Maker
	pBitmap:=Gdip_CreateBitmap( Obj.W , Obj.H ) 
	G := Gdip_GraphicsFromImage( pBitmap )
	Gdip_SetSmoothingMode( G , 2 )
	Pen := Gdip_CreatePen( "0xFF000000" , 10 )
	Gdip_DrawRoundedRectangle( G , Pen , 10 , 10 , Obj.W-20 , Obj.H-20 , 20 )
	Gdip_DeletePen( Pen )
	Pen := Gdip_CreatePen( "0xFF000000" , 12 )
	Gdip_DrawRoundedRectangle( G , Pen , 20 , 21 , Obj.W-41 , Obj.H-42 , 10 )
	Gdip_DeletePen( Pen )
	Pen := Gdip_CreatePen( "0xFFFFDD00" , 10 )
	Gdip_DrawRoundedRectangle( G , Pen , 12 , 12 , Obj.W-24 , Obj.H-24 , 20 )
	Gdip_DeletePen( Pen )
	Pen := Gdip_CreatePen( "0xFF333333" , 10 )
	Gdip_DrawRoundedRectangle( G , Pen , 19 , 20 , Obj.W-39 , Obj.H-40 , 12 )
	Gdip_DeletePen( Pen )
	Pen := Gdip_CreatePen( "0xFFFFAA00" , 8 )
	Gdip_DrawRoundedRectangle( G , Pen , 20 , 21 , Obj.W-41 , Obj.H-42 , 10 )
	Gdip_DeletePen( Pen )
	Gdip_DeleteGraphics( G )
	Obj.Bitmap:=Gdip_CreateHBITMAPFromBitmap(pBitmap)
	Gdip_DisposeImage(pBitmap)
	SetImage(Obj.Hwnd,Obj.Bitmap)
	DeleteObject(Obj.Bitmap)
}

.

20200106224110.png (46.7 KiB) Viewed 4714 times

[takayo97]

I'll take a look. Thanks.

[Hellbent]

I'll take a look. Thanks.

For very simple outlines I often use these functions I made. Not suitable in all cases, but very easy to use.

Code: Select all

DRAW_OUTLINE( GUI_NAME , X , Y , W , H , COLOR1 :="BLACK", COLOR2 := "BLACK" , THICKNESS := 1 ) {
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X " Y" Y " W" W " H" THICKNESS " BACKGROUND" COLOR1 
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X " Y" Y " W" THICKNESS " H" H " BACKGROUND" COLOR1 
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X " Y" Y + H - THICKNESS " W" W " H" THICKNESS " BACKGROUND" COLOR2 
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X + W - THICKNESS " Y" Y " W" THICKNESS " H" H " BACKGROUND" COLOR2 	
}
DRAW_LINE( GUI_NAME , X , Y , W , H , COLOR ) {
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X " Y" Y " W" W " H" H " BACKGROUND" COLOR 
}

Here is an example.

Code: Select all

#SingleInstance,Force

Gui,1:+AlwaysOnTop
Gui,1:Color,333538
;----------------------------------------------------------------------------------------------------------------------------------
DRAW_OUTLINE( GUI_NAME := 1 , x := 10 , y := 10 , w := 280 , h := 180 , COLOR1 :="f0f0f0", COLOR2 := "777777" , THICKNESS := 1 )
DRAW_OUTLINE( GUI_NAME := 1 , x := 20 , y := 20 , w := 260 , h := 160 , COLOR1 :="aa0000", COLOR2 := "880000" , THICKNESS := 5 )
DRAW_OUTLINE( GUI_NAME := 1 , x := 40 , y := 30 , w := 220 , h := 140 , COLOR1 :="006699", COLOR2 := "006699" , THICKNESS := 2 )
;----------------------------------------------------------------------------------------------------------------------------------
DRAW_LINE( GUI_NAME := 1 , x := 45 , y := 55 , w := 100 , h := 5 , COLOR := "Aqua" )
DRAW_LINE( GUI_NAME := 1 , x := 45 , y += 10 , w := 150 , h := 3 , COLOR := "888888" )
DRAW_LINE( GUI_NAME := 1 , x := 55 , y += 10 , w := 100 , h := 50 , COLOR := "lime" )
;----------------------------------------------------------------------------------------------------------------------------------
Gui,1:Show,w300 h200

return
GuiClose:
GuiContextMenu:
*ESC::
    ExitApp

DRAW_OUTLINE( GUI_NAME , X , Y , W , H , COLOR1 :="BLACK", COLOR2 := "BLACK" , THICKNESS := 1 ) {
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X " Y" Y " W" W " H" THICKNESS " BACKGROUND" COLOR1 
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X " Y" Y " W" THICKNESS " H" H " BACKGROUND" COLOR1 
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X " Y" Y + H - THICKNESS " W" W " H" THICKNESS " BACKGROUND" COLOR2 
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X + W - THICKNESS " Y" Y " W" THICKNESS " H" H " BACKGROUND" COLOR2 	
}
DRAW_LINE( GUI_NAME , X , Y , W , H , COLOR ) {
	GUI , % GUI_NAME ": ADD" , PROGRESS , % "X" X " Y" Y " W" W " H" H " BACKGROUND" COLOR 
}

Or here is a proper example.

[whoops]

sorry, not sorry, for the 10 year necro.

been using this simple and effective function for years now and recently updated it for v2 so i thought i'd post it, since this is still the simplest and most effective way to create outlines and there's no (easy-to-find) v2 solution coming up in google searches.

all credit, and the utmost respect, to the original author of the v1 of this.

Code: Select all

drawOutline(GuiName, X, Y, W, H, Color1 := "Black", Color2 := "Black", Thickness := 1)
{	
	%GuiName%.AddProgress("x" X " y" Y " w" W " h" Thickness " Background" Color1) 
	%GuiName%.AddProgress("x" X " y" Y " w" Thickness " h" H " Background" Color1) 
	%GuiName%.AddProgress("x" X " y" Y + H - Thickness " w" W " h" Thickness " Background" Color2) 
	%GuiName%.AddProgress("x" X + W - Thickness " y" Y " w" Thickness " h" H " Background" Color2) 	
}

drawLine(GuiName, X, Y, W, H, Color1 := "Black") 
{
	%GuiName%.AddProgress("x" X " y" Y " w" W " h" H " Background" Color1)
}