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.
View the support article for download the code and check out our newly organized content under Mango UI:
Just to chime in, If you are interested we have already built a component for working with the google map library. There is an example here /ui/examples/utilities/google-maps that shows how you can interact with the markers and set marker position based on lat/long values.
A lot less work then writing your own websocket subscription code to get data to MapBox library. There also may be AngularJS directives written that wrap MapBox and if you bring that in you could just bind the lat/long data in with HTML as we do with our map component.
Here's one for example: http://licyeus.github.io/angular-mapbox/
Using the userTheme option is limited in that it doesn't give you full control over being able to choose colors to theme your app with.
Advanced users can modify ${MA_HOME}/web/modules/mangoUI/web/ui/uiSettings.json if they wish to take color customization to the next level. Using the method explained in this support article you can create your own custom color palettes and themes that utilize the exact colors you specify.
We have created many components that you can use for composing your custom dashboard pages. But occasionally you may want to extend the dashboard tools you have available by writing your own AngularJS code. Using the User Module feature you can add your own Angular components, directives, filters and controllers.
Read the full support article to learn how to leverage writing your own Angular code to extend the application.
Here is a support article that covers the general process of setting up your own AngularJS module:
https://help.infiniteautomation.com/getting-started-with-a-user-module/
Hi George,
The best way to add custom javascript is to use the userModule feature as described here:
https://forum.infiniteautomation.com/topic/2831/publishing-live-dashboard/2
Essentially what you are doing is creating an angular module that is editable right from the UI Settings page. You can create your own controllers, components, directives, filters etc.
I plan to release a support article or video today that reveals the basics on how to work with this feature of Mango.
If you overrides your gaugeChart.js file with this modified version https://gist.github.com/WillGeller/49fd0a070ee887bb50d272e1299e20b9
(put it in {$Mango}/overrides/web/modules/mangoUi/web/ngMango/directives)
You should then be able to display the gauge chart with an animated band and no arrow with this code:
<ma-get-point-value point-xid="Demmy-outsidetemp" point="myPoint"></ma-get-point-value>
<h3>Modified to animate band end</h3>
<ma-gauge-chart point="myPoint" start="0" end="100" band-1-end="50" band-1-color="blue" band-2-end="100" band-2-color="red" arrow-alpha="0" value-offset="-100" value-font-size="40" options="{axes: [{startAngle: -90, endAngle:90}], radius: '50%'}" style="width:100%; height:250px" animate-band-mode="true"></ma-gauge-chart>
You can also remove the band-2.. attributes if you just want to display one band.
Seeing as it is a nice alternate look to the gauge chart I may include it in the next UI release and then you would not need the override file.
<ng-gauge> as you show must be from a different library. Rather then try to import that or build a component from scratch. I think with a bit of modification to our <ma-gauge-chart> you can create this type of chart.
Based on these examples:
https://docs.amcharts.com/3/javascriptcharts/AmAngularGauge#arrows
https://codepen.io/anon/pen/rGVKNM
I will try to share a modified version of out component that can do so.
Once you get that working you may want to play around with adding show-annotation-table="true" show-zoom-controls="true" attributes which you can include on <ma-annotate-chart> which display a table below the chart of the annotations and a zoom / calculate (click twice) mode that may be of interest
Can you got to http://localhost:8080/ui/administration/modules/upgrade check for upgrades and let me know what version of advancedComponents module you have.
The advancedComponents module has some functionality that originally wasn't intended for free public use so there may be some issues. But we don't mind you using it and I will try to help you out.
It looks like you do need the NoSQL module installed in order to post annotations. The module is included on the Mango ES or with an Enterprise license. If you don't have a license for the NoSQL module you can still install it but Mango will automatically shut down after several hours.
It looks like there is an bug in the code for the annotateChart component when running with core 3.1 so you will want to update the advancedComponents module with the one that will be released today (3.1.4)
Let me know if you think this is all worth it and you still run into issues after trying these steps
It looks like in your previous post you posted the output of points not thisWatchList .
Also be aware that debugging the output of {{thisWatchlist}} will not show anythings when you have ng-model="thisWatchList" notice the caps is inconsistent
Could I see the output of page.watchList. Are you sure you have checked points on the watchlist and then clicked save. When you open up that watchlist does a chart display at the bottom of the page?
Hi Morris,
Before looking too far into that you may want to take a look at the <ma-annotate-chart> component. It works with the watchlist system, you will need to set up a watchlist with the data points you want to annotate, and check the points so they show up on the chart below. You can also configure the axis and chart design using the watchlist page and it will update on the <ma-annotate-chart>.
You would then use this code on your custom page:
<ma-watch-list-get watch-list-xid="REPLACE" ng-model="thisWatchList" on-points-change="points = $points"></ma-watch-list-get>
<ma-annotate-chart flex points="points" watch-list="thisWatchList" export="true" to="dateBar.to" from="dateBar.from" rollup-type="dateBar.rollupType" rollup-interval-number="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" chart-height="400px"></ma-annotate-chart>
You can get the watchlist xid from the edit watchlist page. Note you will need the latest advancedComponents module to get this component. I am not sure if it will help you export the data as CSV but it does handle the UI for storing data point annotations on particular timestamps without needing to create extra alphanumeric data points.
Cheers
Will
Automatic login is a function that has been available for quite some time. What specifically are you having issues with.
You simply go to Administration > Auto Login and enter the user credentials and yes it will be stored in the browser cache. Does this not work with the version of Chrome you are running on the Pi?
@silvia I would not worry about those directive files as they are outdated and I wrote those before we released the <ma-svg> component.
We now have <ma-svg> which can be used to link to your svg file and select and style tagged groups or elements within the svg. There is a video tutorial here https://help.infiniteautomation.com/interactive-svg-graphics/ and two example pages under examples > basics > svg graphics in the app menu.
As far as your question regarding SVG stroke, you will want to make sure you are specifically targeting the svg element within the svg as indicated in the video/examples and you should then be able to use ma-selector + ng-class to style the stroke using css. More info on CSS on SVG strokes here: https://css-tricks.com/almanac/properties/s/stroke/
If you are still having difficulties perhaps you could post your code and attach your svg element and we can help futrher.
You would use:
series-1-axis="left" series-2-axis="left-2" series-3-axis="right" series-4-axis="left-4"
I will update the docs to show the outer axis values
Yes, that is super easy to do, if you use the watchlist page to build the chart and the maWatchListChart component in the designer
See this option on the watchlist page when you are building a chart:
Here is a training video on the support site that goes over using the watchlist page to build charts and then display them on the dashboard designer, you can ignore the part about making the watchlist dynamic probably:
This video shows you how to use the Dashboard Designer in combination with parameter driven Watch Lists. You can create a page that charts points chosen from data sources and devices.
See more videos on our support site!
https://help.infiniteautomation.com/watch-list-charts/
Here is a video tutorial that covers how to use charts on the dashboard designer, that are driven by data source and device name parameter drop downs. It uses a dynamic watch list so it might not be exactly what you meant but it covers a powerful feature:
Hi there,
this is quite simple to do here is a code snippet:
<h3>Select binary point:</h3>
<div layout="row">
<md-input-container flex>
<label>Choose a point</label>
<ma-point-list limit="200" ng-model="myPoint"></ma-point-list>
</md-input-container>
</div>
<p>
Point Value: <ma-point-value point="myPoint"></ma-point-value>
</p>
<p ng-hide="myPoint.value">
Watch me hide
</p>
or to hide when false:
<p ng-hide="!myPoint.value">
Watch me hide
</p>
or
<p ng-show="myPoint.value">
Watch me hide
</p>