how to create this text "REC" in a GUI

[madmax2]

When I press the rec button on my remote I would like a GUI that shows this REC text like this
the font should be big enough to see from 2 meters away etc..



can anyone help me with the code for the GUI to show that text?

[garry]

EDIT : I've forget , tested with 4K , GUI example x y w h is ok for FullHD or 4K , but the fontsize must be smaller for FullHD
or can also use a picture as button ( added 2nd example )
a big RECORD button ( save this script in notepad as UTF-8 with BOM )

Code: Select all

Gui,3: -dpiscale
Gui,3: Color, Black,Black  
SS_REALSIZECONTROL := 0x40
wa:=A_screenwidth,ha:=A_screenHeight,xx=100
GUI,3:Font,s128 cWhite,Lucida Console
;----- REC-Button --
x:=(wa*2)/xx,y:=(ha*7)/xx
Gui,3:add,text  ,x%x% y%y% gA1,[
Gui,3:font,cRed
x:=(wa*5)/xx
Gui,3:add,text  ,x%x% y%y% gA1,●
Gui,3:font,cWhite
x:=(wa*10)/xx
Gui,3:add,text  ,x%x% y%y% gA1 ,REC]
;-------------------
GUI,3:Font,s12 cGray,Lucida Console
x:=(wa*2)/xx,y:=(ha*2)/xx
Gui,3:add,text  ,x%x% y%y%     ,Click Button
x:=(wa*1)/xx,y:=(ha*1)/xx,w:=(wa*40)/xx,h:=(ha*25)/xx
Gui,3:Show,x%x% y%y% w%w% h%h%,RECORD-BUTTON
return
;------------------------------------------
3Guiclose:
exitapp
;------------------------------------------
A1:
msgbox,Button-REC
return
;==========================================

Picture-Button

Code: Select all

;-[img]https://i.imgur.com/GC3853x.png[/img]

;- how to create this text in a GUI 
;- https://www.autohotkey.com/boards/viewtopic.php?f=76&t=78997

Gui,3: -dpiscale
Gui,3: Color, Black,Black  
SS_REALSIZECONTROL := 0x40
wa:=A_screenwidth,ha:=A_screenHeight,xx=100
;------------
f1=%a_scriptdir%\recordbutton2.png
url:="https://i.imgur.com/GC3853x.png"
ifnotexist,%f1%
   urldownloadtofile,%url%,%f1%
;------------
x:=(wa*2)/xx,y:=(ha*7)/xx,w:=(wa*30)/xx,h:=(ha*20)/xx
Gui,3:add,picture,x%x% y%y% w%w% h%h% gA1,%f1%
;------------
GUI,3:Font,s12 cGray,Lucida Console
x:=(wa*2)/xx,y:=(ha*2)/xx
Gui,3:add,text  ,x%x% y%y%     ,Click Picture
x:=(wa*1)/xx,y:=(ha*1)/xx,w:=(wa*40)/xx,h:=(ha*30)/xx
Gui,3:Show,x%x% y%y% w%w% h%h%,RECORD-BUTTON
return
;------------------------------------------
3Guiclose:
exitapp
;------------------------------------------
A1:
msgbox,Button-REC
return
;==========================================

[flyingDman]

With transparency and on-off flashing. Change font coloring to white (or any other color):

Code: Select all

gui, +LastFound -Caption -Border +E0x08000000 +alwaysontop DPIScale             ; +E0x08000000 to be set in conjunction with NoActivate
gui, Color, 808081
WinSet, TransColor, 808081
gui, Font,s75 Bold, arial
gui, Add, Text, x0 y38 cblack left, [  REC]
gui, Font,s135 Bold, arial
gui, Add, Text, x30 y-5 cred left, •
loop {																			; replace the loop with "gui, show, NoActivate" 
	gui, show, % (toggle := !toggle) ? "NoActivate" : "hide"
	sleep, 800	
	}
return

esc::
exitapp

This also allows you to continue to access the underlying window while flashing...
Save script in UTF-8 with BOM.

[garry]

@flyingDman , thank you for the flashing example

[Maestr0]

With transparency and on-off flashing. Change font coloring to white (or any other color):

Code: Select all

