tutorials - autolog/TouchPortal GitHub Wiki

These tutorials are not meant to take the place of the documentation available from Touch Portal and are just to help you get started.

You may find that the changes you make in Touch Portal Desktop (TPD) don't immediately show up on Touch Portal Mobile (TPM) pages. When this condition happens, you can usually correct this by pressing the refresh button on TPM.

Creating a Touch Portal Toggle Button
Conditionally Changing the Look of a Button
Adding Dynamic Text to a Button Title
Videos

Creating a Touch Portal Toggle Button

First, you need to decide what you want your button to do. For this example, we are going to toggle an Indigo Lamp Device.

Place the Button:
Within the TPD software, click the window where you would like the new button to appear.
Format the Button:
Define the look and feel of the button in the right-hand pane.

Touch Portal buttons must have a defined title in order to be processed by TPD. If the button title is blank, TPD will ignore it.

For now, let's just give the button a title. We can come back at any time to adjust things like colour and font styles. These things are obviously set in the right-hand pane.
Define the Action:
The center pane is where the functions for your button are defined. There are three types of functions you can assign to your button and one button can support all three (although only one type of function is required unless you don't want the button to do anything--like act as a label.

On Press Functions

On Press functions define what will happen when your button is pressed.

For this example, when the button is pressed, we want the associated Indigo device to toggle On/Off (the Action). You'll find a bunch of Touch Portal Actions in the left pane. Scroll down in the left pane and find the Indigo plugin (if you don't see the Indigo plugin in the left pane, head to the installation instructions and then come back here.) Within the Indigo tree, find the Action labelled "Device Toggle". Then, after making sure that the On Press tab is active, click the device toggle action and it will be added to the On Press tab. The action will look something like this:

Select the device you would like to toggle. If the device is not listed here, you'll need to add it to the list of published devices in the Indigo TPD device. See actions for more details about Touch Portal actions.
1. Sync Your changes:
  In TPM, click the refresh icon to download the latest pages.

That's it! If everything has gone as planned, you should now be able to see your new button in TPM. When you press the button, it should turn the lamp on. Press it again and the lamp should go off.

You can also add On Event functions and On Hold functions.

Conditionally Changing the Look of a Button

In this example, we're going to change the look of a button based on an external event. This example presumes the button has already been created. Here, we're going to change the look of the button when a device is turned on in Indigo--without any direct action being performed in Touch Portal.

Select the On Events Tab.
Select the Indigo Actions Group in the left pane.
click the corresponding event for your device (if it's not listed, you'll need to publish the device in the TPD device in Indigo.) It will be named something like "When [your device name] ON/OFF Changes to".
Select whether you want the event to fire when the subject device turns on or when it turns off. For the first example, we'll select ON.
Select the Logic Actions Group in the left pane.
Click the "Wait for Timer" action.
Set the timer to 100 milliseconds. This forces TP to wait a beat to give everything a chance to catch up (especially data transfer between TP and Indigo.)
Select the Visuals Actions Group in the left pane.
Click the "Change Button Visuals" action.
For this example, tick the "Change background color to" item and select the colour(s) you want to display. For this example, we will use white for both colours.

You can add as many events as you wish. In the following image, there is an additional event action to change the button state to ON and an additional change to the button visual that changes the button's title.

That's it! If everything has gone as planned, you should see an Event that looks something like this:

Touch Portal Button Change

To create a corresponding event for when the device is turned off, create another event on this tab and repeat the steps for OFF.

Adding Dynamic Text to a Button Title

In this example, we're going to change the look of a button based on external data. This example presumes the button has already been created. Here, we're going to change the look of the button when the dimming level of a lamp changes in Indigo.

Select the On Events tab.
Select the Logic Actions Group in the left pane.
Click the "When Plug-in State changes" action.
Select the Touch Portal Plugin state associated with your device.
Select the condition "does not change to".
Enter a value that is not between 0-100 (a non-rational dimming level)--here, we've chosen 999.
Select the Visuals Actions Group in the left pane.
Click the "Change Button Visuals" action.
For this example, tick the "Change Title to" item and enter the text you want to display. For this example, we will use a Touch Portal dynamic text variable to display the current dimming level.

The full text of the example is Living Room Vase (${value:indigo_device_243868511_brightness}) (note that there is a hard return between the words 'Room' and 'Vase').

Don't worry. You don't have to remember this syntax or figure out the correct syntax for your device. The variable is obtained by clicking the + next to the "Change Title to" control.
1. Click the + next to the control.
2. At the bottom of the list is a group called "ADD A PLUG-IN DYNAMIC TEXT VARIABLE". Select the appropriate value for your device. In this case, it's Living Room - Vase BRIGHTNESS.