Using the Multiply Visu Element Tool

Owned by Perla Madrigal (Unlicensed)
Last updated: Aug 02, 2024 by Eric Rojas (Unlicensed)
3 min read

Some programming problems are best solved using arrays. For instance, if the application needs to manage many identical or similar devices at once, an array is the natural way to reduce programming time and complexity. Arrays can be leveraged in multiple ways in WebVisualization as well. One way is by using the multiply visu element tool. This tool takes a single element in WebVis, like a button, box or frame, and creates copies of it that can all be referenced to the same array. In this way, it is possible to create a large grid of tools referenced to an array in just a few minutes. Steps for using the tool are shown here.

  1. Create an array in a GVL. This example uses a two-dimensional array of integers, but other data types are supported as well (including structures, enumerations, unions and function blocks). The multiply visu element tool supports one-dimensional and two-dimensional arrays.

    image-20240213-220325.png

  2. Create an element in WebVis that uses the array. This example uses a simple rounded box to show the value of an integer element from the array. The %i shown in the text is a formatting string that will be replaced with the value of the integer when the application runs.

    image-20240213-220332.png

  3. Select the element created in the previous step and open its properties. Most tools have a variable associated with them. In the case of rounded boxes, this is a Text Variable field. To link the variable to an element of the array, use the array's name and replace the index fields with $FIRSTDIM$ and $SECONDDIM$. These markers are used by the multiply visu element tool to know where to insert array indices.

  4. Select the WebVis element. Then, right-click it and click multiply visu element.

  5. The dialog that appears provides the user with options for how the new elements need to be arranged and spaced. In this example, 10 pixels of horizontal and vertical offset were added to keep the screen from looking cluttered.

    The Advanced settings tab provides the user with options for skipping rows and columns (for example, to only show every third row).

    When finished selecting options, click OK.

  6. The process is complete. There should now be an array of elements on the screen. These items are not grouped and can be altered or deleted individually if needed.

    The Text Variable has been modified for each element in the array and should now be referencing an array element at a particular index.

The final result should look similar to this when viewing the WebVis application in a browser.

[Quick link: PAC product page (North America)]

29APR2019 DCLIFFE