gui, +LastFound -Caption -Border +E0x08000000 +alwaysontop DPIScale             ; +E0x08000000 to be set in conjunction with NoActivate
gui, Color, 808081
WinSet, TransColor, 808081
gui, Font,s75 Bold, arial
gui, Add, Text, x0 y38 cblack left, [  REC]
gui, Font,s135 Bold, arial
gui, Add, Text, x30 y-5 cred left, •
loop {																			; replace the loop with "gui, show, NoActivate" 
	gui, show, % (toggle := !toggle) ? "NoActivate" : "hide"
	sleep, 800	
	}
return

esc::
exitapp

This also allows you to continue to access the underlying window while flashing...
Save script in UTF-8 with BOM.

awesome work, great job!

[flyingDman]

Thanks @Maestr0 !
You might want to use it in the bottom right corner of your screen using:

Code: Select all

	gui, show, % ((toggle := !toggle) ? "NoActivate" : "hide") . "x1500 y875"           ;1920x1080 screen

Also play with with DPIscale or -DPIscale and the space between "[" and "REC" depending on the font and the font size you use.

[madmax2]

With transparency and on-off flashing. Change font coloring to white (or any other color):

Code: Select all

gui, +LastFound -Caption -Border +E0x08000000 +alwaysontop DPIScale             ; +E0x08000000 to be set in conjunction with NoActivate
gui, Color, 808081
WinSet, TransColor, 808081
gui, Font,s75 Bold, arial
gui, Add, Text, x0 y38 cblack left, [  REC]
gui, Font,s135 Bold, arial
gui, Add, Text, x30 y-5 cred left, •
loop {																			; replace the loop with "gui, show, NoActivate" 
	gui, show, % (toggle := !toggle) ? "NoActivate" : "hide"
	sleep, 800	
	}
return

esc::
exitapp

This also allows you to continue to access the underlying window while flashing...
Save script in UTF-8 with BOM.

Interesting idea about flashing the text, I didn't think of that..
Now it looks like the real REC OSD

I changed the font to white so it has the same look like the REC OSD text
but unfortunately the transparency made it hard to read when there is white background like from a web browser

Can you make it so the background is black
and the window size of the GUI just fits the entire REC OSD text without any extra window size that is not needed?

I changed the color to black
and commented out the winset line
but the window is more bigger than it needs to be so does not look as good.

Code: Select all

gui, Color, 000000 
;WinSet, TransColor, 000000

Also the REC GUI is not on top when I have my PVR software in full screen or has always on top enabled as well...
Anyway to fix this?

I had a previous GUI rec code that was able to stay on top of my PVR software..
so not sure why your code is not staying on top even with the "+alwaysontop"

[Maestr0]

Thanks @Maestr0 !
You might want to use it in the bottom right corner of your screen using:

Code: Select all

	gui, show, % ((toggle := !toggle) ? "NoActivate" : "hide") . "x1500 y875"           ;1920x1080 screen

Also play with with DPIscale or -DPIscale and the space between "[" and "REC" depending on the font and the font size you use.

The screen resolution might differ, so a more dynamic method would be advised, like (untested):

Code: Select all

	gui, show, % ((toggle := !toggle) ? "NoActivate" : "hide") . "x" . A_Screenwidth - 420 . " y" . A_Screenheight - 205

[madmax2]

Thanks @Maestr0 !
You might want to use it in the bottom right corner of your screen using:

Code: Select all

	gui, show, % ((toggle := !toggle) ? "NoActivate" : "hide") . "x1500 y875"           ;1920x1080 screen

Also play with with DPIscale or -DPIscale and the space between "[" and "REC" depending on the font and the font size you use.

The screen resolution might differ, so a more dynamic method would be advised, like (untested):

Code: Select all

	gui, show, % ((toggle := !toggle) ? "NoActivate" : "hide") . "x" . A_Screenwidth - 420 . " y" . A_Screenheight - 205

how do I change the size of the window when I make the back black?
the GUI window is too big..
I just want to text to just fit inside the GUI without any extra GUI background which does not look good.

Also it does not stay on top, if I got a PVR software in fullscreen..

how can I fix these two problems?

[tmplinshi]

Code: Select all

Gui, -Caption +AlwaysOnTop +Owner +LastFound +E0x20 ;0x20 = WS_EX_CLICKTHROUGH 
Gui, Margin, 10, 0
Gui, Color, 000000
GuiAddText("s75      , arial", "cWhite y-5"      , "[         ]")
GuiAddText("s135 Bold, arial", "cRed xp+34 y-37" , "•")
GuiAddText("s60  Bold, arial", "cWhite x+3 yp+52", "REC")
Gui, Show, NoActivate h120 x10 y10

