<![CDATA[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

]]>https://forum.mango-os.com/topic/2972/help-understanding-the-use-of-md-cardRSS for NodeWed, 16 Sep 2026 16:38:27 GMTWed, 27 Sep 2017 13:38:06 GMT60<![CDATA[Reply to Help understanding the use of md-card on Fri, 29 Sep 2017 14:36:46 GMT]]>Thanks Joel - This is very helpful.

]]>https://forum.mango-os.com/post/15680https://forum.mango-os.com/post/15680Fri, 29 Sep 2017 14:36:46 GMT<![CDATA[Reply to Help understanding the use of md-card on Thu, 28 Sep 2017 16:09:34 GMT]]>Here is a screen shot and the code that might help
0_1506614897408_26f8007a-70b8-480d-93fc-c4f1b167aa03-image.png

<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>
]]>https://forum.mango-os.com/post/15663https://forum.mango-os.com/post/15663Thu, 28 Sep 2017 16:09:34 GMT<![CDATA[Reply to Help understanding the use of md-card on Thu, 28 Sep 2017 15:41:50 GMT]]>@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

]]>https://forum.mango-os.com/post/15658https://forum.mango-os.com/post/15658Thu, 28 Sep 2017 15:41:50 GMT<![CDATA[Reply to Help understanding the use of md-card on Thu, 28 Sep 2017 11:35:23 GMT]]>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

]]>https://forum.mango-os.com/post/15649https://forum.mango-os.com/post/15649Thu, 28 Sep 2017 11:35:23 GMT<![CDATA[Reply to Help understanding the use of md-card on Wed, 27 Sep 2017 15:50:06 GMT]]>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-card you 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.

]]>https://forum.mango-os.com/post/15620https://forum.mango-os.com/post/15620Wed, 27 Sep 2017 15:50:06 GMT