Skip to main content

Dashboard Designer - Pipe Segment Visualization

This example demonstrates how to use the Dashboard Designer in Mango to create a system status page that displays pipe segments in different colors based on the value of multi-state data points. This is a common pattern in SCADA and process control dashboards where piping, ductwork, or fluid flow paths need to reflect real-time system state.

How It Works​

The visualization uses the <ma-switch-img> component, which displays different images depending on the current value of a data point. Each pipe segment -- horizontal, vertical, and corner pieces -- has separate image files for each color state (green, yellow, red). As the multi-state data point changes value, the corresponding pipe image swaps to show the appropriate color.

The <ma-switch-img> Component​

The <ma-switch-img> component takes two key attributes:

  • point-xid -- The XID of the data point whose value drives the image selection.
  • src-map -- A JSON object mapping data point values to image URLs. When the point value matches a key in the map, the corresponding image is displayed.

For example:

<ma-switch-img
    point-xid="multi-1"
    src-map="{'1': '/img/pipe-images/pipe-horiz-green.png',
              '2': '/img/pipe-images/pipe-horiz-yellow.png',
              '3': '/img/pipe-images/pipe-horiz-red.png'}">
</ma-switch-img>

In this case, when the data point multi-1 has value 1, the green horizontal pipe image is shown. Value 2 shows yellow, and value 3 shows red.

Building the Pipe Layout​

A complete pipe network is assembled by placing multiple <ma-switch-img> components on the Dashboard Designer canvas. Each component is positioned absolutely to form a connected path. The pipe image library typically includes:

  • Horizontal segments (pipe-horiz-*.png) -- Straight pipe running left to right.
  • Vertical segments (pipe-vert-*.png) -- Straight pipe running top to bottom.
  • Corner pieces (pipe-top-right-corner-*.png, pipe-bottom-left-corner-*.png) -- 90-degree bends connecting horizontal and vertical runs.
  • T-junctions and cross pieces -- For branching pipe layouts.

Each segment type has variants for each state color. In this demo, three colors are used to represent system states, but you can extend this to any number of states by adding more images and mapping entries.

Complete Example HTML​

The following code shows a full pipe visualization layout created with the Dashboard Designer. Each <ma-switch-img> is positioned absolutely within the designer root:

<div class="ma-designer-root" id="dcbf417f-f20a-4113-9a83-d032769cf7fe"
     style="width: 1024px; height: 768px; position: relative;" ma-center="false">

    <ma-switch-img style="position: absolute; left: 221px; top: 128.945px;"
        point-xid="multi-1"
        src-map="{'3': '/img/pipe-images/pipe-horiz-green.png',
                  '1': '/img/pipe-images/pipe-horiz-yellow.png',
                  '2': '/img/pipe-images/pipe-horiz-red.png'}">
    </ma-switch-img>

    <ma-switch-img style="position: absolute; left: 340px; top: 128.945px;"
        point-xid="multi-1"
        src-map="{'2': '/img/pipe-images/pipe-top-right-corner-green.png',
                  '3': '/img/pipe-images/pipe-top-right-corner-yellow.png',
                  '1': '/img/pipe-images/pipe-top-right-corner-red.png'}">
    </ma-switch-img>

    <ma-switch-img style="position: absolute; left: 574.977px; top: 273.949px;
                          width: 18px; height: 128px;"
        point-xid="multi-1"
        src-map="{'3': '/img/pipe-images/pipe-vert-green.png',
                  '1': '/img/pipe-images/pipe-vert-yellow.png',
                  '2': '/img/pipe-images/pipe-vert-red.png'}">
    </ma-switch-img>

    <!-- Additional pipe segments continue the same pattern -->
</div>

Extending the Pattern​

You can extend this technique in several ways:

  • Multiple data points -- Assign different point-xid values to different pipe segments so that each section of the pipe network reflects the state of its own sensor or zone.
  • Additional states -- Add more entries to the src-map to support four, five, or more system states with different colors or icons.
  • Tooltips and labels -- Overlay <ma-point-value> components near pipe segments to show numeric readings alongside the color-coded status.
  • Click handlers -- Add ng-click directives to pipe segments to open detail views or control panels for that section of the system.

Creating Pipe Images​

Pipe segment images can be created in any graphics editor. For best results:

  • Use PNG format with transparent backgrounds so segments blend together seamlessly.
  • Keep all segment images the same dimensions for consistent positioning.
  • Use distinct, high-contrast colors that are accessible to users with color vision deficiencies. Consider adding patterns or labels in addition to color changes.