WinSet, Transparent, 200
SetTimer, ShowHideDot, 600
return

GuiAddText(Font, Options, Text) {
	f := StrSplit(Font, ",", " ")
	Gui, Font, % f[1], % f[2]
	Gui, Add, Text, %Options%, %Text%
}

ShowHideDot() {
	static toggle
	GuiControl, % (toggle := !toggle) ? "Hide" : "Show", Static2
}

esc::exitapp

[garry]

@tmplinshi , 谢谢

[madmax2]

Code: Select all

Gui, -Caption +AlwaysOnTop +Owner +LastFound +E0x20 ;0x20 = WS_EX_CLICKTHROUGH 
Gui, Margin, 10, 0
Gui, Color, 000000
GuiAddText("s75      , arial", "cWhite y-5"      , "[         ]")
GuiAddText("s135 Bold, arial", "cRed xp+34 y-37" , "•")
GuiAddText("s60  Bold, arial", "cWhite x+3 yp+52", "REC")
Gui, Show, NoActivate h120 x10 y10

WinSet, Transparent, 200
SetTimer, ShowHideDot, 600
return

GuiAddText(Font, Options, Text) {
	f := StrSplit(Font, ",", " ")
	Gui, Font, % f[1], % f[2]
	Gui, Add, Text, %Options%, %Text%
}

ShowHideDot() {
	static toggle
	GuiControl, % (toggle := !toggle) ? "Hide" : "Show", Static2
}

esc::exitapp

Wow this is the closest match to the real REC OSD
I love the flashing red dot..

but I have some problems..

Can you make it show up in the centre of the screen and disappear after a few seconds?
Can you make the red dot the same height as the letters REC?

[tmplinshi]

Code: Select all

Gui, -Caption +AlwaysOnTop +Owner +LastFound +E0x20 ;0x20 = WS_EX_CLICKTHROUGH 
Gui, Margin, 8, 0
Gui, Color, 000000
GuiAddText("s75      , arial", "cWhite y-4"      , "[         ]")
GuiAddText("s150 Bold, arial", "cRed xp+32 y-49" , "•")
GuiAddText("s60  Bold, arial", "cWhite x+1 yp+64", "REC")
Gui, Show, NoActivate h120

WinSet, Transparent, 200
SetTimer, ShowHideDot, 600

Sleep, 5000 ; disappear after 5 seconds
ExitApp

GuiAddText(Font, Options, Text) {
	f := StrSplit(Font, ",", " ")
	Gui, Font, % f[1], % f[2]
	Gui, Add, Text, %Options%, %Text%
}

ShowHideDot() {
	static toggle
	GuiControl, % (toggle := !toggle) ? "Hide" : "Show", Static2
}

If you still feel something is not perfect, try to modify the font size and x y positions yourself.

[madmax2]

Code: Select all

Gui, -Caption +AlwaysOnTop +Owner +LastFound +E0x20 ;0x20 = WS_EX_CLICKTHROUGH 
Gui, Margin, 8, 0
Gui, Color, 000000
GuiAddText("s75      , arial", "cWhite y-4"      , "[         ]")
GuiAddText("s150 Bold, arial", "cRed xp+32 y-49" , "•")
GuiAddText("s60  Bold, arial", "cWhite x+1 yp+64", "REC")
Gui, Show, NoActivate h120

WinSet, Transparent, 200
SetTimer, ShowHideDot, 600

Sleep, 5000 ; disappear after 5 seconds
ExitApp

GuiAddText(Font, Options, Text) {
	f := StrSplit(Font, ",", " ")
	Gui, Font, % f[1], % f[2]
	Gui, Add, Text, %Options%, %Text%
}

ShowHideDot() {
	static toggle
	GuiControl, % (toggle := !toggle) ? "Hide" : "Show", Static2
}

If you still feel something is not perfect, try to modify the font size and x y positions yourself.

The script is working great (ie REC OSD is in the center and disappears after some seconds) however I encounter a major problem

Just some context to the issue
I currently have a main autohotkey.ahk script which has an
an #include software.ahk.

under software.ahk

I have the key for pressing the record button assigned so that when it is pressed it shows the REC OSD

e.g.

