How to: Simulate a Graphical Button in a GUI

In this tutorial, I go over how to simulate a Graphical Button in a GUI, using methods first shown by SKAN, plus what he calls the Mobile Phone Power Switch (MPPS) technique. It is an advanced type of MPPS button that simulates a Mouse Hook. The code sample given herein below may not work on the systems running a lower version of Windows. Apart from the MPPS type clicking, we will use two control styles – flat and sunken to generate the simulated button effect.

This tutorial has been divided into two parts, as listed below:

Using images to generate the simulate effect on a button
Using MPPS effect when we click our button

Let us see how these two parts can be implemented.

Using images to generate the simulate effect on a button

A button has two states. One is On and the second is Off. When someone clicks a button, it looks projected like a 3D button – this state is called the ON state of a button. And, when the mouse is released, the button comes back to the sunken state – this is called the off state of a button.

To create these states, we need two images that are identical so that we can give them the simulate effect using control styles. So, we can either do this with a projected button and a sunken button, or we can do this task with a Flat button and a sunken button. In this tutorial, our attempt is to work with a Flat and a sunken button.

Code for Flat and Sunken Button

Gui, -Sysmenu +Toolwindow

Gui, Add , Picture, x10  y10 w42 h42 E0x200 vState1 icon1, %A_AhkPath%

Gui, Add , Picture, x+10 y10 w45 h45 Border vState0 icon1, %A_AhkPath%

Gui, Add, Text , x10 ,E0x200   Border

Gui, Show, x50 y50, Style Options

Return

GuiEscape:

ExitApp

Return

In the above code,

A border has been created around the flat button to make it look different from the sunken button.
The sunken button has been extended using E0x200 so that there is a simulate effect on the mouse click.
Flat button has +3 size than the sunken button, whereas the size of the button is 42 x 42.

Extending the above code to simulate the graphical button

Gui, +Sysmenu +ToolWindow
Gui, Add , Picture, x10 y10 w45 h45 E0x200 vState1 icon1 gSR1, %A_AhkPath%
Gui, Add , Picture, x10 y10 w42 h42 0x400000 vState0 icon1 gSR1, %A_AhkPath%

Gui, Show, x50 y50, Button
Return

SR1:
GuiControl, Hide, State0
Sleep 250
GuiControl, Show, State0
Msgbox, < code we have written using MPPS below will go here
Return

GuiEscape:
GuiClose:
ExitApp
Return

In the above code,

0x400000 has been to showcase the button as projected on mouse press.
SR1 is the label in which the code of MPPS will be called and executed.

So, in this part, we have seen how to use images to generate the simulate effect. Let us go ahead and see how MPPS works in coordination with the above code.

Using MPPS type button

In this part, you will see how the mouse press is detected on the image for a specific duration.

Gui, +Sysmenu +ToolWindow +AlwaysOnTop
Gui, Add , Picture, x10 y10 w32 h32 E0x200 vState1 icon1 gMPPS_Type_Button, %A_AhkPath%
Gui, Add , Picture, x10 y10 w34 h34 Border vState0 icon1 gMPPS_Type_Button, %A_AhkPath%
Gui, Show, x50 y5, MPPS type

Return

MPPS_Type_Button:
GuiControl Hide, State0
TC := A_TickCount
Loop, {
MouseDown:=GetKeyState("LButton","P")
If (!MouseDown) {
LongClick=0
Break
}
If (A_TickCount-TC) > 1000 {
LongClick=1
Break
}
}
GuiControl Show, State0

If (LongClick)
GoSub,SR1
Else
GoSub, SR0
Return

SR1:
Msgbox,64, SR1
, Long Click..`n`n This SR may be used to execute a Special task, 10
Return

SR0:
Msgbox,64, SR0
, Normal Click..`n`n This SR may be used to Toggle a Variable, 10
Return

GuiEscape:
GuiClose:
ExitApp
Return

In the above code,