Bite-sized AutoHotkey Guide: GUI (Graphical User Interface)

Status
Not open for further replies.

Cheesy

Gold Member
Joined
Jun 1, 2012
Messages
2,101
Likes
157
IG Name
Brian Johnsson
#1
For a probably easier and more understandable guide, that also doesn't just contain random segments of AHK's GUI aspect, go to this guide instead.





Bite-sized AutoHotkey guide: Graphical User Interface


Introduction
A GUI, or Graphical User Interface is just like it sounds, a graphical interface that the user can interact with. The limits of GUI's are nearly endless. If you don't mind spending some time on it, you could in the end make a list of all your binds, where you could toggle separate ones on and off. Or you could have a head switch to switch between scripts of two different characters. Of course this isn't only fixed to the GUI, although to make anything larger that requires the user to make an input, GUI's are the most useful.

In this guide, I will cover how you can make a simple GUI that will show you that the script is running. Unlike the tiny icon you get in the system tray, this will be a window running in the background - reminding you that you have scripts running. If you close this window, the script will shut down.

As per usual, I recommend you know the basics of AutoHotkey before you attempt this. No previous knowledge of GUI's or scripting is required, however it will only be of benefit if you know.





Graphical User Interface
Unlike what many think, GUI's are no harder to create in AutoHotkey than anything else. AutoHotkey already comes shipped with what's required for the user to easily make a GUI. The only thing left is for the user to specify what he wants his GUI to look like, how it will behave and other miscellaneous options.

Making a GUI requires a couple of simple lines. Unlike what you might think, the first thing you do is to not create the window itself. Instead, the first thing you have to specify is options for the various parts of a GUI. (Font, text size, colour, as well as things like the text being, bold, italic, etc.) This is as the computer always reads it from the top to the bottom, and you can't change settings of the GUI once it has actually been created.


Code:
Gui, Font, s18 cGreen bold, arial
Gui, Font [, Options, FontName]

To tell AutoHotkey that we want to work with a GUI, we start of by specifying it by typing "Gui". After it, we place a "," as to specify further options. As I on the first line want to edit the look of the text, I use the method "Font". This will further tell AutoHotkey that I want to work with changing the look of the font. After specifying it, I move onto the options themselves. In general, there's three types of options: (s)ize, (c)olour, (w)eight. (Weight is other referred to as boldness, (Thickness) of the text.) Can be specified with 1-1000. (400 is normal, 700 is bold)) The word bold, italic, strike, underline and norm (Default look) also works. If you want to use more than one option, you separate them with a space - not a comma. The second option, after a comma is to specify which font the text will have.


Code:
Gui, Add, Text,, RCRP Script
Gui, Add, ControlType [, Options, Text]
As said below, the "ControlType" can be many different things. For simplicity, I'm sticking to "text", which adds a text element.

This is to specify what kind of element the GUI will contain. As I only want a simple text line, I use "Add, Text". There's many other options of Add, you can find these on the AutoHotkey docs, or by googling it - as I won't cover it here. Note how I made a double comma. This is as I don't have any further options to specify, as I did it in the line above. (I recommend doing it like me, as the options on the Add method are in general hard to understand and in this case unnecessary.) The last option is the actually text. What the window will say when it opens.


Code:
Gui, Show, Minimize
Gui, Show [, Options, Title]

The last line directly regarding our GUI I will write is the line which will actually cause the GUI to show up. Without it, nothing will work. Remember, this must be typed last, and all options and additions must be added above it. In this example, I use the option "Minimize". There's many options for position, size etc. Minimize simply makes the window start minimized. This is to avoid desktop cluttering. The Title is also optional. Due to lack of imagination, I left it out. In this case it will use the scripts file name as the title. (The title is the windows name, displayed in the top left.)


Extra
Although not necessary, I recommend an additional line to make the script close when you shut the window down. If you do not, the script will simply keep running as the window closes.

Code:
GuiClose:
ExitApp
Simply, if "GuiClose" occurs (The windows closes) AutoHotkey will perform "ExitApp", which is a fancy word for shutting down the script entirely.


