Make a beautiful graphical user interface in 15 lines or less

I hope you can agree with me when I say:

A beautiful graphical user interface (GUI)

Can be hard to make:

Getting it to look really look beautiful is even HARDER.

Or is it?

Well, it turns out.

You can dramatically increase the look of your GUI’s by using one simple method…

…a method that has helped me make GUI’s that look amazing

with only a few extra lines of Ahk code.

In today’s post (and video)

I am going to show you what that method is…

and exactly how you can easily use it.

 

Degree of difficulty:     3 / 10090514_2240_Howtomakeab2.jpg

 

This post contains example code for the free open-source scripting language AutoHotkey.

 

All you need:

And 15 line of code ( plain text ) from this tutorial.

 

As always there are free download links at the end of this post, for both the finished working Autohotkey script with all the shown lines and also a compiled exe with the same for those who’d only like to try and see this graphical user interface live.

 

Example video: (0:36)

How-to: Make a beautiful graphical user interface in 15 lines or less

 

It’s so simple:

The method to make beautiful graphical user interfaces every time, is that you simply use images.

It’s up to you how you get, make or find the images, when you have them, all you do is use them as GUI controls.

This is made easy with AutoHotkey as the picture control is built-in to the gui commands of AutoHotkey.

 

 

1. Choose the right images for your beautiful graphical user interface.

So for this guide you will need some images, to get the look of the GUI above you’ll only need the 5 images shown below, but you can also

  • Create them on your own
    • Images can be something you make yourself like me, this will make your GUI truly unique and it can be done with free programs like Gimp or a paid one like Photoshop, both have lots of tutorials online you can use, or you can edit free images, like I did with some of the images used in this tutorial.
  • Find images to use
    • You can easily find image sets online with a query like “free Photoshop ui kits” on google, which will give you lots of idea’s or even ready images you can use as you see fit for your beautiful custom user interface.

 

Here’s the 5 images you need to get the look of the GUI above, we will get to the 15 lines of plain text (code) in a moment, I’ll show you step by step how to make it, but first let’s start with the images I used:

 

titlebar2.png

titlebar2

button off 1.png

button off 1

Close Circle Buttons.png

Close Circle Buttons

button on 1.png

button on 1

bg.png

bg

Images (.zip)

Free – Get

 

The AutoHotkey help file section about GUI’s is a great place to look if you need to know more about any of the Gui commands in AutoHotkey

 

2. How to start making your graphical user interface.

Start with a new text file and in the first line you can and will set one or more Options for the overall graphical user interface, so start with “Gui, ” and then you Specify with a plus sign [+] to add an option or a minus sign [-] to remove an option,

For this Gui we only need to remove the windows Caption because we will use one of the images as our own custom title bar so remove the Caption with “-Caption” like this:

 

Now on the next line let’s set the overall size of text in the Gui, for this we will use the Font command and the (s) for size option followed by a number (points) we like the size of our Gui text to be, for the example Gui in this guide you will use a font size of 22:

 

 

3. How to get you images to look like a graphical user interface.

Next line! You’ll add the first Picture to the user interface, the custom title bar (an image with a width of 500 pixels and a height of 40 pixels), to do this you will need to use the “Gui, Add, Picture,” command, you also need to set where in the Gui you like the pic to show up, to do that you will set some coordinates aka X,Y options, and last you need to tell where the image is stored by inputting the path to the image file, if the image is in the same folder as the script file you only need to input the file name:

 

After that it’s time to set the close button image, so again you will use “Gui, Add, Picture,” and input the X,Y options but this time you also use the (g) option for g-label (goto label) this will make the script perform the subroutine under the label with the name you set, and as it is a close button let’s call the label “close”. Now to make sure any transparency in the image is used we will turn Background transparency on with “+BackgroundTrans” so the line will look like this:

 

Now for your Background image, you will again use “Gui, Add, Picture,” with the X option set to 0(zero) and the Y set to 40 aka the height of the title bar image, and the path to the image file or the name of the image file.

 

So now we have something like this: ( This won’t work YET as code letter in the tutorial is needed )

And that’s with only 5 lines of script and 3 images

 

 

4. How to make a row with text and a button.

Next I’ll start by telling you how to make the first row of text and button, this part will be almost the same for all 3 rows in this beautiful graphical user interface.

 

