Styling With Data

June 11th, 2020


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
      }
   ]
}

Copyright © 2020 Radix IoT, LLC.