• Jared Wiltshire

    Ok got it, here's a simple example, it doesn't handle day light savings or have any scales but its a start. We might be able to add this as a component.

    <div class="ma-designer-root" id="bee6bb2e-5cc4-4204-b710-5355b319c849" style="width: 1600px; height: 800px; position: relative;">
        <ma-now output="date.now" update-interval="1 days" on-change="date.to = ($value | maMoment:'startOf':'day'); date.from = (date.to | maMoment:'subtract':10:'weeks'); "></ma-now>
        <ma-point-values from="date.from" to="date.to" rollup="AVERAGE" rollup-interval="30 minutes" point-xid="temperature" values="pointValues"></ma-point-values>
    
        <ma-fn fn="toColor" expression="'hsl(' + Math.floor(240 - arg0 * 240) +',100%,50%)'"></ma-fn>
    
        <div id="3c622df6-d9cb-4cf5-ba95-3b08cabd0368" style="position: absolute; left: 0px; top: 0px; width: 1400px; height: 480px;" layout="column" layout-wrap="">
            <div ng-repeat="pv in pointValues track by pv.timestamp" style="width: calc(100% / 70); height: calc(100% / 48)" ng-style="{'background-color': toColor(pv.value / 100)}"></div>
        </div>
        
        <div id="0393e351-a6b5-42e4-8f3a-a3c96c4db0ae" style="position: absolute; left: 1494px; top: 124px; width: 20px; height: 220px;" layout="column">
            <div ng-repeat="v in [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0] track by $index" style="height: calc(100% / 11); width: 100%" ng-style="{'background-color': toColor(v)}"></div>
        </div>
    </div>
    

    The data point I used is not very interesting but here's a screen shot, you can see an hour is missing due to DST
    0_1555699452579_dc1d8ce0-1ac4-4c33-841a-c5f1a046c1b6-image.png

    posted in Mango Automation general Discussion read more
  • Jared Wiltshire

    @Christophe Use the "Bulk data point editor" under the administration menu. Select hierarchy folders using the left panel then apply a tag to them using the right panel.

    • Click this icon 0_1555689095312_1837d971-3c6e-454d-a6fe-6c53678a5c5b-image.png
    • Enter a tag name
    • Type the tag value in the column header
    • Select all the data points in the table by clicking the top checkbox
    • Click "Start bulk edit"

    Note this process will change a little in the upcoming 3.6 release.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • Jared Wiltshire

    @richard-mortimer its not valid to put text directly inside a <tr> as in your first example. That's probably why you were seeing strange behavior. Its also possible that the browser doesn't like custom elements (<ma-*>) there either. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr under "Permitted content"

    posted in Scripting general Discussion read more
  • Jared Wiltshire

    Setting display-type="converted" will make it display the raw numeric value as you discovered. You want to use the rendered value which is controlled by the data point's text renderer. When you have the analog text renderer selected and "Use unit symbol as suffix" is set it inserts a space between the number and the unit symbol. If you want to get rid of this space, uncheck "Use unit symbol as suffix" and set the suffix manually.

    posted in Scripting general Discussion read more
  • Jared Wiltshire

    @petermcs If you give us a clearer description of what you are after we might be able to give you better guidance. Please link to an example image or website that is similar to what you are looking for.

    posted in Mango Automation general Discussion read more
  • Jared Wiltshire

    @Christophe It wont work with the "Point hierarchy" parameter type. I suggest using a tag instead. Also I think the parameter names are case sensitive, so DN != dn

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • Jared Wiltshire

    @richard-mortimer said in Styling amCharts:

    options="{categoryAxis:[{labelsEnabled:false,gridAlpha:'0',axisAlpha:'0'}]}"

    Your 0 are surrounded by single quotes which means they are strings, you want numbers not strings. See @CraigWeb 's example.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • Jared Wiltshire

    @richard-mortimer said in Changing class based on data point value:

    So these values warnBattery and badBattery can be set page wide - the next challenge is reading some of these 'trigger' values from the MangoES devices for things like fuel tank levels - as some of our devices are geographically dispersed and have differing levels of alerts.

    I would suggest looking into the JSON store to store the warning levels / limits. You could store these per site ID and create a simple configuration page to set the limits for each site.

    posted in Scripting general Discussion read more
  • Jared Wiltshire

    @richard-mortimer said in Styling amCharts:

    Specifically I'm trying to get rid of the X-axis on the trend line graphic below:

    Do you want to hide the whole axis or just the labels?

    @richard-mortimer said in Styling amCharts:

    Also I'd like to make the background canvas slightly smaller,

    What do you mean the "background canvas"? Do you mean changing the size of the whole chart?

    @richard-mortimer said in Styling amCharts:

    is there any documentation on the styles/style names used by amCharts (I couldn't see anything documented on their site).

    Use the chrome debugger to inspect the AmCharts SVG elements and see their classes. This is by far the easiest way IMO, but there is also https://www.amcharts.com/docs/v3/tutorials/css-class-names/

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • Jared Wiltshire

    @richard-mortimer said in Changing class based on data point value:

    Is there any way to paramatize the break points? Is that where I use the ng-init command?

    I'm sorry, I dont understand what you mean. I'll need some more details about what you are trying to achieve.

    posted in Scripting general Discussion read more
  • Jared Wiltshire

    @richard-mortimer said in Making your custom / dashboard designer page full screen (no toolbar or menu):

    @jared-wiltshire Will this also remove the footer? (or, is there a way to do this?)

    Thanks

    Richard

    Footer is not shown in full screen view.

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • Jared Wiltshire

    Side note, you shouldn't need two classes. Add a class to the table to make life easier e.g.

    table.my-table td {
      color: green;
    }
    table.my-table td.bad {
      color: red;
    }
    

    posted in Scripting general Discussion read more
  • Jared Wiltshire

    OK got you. Here's a meta data source you can import and use, you will have to change the dataPointXid of the context point to an actual point in your system. Script formatted below -

    {
      "dataSources":[
        {
          "xid":"DS_464401cf-d4f5-42e4-abb3-5cf0e7b43c99",
          "name":"UDP test",
          "enabled":true,
          "type":"META",
          "alarmLevels":{
            "SCRIPT_ERROR":"URGENT",
            "CONTEXT_POINT_DISABLED":"URGENT",
            "RESULT_TYPE_ERROR":"URGENT"
          },
          "purgeType":"YEARS",
          "editPermission":"",
          "purgeOverride":false,
          "purgePeriod":1
        }
      ],
      "dataPoints":[
        {
          "xid":"DP_02608a5a-1785-41b5-bc57-231b6823d810",
          "name":"UDP string sender",
          "enabled":true,
          "loggingType":"ON_CHANGE",
          "intervalLoggingPeriodType":"MINUTES",
          "intervalLoggingType":"INSTANT",
          "purgeType":"YEARS",
          "pointLocator":{
            "dataType":"ALPHANUMERIC",
            "updateEvent":"NONE",
            "contextUpdateEvent":"CONTEXT_UPDATE",
            "context":[
              {
                "varName":"input",
                "dataPointXid":"DP_d7f134b2-3940-4cc1-b9b3-2cf153342078",
                "updateContext":true
              }
            ],
            "logLevel":"NONE",
            "variableName":"point",
            "scriptPermissions":"superadmin",
            "executionDelaySeconds":0,
            "logCount":5,
            "logSize":1.0,
            "script":"var value = input.value;\nif (value == null) {\n    return value;\n}\n\nvar socket = new java.net.DatagramSocket();\ntry {\n    var address = java.net.InetAddress.getByName(\"10.55.55.10\");\n    var port = 1241;\n    \n    var valueBytes = value.getBytes(java.nio.charset.StandardCharsets.UTF_8);\n    var packet = new java.net.DatagramPacket(valueBytes, valueBytes.length, address, port);\n    \n    socket.send(packet);\n} finally {\n    socket.close();\n}\n\nreturn value;",
            "settable":false,
            "updateCronPattern":""
          },
          "eventDetectors":[
          ],
          "plotType":"STEP",
          "rollup":"NONE",
          "unit":"",
          "simplifyType":"NONE",
          "chartColour":"",
          "chartRenderer":{
            "type":"TABLE",
            "limit":10
          },
          "dataSourceXid":"DS_464401cf-d4f5-42e4-abb3-5cf0e7b43c99",
          "defaultCacheSize":1,
          "deviceName":"UDP sender",
          "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":"",
          "tags":{
          },
          "textRenderer":{
            "type":"PLAIN",
            "useUnitAsSuffix":false,
            "suffix":""
          },
          "tolerance":0.0
        }
      ]
    }
    

    Actual script

    var value = input.value;
    if (value == null) {
        return value;
    }
    
    var socket = new java.net.DatagramSocket();
    try {
        var address = java.net.InetAddress.getByName("10.55.55.10");
        var port = 1241;
        
        var valueBytes = value.getBytes(java.nio.charset.StandardCharsets.UTF_8);
        var packet = new java.net.DatagramPacket(valueBytes, valueBytes.length, address, port);
        
        socket.send(packet);
    } finally {
        socket.close();
    }
    
    return value;
    

    posted in Development general discussion read more
  • Jared Wiltshire

    @cuihe said in is there have UDP in publisher?:

    I want to use UDP to send data out.

    Why? Presumably there is a service that you are trying to interact with? We need more information than just 'UDP'.

    posted in Development general discussion read more
  • Jared Wiltshire

    • ma-selector="#ahufan" - this is a different ID to the one that was in the SVG that you sent me
    • points="vfd" this is wrong, it should be point="vfd"

    posted in Mango Automation general Discussion read more
  • Jared Wiltshire

    @James Thanks for sending the SVG. You need a transform origin like this - style="transform-origin: 190.5216px 113.70395px", that is the x attribute + half the width, and the y attribute + half the height.

    Full example using your image -

    <div class="ma-designer-root" id="a0146b73-5624-4797-8227-a61cdbfe640f" style="width: 1366px; height: 768px; position: relative;">
        <ma-svg id="949e7957-38dc-43b9-932c-97eadd759da3" style="position: absolute; left: 0px; top: 0px;" ng-include="'/rest/v2/file-stores/public/case.svg'">
            <div ma-selector="#fan" ng-class="{'ma-spin-clockwise': vfd.value > 0}" style="transform-origin: 190.5216px 113.70395px" ng-style="{'animation-duration': 50 / (vfd.value - vfd.value % 10) + 's'}"></div>
        </ma-svg>
        <md-slider id="1d33a668-f519-4292-9c17-fe3a8aba4644" style="position: absolute; left: 560px; top: 50px;" ng-model="vfd.value" ng-init="vfd.value = 50"></md-slider>
        <div id="0400c32f-f356-4099-9bf3-d0c735df0b4f" style="position: absolute; left: 603px; top: 98px;" ng-bind="vfd.value | number:1"></div>
    </div>
    

    posted in Mango Automation general Discussion read more
  • Jared Wiltshire

    @james said in Rotating Fan:

    Hello, finally I got it worked but any method to make it rotate from its center

    See Craig's response above, you need a transform-origin.
    Please post your SVG as requested if you need help with this.

    posted in Mango Automation general Discussion read more