Examples - mpaperno/TouchPortal-Dynamic-Icons GitHub Wiki

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.

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.

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 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 and the progress bar grows from left to right.

The image updates whenever the test Global Value changes.

This progress bar tiles across 3 button spaces. The other 2 buttons just need simple event handlers 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:

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

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:

⚠️ **GitHub.com Fallback** ⚠️