How to: Simulate a Graphical Button in a GUI

how to simulate a GUI buttonIn 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

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

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.

In the above code,

  • A normal click on the graphical button will call SR0.
  • A long click on the graphical button for more than one second will trigger SR1.

 

Conclusion

Demonstrated above is just an example,

which is modified a little as per our requirement.

You can make modifications in the above code as per your requirement.

For example, you can increase / decrease the width and height of the buttons, increase or decrease the duration of mouse press, and so on.

Try different parameters and combinations until you see the expected results.

Let me know if you’ve come up with other great ways to do the same!

jszadmin

Drafter and Webmaster at JSZapp.com
I’m Jackie Sztuk or JSZ. I have a Drafter’s degree from Copenhagen Technical College (KTS) and my passion for windows scripting is what makes me want to help as meny as i can by writing great and easy to follow How-to's.

jszadmin

I’m Jackie Sztuk or JSZ. I have a Drafter’s degree from Copenhagen Technical College (KTS) and my passion for windows scripting is what makes me want to help as meny as i can by writing great and easy to follow How-to's.

Leave a Reply