Styling With Data

In this video tutorial you can learn how to bind data point values to style elements with the Dashboard Designer. The general technique is to take a data point's value and use it in the ng-style attribute of image elements. CSS opacity fading, filter blurring/saturating, as well as animation speed are demonstrated.

Code Used In Tutorial

HTML Used for Page

<div class="ma-designer-root" id="14c1c87d-9143-4b90-b22e-1b9d22efb07f" style="width: 1024px; height: 768px; position: relative;">
    <ma-get-point-value id="3ce99f42-7b4a-4345-be54-c632f77596ac" style="position: absolute; left: 0px; top: 5px;" point-xid="demo-scale-to-100" point="scalingPoint"></ma-get-point-value>
    <pre id="d1d28165-5b3a-45f4-bfbc-a2ea22611d27" style="position: absolute; left: 0px; top: 27px; width: 176.234px; height: 28px;" ng-bind="scalingPoint.value"></pre>
    <img id="cb18195f-6fba-4845-9b11-840aca37d601" style="position: absolute; left: 0px; top: 100px; width: 104px; height: 100px;" src="/rest/v2/file-stores/default/gears-icon-png-11.png" width="200" ng-style="{'opacity': scalingPoint.value / 100}">
    <img id="0a6c755f-360e-42d1-93cc-074a153d1ff6" style="position: absolute; left: 133px; top: 100px; width: 104px; height: 100px;" src="/rest/v2/file-stores/default/birthday.png" width="200" ng-style="{'filter': 'hue-rotate( ' + scalingPoint.value / 100 * 360 + 'deg)'}">
    <img id="41c068cc-95b7-40c0-a823-82f158e8d976" style="position: absolute; left: 0px; top: 235.68px; width: 104px; height: 100px;" src="/rest/v2/file-stores/default/gears-icon-png-11.png" width="200" ng-style="{'animation-duration': 30 / (scalingPoint.value - scalingPoint.value % 10) + 's'}" class="my-spin-clockwise">
    <img id="dfdc1517-1d4b-482a-ad1d-0758fc8b8075" style="position: absolute; left: 267px; top: 100px; width: 104px; height: 100px;" src="/rest/v2/file-stores/default/birthday.png" width="200" ng-style="{'filter': 'saturate(' + scalingPoint.value / 50 + ')'}">
    <img id="848404d7-0b50-4dbb-b887-9eb85d3b06e0" style="position: absolute; left: 407px; top: 100px; width: 104px; height: 100px;" src="/rest/v2/file-stores/default/birthday.png" width="200" ng-style="{'filter': 'sepia(' + scalingPoint.value / 100 + ')'}">
    <img id="640492b7-ee6e-46e2-a363-5c1d0cb81008" style="position: absolute; left: 537px; top: 100px; width: 104px; height: 100px;" src="/rest/v2/file-stores/default/birthday.png" width="200" ng-style="{'filter': 'blur(' + scalingPoint.value / 20 + 'px)'}">
</div>
<style>
.my-spin-clockwise {
transform-origin: 50% 50%;
animation: spin-clockwise 0s linear infinite;
}
</style>

Virtual Data Point (Scales from 0 to 100 and back)

{
   "dataPoints":[
      {
         "xid":"demo-scale-to-100",
         "name":"ScaleTo100",
         "enabled":true,
         "loggingType":"INTERVAL",
         "intervalLoggingPeriodType":"MINUTES",
         "intervalLoggingType":"AVERAGE",
         "purgeType":"YEARS",
         "pointLocator":{
            "dataType":"NUMERIC",
            "changeType":{
               "type":"INCREMENT_ANALOG",
               "change":10.0,
               "max":100.0,
               "min":0.0,
               "roll":false,
               "startValue":"0"
            },
            "settable":false
         },
         "eventDetectors":[
         ],
         "plotType":"SPLINE",
         "rollup":"NONE",
         "unit":"",
         "templateXid":"Numeric_Default",
         "chartColour":"",
         "chartRenderer":{
            "type":"IMAGE",
            "timePeriodType":"DAYS",
            "numberOfPeriods":1
         },
         "dataSourceXid":"Demmy-DS",
         "defaultCacheSize":1,
         "deviceName":"Demmy-Virtual",
         "discardExtremeValues":false,
         "discardHighLimit":1.7976931348623157E308,
         "discardLowLimit":-1.7976931348623157E308,
         "intervalLoggingPeriod":1,
         "intervalLoggingSampleWindowSize":0,
         "overrideIntervalLoggingSamples":false,
         "preventSetExtremeValues":false,
         "purgeOverride":false,
         "purgePeriod":1,
         "readPermission":"",
         "setExtremeHighLimit":1.7976931348623157E308,
         "setExtremeLowLimit":-1.7976931348623157E308,
         "setPermission":"",
         "textRenderer":{
            "type":"ANALOG",
            "useUnitAsSuffix":true,
            "unit":"",
            "renderedUnit":"",
            "format":"0.00"
         },
         "tolerance":0.0
      }
   ]
}