Skip to content

Examples

Jump to bottom
Max Paperno edited this page Aug 27, 2023 · 2 revisions

A collection of examples to get you started.

All the tp* file types in the downloads offered below are for direct import into Touch Portal (.tpz = page, .tpb = button). You may need to right-click (context menu) on the links and "Save As.." for the downloads to work properly.

Some of the examples use TP global Values for testing with. For example a common one has the name/id of "test.dynamic_icon_value_1". If you download some of the button examples, you would need to create/have this Value defined in the TP Values tab. I use a TP Slider with a "Set Value" connector to change the value for testing.

Table of Contents

Basic Single-Action Icons

Simple Round Gauge On a Button

Here is an example of using a Simple Round gauge with a button's On Event tab. The image updates whenever the test Global Value changes.

Usage from Events tab

Simple Round Gauge

Using the Touch Portal Open Hardware Monitor Plugin state, this will generate a Cyan colored radial gauge with no background and no shadow.

Simple Bar Graph

Using the Touch Portal Open Hardware Monitor Plugin state, this will generate a Blue colored bar graph with no background and each bar with have a width of 10px

Sample Icon Use

In order to use the icons created above, they first have to have been started to be generated. So at least one action needs to fire that will tell the plugin to generate a new state with the name you have provided. Once that is done here is an example of how to use that icon to change the icon on the button you have.

Basic Horizontal Progress Bar

Here is an example of using a Linear Progress Bar with a button's On Event tab. It spans 3 button spaces of a page.

This is the event flow on the button which has the actions to generate the icon. Since this "icon" is going to have a rectangular shape, we need to specify the desired width and height first using a "Layer - New Layered Icon" action. After drawing the progress bar ("Draw - Linear Progress Bar" action), we then need to tell the plugin to go ahead and produce the final image using the "Layer - Generate Layered Icon" action.

The image updates whenever the test Global Value changes.

Layered Icons

Creating composite icons using several different elements or effects can greatly expand the possibilities. Any of the "Draw" actions can used as a layer, and there are specific "Layer" type actions which can affect what is being drawn in various ways like applying transformations or effects.

To make "complex" layered icon generation more efficient, certain layers can be updated individually as data changes instead of recreating the whole layer stack each time (this is demonstrated in some of the examples below).

Bar Graph with Colored Extents

Here is an effect achieved using a "Layer - Set Composite Mode" action to color different parts of a bar graph depending on the value. The "source-atop" composition mode will only draw the parts of the lower layers (the colored rectangles) where they overlap the top layer (the actual graph lines). The final effect is that you see the overlaid colors (green/yellow/red) instead of the original bar graph color (specified as white here, but could be anything).

(For a reference on different compositing modes, check out the MDN Compositing example.)

Here's the flow which creates the final result. Note that for efficiency this flow only creates the original icon layers once, if the icon doesn't exist yet, and after that it only updates the current value of the bar graph. See the comments in the flow for some more details (click for full-size).

Progress Bar with Colored Extents

This example is very similar to the Bar Graph one above in that it uses a compositing mode effect to achieve different colors for different parts of the image, but using a vertical Linear Progress Bar layer instead of a bar graph. It also adds a subtle blur to the progress bar and an overlay SVG image which has a glass-like effect and the black divider bars. The compositing mode is reset to default before drawing the overlay image so that it is not affected by the progress bar itself, like the color overlays are.

Layered Image Icons

Turn Coordinator Gauge

This DI example stacks and transforms 4 separate images to create an animated airplane gauge.

The button example requires a Global Value for testing with. The one in the button has the name/id of "test.dynamic_icon_value_1" which you may need to create separately. I use a TP Slider with a "Set Value" connector to change the value for testing.

Here is the flow which sets up and animates the gauge composite image using Dynamic Image actions (click for full-size).

LCD Gauge from Images

This example uses individual images of LCD digits (0-9) to create a 3-digit speedometer readout.

The button example requires a Global Value for testing with.

Here is the flow which sets up and animates the gauge composite image using Dynamic Image actions (click for full-size).

Stopwatch Example Page

This DI example stacks and transforms 3 separate images to create a working stopwatch animation with moving second and minute hands, and adds a dynamic text layer showing the current time overlaid on the stopwatch image. This is an actual working stopwatch, even w/out the dynamic image part -- it uses some simple Touch Portal actions to work and also displays the time as plain-text (the larger text at the bottom).

The download includes all required images, as well as two TP Global Values used by the script. If you happen to have installed an earlier version of this page, first go and delete any Global Values that start with "mp.timer" and the "sw" folder in your Touch Portal data folder's "images" directory.

Here is the flow which sets up and animates the stopwatch face composite image using Dynamic Image actions (click for full-size).

Tiled Icons

Tiled icons require multiple button spaces to display, so each button which will be displaying part of the final image needs an On Event handler to show its tile. Only one button, or event, needs to actually create and update the Dynamic Icon definition.

Interactive Dial Control

This example uses an image of a knob/dial to reflect some value. It can also be used to change the same value, providing what essentially looks like a working "dial" control

It spans 2 button spaces of a page, with the dial image centered. This way each of the two buttons can be used to increase or decrease the value separately.

This is the event flow on the first (or "main") button of the tile group, which has the actions to generate the icon. In the screenshot above it is the button on the far left. It also acts as a button to decrement a test TP Value.

The left side of the image, tile 1, updates whenever the test Global Value changes.

This knob tiles across 2 button spaces. The other button just needs a simple event handler to update the button's icon whenever the corresponding state changes. Note the slightly different state names.

Button/tile 2, to the right of button 1:

Hue-shifting Vertical Meter Bar

This somewhat more complex example uses a combination of static images, a drawing filter, a Linear Progress Bar, and a Text layer to create a "meter" type display across 3 vertically-stacked buttons. The Event flow is fully documented with comments.

This is the event flow on the first (or "main") button of the tile group, which has the actions to generate the icon. In the screenshot above it is the button at the top.

The image updates whenever the test Global Value changes.

This progress bar tiles across 3 button spaces. Same as with all other tiled icons, the other buttons just need simple event handlers to update the button's icon whenever the corresponding state changes.

For example button/tile 2, underneath button 1:

Clone this wiki locally