I also had a play with creating a full wind rose in a SVG, posted below if anyone wants it. What it looks like

<style>
    g.grid circle {
        fill: transparent;
        stroke: grey;
        stroke-width: 1px;
        stroke-dasharray:10,10;
        stroke-opacity: 0.5;
    }

    g.direction-cones circle {
        clip-path: url(#cone);
        transform: scale(0);
    }
    
    g.direction-cones circle.scale-1 {
        fill: darkblue;
    }
    
    g.direction-cones circle.scale-2 {
        fill: darkgreen;
    }
    
    g.direction-cones circle.scale-3 {
        fill: green;
    }
    
    g.direction-lines line {
        stroke: grey;
        stroke-width: 1px;
    }
    
    g.direction-text text {
        fill: white;
        text-anchor: middle;
        alignment-baseline: middle;
        font-size: 16px;
    }
    
    #center {
        fill: white;
    }
    
    #north circle.scale-1 {
        transform: scale(0.2);
    }
    #north circle.scale-2 {
        transform: scale(0.7);
    }
    #north circle.scale-3 {
        transform: scale(0.80);
    }
    
    #north-east circle.scale-1 {
        transform: scale(0.25);
    }
    #north-east circle.scale-2 {
        transform: scale(0.5);
    }
    #north-east circle.scale-3 {
        transform: scale(0.70);
    }
    
    #east circle.scale-1 {
        transform: scale(0.5);
    }
    #east circle.scale-2 {
        transform: scale(0.7);
    }
    #east circle.scale-3 {
        transform: scale(0.75);
    }

</style>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-120 -120 240 240" width="400" height="400">

    <g class="grid">
        <circle r="100" />
        <circle r="75" />
        <circle r="50" />
        <circle r="25" />
    </g>
    
    <g class="direction-lines">
        <line x1="0" y1="0" x2="100" y2="0" transform="rotate(0)" />
        <line x1="0" y1="0" x2="100" y2="0" transform="rotate(90)" />
        <line x1="0" y1="0" x2="100" y2="0" transform="rotate(180)" />
        <line x1="0" y1="0" x2="100" y2="0" transform="rotate(270)" />
    </g>
    
    <g class="direction-text">
        <text transform="translate(0,-110)">N</text>
        <text transform="translate(110,0)">E</text>
        <text transform="translate(0,110)">S</text>
        <text transform="translate(-110,0)">W</text>
    </g>

    <clipPath id="cone" clip-path="url(#cone-end)">
        <rect width="100" height="100" transform="rotate(-15)"></rect>
    </clipPath>
    
    <clipPath id="cone-end">
        <rect width="100" height="100" transform="rotate(-75)"></rect>
    </clipPath>
    
    <g class="direction-cones" transform="rotate(-90)">
        <g id="north" transform="rotate(0)">
            <circle class="scale-3" r="100" />
            <circle class="scale-2" r="100" />
            <circle class="scale-1" r="100" />
        </g>
        <g id="north-east" transform="rotate(45)">
            <circle class="scale-3" r="100" />
            <circle class="scale-2" r="100" />
            <circle class="scale-1" r="100" />
        </g>
        <g id="east" transform="rotate(90)">
            <circle class="scale-3" r="100" />
            <circle class="scale-2" r="100" />
            <circle class="scale-1" r="100" />
        </g>
        <g id="south-east" transform="rotate(135)">
            <circle class="scale-3" r="100" />
            <circle class="scale-2" r="100" />
            <circle class="scale-1" r="100" />
        </g>
        <g id="south" transform="rotate(180)">
            <circle class="scale-3" r="100" />
            <circle class="scale-2" r="100" />
            <circle class="scale-1" r="100" />
        </g>
        <g id="south-west" transform="rotate(225)">
            <circle class="scale-3" r="100" />
            <circle class="scale-2" r="100" />
            <circle class="scale-1" r="100" />
        </g>
        <g id="west" transform="rotate(270)">
            <circle class="scale-3" r="100" />
            <circle class="scale-2" r="100" />
            <circle class="scale-1" r="100" />
        </g>
        <g id="north-west" transform="rotate(315)">
            <circle class="scale-3" r="100" />
            <circle class="scale-2" r="100" />
            <circle class="scale-1" r="100" />
        </g>
    </g>

    <circle id="center" r="5" />
</svg>

@georgestefan Its absolutely possible. You can just put your formula into a ng-bind attribute

e.g.

 <div id="13688a40-881d-4956-b42a-14362bbe73ef" style="position: absolute; left: 480px; top: 142px;" ng-bind="(CHW_Flow * (CHW_Return_Temp - CHW_Supply_Temp)*1.8)/24"></div>

