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