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 :)
