AutoHotKey User Interface Guide

Status
Not open for further replies.

Manu

Retired Admin
Joined
Apr 7, 2013
Messages
4,868
Likes
1,009
IG Name
Nona Yurbizniz
#1
Introduction


After reading through this guide made by Cheesy, I thought that it may be a little bit difficult to understand every bit of information from it. That's why I decided to make my own guide on how to create your own customisable GUI (Graphical User Interface).

In this guide I will show you how to use and edit the very basic and simple GUI that I use. This guide was created on a computer with Windows 7, using a different OS may require different steps to be made.




Setting the GUI up


In order to be able to start setting everything up, you obviously need to download AutoHotkey first. The software is available for free right here.

In order to start creating your own script for autohotkey, I suggest that you first read a couple of other basic guides on how to use the software.

To start off, we will use a blank script. Be sure to back-up any other keybinds that you may have already, as it would be a pain in the ass to start everything from scratch.

First thing to do in order to actually have a GUI, is to have this line in it:
Code:
Gui, show, wX hY, TEXT
X and Y are both variables, that define the width and height of the actual GUI that you will use. The text at the end of this line will create the little line of words on top of the program. (If you look at the first picture, I simply put GUI instead of TEXT)

After saving this code and reloading AHK, it will simply bring up a blank GUI field, ready to add whatever you want to it.

Adding buttons, text and options


We can't really do anything with a blank field. There are no options and it's basically just wasting space. We have to add some text, some buttons and maybe even an image to make it look more appealing.
The following code adds two radio buttons and a submit button to the GUI, as well as some text and an image. You can obviously change most of these things in order to make it more fitting.
Code:
Gui, font, c000000, s10, Comic Sans MS
Gui, color, BFBFBF
Gui +Resize -MaximizeBox
Gui, Margin, 20, 20

Gui, add, picture, , C:\Users\Manu\Pictures\logo.png
Gui, show, w400 h250, GUI 
Gui, add, Text, x15 y100, Select your binds! 
Gui, add, Radio, x15 y120 vRadio, Biker 
Gui, add, Radio, x15 y150, FD
Gui, add, Button, x15 y200 -default, LOAD
We'll go through this line per line. The first line sets the color, size and font of the text used in your GUI. You can use any size you want and any font that you have on your computer. The color you want for your GUI is set in HEX code. A great website to find a color that you want is http://www.colorpicker.com/
The next line selects what background color that you want. This also uses Hex code.
The third line makes it that you can adjust the size of your GUI, but it doesn't allow it to go fullscreen.
Fourth line adds a margin between the borders of your GUI and the objects that are inside of it. In this case it is a border of 20 pixels.

Now here is where the fun starts: we actually start adding objects to our GUI. The first object that I added is the RCRP log, just to make it look a little bit more appealing. The logo can be found here in case you want to use it yourself. Simply download this image and adjust the code so it fits to your registry.
The second item is the actual GUI itself. It has been added AFTER the logo, because the logo uses a transparent background. The GUI works in different layers and adding the logo after the GUI would make it look ugly.
After that, there is some text. The x and y obviously change the X and Y position (in pixels) on your GUI of where the text should show.
Same thing goes for the radio buttons. You can use whatever you want for the tags at the end of the radio code, I use the basics of what character I use. To finish it off, we have a LOAD button.

Making the buttons do something


