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.
ma-now update interval and ma-svg rotating
-
Hello,
1/ I follow this instruction to make Dynamic Floor (https://docs-v4.mango-os.com/creating-a-dynamic-floor-plan). Beside clicking on each area to select and display on the table next to the dynamic floor, I want the page to automatically rotating between areas. Is there any method?2/ I also follow this instruction to Auto rotating pages (https://docs-v4.mango-os.com/auto-rotating-pages). Is there any method to get a point value (numeric) and add it in update-interval attribute? The update-interval need a string so when I try with {{maPoint.value}} in update-interval, it just stops at Page 1 for 1 second only.
3/ I also try the my-idle-component, also doesn't work (at least on Chrome browser)
Thank you
-
@tungthanh500
Hi Tung, if you can share what you've done I'm happy to help you work through it.
No point us doing it for you - you won't learn or benefit!
Share your code here in code tags and I'll point out the possible and/or likely issuesFox
-
Hi @MattFox
I just follow the sample code:
1/ For the first question:<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="f9166bb2-321b-4245-b985-ec317a9eb138" watch-list-xid="WL_7e0d4b41-9469-454a-8d7b-99b7b9bc3487"></ma-watch-list-get> <div class="ma-designer-root" id="5789b450-f8fc-4d2e-9852-09fd08b1ad9b" style="width: 1920px; height: 1080px; position: relative;" ma-scale-to="ma-ui-page-view" ma-center="true" ma-maintain-ratio="letterbox"> <!-- The following ma-svg code is how the mouse enter and mouse leave actions apply the styples to the groups inside the SVG. There are two paramaters in our watchList (fc & dn) This section: ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 003'}" sets those paramaters to specific values on mouse click. --> <ma-svg id="3b39a9d3-03e3-4927-b016-a8a348f8e156" ng-include="'/rest/v2/file-stores/default/floorplans/02 Piso 0.svg'" style="position: absolute; width: 1590.94px; height: 1073.95px; left: 0px; top: 0px;"> <div ma-selector="#FC002" ng-style="styleFC002" ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 002'}" ng-mouseenter="styleFC002 = {'opacity': 0.5}" ng-mouseleave="styleFC002 = {}"></div> <div ma-selector="#FC001" ng-style="styleFC001" ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 001'}" ng-mouseenter="styleFC001 = {'opacity': 0.5}" ng-mouseleave="styleFC001 = {}"></div> <div ma-selector="#FC003" ng-style="styleFC003" ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 003'}" ng-mouseenter="styleFC003 = {'opacity': 0.5}" ng-mouseleave="styleFC003 = {}"></div> <div ma-selector="#FC004-5-7" ng-style="styleFC004" ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 004, 005 y 007'}" ng-mouseenter="styleFC004 = {'opacity': 0.5}" ng-mouseleave="styleFC004 = {}"></div> <div ma-selector="#FC006" ng-style="styleFC006" ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 006'}" ng-mouseenter="styleFC006 = {'opacity': 0.5}" ng-mouseleave="styleFC006 = {}"></div> <div ma-selector="#FC008" ng-style="styleFC008" ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 008'}" ng-mouseenter="styleFC008 = {'opacity': 0.5}" ng-mouseleave="styleFC008 = {}"></div> <div ma-selector="#FC009" ng-style="styleFC009" ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 009'}" ng-mouseenter="styleFC009 = {'opacity': 0.5}" ng-mouseleave="styleFC009 = {}"></div> </ma-svg> <!--This md-car is a whole widget to display the paramates for the zone. It uses the standard Angular Material layout methods --> <md-card id="393e932f-50fc-4d20-a8a2-7857e77b4c58" style="position: absolute; left: 1503.74px; top: -8px; width: 408.262px; height: 414.902px;"> <md-toolbar class="md-whiteframe-1dp md-hue-3"> <div class="md-toolbar-tools" style="font-size: 24px; font-weight: bolder;"> <h2 flex=""> <span>Zone: {{designer.parameters.dn}}</span> </h2> </div> </md-toolbar> <md-card-content> <md-list class="md-dense"> <md-list-item layout=""> On/Off <span flex=""></span> <ma-switch point="designer.points | filter:{name:'Puts the unit in shutdown mode (0=ON, 1=OFF)'}:true | maFirst"></ma-switch> </md-list-item> <md-list-item layout=""> Temperatur <span flex=""></span> <ma-point-value enable-popup="left" point="designer.points | filter:{name:'Room Temperature'}:true | maFirst" flash-on-change="true"></ma-point-value> </md-list-item> <md-list-item layout=""> Mode <span flex=""></span> <ma-point-value point="designer.points | filter:{name:'Current Control (0=OFF, 1=Heating, 2=Cooling)'}:true | maFirst" flash-on-change="true"></ma-point-value> </md-list-item> <md-list-item layout=""> Ventilado <span flex=""></span> <ma-set-point-value show-button="true" set-on-change="false" enable-popup="hide" point="designer.points | filter:{name:'Fan Mode (0=OFF, 1=FS1, 2=FS2, 3=FS3, 4=Auto)'}:true | maFirst"></ma-set-point-value> </md-list-item> <md-list-item layout=""> Setpoint <span flex=""></span> <ma-set-point-value show-button="true" set-on-change="false" enable-popup="hide" point="designer.points | filter:{name:'Setpoint Displacement'}:true | maFirst"></ma-set-point-value> </md-list-item> </md-list> </md-card-content> </md-card> <ma-point-value id="e868b067-4a49-4dc6-a291-c51335c9ce03" style="position: absolute; left: 300px; top: 750px; z-index: 1; width: 75px; height: 35px; background-color: rgb(51, 51, 51); display: flex; justify-content: center; border-radius: 5px;" point-xid="DP_03_FC002"></ma-point-value> <ma-point-value id="f75e72d9-3843-442f-94f4-442d4d79436c" style="position: absolute; left: 1350px; top: 470px; z-index: 1; width: 75px; height: 35px; background-color: rgb(51, 51, 51); display: flex; justify-content: center; border-radius: 5px;" point-xid="DP_03_FC006"></ma-point-value> <ma-point-value id="7e9a47f2-eca9-4f1d-8300-9508b29790c4" style="position: absolute; left: 890px; top: 570px; z-index: 1; width: 75px; height: 35px; background-color: rgb(51, 51, 51); display: flex; justify-content: center; border-radius: 5px;" point-xid="DP_03_FC004_005_007"></ma-point-value> <ma-point-value id="c02c8bbb-9ee4-4299-bd3b-37d328be5f06" style="position: absolute; left: 790px; top: 920px; z-index: 1; width: 75px; height: 35px; background-color: rgb(51, 51, 51); display: flex; justify-content: center; border-radius: 5px;" ng-click="designer.parameters = {fc: 'FC 0',dn: 'FC 003'}" point-xid="DP_03_FC003"></ma-point-value> <ma-point-value id="812b5bae-c0a5-4d00-b845-d9958a6a73b5" style="position: absolute; left: 420px; top: 335px; z-index: 1; width: 75px; height: 35px; background-color: rgb(51, 51, 51); display: flex; justify-content: center; border-radius: 5px;" point-xid="DP_03_FC008"></ma-point-value> <ma-point-value id="b468b73a-0e72-465a-a6ec-0cd4a974013a" style="position: absolute; left: 170px; top: 385px; z-index: 1; width: 75px; height: 35px; background-color: rgb(51, 51, 51); display: flex; justify-content: center; border-radius: 5px;" point-xid="DP_03_FC001"></ma-point-value> <ma-point-value id="bcd68e9c-9008-43c1-9007-53825b186f0c" style="position: absolute; left: 1020px; top: 145px; z-index: 1; width: 75px; height: 35px; background-color: rgb(51, 51, 51); display: flex; justify-content: center; border-radius: 5px;" point-xid="DP_03_FC009"></ma-point-value> </div>What I want is to let the {{designer.parameters.dn}} rotates (change values automatically), hence the value on the table will change in accordance to the "dn" value without having to click on the SVG image. Of course clicking on SVG also provide the corresponding "dn" value.
For example: If I want, I can click to #FC006 and the table next to image can show all info belongs to FC006. But after a preset time, the dashboard can change to #FC008 or #FC009 by itself.2/ I got this code:
<div class="ma-designer-root" id="25741493-b4f7-4052-9292-0702c8318da7" style="width: 1366px; height: 768px; position: relative;"> <ma-get-point-value point-xid="DP_timerAdsToHome"></ma-get-point-value> <ma-now update-interval="10 seconds" on-change="firstTick && $state.go('home'); firstTick = true"></ma-now> <video width="100%" autoplay> <source src="/rest/latest/file-stores/public/suncasadashboards/video/ads.mp4" type="video/mp4"> </video> </div>I intend to let user change value of point with XID "DP_timerAdsToHome" in another page. In this page, I get the value with ma-get-point-value and I want to set to attribute "update-interval". But it doesn't seem to be usable as update-interval require a string.
3/ I use the code in the example but it didn't work as expect.
Case 1:
At "home" page, I use:<my-idle-detector state="home" delay="30000"></my-idle-detector>At "ads" page, I use nothing, below is "ads" page code:
<div class="ma-designer-root" id="2-b4f7-4052-9292-0702c8318da7" style="width: 1366px; height: 768px; position: relative;"> <video width="100%" autoplay> <source src="/rest/latest/file-stores/public/suncasadashboards/video/ads.mp4" type="video/mp4"> </video> </div>Then I can see the home page auto change to ads page after 10 seconds.
However, if i add similar code of:
<div class="ma-designer-root" id="2-b4f7-4052-9292-0702c8318da7" style="width: 1366px; height: 768px; position: relative;">
<my-idle-detector state="home" delay="30000"></my-idle-detector>
<video width="100%" autoplay>
<source src="/rest/latest/file-stores/public/suncasadashboards/video/ads.mp4" type="video/mp4">
</video></div>
Then both of them will be put in a infinite loop without any delay!!
Please note that my custom.js is only include the component from the sample :)
-
@tungthanh500 said in ma-now update interval and ma-svg rotating:
What I want is to let the {{designer.parameters.dn}} rotates (change values automatically)
For this to work you will need an array to allow you to loop through each region with the name of the region set to a variable (the same variable that is set when you click on an area). This will be more easily realised if you are able to implement an angularJS directive. This directive can then be supplied to each page which you want to have SVG polygon regions looped through and highlighted etc
I intend to let user change value of point with XID "DP_timerAdsToHome" in another page. In this page, I get the value with ma-get-point-value and I want to set to attribute "update-interval". But it doesn't seem to be usable as update-interval require a string.
Make your datapoint a multi-state value and give it a preset range. Then you can use the value as
<ma-now update-interval="{{timerAdsTilHome.value+' seconds'}}" on-change="firstTick && $state.go('home'); firstTick = true"></ma-now>Or at least something to that effect, get it showing and updating in the page first.
Then both of them will be put in a infinite loop without any delay!!
You've put the same state call on both pages, of course all you will do is keep going to the same place. Update the home one to flick back to the ads page state then you won't get locked in a single page state.
Hope that helps for a start
Fox
-
Hi @MattFox , thank you for your suggestion. I made some changes and follow your suggestion. Below is the result:
custom.js file to rotate within a list of texts:define(['angular', 'require'], function(angular, require) { 'use strict'; var userModule = angular.module('userModule', ['maUiApp']); userModule.controller('mainCtrl',['$scope','maPoint',function($scope,Point) { $scope.currentArea; }]); userModule.directive('rotateText', ['$interval', function($interval) { return { require: 'ngModel', link: function($scope, $elem, $attr, ngModelCtrl) { var areaToRotate = ["Swimming Pool", "Gym", "Coffee Area"]; var lengthOfArea = areaToRotate.length; var randomIndex = Math.floor(Math.random() * (lengthOfArea)); var beginInterval = $interval(function() { ngModelCtrl.$setViewValue(areaToRotate[randomIndex]); randomIndex = Math.floor(Math.random() * (lengthOfArea)); },5000); } } }]); return userModule; }); // defineMarkup:
<div class="main" id="home" style="width: 3840px ; height: 2160px;" ma-center="false" ng-controller="mainCtrl" ng-model="currentArea" rotate-text ng-init="currentArea = 'Coffee Area'"> <br> <!--Card--> <div> <div class="main__title"> <img class="main__title-logo" flex="10" src="/rest/latest/file-stores/public/suncasadashboards/img/logo.png"> <h1 style="text-align: center;" md-colors="::{color: 'primary'}"><b flex="80">OVERVIEW OF SUNCASA CLUBHOUSE</b></h1> <h2 flex="10"></h2> </div> <div layout="column"> <div flex="" layout="row" layout-align="space-around start"> <div layout="column" flex="33"> <md-card style="height:800px"> <md-card-header> <p md-colors="::{color: 'accent'}">{{currentArea}}</p> </md-card-header> <md-card-content> <div><img src="/rest/latest/file-stores/public/suncasadashboards/img/gym.jpg" style="width:100%; height: 700px"></div> </md-card-content> </md-card> </div> <!-- <ma-point-query query="'eq(deviceName,{{currentArea}})'" sort="xid" realtime="true" latest="1" points="pointX" promise="promise"></ma-point-query> --> **<ma-point-query query="{deviceName:currentArea}" sort="xid" points="pointX" promise="promise"></ma-point-query>** <div layout="column" flex="33"> <md-card style="height:800px"> <md-card-header> <p md-colors="::{color: 'accent'}">INFORMATION </p> </md-card-header> <md-card-content> <table class="main__contenttable" style="height:700px"> <colgroup> <col width="40%"> <col width="60%"> </colgroup> <tbody> <tr> <td><b>Parameter</b></td> <td><b>Value</b></td> </tr> <tr ng-repeat="value in pointX track by $index"> <td> {{value.name}} <ma-get-point-value point-xid="DP_Thres_{{value.name}}" point="thres"></ma-get-point-value> </td> <td ng-class="{alarm: value.value > thres.value}"> <ma-point-value point="value"></ma-point-value> </td> </tr> </tbody> </table> </md-card-content> </md-card> </div> </div> </div> </div> </div>I need some help with query. With the ma-point-query in bold, I can get the parameters and value into a table but they are more than I need. I want to query to get data point with tags priority = high but I don't know correct way to get it into query. Any suggestion?
data point with tags priority = high
I already try"query="{deviceName:currentArea, tags.priority:high}" or query="{deviceName:currentArea, tags:priority=high}"but it doesn't work (return blank page or nothing change).
I also try
query="'eq(deviceName,{{currentArea}})'"
but return nothing. -
@tungthanh500 if you need to practise your RQL queries, use the watchlist builder and choose the query option. That will allow you to get the general structure of your query.
Just going from off the top of my head here, but I think you'd be grand if you use this for your query:
query="'eq(deviceName,'+currentArea+')&eq(tags.priority,high)'"You may need to wrap currentArea with {{}} or the entire string, I can't remember how forgiving the input is...
Fox
-
@MattFox Thank you Matt. It works well. I don't know about using '+currentArea+' instead of {{currentArea}}. Where can I read more about this?
-
@tungthanh500 it comes with understanding angularJS scopes ($scope).
In this case you have a variable of$scope.currentArea
Since this scope is attached to our view, the variable (in this case) can be accessed as currentArea.
Since we want the variable and not a string called "currentArea", we "add" (I use the term loosely here) the strings that make up your RQL query and supply the dynamically allocated currentArea variable.Also look at controllerAs to understand nesting controllers and their respective scopes.
Fox
