How To > How to create dynamic icons

You want to put 40 icons in your UI, but you only have space for 10, so you want to display them dynamically.

•Create a list object

•Put a String Field in as the first child, delete its text and make it transparent. This will be shown when no icon needs to be displayed.

•Put all images into the list object

•Create 9 shallow copies of the list object. Now you have the 10 icon "spaces". Put them where they should be in the UI.

•Create 10 variables and reference one of them to each list object. The variables will switch the shown icon in each list object.

•Create another variable, "icon_event_flag". This variable will be used as a trigger to refresh the icons.

•Create a script for the event OnProjektInit. Fill it with this code:

//Definition of the variable names for the listen objects
icon_variable_names = ["New Variable_1","New Variable_2","New Variable_3","New Variable_4",<until 10>];

num_icons = 40;//global variable with number of icons
num_lists = 4;//global variable with number of list objects
icon_enable = [];//global array to switch each icon visible

//initialize all icons with 0
for (var i = 0; i < num_icons; i++)
{
icon_enable[i] = 0;
}

•Create a script show_icons.js with this code:
//always start with the first list object
var list_position = 1;

//set all list objects transparent first
for (var i = 0; i < num_lists; i++)
{
setVariableValue(icon_variable_names[i],0);
}

//go through icon list and show icon if necessary
for (var i = 0; i < num_icons; i++) {//go through all icons
if (icon_enable[i] !== 0)//check if icon i should be shown
{
setVariableValue(icon_variable_names[list_position-1],(i+1));//show icon i at position "list_position"
list_position = list_position + 1;//increase list_position to next value
}
}

•Put this script to the event OnValueChange of the variable "icon_event_flag".

•For each event that should show a certain icon, put this code in a script:
icon_enable[<n>] = 1;//show Icon n

//change flag
var flag = getVariableValue("icon_event_flag");
flag = flag + 1;
setVariableValue("icon_event_flag", flag);

•For each event that should remove a certain icon, put this code in a script:
icon_enable[<n>] = 0;//hide Icon n

//change flag
var flag = getVariableValue("icon_event_flag");
flag = flag + 1;
setVariableValue("icon_event_flag", flag);

•To test this without actual events, you can put latching buttons on the screen with the above 2 scripts on OnPress and OnRelease, respectively. Each button should show/hide one icon, so you need to vary <n> in each script.

Please note:

There are no safety procedures in place here. If more than 10 events can occur at once, this needs to be considered, e.g. by discarding the oldest entries.

The icons will always be sorted in the order that they are put in the list. If there should be a FIFO or LIFO or any kind of other order, a second array with the position within the list objects would be needed.