This video shows you how to use the new Drag-n-Drop Dashboard Designer in Mango v3 to create a system status page that shows pipe segments in different colors based on the value of multi-state data points.
The HTML from the demo is shown below.
<div class="ma-designer-root" id="dcbf417f-f20a-4113-9a83-d032769cf7fe" style="width: 1024px; height: 768px; position: relative;" ma-center="false">
<ma-switch-img id="27020558-db64-49ed-ad33-57c25e4fbfd7" style="position: absolute; left: 894px; top: 485.938px;" point-xid="multi-1" src-map="{'1': '/img/pipe-images/pipe-bottom-left-corner-green.png', '2': '/img/pipe-images/pipe-bottom-left-corner-yellow.png', '3': '/img/pipe-images/pipe-bottom-left-corner-red.png'}"></ma-switch-img>
<ma-switch-img id="a14c52d6-bdff-46b5-8df0-350b027c5a7a" style="position: absolute; left: 540.977px; top: 217.949px;" 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 id="a8c92852-17d1-40db-ace2-0847973cf117" style="position: absolute; left: 421.977px; top: 217.949px;" 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 id="38405304-5edc-4f4a-aded-57b35c5c3208" style="position: absolute; left: 574.961px; top: 398.945px;" point-xid="multi-1" src-map="{'1': '/img/pipe-images/pipe-bottom-left-corner-green.png', '2': '/img/pipe-images/pipe-bottom-left-corner-yellow.png', '3': '/img/pipe-images/pipe-bottom-left-corner-red.png'}"></ma-switch-img>
<ma-switch-img id="53d35bfc-ccf8-4ac4-8a4e-7cf7ce8e6624" 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 id="9ad201f8-90a0-4fb7-82d1-bb2f236d512b" style="position: absolute; left: 862.945px; top: 430.938px;" 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 id="c42d58b1-265c-4a15-8e12-6d7e00c0a3c1" style="position: absolute; left: 743.961px; top: 430.938px;" 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 id="7b2391ab-be2a-41a7-92f5-e5e886424eb5" 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 id="c5acf040-82be-4c9f-a4da-7578480d1c5d" style="position: absolute; left: 371.973px; top: 183.949px;" point-xid="multi-1" src-map="{'1': '/img/pipe-images/pipe-bottom-left-corner-green.png', '2': '/img/pipe-images/pipe-bottom-left-corner-yellow.png', '3': '/img/pipe-images/pipe-bottom-left-corner-red.png'}"></ma-switch-img>
<ma-switch-img id="5aed02a7-2342-4fca-ac2a-586895cb1138" style="position: absolute; left: 624.961px; top: 430.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 id="dafea31f-3e1e-4ac8-bf64-66522beb4356" 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>
</div>