Try to play around with this. I also recommend you look into the AutoHotkey docs in case you're interested in doing a lot cooler and more useful GUI's, with files tabs, user inputs, etc. For now, this will be my introduction to GUI's in AutoHotkey to you by me. Post your written GUI's below! As usual, if you have any questions, put them below as well and I'll do my best to answer them.
And yes, I know, who would have thought a simple application like AutoHotkey could have graphical user interfaces?!


©Cheesy 23/04/2014
 

Cheesy

Gold Member
Joined
Jun 1, 2012
Messages
2,101
Likes
157
IG Name
Brian Johnsson
#2
Re: Bite-sized AutoHotkey Guide: GUI (Graphical User Interfa

Change log

23/04/2014 - 20:07
Added post. So far it's looking swell, might be more updates later though.
 

Manu

Retired Admin
Joined
Apr 7, 2013
Messages
4,867
Likes
1,010
IG Name
Nona Yurbizniz
#3
Re: Bite-sized AutoHotkey Guide: GUI (Graphical User Interfa

This looks awesome, here is what I already made with this and a couple of tutorials

I'm having troubles with actually loading the binds to AHK itself, and saving them after making an edit
Do you have any completed GUI which I can base off?

Thanks for showing me this, I never knew this was possible!
 

Cheesy

Gold Member
Joined
Jun 1, 2012
Messages
2,101
Likes
157
IG Name
Brian Johnsson
#4
Re: Bite-sized AutoHotkey Guide: GUI (Graphical User Interfa

Manu said:
This looks awesome, here is what I already made with this and a couple of tutorials

I'm having troubles with actually loading the binds to AHK itself, and saving them after making an edit
Do you have any completed GUI which I can base off?

Thanks for showing me this, I never knew this was possible!
I use only a simple GUI similar to the one described in the OP myself. I'm not fully certain if AHK supports saving text into files by itself though, google around or check the docs. If it does, I'm sure there's a way to recreate the script file with an updated script.
 

Manu

Retired Admin
Joined
Apr 7, 2013
Messages
4,867
Likes
1,010
IG Name
Nona Yurbizniz
#5
Re: Bite-sized AutoHotkey Guide: GUI (Graphical User Interfa

I changed it up a bit, now you can use radio buttons to select a script, then press the load button, afterwards you can use the binds for that button.


Code:
Gui, show, w500 h300, GUI 
Gui, Font, Comic Sans MS 
Gui, Add, Text,, Select your binds! 
Gui, add, Radio, x10 y50 vRadio, Biker 
Gui, add, Radio, x10 y100, Medic 
Gui, add, Button, x150 y10 -default, LOAD

ButtonLOAD:
Gui, Submit, NoHide
if Radio = 1
{
Biker := True
Medic := False
msgbox You selected the BIKER script
}
if Radio = 2
{
Medic := True
Biker := False
msgbox You selected the MEDIC script
}



^Numpad7::
if Biker
{
SendInput MEOW
}
else
if Medic
{
SendInput WOOF
}
return
Instead of woof and meow, you use the binds you want to use, ofcourse.

If you have more than 2 scrips that you want to use, continue with 3, 4 etc

It's important that you update the boolean (in this case 'Medic' and 'Biker') when you select a new radio button
 

Cheesy

Gold Member
Joined
Jun 1, 2012
Messages
2,101
Likes
157
IG Name
Brian Johnsson
#6
Re: Bite-sized AutoHotkey Guide: GUI (Graphical User Interfa

Manu said:
I changed it up a bit, now you can use radio buttons to select a script, then press the load button, afterwards you can use the binds for that button.
-snip-
Got so inspired by this I have spent the last three hours to understand AHK's GUI part better lol (I didn't really know else than the basic syntax when I wrote the guide.) Now I've remade some of my scripts, and rather than having to use an more or less ugly batch which I did previously, I simply made a clean launcher using AHK's GUI. The buttons are for the two factions I'm in (Which are censored.) Press one, and the scripts related to it along with SAMP (Which directly connects) starts up. To avoid unhandled exceptions I also included a try and catch statement... Shoot me a pm if you'd like a look on the script itself.


(This is with windows aero theme disabled.)
 
Status
Not open for further replies.