Code: Select all

	;PVR 
	;-------------------------
	;Record TV
	^r::
	space::
		Send, ^r
		
		;YOUR CODE
		Gui, -Caption +AlwaysOnTop +Owner +LastFound +E0x20 ;0x20 = WS_EX_CLICKTHROUGH 
		Gui, Margin, 8, 0
		Gui, Color, 000000
		GuiAddText("s75      , arial", "cWhite y-4"      , "[         ]")
		GuiAddText("s150 Bold, arial", "cRed xp+32 y-49" , "•")
		GuiAddText("s60  Bold, arial", "cWhite x+1 yp+64", "REC")
		Gui, Show, NoActivate h120

		WinSet, Transparent, 200
		SetTimer, ShowHideDot, 600

		Sleep, 5000 ; disappear after 5 seconds
		ExitApp

		GuiAddText(Font, Options, Text) {
			f := StrSplit(Font, ",", " ")
			Gui, Font, % f[1], % f[2]
			Gui, Add, Text, %Options%, %Text%
		}

		ShowHideDot() {
			static toggle
			GuiControl, % (toggle := !toggle) ? "Hide" : "Show", Static2
		}
		
		Send, {Enter}
		return

The problem is once the REC OSD code runs, it exits the Autohotkey.ahk script as well..
due to the code below, so I can't press the REC key anymore, since it has exit all the main AHK script.

Code: Select all

Sleep, 5000 ; disappear after 5 seconds
ExitApp

So anything can be done to solve this problem?

[tmplinshi]

Change it to:

Code: Select all

Sleep, 5000 ; disappear after 5 seconds
SetTimer, ShowHideDot, Off
Gui, Destroy

Or use this function instead:

Code: Select all

DisplayREC() ; Display 5 seconds, and wait..

DisplayREC(3, false) ; Display 3 seconds, and continue running the code below
MsgBox
return

DisplayREC(Seconds := 5, Wait := true)
{
	static hGUI, toggle, dotHwnd

	if hGUI
		return

	Gui, New, -Caption +AlwaysOnTop +Owner +LastFound +HWNDhGUI +E0x20 ;0x20 = WS_EX_CLICKTHROUGH 
	Gui, Margin, 8, 0
	Gui, Color, 000000
	Gui, Font, s75, arial
	Gui, Add, Text, cWhite y-4, [         ]
	Gui, Font, s150 Bold, arial
	Gui, Add, Text, cRed xp+32 y-49 HWNDdotHwnd, •
	Gui, Font, s60 Bold, arial
	Gui, Add, Text, cWhite x+1 yp+64, REC
	Gui, Show, NoActivate h120
	WinSet, Transparent, 200

	SetTimer, ShowHideDot   , 600
	SetTimer, StopDisplayREC, % -1 * Seconds * 1000
	if Wait
		WinWaitClose, ahk_id %hGUI%
	Return

	ShowHideDot:
		GuiControl, % (toggle := !toggle) ? "Hide" : "Show", %dotHwnd%
	Return

	StopDisplayREC:
		SetTimer, ShowHideDot, Delete
		SetTimer,, Delete
		Gui, %hGUI%:Destroy
		hGUI := toggle := dotHwnd := ""
	Return
}

[madmax2]

Change it to:

Code: Select all

Sleep, 5000 ; disappear after 5 seconds
SetTimer, ShowHideDot, Off
Gui, Destroy

Or use this function instead:

Code: Select all

DisplayREC() ; Display 5 seconds, and wait..

DisplayREC(3, false) ; Display 3 seconds, and continue running the code below
MsgBox
return

DisplayREC(Seconds := 5, Wait := true)
{
	static hGUI, toggle, dotHwnd

	if hGUI
		return

	Gui, New, -Caption +AlwaysOnTop +Owner +LastFound +HWNDhGUI +E0x20 ;0x20 = WS_EX_CLICKTHROUGH 
	Gui, Margin, 8, 0
	Gui, Color, 000000
	Gui, Font, s75, arial
	Gui, Add, Text, cWhite y-4, [         ]
	Gui, Font, s150 Bold, arial
	Gui, Add, Text, cRed xp+32 y-49 HWNDdotHwnd, •
	Gui, Font, s60 Bold, arial
	Gui, Add, Text, cWhite x+1 yp+64, REC
	Gui, Show, NoActivate h120
	WinSet, Transparent, 200

	SetTimer, ShowHideDot   , 600
	SetTimer, StopDisplayREC, % -1 * Seconds * 1000
	if Wait
		WinWaitClose, ahk_id %hGUI%
	Return

	ShowHideDot:
		GuiControl, % (toggle := !toggle) ? "Hide" : "Show", %dotHwnd%
	Return

	StopDisplayREC:
		SetTimer, ShowHideDot, Delete
		SetTimer,, Delete
		Gui, %hGUI%:Destroy
		hGUI := toggle := dotHwnd := ""
	Return
}

