Create your first button

Getting started with Touch Portal

This overview will show you how to create your first button. We will create a button that opens up the calculator on Windows. We will cover how to set up the visuals of a button and how to add actions.

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. There are 5 different sets of settings that allow you to fully customize your button ranging between adjusting the text on a button to its size to setting up graphics.
  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. This list will be different for the different states a control can handle and per control.
  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.
  6. Type of Control - Each control on your Page can be either a Button or a Slider. With this dropdown you can change between the two types of control.


Step 03: Setting up the title and background

We first start by setting up the button. We will create a button with the following settings:

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, click on the "Background visible" to enable the background settings and change the colors.



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.


Back to Guide Overview