Step 01: Opening the button detail screen

In our previous guide we ended up with a nice premade OBS page.

This page above already has a few buttons that interact with OBS. But we also have one spots free to create our own button. This will give you some more insights on how to create your own buttons and how to use the button edit screen.

Anyway, when you are ready, click on the first free space to open the button detail screen.

Step 02: Overview of the button edit screen

Below is the button edit screen where we have marked the five areas of interest:

1. Button Preview - On the top of this screen is where the preview of your button will be shown.
2. Make Button Snapshot - With the two small white icons you can copy a snapshot of the button to the clipboard (first) or to a file (second). The snapshot of a button will make an image of the button preview and with all the buttons actions, events and on hold entries. This is very handy for when you want to share your button with someone to show your actions and event logic.
3. Button Settings - Here you can adjust all the settings of a button. You can set the size it takes on the grid, change the title, font, alignment, background colors, icons and a lot more.
4. Action Category List - This is the list of all Actions and Events Touch Portal and the installed plug-ins provide to you to use in your buttons.
5. Button Functionality setup - Below the button preview you have the system to add functionality to your button. There are three lists to which you can add actions. The first On Press list allows you to add Actions that will be triggered in order when you have pressed this button on the mobile device. The second On Event is the list of events to listen to for this button. You can then add actions that need to be executed once that event occurs. The third On Hold section is for adding an action and/or a visual cue for when you are holding down the button on your mobile device.

Step 03: Setting up the title and background

In the button detail screen on the right, you will find all the settings for this specific button. We will create a button that looks like this:

First we edit the button Title. You can use enter to create a new line, this way you can position text on a button better.

The second part is to change the background colors, just choose some colors and do not forget to unselect the "Transparent background" option otherwise it will not show the background.

Step 04: Adding the action

Now we have pretty button, we need to make it do something. If you use this button now, it will not do anything. So we need to add the action to open the calculator.

On the right of the button detail screen, we have our big list of actions that you can add to a button. All actions are categorized. For this instance we need the "Run" category as we want to run the calculator application of Windows.

Click on the "Start Application" action and it will add an action in which you can specify which application to run

Click on the "..." button to open a file explorer. Navigate to the calc.exe just like we did and select the file. Click the button "Open" and the target is added to the action.

The action is placed on the "On Press" section. Every action in this list is executed in order when you press this button on your mobile device. So in this case each time you press this button it will open the Windows Calculator app.

End Result

You now have learned how to change the visual representation of your button and you now know how to add actions to the button.