Creating a Dynamic Floor Plan

June 11th, 2020


This is the code for the sample page.

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

&lt;ma-point-value id=&quot;e868b067-4a49-4dc6-a291-c51335c9ce03&quot; style=&quot;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;&quot; point-xid=&quot;DP_03_FC002&quot;&gt;&lt;/ma-point-value&gt;
&lt;ma-point-value id=&quot;f75e72d9-3843-442f-94f4-442d4d79436c&quot; style=&quot;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;&quot; point-xid=&quot;DP_03_FC006&quot;&gt;&lt;/ma-point-value&gt;
&lt;ma-point-value id=&quot;7e9a47f2-eca9-4f1d-8300-9508b29790c4&quot; style=&quot;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;&quot; point-xid=&quot;DP_03_FC004_005_007&quot;&gt;&lt;/ma-point-value&gt;
&lt;ma-point-value id=&quot;c02c8bbb-9ee4-4299-bd3b-37d328be5f06&quot; style=&quot;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;&quot; ng-click=&quot;designer.parameters = {fc: 'FC 0',dn: 'FC 003'}&quot; point-xid=&quot;DP_03_FC003&quot;&gt;&lt;/ma-point-value&gt;
&lt;ma-point-value id=&quot;812b5bae-c0a5-4d00-b845-d9958a6a73b5&quot; style=&quot;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;&quot; point-xid=&quot;DP_03_FC008&quot;&gt;&lt;/ma-point-value&gt;
&lt;ma-point-value id=&quot;b468b73a-0e72-465a-a6ec-0cd4a974013a&quot; style=&quot;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;&quot; point-xid=&quot;DP_03_FC001&quot;&gt;&lt;/ma-point-value&gt;
&lt;ma-point-value id=&quot;bcd68e9c-9008-43c1-9007-53825b186f0c&quot; style=&quot;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;&quot; point-xid=&quot;DP_03_FC009&quot;&gt;&lt;/ma-point-value&gt;

</div>

Copyright © 2024 Radix IoT, LLC.