However I assume those are actually point values in which case it will probably be more like

 <div id="13688a40-881d-4956-b42a-14362bbe73ef" style="position: absolute; left: 480px; top: 142px;" ng-bind="(flowPoint.value * (returnTempPoint.value - supplyTempPoint.value)*1.8)/24"></div>

You can also wrap expressions with curly braces {{ }}

<div>
{{ (flowPoint.value * (returnTempPoint.value - supplyTempPoint.value)*1.8)/24 }}
</div>

@mattfox said in Filter Datapoint List Output:

Yeah I can relate there. I group by deviceName personally. Perhaps a format option?
point-list-format="dname - name - tag"
or somethign to that effect. that way we can choose what to show. maybe even a callback function we can add to it so we can format the output ourselves...

Yeah definitely will still be an option to format the labels via an attribute. I was talking more about adding a default setting for point lists which are on built in pages.

@mattfox said in Filter Datapoint List Output:

Selfish request here, but would you be willing to share the source so i can manually format it to my liking and create a separate directive?

The source is all on Github -

https://github.com/infiniteautomation/ma-dashboards/blob/main/UI/web-src/ngMango/directives/filteringPointList.js
https://github.com/infiniteautomation/ma-dashboards/blob/main/UI/web-src/ngMango/directives/filteringPointList.html

For anyone reading this thread, if you use Mango v3.3 you can now generate JWT authentication tokens from the users page on the new UI and use these to authenticate instead of logging in from your script.

You do not need to use any CSRF/XSRF protection cookies/headers when using JWT authentication.

Just set the one header on every request -
Authorization: Bearer <token>

Can you open the console in Chrome and tell me if anything is in there?

Hey @dcaron
The dashboards do indeed operate a little differently now and we need to update the tutorials.