Ok now for the line of text we will use “Gui, Add, Text, ” and again set the coordinates of the text with the X,Y options, you’ll also need to use “+BackgroundTrans” to set the texts background to transparent and for the last parameter you’ll input the text to show in your graphical user interface, for this guides GUI, it will be “Internet”.

 

To make an on/off button like the ones in the GUI of this tutorial you need two pictures, one for the off state and one for the on state.

Now for the first state image you will again use “Gui, Add, Picture,” and set the X,Y coordinates and make the background transparent with “+BackgroundTrans”, but this time you will also need to use the (v) option this will enable you to give the image a variable name.

This it will be easy for you to manipulate it later, also remember to set a g-label for the sub-routine that will toggle the image of the button when you press it, and anything else you like to happen when the button is clicked.

For this guide we use a label called “click” for the first button, the last thing you need, is to put in the path or name of the “on button” image file.

 

Next for the off state button you will do the same thing again, same options except for the (v) option and the name of the image.

But as you only need to show one image in the same spot at any given time you also add the hidden option so that when you show the GUI the off image will be hidden until you need it.

 

That’s only 8 lines and it looks like this: ( This won’t work YET as code letter in the tutorial is needed )

So if all you need is a graphical user interface to start or stop one thing like a script or routine then that’s about all you need to get a beautiful interface for that.

 

 

5. Making more text rows and buttons.

To make the beautiful graphical user interface in this guide you will need to do 2 more button code blocks, I will also end by briefly going over how-to make the buttons toggle, and remember that all of the script is downloadable at the end of this tutorial.

 

So for the next line of text you will use “Gui, Add, Text, ” and set the options like “x y +BackgroundTrans” also set the last parameter (the visible text), for this guide’s GUI it will be “Sound”.

 

