Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Hi Dave, I understand your need for the list of directives. It is definitely something that is on our agenda. In the meantime the examples are a pretty comprehensive resource if you read through them.

There is no need to use AmCharts for what I was suggesting, I was suggesting to use something like the vertical bar from the "bar display" example. The example just couples plain HTML elements with CSS styling. Take a look at the style sheet which is linked to from the example to see where the border radius is used. I was thinking you could set the border radius to a larger value to give it more of a tank like appearance (make it wider too).

CSS is a web standard used for styling elements on web pages - see here https://developer.mozilla.org/en-US/docs/Web/CSS
Or more specifically for the border radius property - https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

We do intend on making it easier for laymen to create and manipulate dashboards, unfortunately at the moment if you need to create customized components you will require some web development knowledge.

Perfect Woody. With a little bit of work to make some minor changes it does what I need and I can leave the original there too.

Thanks.

I think I got it to work. I won't know until the data starts to come in again. Needed the dual curly brackets :)

<img ng-src="{{(currentTime - mywatchdog.time) > 300000 ? 'img/ligthbulb_off.png' : 'img/ligthbulb_on.png'}}">

You could do that a few ways.

Use the username or users group in the RQL query for the data points.

Do an RQL query to get a list of unique Device Names the users has permissions for and then use those in the drop down. It would default to the first one but if they had permissions for more then one they could still use a selector.

Put all the data points in a point hierarchy folder that matches the username and use the username in a point hierarchy query.

There are probably more ways but I think this should give you some ideas. This is probably something we could put some examples together on in the coming weeks.

Ok so I'm going to assume you got that working then?

The reason those images are not found are those src paths are relative to the custom dashboard that is using page1.html while the the image actually exists in the /mdAdmin folder that contains the dashboard docs pages.

So you would need to jump up one folder from your custom dashboard then into /mdAdmin to find those images. This worked for me:

<ma-switch-img point="motor1" ng-click="motor1.toggleValue()" src-false="../mdAdmin/img/ligthbulb_off.png" src-true="../mdAdmin/img/ligthbulb_on.png" default-src="../mdAdmin/img/close.png">

@JoelHaggar Thanks Joel, I did that, but I have 2 different dashboards, so I would like to go to the login page of the dashboard which I am leaving.

Hi tomi, looking at this now. We'll get it fixed ASAP.

Hi Amir,

What you have looks right. Can you try and locate app.js under the sources tab in the developer console and check it matches what you entered in your developer console.

Jared

Thanks Woody. I did have a look at templating but that doesn't address my current issue exactly. I am using those methods for pulling across data from datasources and its working well.

Thanks Will for your response. I will spend some time looking into your suggestion and get back to you after some time. Much appreciated.

Regards
Shivan

@whileoneloop the link will be https://github.com/infiniteautomation/ma-dashboards/tree/2.7.x/Custom Dashboards/web/loginPageTemplate now

Ah OK, didn't realise you were working from the extendApp example. The ma-connection, ma-username, ma-password only work in conjunction with the default dashboard boostrapping file aka require(['mango-3.0/bootstrap']). If you are working from extendApp you are bootstrapping the application yourself, so you don't need to include the require(['mango-3.0/bootstrap']) line.

What you do need to do is add some code to extendApp.js that logs your user in before bootstrapping the application. Change the last part of the file from

angular.element(document).ready(function() { angular.bootstrap(document.documentElement, ['myApp']); });

To

var injector = angular.injector(['myApp']); var User = injector.get('User'); User.login({ username: 'user', password: 'password', logout: true }).$promise.then(function() { angular.element(document).ready(function() { angular.bootstrap(document.documentElement, ['myApp']); }); });

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.

Craig,

Currently the REST api does not support image data types.

We are adding support for Image data types to the NoSQL point value store for Mango 2.8.0. It makes sense to implement all the REST api functionality for Image data types at the same time so we can bundle the testing. I've created a git issue to track our progress here:

https://github.com/infiniteautomation/ma-core-public/issues/719

Thanks,
Terry

Hi Craig, this is an alternative aproach you may be interested in. It is more flexible in that you can use whatever periods you desire and you don't need to use <ma-date-range-picker>.

<md-button class="md-raised" ng-click="subtractX=15;subtractUnit='minute';rollupInterval='1 seconds'; updateInterval='5 seconds'">15 min</md-button> <md-button class="md-raised" ng-click="subtractX=1;subtractUnit='hour'; rollupInterval='1 seconds'; updateInterval='10 seconds'">1 hour</md-button> <md-button class="md-raised" ng-click="subtractX=1;subtractUnit='day'; rollupInterval='1 minutes'; updateInterval='1 minutes'">1 day</md-button> <md-button class="md-raised" ng-click="subtractX=1;subtractUnit='week'; rollupInterval='5 minutes'; updateInterval='15 minutes'">1 week</md-button> <md-button class="md-raised" ng-click="subtractX=1;subtractUnit='month'; rollupInterval='15 minutes'; updateInterval='15 minutes'">1 month</md-button> <ma-now update-interval="{{updateInterval}}" output="now"></ma-now> <ma-calc input="now | moment:'subtract':subtractX:subtractUnit" output="from"></ma-calc> <ma-point-values point-xid="DP_923401" point="Plant_Flow" values="Plant_FlowValues" from="from" to="now" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_299411" point="U1_Flow" values="U1_FlowValues" from="from" to="now" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_777475" point="U2_Flow" values="U2_FlowValues" from="from" to="now" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values> <ma-point-values point-xid="DP_030020" point="HPL_PV" values="HPL_PVValues" from="from" to="now" rollup="AVERAGE" rollup-interval="{{rollupInterval}}"> </ma-point-values>

Implemented the extendApp template and added the themeProvider to my extendApp.js and all is well.

Thanks for the tip! One step closer to finishing up my application.

I'll just chime in here to clear something up, ng-if does create a child scope but this does not mean you cannot access objects on the parent scopes from inside it.

The issue is more with setting values inside a child scope. If you output a variable onto a child scope it wont be visible in the parent scope or any of the sibling scopes. You can solve this by creating an object inside the parent scope then setting properties on the object inside the child scopes. e.g.

This works:

<label><input type="checkbox" ng-model="showInput"> Show Input</label> <div ng-init="parentScopeObj={}"> <div ng-if="showInput"> <!-- we are now inside a child scope --> <input ng-model="parentScopeObj.myName"> </div> <p>My name is {{parentScopeObj.myName}}</p> </div>

This doesn't:

<label><input type="checkbox" ng-model="showInput"> Show Input</label> <div"> <div ng-if="showInput"> <!-- we are now inside a child scope --> <input ng-model="myName"> </div> <p>My name is {{myName}}</p> </div>

Hi Thomas,

I looked into it, as per your description, and have determined this to be a bug specifically with the HTML component on the edit page. Can you confirm that you have a message in your browser's developer console "angular is not defined"?

I have opened a Github issue for this: https://github.com/infiniteautomation/ma-core-public/issues/713

Thanks for bringing it to our attention.