thanks for function as well as the fixed code...


How would you make a function that can accept as input e.g. Media_KEY_OSD (TEXT, symbol)
so if I create other text OSD e.g. PLAY, STOP, PAUSE, SKIP PREVIOUS/NEXT etc..
and just call that function..in my PVR script..for STOP, PLAY, PAUSE etc..

e.g. Media_KEY_OSD ("PLAY", "►" )

What is the purpose of calling the displayREC function twice and the msgBox?

------------------------------------------------------------------------------------------------
I am trying to adapt your original code/function to display other media keys OSD for the PVR
e.g. (STOP, PLAY, PAUSE, SKIP NEXT etc..)

The problem is
1) I want to insert character map > webdings of those icons (play,stop, pause etc, after those text like how the original OSD text looks on the camcorder/video cassette player) but when I copy and paste the symbol from the character map into the AHK script it is not displaying those symbols, it is just showing some number or other characters..
So how do you insert webdings or any encoding symbol that represents those symbols into a AHK script..
like how did you insert your dot symbol?

2) I am having some trouble how to changing the XY position text + symbol..
when I change the text "PLAY, STOP, PAUSE etc..) I don't know how to position the text + symbol properly with the X, Y, Xp, Yp values etc..
e.g. PLAY + (triangle symbol)

What is it mean xp+32?
What is the original X, Y position in your script?
can you explain how your position code works?

Code: Select all

	Gui, Add, Text, cWhite y-4, [         ]
	Gui, Font, s150 Bold, arial
	Gui, Add, Text, cRed xp+32 y-49 HWNDdotHwnd, •
	Gui, Font, s60 Bold, arial
	Gui, Add, Text, cWhite x+1 yp+64, REC

------------------------------------------------------------------------------------------------

To make the REC OSD look even more like the real thing..
can you add a time code (like a stopwatch) and current date/time on the screen that appears when the REC OSD is showing on the screen?

[tmplinshi]

You can copy unicode symbos as they are, e.g.: ⏵⏸⏹⏮⏭
But if you copied a webdings symbo, it becomes numbers or something else, you'll need to use webdings font to display it correctly. See http://www.alanwood.net/demos/webdings.html for a list of Webdings character.

Code: Select all

Gui, Font, s40, arial
Gui, Add, Text, x+30 cBlue, % Chr(0x23EE)
Gui, Add, Text, x+30 cBlue, ⏮

Gui, Font, s40, webdings ; Change font to webdings
Gui, Add, Text, x+30 cRed, 9
Gui, Add, Text, x+30 cRed, % Chr(0x39) ; Same character as above
Gui, Show

How would you make a function that can accept as input e.g. Media_KEY_OSD (TEXT, symbol)

Simple example:

Code: Select all

Media_KEY_OSD(TEXT, symbol) {
	Gui, Font, s40, arial
	Gui, Add, Text, , %TEXT%
	Gui, Font, s50, webdings ; Change font to webdings
	Gui, Add, Text, x+10, %symbol%
	Gui, Show
}

Media_KEY_OSD("PLAY", "4")
; Media_KEY_OSD("PLAY", Chr(0x34))
; Media_KEY_OSD("media symbols:", "4;<789:")

What is it mean xp+32?
What is the original X, Y position in your script?

See https://www.autohotkey.com/docs/commands/Gui.htm#PosSize

can you add a time code (like a stopwatch) and current date/time on the screen that appears when the REC OSD is showing on the screen?

see https://www.autohotkey.com/docs/Variables.htm#date, for example:

Code: Select all

Gui, Add, Text, vDT, %A_Min%:%A_Sec%
Gui, Show, w400 h100
SetTimer, UpdateDateTime, 1000 ; Update every second
return

UpdateDateTime:
	GuiControl,, DT, %A_Min%:%A_Sec%
Return

What is the purpose of calling the displayREC function twice and the msgBox?

It's just two examples. Try to read the comments and run it again to see the difference.

Try using AutoGUI to design your gui.