• Jared Wiltshire

    OK, use /rest/v2/full-event-detectors instead, this API is newer and allows you to link handlers to the event detector in one hit (set the handlerXids property to an array of handler XIDs, if it is null it will not update the linked handlers).

    Now onto your main question, you will have to link the event detector to the data point id. You set the sourceId property to the data point's id. I know this is weird, it really shouldn't be like this as everything else uses xids, I will try and get this changed.

    The JSON to POST to the endpoint will look like

        "detectorType" : "MULTISTATE_STATE",
        "sourceId" : 995,
        "rtnApplicable" : true,
        "alarmLevel" : "CRITICAL",
        "sourceTypeName" : "DATA_POINT",
        "handlerXids" : [ ],
        "duration" : {
          "periods" : 5,
          "type" : "MINUTES"
        "state" : 5,
        "detectorType" : "MULTISTATE_STATE",
        "name" : "PCS3 Has Faulted"

    posted in User help read more
  • Jared Wiltshire

    @fleh said in Bug with amcharts(?): Preview works but page view does not:

    I actually wanted to emphasize how much I appreciate your forum support. Many help pages are really good and the coverage with video tutorials is excellent to get an overview.


    @fleh said in Bug with amcharts(?): Preview works but page view does not:

    I spent quite a bit of time on issues already which where incomplete or missed critical info. For example, the help pages for egauge, egauge datapoint, Environment Canada Data Point, ""Environment Canada"", M Bus, and M Bus datapoint simply went AWOL..

    I will check up on those. I am not sure that the Environment Canada DS is still supported, it is a very niche data source that can easily be replaced with a HTTP data source.

    @fleh said in Bug with amcharts(?): Preview works but page view does not:

    Thanks for the user module @Jared-Wiltshire! It does not work when copying it into a new page for me, but I'll go through it line-by-line to see what its purpose is. Have a nice weekend, y'all!

    It doesn't go directly into the page markup, you save it into a .js file and reference it from UI Settings -

    Basically it defines a new component, then you use the component inside your page. e.g.

    <my-chart point-values="pointvalues"></my-chart>

    posted in Mango feedback read more
  • Jared Wiltshire

    @chio You could also use your favorite scripting language to create the event detectors via the REST API.

    posted in User help read more
  • Jared Wiltshire

    @chio This is one area which is lacking at the moment, we have been discussing this recently in fact. We will probably be adding the ability to import / export the event detectors via CSV soon.

    In the meantime, the easiest way to bulk edit them would be to use the JSON import/export (Under Administration - Home - Configuration import/export). Use a script or tool to modify the JSON and re-import.

    posted in User help read more
  • Jared Wiltshire

    @MattFox Here's how you can do it, the key is sending a full point value time model to point.setValue()

    <div class="ma-designer-root" id="dd72786c-80c5-48c0-ab41-4dd3dd8eca33" style="width: 1366px; height: 768px; position: relative;" ng-init="page = {value: 1, time: ('' | maMoment:'toISOString'), annotation: 'my annotation'}">
        <ma-point-values id="c10062eb-a6f8-4cc3-a29a-2686b1b50a55" style="position: absolute; left: 451px; top: 61px;" point="page.point" values="page.values" realtime="true" latest="10"></ma-point-values>
        <div id="1c9d9a45-d671-4c49-ba87-4a67dee03a58" style="position: absolute; left: 346px; top: 112px; width: 336px; height: 267px;">
            <div ng-repeat="pv in page.values | orderBy:'-timestamp' track by pv.timestamp">
                {{pv.timestamp | maMoment:'format':'l LTS'}} — {{pv.value}} — {{pv.annotation}}
        <ma-get-point-value id="61982987-65b8-4bd6-a36d-ddf6bce7d3ed" style="position: absolute; left: 38px; top: 35px;" point-xid="voltage" point="page.point"></ma-get-point-value>
        <ma-button id="2dffc568-97be-47b8-9978-3070d299acb5" raised="true" style="position: absolute; left: 56px; top: 297px;" label="Set point value" ng-click="page.point.setValue({value: page.value, timestamp: (page.time | maMoment:'valueOf'), dataType: page.point.dataType, annotation: page.annotation})"></ma-button>
        <md-input-container id="d1ea909d-f17d-476d-bdfd-d53129976f00" style="position: absolute; left: 30px; top: 96px;">
            <input type="number" ng-model="page.value">
        <md-input-container id="f464df07-7044-43e9-9d47-428546d13b42" style="position: absolute; left: 30px; top: 156px;">
            <input ng-model="page.time">
        <md-input-container id="f2489a90-6239-4c0a-a1b5-3b6e756340c5" style="position: absolute; left: 31px; top: 215px;">
            <input ng-model="page.annotation">

    posted in User help read more
  • Jared Wiltshire

    There is no existing component to do this, however I am sure the REST API supports it. I'll take a look how you could accomplish this.

    posted in User help read more
  • Jared Wiltshire

    @jf89 said in Adaptive layout of examples -- Red scratches on objects:

    When I try to import a layout from example , nothing appears , in the window code editor.

    It appears to be broken, I will fix that for the next release. In the meantime you can copy and paste the markup from here

    @jf89 said in Adaptive layout of examples -- Red scratches on objects:

    But now I suppose I have to fill any of the 3 windows with html , css, javascript , and perhaps Angular.
    I don’t ask you to give me an example , but I would like to know where I can learn myself ?
    What is the best way to do myself a complete flex page with side bar and one or two windows ?

    There are examples galore in the examples menu and in this forum. There are also resources all over the internet for HTML, CSS, JavaScript and AngularJS. These are open technologies and as I have tried to explain to you before, you will not be wasting your time learning them.

    @jf89 said in Adaptive layout of examples -- Red scratches on objects:

    Even with tutorials , If I have to learn html, css , javascript and Angular , it will be too much difficult for me.
    I’m just a PLC programmer , and just know a little bit html , css , and c programms.

    Perhaps Mango is not for you then. We provide you with the tools, examples, help files, API docs, forum support. In the end though it is up to you to learn how to use these tools and information. We cannot do everything for you.

    We provide the Dashboard Designer tool to try and make placing and positioning elements as easy as possible. If you instead want to create a custom flex layout then you will have to expend a little effort.

    @jf89 said in Adaptive layout of examples -- Red scratches on objects:

    It was the same scratches that I had this morning with several pages .
    And it disappeared.
    As told Phil , it’s perhaps a problem of communication I had with the data of my PLC.
    So , now every thing is ok , so I think it's just a short problem of communication .
    the next time , i will check the datapoint values.
    Perhaps Phil wil confirm , when seeing my screenshot.

    The red hatch pattern will show up if the data point or its data source is disabled or if the data points is "unreliable".

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

    As promised, here's a d3 chart using a user module. It doesn't do much useful, but it shows how to do the basics -

    define(['angular', 'require', 'd3'], function(angular, require, d3) {
        'use strict';
        const userModule = angular.module('userModule', ['maUiApp']);
        class ChartController {
            static get $$ngIsClass() { return true; };
            static get $inject() { return ['$element']; };
            constructor($element) {
                this.$element = $element;
            $onChanges(changes) {
                if (changes.pointValues) {
            updateSvg() {
                const svg = d3.select(this.$element[0]).select('svg');
                // bind our point values to circle elements, using the timestamp property
                const circles = svg.selectAll('circle')
                    .data(this.pointValues || [], pv => pv.timestamp);
                // remove circles which no longer exist in the point values array
                // add new circles for new point values
                const newCircles = circles.enter()
                        .attr('fill', 'red');
                // modify existing and new circles according to the point values
                    .attr('cx', pv => pv.timestamp / 1000 % 600)
                    .attr('cy', pv => pv.timestamp % 600)
                    .attr('r', pv => pv.value * 5)
        userModule.component('myChart', {
            controller: ChartController,
            template: '<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600"></svg>',
            bindings: {
                pointValues: '<?'
        return userModule;
    }); // define

    posted in Mango feedback read more
  • Jared Wiltshire

    @fleh said in Bug with amcharts(?): Preview works but page view does not:

    Thanks a lot for your swift and clarifying reply, @Jared-Wiltshire! It still surprises me how great your level of support is and how much the documentation lacks.

    Yep, I agree the documentation is lacking. It is an area we are working to improve.

    @fleh said in Bug with amcharts(?): Preview works but page view does not:

    watched the video from here and read the documentation on this page and it does not say anywhere that only AmCharts v3 is supported. :-/

    It was written before AmCharts v4 was released. I'll update the article to make this clear.

    @fleh said in Bug with amcharts(?): Preview works but page view does not:

    Angular is still intimidating for me, unfortunately. I think I'll give D3.js a go first before scripting stuff with an EOL library. Are there known gotcha's that a user starting out this route should know about?

    I'll give you a quick example.

    I would recommend looking at the heat map component as this is currently our only component that uses d3 - https://github.com/infiniteautomation/ma-dashboards/tree/main/UI/web-src/ngMango/components/heatMap

    You should not use the import/export syntax within a user module, Use the AMD require() syntax instead (as per the example I will post shortly).

    posted in Mango feedback read more
  • Jared Wiltshire

    @mattfox said in Bug with amcharts(?): Preview works but page view does not:

    I wouldn't got that far, it is in LTS mode now. It's stable and solid and the angularJS blog clearly states:

    He was referring to AmCharts I believe, not AngularJS.

    posted in Mango feedback read more