We like to create our Touch Portal as generic as possible. This allows for a lot of intelligent user solutions we do not think of. It allows for a more open and customizable approach. Take for example the key press functionality. With that generic solution you can control almost all applications on your desktop computer without us dictating what you can use. If we had decided to only create dedicated buttons for actions then we would have to create for each piece of software a list of actions. That is not feasible and that means we also will not create a lot of multi action buttons. So in this regard, the generic solution wins over the fixed solution. For our Toggle buttons, we should do the same. We need to create it in such a way that our users are able to use the toggle buttons for more than just our vision. So instead of creating a toggle button with a single purpose, we wanted to create the building blocks to make all sorts of toggle buttons you as a user wants.
We have gotten a lot of requests to make a toggle button. But in those requests, users only requested the ability to swap images when the button is pressed. The fun part is that those users did not really requested toggle buttons but just a visual swap of elements.
A toggle button is a representation of a state, visualized with different visuals. The key here is the state. Just creating a button where you can swap visuals is not enough. Take for example a start and stop streaming toggle button. Default we create the button where the streaming is off, when pressed it turns to on. Just pressing it and swapping the image is not really enough. You can ofcourse manage but a lot can go wrong. Take for example the moment when you start Touch Portal. What is the first state? If it is already streaming then the button does not represent the correct state at start because we made the defaul set on off. This will not give a proper experience. What if you change the state in the streaming software itself for some reason during your stream? The button does not represent the correct state anymore. These are just two of the most common issues.
The first thing we did was create the minimal viable product. We added IF blocks. An IF block is an block of actions that is only triggered when you push the button AND when the state it holds is true. For example, IF button state is pressed run all the actions below. Just that. This is the first stepping stone for the toggle buttons.
To handle the opposite state of the button we included an ELSE block. Then you have two blocks of actions, one for the option when it is off and one for the button when it is on. Our first part of the Toggle button is done. But how do we actually change the state? Well we created a new action for that as well. Touch Portal has a set button state action from now on. At this moment it only sets the state to ON and OFF, but in the future we will allow for numbers as well. So you could make one button that does something different each time you tap it. So with the same system you can create multi-tap buttons as well in the future.
In the image is an example of how the actions work in the button. You could remove the else block. This will result in that the button only runs actions when the state of the button is OFF. When the state is ON it will do nothing. For now that does not make much sense but in the future when we add a lot more states, you can make very special buttons with that.
Ok, so now we have the functionality to toggle, but we still cannot change the visuals. That is where our new change button visuals action comes into play. Currently the action can change the background colors, the text and/or the icon of the button. Just put it in the IF block and it will change the button visuals.
This is a small and simple example of the action sequence we can make with the new functionality. It shows an IF statement in which, if statement is true, the two actions are run. The first will change the visuals, the second will change the state of the button. This way, the next time you press this button, the state is different and will run the other actions.
But this only happens when you press the button. So now we have sort of a toggle button but we still do not have a toggle button. What about when the state changes because of something else, outside influences? In our example we have used the state of the button itself but for more concrete functionality like the toggle streaming this will not be enough. We need to know the state whenever it changes and we need to be able to act on it then.
To solve this issue, we added a new category of functionality to a Touch Button. In addition to the actions, we have also created a list of events. This section can be used to run actions when events are triggered. For example, when a button triggers the action that changes the state of that button, an event is also triggered. At that moment a State Change event is triggered. User can add such an event to a button. Users can then add actions to that event.
Let us take the example again, lets remove the change visuals actions from the if statements of the button. Now when pressing the button, only the state changes but no visuals will be changed anymore. Now we add the On State Change event. Add it and set it to ON. Now add a change visuals action that has the visuals for the ON state and place it below the state change event. Now add another On State Change event. Set if to OFF this time. Again with a Change Visuals action but now it must represent the OFF state.
When you use the button now, not much has changed, still the button changes its appearance when you press the button. But it does function differently now. Because from this point, whenever the state is changed it will change its appearance. So if you would now change the state of a button by not pressing the button, it will still change to the correct state! Think back to the start and stop streaming button. With the events we can connect it to the streaming state of the streaming software. If you change the state in the streaming software, it will be updated on the Touch Portal device as well.
At the time of writing this the next release will have the aforementioned functionality. But in the future we will be adding more states and events. Just a small overview of all the states and corresponding events we want to build in the coming future (not limited by of course):