The adminTemplate now has the HTML 5 mode URLs enabled in app.js (i.e. no /#/... urls). You should set the base url in index.html to
<base href="/user-dashboards/custom1/"> and access your dashboards using /user-dashboards/custom1/home or /user-dashboards/custom1/visualizations/charts

If you want you can disable the HTML 5 mode URLs by setting $locationProvider.html5Mode(false); in app.js, you would then set <base href="/modules/dashboards/web/custom1/"> in index.html and your URLs would look like /modules/dashboards/web/custom1/#/home and /modules/dashboards/web/custom1/#/visualizations/charts

I'd highly recommend the first option, it gives much shorter nicer URLs.

For anyone that finds this thread, you can create a dialog window in Mango 3.6 very easily -

<ma-button label="Show dialog" ng-click="showDialog = {}"></ma-button>

<ma-dialog show-dialog="showDialog">
    <div>This is the dialog content</div>
</ma-dialog>

For anyone else playing for this, its worth noting that if you give a series-x-point attribute it will set the color, type and title according to the point's plot color, plot type and point name respectively. These can be changed on the data point edit page in Mango.

@petermcs There is a component in Mango 3.6 to display heat maps like this (they rendered as a SVG in Mango)
It is also customizable (color scale, legend position, number of weeks etc)

@jefero
Have a look at the API documentation for ma-point-values you can pass in a point's XID as an attribute.

It was actually a design decision not to include a "Select all" checkbox on the watch list page. We decided that trying to plot a large number of data points was simply not feasible.

The BACnet module should definitely have a "Select all" feature / Shift-Click feature though. I will open an issue.

edit. In fact @phildunlap already created one - https://github.com/infiniteautomation/ma-modules-private/issues/100

Thanks for helping out Thomas.

Here's a snippet which should help you both out, it uses two select components to choose two levels from the point hierarchy then gets the array of points which you can use for a serial chart for example.

<ma-point-hierarchy path="[]" hierarchy="rootFolder"></ma-point-hierarchy>
<md-select ng-model="subfolder">
    <md-option ng-value="sf1" ng-repeat="sf1 in rootFolder.subfolders">{{sf1.name}}</md-option>
</md-select>
<md-select ng-model="points">
    <md-option ng-value="sf2.points" ng-repeat="sf2 in subfolder.subfolders">{{sf2.name}}</md-option>
</md-select>

<pre>{{points|json}}</pre>

@till try this -

for (var variableName in CONTEXT_POINTS) {
    print(this[variableName]);
}

Hi @gary

Assuming you are using Mango v3, you can register a user AngularJS module from the UI settings page /ui/administration/ui-settings (its at the bottom)

If you click the paper clip icon you can upload a JS file

Heres a sample user module JS file

define(['angular', 'require'], function(angular, require) {
'use strict';

var userModule = angular.module('userModule', ['maUiApp'])
.directive('userHello', [function() {
    return {
        template: 'Hello, url is ' + require.toUrl('.') + ' {{$ctrl.testText}}',
        controller: angular.noop,
        controllerAs: '$ctrl',
        bindToController: {
        	testText: '@'
        }
    }
}]);

return userModule;

}); // define

@silvia thanks fixed for next release. I think we will also have to try and compile each element individually and catch the errors in the future so this sort of scenario doesn't repeat itself.

The paths that I posted were URLs, I have edited the post to show the override paths. If you override all the paths listed above you will not have a problem, just be sure to clear your cache. Sometimes browsers will hang onto the icons even after you clear your cache.

You can also override the following files if desired to change the locations, sizes etc of the images. I would strongly not recommend overriding index.html though because if we make changes to this in the codebase you will not get the updates and it will also affect the caching of resources (Each resource linked to from the index.html file has a hash appended which changes when the file is modified).

$MA_HOME/overrides/web/modules/mangoUI/web/ui/manifest.json
$MA_HOME/overrides/web/modules/mangoUI/web/ui/index.html

When you update your dashboards module to the latest version you should also upgrade your custom dashboard in order to use the latest functionality. Each template references a particular version of the dashboards module code, you can see this at the start of the app.js file.

In order to update your dashboard you should copy any files which you have not changed from the latest version of the template into your dashboard folder in the overrides folder. Then compare the differences and make changes to the files which you have modified (typically app.js where you have added your custom menu items to the adminTemplate).

For the adminTemplate, typically you should copy and overwrite the index.html file, the directives folder, views/login.html, views/dashboard/main.html and views/dashboard/errors.html. Make sure you update the two references to adminTemplate in index.html to the name of your dashboard folder you created in overrides.

You will need to manually update your app.js and re-insert your menu items. Typically this will be the easiest way as the only thing you will have changed is the menu-items. Here is a diff file showing the differences in app.js which may help you to upgrade - https://gist.github.com/jazdw/8a28f156fa3a39d1712b929be8866248

Note
The dashboards v3.2 module has functionality to create custom pages and add them to the menu structure directly from the web interface, you may wish to just copy the content of your .html file pages into a custom page. This will avoid the need to manipulate files in the future but will not be a suitable option for people who need advanced pages with their own JavaScript.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I'd appreciate any thoughts, as this is starting to drive me slightly insane!

Haha I know the feeling.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I'm not using the UI module, I'm creating my dashboard through the 'Edit pages', as it offers much more flexibility than through the dashboard designer.

No problems there, the dashboard designer makes it easy to edit attributes and lay things out but markup is more powerful for sure. We had an old module called dashboards prior to v3,x which was replaced by the mangoUI module in v3.x I just wanted to make sure that you weren't using the old module. It sounds like you are using the mangoUI module, so all good.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I've tried the same sort of structure:

So that syntax, where the expression evaluates to an object is specific to the ngClass directive. The ngBind directive's expression should evaluate to a string.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I've also tried ternary operators:

Ternary operators should work, the only issue I can see with this is that there is a curly brace at the start of the expression.

Your code should look like

<ma-svg>
    <div ma-selector="#meterState001 tspan" ng-bind="plug1.value ? (switch1.value ? 'Charging' : 'Plugged In') : (switch1.value ? 'Error' : 'Empty')"></div>
</ma-svg>

@silvia said in Change colour depending on two variables (SVG custom dashboard):

But it only reads the last ng-if and it ignores the others.

Yep, it will read each in order and replace the ng-if attribute on the svg element.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I've also tried ng-switch:

Yep, this also wont work. The ma-switch directive expects a list of elements with ma-selector attributes.

Hey Matt,

Took me a while to figure this out but we have synchronizeGrid turned on in the AmCharts options. Its documented here https://www.amcharts.com/demos/multiple-value-axes/

Try changing your options to
options="{synchronizeGrid: false, valueAxes:[{ minimum:0, maximum:100,title:'Feed Level (%)'}]}"

Note that there are various other ValueAxis options that may affect the minimum and maximum. So take a look at https://docs.amcharts.com/3/javascriptcharts/ValueAxis if you have any issues.

Jared

Hey @atkins-chrisw
Add this to your app.js -

mdAdminApp.directive('getJson', ['$http', function($http) {
    return {
        scope: {
            url: '@',
            output: '='
        },
        link: function($scope, $element, $attrs) {
            $http({
                method: 'GET',
                url: $scope.url
            }).then(function(result) {
                $scope.output = result.data;
            });
        }
    }
}]);

You can then use something like this on your page -

<get-json url="/modules/dashboards/web/mdAdmin/manifest.json" output="myData"></get-json>
<pre ng-bind="myData|json"></pre>