Then you put in two lines of “Gui, Add, Picture, ” and both with the same options, coordinates, trans, variable (v#), g-label (click1) and for the last parameter you use the 2 images of the button again .

 

After 11 lines of code this is how it looks. ( This won’t work YET as code letter in the tutorial is needed )

beautiful graphical user interface

 

Again for the last row you do like this

 

 

6. How to make it all visible.

Now for the command that will show this beautiful graphical user interface on the screen.

For this you use “Gui, Show, ” and then you can set some options like the X,Y of the upper left corner of the GUI or the size of the window like in this guide the options (w) and (h) tells the script to show a GUI window that is 500 pixels in Width and 340 pixels in Height.

 

 

Click to Tweet: There it is a beautiful graphical user interface in 15 lines DONE!

beautiful graphical user interface

If you don’t need to do 3 things you can do it with less, you can also make a background image with your text and save 3 more lines.

 

7. Making Your interface interactive.

Ok I must admit that the GUI on its own with only 15 lines can’t do anything, but it looks really good.

So i will show you a little more, but only briefly, like how to write the routines that toggles the buttons in our now beautiful graphical user interface.

 

You will need to prepare some variables that will hold the status of the button, you can do this by making and setting the same number of variables as you have buttons to a value of 1, for this guide that’s 3 variables you put right under the “GUI, Show ” line and it looks like this.

 

Now in the next line put a “return” to tell the script to stop and wait for the user to interact with the GUI.

 

So now if this script is run you will see a beautiful graphical user interface that looks like the one at the top of this page, let’s look at some of the code that will give your interface the functionality it needs.

 

7.1 Dragging by titlebar routine.

First thing, How-to make your GUI movable by dragging it by the titlebar.

For this you will make a routine under the g-label “UImove” it’s the one seen above in the options when you added the titlebar image.

A routine label looks simple as it is just the name of the label with a “:” after it, in this guide it looks like this

 

Right under the label you will use “PostMessage” to post a windows message to the OS telling it to let you drag your GUI, it looks like this

 

That’s it, now you end your routine with a “return” like this

 

Now your GUI will be draggable, next you will have to write 3 routines one for each of the buttons, but in this guide I’ll only walk you through the first one, seeing as the part that’s used to toggle the button state images is the same for each button.

 

7.2 Toggle button state routine.

So start with the label from the first button like this

 

Next use the command “GuiControl ” with the “hide” option to make sure the image with the last state is hidden, for the last parameter, put in the variable that hold’s the state of this routines button, like this

 

Then you need to set the value of the new state of the button, in the buttons state variable, this can be done in more ways than one, the one you will use for this guide looks like this

 

Now you will use the command “GuiControl ” again with the “show” option this time to show the image with the new state of the button, this line looks like this

 

Ones again ending the routine with a “return”.

 

That’s the first buttons toggling routine the next two look almost the same.

 

 

 

8. How to close it when done.

Last op is the closing routine for the GUI, for this tutorial it starts with the label from you close buttons (g) option

 

Under that you can also (optionally) put a build in label that is called if any user presses ESC while the GUI is active.

 

And for the finishing line of your script you put

Conclusion

That is one of the ways you can make a beautiful graphical user interface, and I also showed you how-to make the GUI usable although not with as much detail, but that is only because there is just too much to cover in one guide.

Of course there are many other ways to do this and I’d be glad to cover them in later tutorials if you wish? Please tell me what other GUI questions you have or like me to answer.

 

Examples of some other great graphical user interface:

If you have any questions or ways that you use to help you remember how to use your programs, please feel free to use the comments or contact page and tell me all about it.

 

Try it:

To use your new script, continue as follows: 

  • Write or Copy all the line above and then Save the file as .ahk and close the file. (remember you also need the images)
  • Double-click the file to launch it. A new icon appears in the taskbar notification area.
  • Some scripts may need you to press a Hotkey or Hotstring to see the script in action
  • To exit or edit the script, right-click the green “H” icon in the taskbar notification area. (and click the exit option)

 

Notes:

AutoHotkey scripts can easily do lots of other things than I have shown you in this tutorial.

You can also have many scripts running simultaneously, each with its own icon in the taskbar notification area all doing their tasks automatically.

To have this script start automatically when you start your computer, create a shortcut to the script file in the Start Menu’s Startup folder.

 

Downloads:

Script (.ahk)

Free – Get

 

Application (.exe)

Free – Get

 

Images (.zip)

Free – Get

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.

28 Comments:

  1. Got the switches to work finally!Had to spend some time reverse engineer your code to figure out what everything was doing. Recreated the GUI as a doubble mirror image and changed text and background colors then i was able to figure out a way to get it to work as off/on for app or device.Did not fully understand how it was all working. Is this along the lines of what you were directing me to?

    toggle := 0

    return
    click:

    toggle := !toggle
    if (toggle = 1) {
    Process, Close, firefox.exe
    }
    else {
    Run Firefox
    }

    GuiControl Hide, c%ci%
    ci := 3 – ci
    GuiControl Show, c%ci%
    Return

    Thank You!
    Ed

  2. Nice tutorial, I have been beuilding AHK guis for a while now and love it. I have used a gosub handle for grabbing and moving windows before, but now I use the common MouseOver() function for better control over areas. With MouseOver() you can also create grabbing areas without any handles or buttons, pics etc…
    Usally something like this:

    OnMessage(0x200,”WM_MOUSEHOVER”)
    MouseOver(vXa, vYa, vXb, vYb)
    {
    MouseGetPos, vPx, vPy
    vDtct := vPx >= vXa AND vPx = vYa AND vPy <= vYb
    Return vDtct
    }
    WM_MOUSEHOVER(){
    If MouseOver("0", "0", "200", "50")
    ; Any code/action you like
    If MouseOver("0", "51", "200", "100")
    ; Different action for a different area
    }

    This can be used to do just about anything you like.

  3. Hi, thank’s a lot for posting this!!
    I’ve been trying to creare something similar to the Login UI you have posted here, but I’m having so much trouble with the edit box to be transparent or to make it be rounded-shaped as in your image. Could you please give me a hint on it?

    Best regards!!

  4. Looks awesome.
    How do I display just the image with no grey background?
    I want a transparent background.
    I’ve googled and it seems difficult to show PNGs with no background?
    Thanks.

  5. Very cool! I like the additional functionality of indicating the active button! Thank you!

  6. That is exactly what I was looking for. Thanks again for providing this solution.

  7. Hi Jackie,

    this graphical user interface of yours just looks great. I really would like to use
    this script on my multimedia system with my remote. Issue is that with the remote
    I can not select the buttons (no mouse click) 🙁 and being rather new to AHK I just
    can’t figure out a way to switch the buttons with curser keys and return, which
    would work to select them with my remote.
    Any idea on how your script could be modified to work without mouse ?

    • Hi Matthias,

      Thanks for saying so!

      I’d add a hidden button control for each set of images

      So it will end up looking something like this

      Image of code

      Hope that works for you

      • You are a genius. Not having tried it yet, but this looks so easy and lean it just
        has to work ;-). I would never have come up with this solution, just marvellous.

        • Sure works :-), but remember to use the “Tab” key to move the lines.

          • Well nothing ever seems to be as simple as it looks. I am desperately trying to add
            some focus indication, like i.e. change of font color, to see which control is active
            to be switched on the gui when pressing return. Even searching the web up and down I seem to be unable to get this done.
            Maybe you have another kind suggestion on how to add this function to the script?

          • Yeah that one has a lot of possible solutions

            Depending on what you’re hoping for
            One way is to make or change the images
            to include a version of the button with a focus state

            Another one that does not look too well
            But is easy to do is to give the hidden
            buttons some Width and height

            I on the other hand made an example of a
            third option aka making a hotkey routine
            that runs when tab is pressed with the
            gui active that gives and removes a
            focus border around the current button image

            It looks something like this

            And you can download the modified version of the script here
            https://jszapp.com/downloads/beautiful-gui-with-focus-border/

  8. Hi Jackie,
    thanks a lot for sharing this. I’m usually much more of a PowerShell automation guy, but seeing how easy things can be done through AHK I’m really interested now and would appreciate additional UI tutorials including some pointers on how to produce those images (since I’ve also never done that myself).
    Dirk

    • Hi Drik,

      Your welcome,

      I am already working on more Gui tutorials

      I also think that the idea about digging deeper into how you can make your own GUI images is a good idea…

      I will remember to include more of that 🙂

  9. I would be very interested in getting more tutorials on how to improve the UI of AHK scripts. Do you have any suggestions on trying to update the looks of some of the built in controls for GUI’s such as ListView?

    Also, if you have a tutorial on how that log-in screen I would be curious to see how you set that up.

  10. Hi, thanks for posting this! I’m curious as to how I would get the button to go back to it’s original state after being released, instead of being a “toggle” switch. Any help would be much appreciated. Thank you so much!

    • Hi Jayme,

      The glabels used in the script as seen in this topic are first called when the mouse button is released.

      So you can’t use them the way you wish, instead you can use your own mouse monitoring routine for the left mouse button down event, it may look something like this

      Hope that helps and of course you’re always welcome to contact me via mail or the contact form if you need more help

      • Thank you so much for your reply! Sorry for the delay, I didn’t see this message in my inbox. I’m afraid I’m not very keen with AHK enough to know how to implement this method you mention. Can you show me where or how I would place it in a document? I was able to follow the initial tutorial pretty well, but I tried cutting and pasting this script into a ahk document and it didn’t do anything. Thanks so much for your time!

  11. Thanks so much for this.
    For some reason this doesn’t work with my version of AHK. (Not sure which version)

    So I did some work and some digging and I finally figured out this fix:

    Make the variables end in “0” & “1” (i.e. vc0, vc1 instead of vc1, vc2)

    and

    Click:
    GuiControl Hide, c%ci%
    >ci := !ci
    GuiControl Show, c%ci%
    return

    Click1:
    GuiControl Hide, x%xi%
    >xi := !xi
    GuiControl Show, x%xi%
    Return

    When you go to retrieve the variables to run stuff:

    ButtonOK:
    Click := !ci
    Click1 := !xi

    MsgBox, 1st Picture status? %click%`n2nd Picture? %click1%

    Thanks again for giving me the foundation to make this Happen.

    • Hi canisdibellum,

      You are welcome, I always use the newest version from http://ahkscript.org/download/ and it all worked in my tests.

      Did you try the EXE version?

      Still I’m just glad you found a fix that made it work for you.

      • Great Tutorial.Thank you!
        How would I use this to control volume on off or open and close an application with toggle?
        Thank youn Ed

        • Thank you!

          Well you’ed put the code for the given action in the click routine you wish to do that action 🙂

          For toggling a program on or off the winexist command together with an if statement do a close or run action…

          • Thank You for such a quick response and again for a great tutorial.
            I hope to see more tutorials. You have showed me Ahk is way beyond what i have used it for (new to ahk) and I have much to learn. I attempted to get it to work before I posted and Will attempt to read up on what you have advised.
            I think The code you wrote is still beyond my full understanding and I will need to spend more time in order to fully understand it. I can bash script and do some Vb but ahk seems to confuse me for some reason.

            Thank you! Ed

Leave a Reply