If you have tried the script you have right now, you may notice that nothing really happens. This is because we haven't actually given a purpose to the load button. If you add the following to your code, you will actually see something happen:
Code:
ButtonLOAD:
{
Gui, Submit, NoHide
if Radio = 1
{
Biker := True
Medic := False
msgbox You selected the BIKER script
}
if Radio = 2
{
FD := True
Biker := False
msgbox You selected the FD script
}
}
ButtonLOAD:{...} basically means this: If you press the LOAD button, everything between the two curly brackets will be executed.
In this case, it means that if the variable Radio (vRadio in previous code) equals one (meaning that 'biker' was selected), the Biker boolean will be true and FD boolean will be false. If it is two, it means that the second button was selected and Biker will be false and FD will be true. You can add more buttons and more booleans if required.
After doing this, it will show a pop-up stating which script you have selected. (Which isn't exactly true as both sets of key-binds are located in the same script lel)
There obviously is a better way to do all of this, but this method is really easy in my opinion.

The actual keybinds


Now we have buttons that do something, but we still want our keybinds to be 'loaded in' so to say. Well here follows the most boring and repetitive part of the code. I'll show one small example.
Code:
^Numpad1::
if Biker
{
SendInput t/ame Wearing a leather vest|Front:[ADMC]|[VP]|Back: [ADMC]*ADMC LOGO*[1'/.][MC][San Andreas]{enter}
return
}
else
if FD
{
SendInput t/ame Wearing an EMT uniform. Nametag: R.Willakers{enter}
return
}
else
return
When pressing left control + Numpad 1, it shows an /ame giving a brief description of my appearance, depending on what bind I have loaded in.
It's a very simple IF and ELSE structure. If option one is selected, give me the first bind, else.. if option two is selected, give me the second keybind else.. Return
This can be easily extended if you have multiple characters. The most important thing to remember is to use plenty of curly brackets in your code, as they may give you some unexpected results. A last thing to remember is that ending with an else return is also very beneficial to sort out any possible bugs.

The end result


Eventually you will end up with a large amount of code, and maybe even use some booleans or integers with it. For some reason, I always add my variables to the top of my code, I'm not sure if it's required for them to be there, so feel free to mess around with it.
What follows now is my entire AHK code that I use when playing RCRP. There obviously have been a couple of changes since I started making this guide, and some features that I may not have explained too well. If you have any questions feel free to PM me or reply to this topic.
Code:
Siren = false
Cig = 1
Gun = false

Gui, font, c000000 s10, Comic Sans MS
Gui, color, BFBFBF
Gui +Resize -MaximizeBox
Gui, Margin, 20, 20

Gui, add, picture, , C:\Users\Manu\Pictures\racara.png
Gui, show, w400 h250, GUI 
Gui, add, Text, x15 y100, Select your binds! 
Gui, add, Radio, x15 y120 vRadio, Biker 
Gui, add, Radio, x15 y150, FD
Gui, add, Button, x15 y200 -default, LOAD

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





^Numpad5::
{
SendInput t/ame Pushes a button on his radio to start transmitting{enter}
return
}

^Numpad7::
{
SendInput t/ame <<<<left indicator<<<<{enter}
return
}

^Numpad9::
{
SendInput t/ame >>>>right indicator>>>>{enter}
return
}




^Numpad1::

if Biker
{
SendInput t/ame Wearing a leather vest|Front:[ADMC]|[VP]|Back: [ADMC]*ADMC LOGO*[1'/.][MC][San Andreas]{enter}
return
}
else
if FD
{
SendInput t/ame Wearing an EMT uniform. Nametag: R.Willakers{enter}
return
}
else
return









^Numpad4::
if FD
{
if Siren = false
{
SendInput t/ame *Flicks two switches [ON] on the dashboard*{enter}
Sleep 100
SendInput t/siren on{enter}
Sleep 100
SendInput t/elm on{enter}
Siren = true
return
}
else{
SendInput t/ame *Flicks two switches [OFF] on the dashboard*{enter}
Sleep 100
SendInput t/siren off{enter}
Sleep 100
SendInput t/elm off{enter}
Siren = false
return
}
}
else
return




^Numpad8::
if Biker
{
if Gun = false
{
SendInput t/ame *Moves his hand to his waistband, withdrawing his glock and switches the safety [OFF].*{enter}
Gun = true
return
}
else if Gun = true
{
SendInput t/ame *Quickly flicks the safety [ON] before hiding the glock in his waistband.*{enter}
Gun = false
return
}
}
else if FD
{
if Gun = false
{
SendInput t/ame *Moves his hand down to his holster, withdrawing his Colt from it and switching the safety [OFF].*{enter}
Gun = true
return
}
else if Gun = true
{
SendInput t/ame *Flicks the safety [ON] before storing the Colt back in his holster.*{enter}
Gun = false
return
}
}

F11::
SendInput t{up}{enter}
return



^Numpad0::
if Biker
{
Cig = 1
return
}
else
return
Useful links and guides


http://www.autohotkey.com/docs/commands/Gui.htm#Font
http://www.colorpicker.com/
http://www.autohotkey.com/
Cheesy's AHK GUI tutorial
Cheesy's AHK tutorial on how to delete and install files
Cheesy's AHK tutorial on toggles
Fleur's topic with questions and answers about AHK
Sandman's detailed tutorial on how to install and use AHK

If I have missed any topics about AHK feel free to reply with the link.

I hope my topic will interest some people creating their very own GUI for AHK. I also hope I explained everything in an understandable way (and that I didn't make any grammar errors lol).
 
Status
Not open for further replies.