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.
Help understanding the use of md-card
-
Hello,
I have been testing a dashboard that builds on the code provided for one of the Adaptive Layout templates provided in the mango examples section.
I have "dropped" the ma-point-values, ma-gauge-chart, formatted text, etc. "on top" of the cards where I would like them positioned using the designer GIU. When viewing the test page the layout is not as expected and when viewing the markup I notice that the items I have placed on the cards do not appear between the <md-card-content> </md-card-content>tags.
What is the proper way to build a dashboard using cards? Should the <ma-point-values></ma-point-values> be cut and paste to the proper location in the markup, or is there a process to follow for making this connection while using the GIU?
-thank you
-
Hey @Wingnut2-0 yep, the dashboard designer does not nest any HTML tags, it simply places them all inline. If you want to use a
md-cardyou should edit the markup directly. See the documentation at https://material.angularjs.org/latest/We provide the functionality to drop the Angular Material components directly onto dashboards for convenience.
-
Thank you Jared.
Are there recommended layout settings for content placed within a card? The sample code shows the following for the main page. Just wondering what the layout settings for a point-value might be.<div layout="column" layout-fill flex> <div flex layout="row" layout-xs="column" layout-fill> <div layout="column" flex="33" flex-xs="25">Thank you
-
@wingnut2-0 said in Help understanding the use of md-card:
Thank you Jared.
Are there recommended layout settings for content placed within a card? The sample code shows the following for the main page. Just wondering what the layout settings for a point-value might be.<div layout="column" layout-fill flex> <div flex layout="row" layout-xs="column" layout-fill> <div layout="column" flex="33" flex-xs="25">Thank you
You can layout the contents of a card however you would like. See https://material.angularjs.org/1.1.5/layout/introduction
-
Here is a screen shot and the code that might help
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> <style> .digital-display { font-family: 'Orbitron', sans-serif; font-size: 40px; display: flex; height: 120px; align-items: center; justify-content: center; } </style> <ma-ui-state-params state-params="pageParams"></ma-ui-state-params> <ma-point-hierarchy path="['Meters']" hierarchy="meterList"></ma-point-hierarchy> <div layout layout-align="space-between center"> <md-button class="md-raised md-accent md-hue-1" ui-sref="ui.energyManagment.electricalDashboard"> <md-icon>arrow_back</md-icon> Back </md-button> <div layout layout-align="end center"> <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='DAY_SO_FAR'"> TODAY </md-button> <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='MONTH_SO_FAR'"> THIS MONTH </md-button> <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='PREVIOUS_MONTH'"> LAST MONTH </md-button> <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='YEAR_SO_FAR'"> YEAR </md-button> </div> </div> <div ng-init="selectedMeter = pageParams.meterId"></div> <div ng-if="!pageParams.meterId" layout layout-align="stert center"> <h2 style="padding-right: 20px;">Select Meter:</h2> <md-select flex ng-model="selectedMeter" ng-init="selectedMeter = 'VPM01'"> <md-option ng-repeat="meterName in meterList.subfolders" ng-value="meterName.name">{{meterName.name}}</md-option> </md-select> <ma-point-hierarchy path="['Meters', selectedMeter]" hierarchy="$parent.meterData" points></ma-point-hierarchy> </div> <div ng-if="pageParams.meterId" layout layout-align="stert center"> <h2 style="padding-right: 20px;">Select Meter:</h2> <md-select flex ng-model="selectedMeter" ng-init="selectedMeter = pageParams.meterId"> <md-option ng-repeat="meterName in meterList.subfolders" ng-value="meterName.name">{{meterName.name}}</md-option> </md-select> <ma-point-hierarchy path="['Meters', selectedMeter]" hierarchy="$parent.meterData" points></ma-point-hierarchy> </div> <div layout="column" layout-gt-sm="row" layout-align="space-between"> <md-card flex> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex> <span>Instantaneous kW Total</span> </h2> </div> </md-toolbar> <ma-calc input="meterData.points | filter:{name:'Power_Active_Total'} | maFirst" output="Power_Active_Total"></ma-calc> <!--<ma-gauge-chart point-xid="{{Power_Active_Total.xid}}" interval="" start="0" end="0.4" --> <!--style="width:100%; height:250px; margin-bottom: -35px;" axis-thickness="12" axis-alpha="0.2" axis-label-font-size="10" value-offset="-60" value-font-size="12" tick-interval="" arrow-inner-radius="35" arrow-alpha="0.8"></ma-guage-chart>--> <ma-get-point-value point-xid="{{Power_Active_Total.xid}}" point="powerVal"></ma-get-point-value> <div class="digital-display"> {{powerVal.value | number:2}} kW </div> </md-card> <md-card flex> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex> <span>Instantaneous kW Demand</span> </h2> </div> </md-toolbar> <ma-calc input="meterData.points | filter:{name:'Demand_Active_Total'} | maFirst" output="Demand_Active_Total"></ma-calc> <!--<ma-gauge-chart point-xid="{{Demand_Active_Total.xid}}" interval="" start="0" end="0.4" --> <!--style="width:100%; height:250px; margin-bottom: -35px;" axis-thickness="12" axis-alpha="0.4" axis-label-font-size="10" value-offset="-60" value-font-size="12" tick-interval="" arrow-inner-radius="35" arrow-alpha="0.8"></ma-guage-chart>--> <ma-get-point-value point-xid="{{Demand_Active_Total.xid}}" point="Demand_Active_TotalVal"></ma-get-point-value> <div class="digital-display"> {{Demand_Active_TotalVal.value | number:2}} kW </div> </md-card> <md-card flex> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex> <span>Peak kW Demand</span> </h2> </div> </md-toolbar> <ma-point-statistics point="Demand_Active_Total" from="dateBar.from" to="dateBar.to" statistics="Demand_Active_Total_Stats" rendered="false"> </ma-point-statistics> <!--<pre>{{ Demand_Active_Total_Stats }}</pre>--> <!--<ma-gauge-chart value="Demand_Active_Total_Stats.maximum.value" interval="" start="0" end="0.4" --> <!--style="width:100%; height:250px; margin-bottom: -35px;" axis-thickness="12" axis-alpha="0.4" axis-label-font-size="10" value-offset="-60" value-font-size="12" tick-interval="" arrow-inner-radius="35" arrow-alpha="0.8"></ma-guage-chart>--> <div class="digital-display"> {{Demand_Active_Total_Stats.maximum.value| number:2}} kW </div> </md-card> <md-card flex> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex> <span>Total Energy</span> </h2> </div> </md-toolbar> <ma-calc input="meterData.points | filter:{name:'Energy_Active_Total'} | maFirst" output="Energy_Active_Total"></ma-calc> <ma-point-statistics point="Energy_Active_Total" from="dateBar.from" to="dateBar.to" first-last="true" statistics="Energy_Active_Total_Stats" rendered="false"> </ma-point-statistics> <!--<pre>{{Energy_Active_Total_Stats}}</pre>--> <!--<ma-gauge-chart value="Energy_Active_Total_Stats[1].value - Energy_Active_Total_Stats[0].value" interval="" start="0" end="40" --> <!--style="width:100%; height:250px; margin-bottom: -35px;" axis-thickness="12" axis-alpha="0.2" axis-label-font-size="10" value-offset="-60" value-font-size="12" tick-interval="" arrow-inner-radius="35" arrow-alpha="0.8"></ma-guage-chart>--> <div class="digital-display"> {{(Energy_Active_Total_Stats[1].value - Energy_Active_Total_Stats[0].value) | number:2}} kWh </div> </md-card> </div> <div layout="column" layout-gt-sm="row"> <md-card flex="100" flex-gt-md="25"> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex> <span>Energy Metrics</span> </h2> </div> </md-toolbar> <md-list class="md-dense"> <md-list-item layout> <h3>Line-to-Neutral Voltage</h3> </md-list-item> <md-list-item layout> Voltage Line-to-Neutral L1 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Voltage_LN_1'} | maFirst" output="Voltage_LN_1"></ma-calc> <ma-point-value point-xid="{{Voltage_LN_1.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Voltage Line-to-Neutral L2 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Voltage_LN_2'} | maFirst" output="Voltage_LN_2"></ma-calc> <ma-point-value point-xid="{{Voltage_LN_2.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Voltage Line-to-Neutral L3 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Voltage_LN_3'} | maFirst" output="Voltage_LN_3"></ma-calc> <ma-point-value point-xid="{{Voltage_LN_3.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Voltage Line-to-Neutral Average <span flex></span> <ma-calc input="meterData.points | filter:{name:'Voltage_LN_Average'} | maFirst" output="Voltage_LN_Average"></ma-calc> <ma-point-value point-xid="{{Voltage_LN_Average.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-divider></md-divider> <md-list-item layout> <h3>Line-to-Line Voltage</h3> </md-list-item> <md-list-item layout> Voltage Line-to-Line L1-2 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Voltage_LL_12'} | maFirst" output="Voltage_LL_12"></ma-calc> <ma-point-value point-xid="{{Voltage_LL_12.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Voltage Line-to-Line L2-3 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Voltage_LL_23'} | maFirst" output="Voltage_LL_23"></ma-calc> <ma-point-value point-xid="{{Voltage_LL_23.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Voltage Line-to-Line L3-1 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Voltage_LL_31'} | maFirst" output="Voltage_LL_31"></ma-calc> <ma-point-value point-xid="{{Voltage_LL_31.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Voltage Line-to-Line Average <span flex></span> <ma-calc input="meterData.points | filter:{name:'Voltage_LL_Average'} | maFirst" output="Voltage_LL_Average"></ma-calc> <ma-point-value point-xid="{{Voltage_LL_Average.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-divider></md-divider> <md-list-item layout> <h3>Current</h3> </md-list-item> <md-list-item layout> Current L1 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Current_1'} | maFirst" output="Current_1"></ma-calc> <ma-point-value point-xid="{{Current_1.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Current L2 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Current_2'} | maFirst" output="Current_2"></ma-calc> <ma-point-value point-xid="{{Current_2.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Current L3 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Current_3'} | maFirst" output="Current_3"></ma-calc> <ma-point-value point-xid="{{Current_3.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Current Total <span flex></span> <ma-calc input="meterData.points | filter:{name:'Current_Total'} | maFirst" output="Current_Total"></ma-calc> <ma-point-value point-xid="{{Current_Total.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-divider></md-divider> <md-list-item layout> <h3>Power Factor</h3> </md-list-item> <md-list-item layout> Power Factor L1 <span flex></span> <ma-calc input="meterData.points | filter:{name:'PF_1'} | maFirst" output="PF_1"></ma-calc> <ma-point-value point-xid="{{PF_1.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Power Factor L2 <span flex></span> <ma-calc input="meterData.points | filter:{name:'PF_2'} | maFirst" output="PF_2"></ma-calc> <ma-point-value point-xid="{{PF_2.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Power Factor L3 <span flex></span> <ma-calc input="meterData.points | filter:{name:'PF_3'} | maFirst" output="PF_3"></ma-calc> <ma-point-value point-xid="{{PF_3.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Power Factor Overall <span flex></span> <ma-calc input="meterData.points | filter:{name:'PF_Overall'} | maFirst" output="PF_Overall"></ma-calc> <ma-point-value point-xid="{{PF_Overall.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-divider></md-divider> <md-list-item layout> <h3>Active Power</h3> </md-list-item> <md-list-item layout> Active Power L1 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Power_Active_1'} | maFirst" output="Power_Active_1"></ma-calc> <ma-point-value point-xid="{{Power_Active_1.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Active Power L2 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Power_Active_2'} | maFirst" output="Power_Active_2"></ma-calc> <ma-point-value point-xid="{{Power_Active_2.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Active Power L3 <span flex></span> <ma-calc input="meterData.points | filter:{name:'Power_Active_3'} | maFirst" output="Power_Active_3"></ma-calc> <ma-point-value point-xid="{{Power_Active_3.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Active Power Total <span flex></span> <ma-calc input="meterData.points | filter:{name:'Power_Active_Total'} | maFirst" output="Power_Active_Total"></ma-calc> <ma-point-value point-xid="{{Power_Active_Total.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Active Power Demand <span flex></span> <ma-calc input="meterData.points | filter:{name:'Demand_Active_Total'} | maFirst" output="Demand_Active_Total"></ma-calc> <ma-point-value point-xid="{{Demand_Active_Total.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-divider></md-divider> <br> <md-list-item layout> Frequency <span flex></span> <ma-calc input="meterData.points | filter:{name:'Frequency'} | maFirst" output="Frequency"></ma-calc> <ma-point-value point-xid="{{Frequency.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Reactive Power Total <span flex></span> <ma-calc input="meterData.points | filter:{name:'Power_Reactive_Total'} | maFirst" output="Power_Reactive_Total"></ma-calc> <ma-point-value point-xid="{{Power_Reactive_Total.xid}}" enable-popup="left"></ma-point-value> </md-list-item> <md-list-item layout> Apparent Power Total <span flex></span> <ma-calc input="meterData.points | filter:{name:'Power_Apparent_Total'} | maFirst" output="Power_Apparent_Total"></ma-calc> <ma-point-value point-xid="{{Power_Apparent_Total.xid}}" enable-popup="left"></ma-point-value> </md-list-item> </md-list> </md-card> <md-card flex="100" flex-gt-md="75"> <md-toolbar class="md-whiteframe-1dp md-hue-1"> <div class="md-toolbar-tools"> <h2 flex> <span>Historical Charts</span> </h2> </div> </md-toolbar> <md-card-content layout="column"> <!--<div layout="row" layout-xs="column"> <md-input-container flex> <label>Preset</label> <ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="5 seconds"></ma-date-range-picker> </md-input-container> <md-input-container flex> <label>From date</label> <ma-date-picker ng-model="from"></ma-date-picker> </md-input-container> <md-input-container flex> <label>To date</label> <ma-date-picker ng-model="to"></ma-date-picker> </md-input-container> </div>--> <h2>Active Power Total & Demand</h2> <ma-point-values point="Power_Active_Total" values="Power_Active_Total_Values" from="dateBar.from" to="dateBar.to" rollup="AVERAGE" auto-rollup-interval="true"></ma-point-values> <ma-point-values point="Demand_Active_Total" values="Demand_Active_Total_Values" from="dateBar.from" to="dateBar.to" rollup="MAXIMUM" auto-rollup-interval="true"></ma-point-values> <ma-serial-chart flex style="height: 300px; width: 100%" series-1-point="Power_Active_Total" series-1-values="Power_Active_Total_Values" series-2-point="Demand_Active_Total" series-2-values="Demand_Active_Total_Values" series-1-color="rgb(45,197,255)" series-2-color="red" series-1-type="line" series-2-type="line" legend="true" balloon="true" default-balloon-text="[[title]]: [[value]]" export="true" stack-type="none"> </ma-serial-chart> <h2>kWh Total</h2> <ma-point-values point="Energy_Active_Total" values="Energy_Active_Total_Values" from="dateBar.from" to="dateBar.to" rollup="DELTA" auto-rollup-interval="true"></ma-point-values> <ma-serial-chart flex style="height: 300px; width: 100%" series-1-point="Energy_Active_Total" series-1-values="Energy_Active_Total_Values" series-1-color="rgb(45,197,255)" default-type="column" legend="true" balloon="true" default-balloon-text="[[title]]: [[value]]" export="true" stack-type="regular"> </ma-serial-chart> </md-card-content> </md-card> </div> -
Thanks Joel - This is very helpful.
