Trouble Porting Dashboard from Demo Area

[MaP]

Hi Guys I have been hacking away at a custom dashboard for a couple of days and have been able to put something together fairly quickly using the documentation provided. I have no experience with Angular JS or HTML and have been surprised at the flexibility provided through the API and guides. I am trying to deploy the page created by tinkering in the demo area. I copied the Angular Material Template named it index.html and put it in the dashboards/web/MyFolder/ location. I added the content from the demo page but some of the colours are missing and the spacing seems to be a bit off. I imagine I am missing some links or something at the top of the index.html file - Any hints would be most appreciated.

Demo Page -

Page at http://XX.XXX.X.XXX/modules/dashboards/web/TestDBoard/

[MaP]

This post is deleted!

[MaP]

This post is deleted!

[MaP]

This post is deleted!

[MaP]

0_1483597375723_dboardhtml.txt

[phildunlap]

Hi MaP,

I wonder, do you have any errors in the console in the developer tools when viewing the page with the problem? Right clicking on the page and 'inspect element' or ctrl+shift+i (chrome) to open.

[MaP]

[MaP]

I had removed the ng-cloak from the html file i have replaced it but modified it for my purposes.. that got the layout working again -
<div ng-cloak> <!-- layout="column" flex> <-->
<!-- Your content here -->

the colors was because i think in the mango demo environment they defaulted onto light blue i included md-colours in the md-toolbar definition to get the colors back

<md-toolbar md-colors="{background: 'light-blue'}">
<div class="md-toolbar-tools">
<div layout="row">
</div>
<h1 class="md-title" style="color:white">Solar</h1>

                </div>
     
        </md-toolbar>

the 7 errors are still slighting disconcerting though.

[phildunlap]

Thanks for sharing your findings!

I would expect that first 404 may be responsible for some of the other errors, but it looks like what resource it is that failed to load is clipped out of the image you shared.

[Jared Wiltshire]

@MaP
Are you loading the dashboard over the internet? Seems odd that you are getting connection timed out. As Phillip said, let us know what resource could not be found (the 404). Also the adminTemplate will not use the colors from the main dashboards interface, they should be set manually in the app.js file.

[Will Geller]

HI MaP,

Glad you were able to get started quickly and find the guides helpful.

It seems to me that it would be a lot easier to use the built in custom page functionality to accomplish a simple single page dashboard. If you are on the latest version of the publicly available dashboards module you should be able to find the page editor under the settings menu. You would then insert your HTML content into a custom page and set up a menu item for the page.

Make sure you have your XIDs correct on the ones that are throwing errors in the console. I also see you are using vanilla JS to hide cards in your HTML. You should be using angular directives ng-click and ng-if (or ng-show)

Here is a codepen I found of how to hide content using the angular directives in an angular template: https://codepen.io/SusanneLundblad/pen/dabcw

[MaP]

Thanks for all the suggestions guys it is appreciated. I have no app.js file yet. I only have an index.html file in a custom folder ( I am trying to understand/build things in manageable portions). Layout can be suprisingly difficult!

I think the timeouts are caused simply by bad connections - the site is remote and using 3G to our company VPN.

The next step is to try and add the login page as during testing the page i realised if you haven't logged into mango first the page wont show any of the values. I deliberatly avoided js and css files as it seemed easier to try and put all the functionality in the html file.

Eg) <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card1').style.display='block'">Unhide Card 1
</md-button>

<md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card1').style.display='none'">Hide Card</md-button>

The very shabby index file is:

<!DOCTYPE html>


<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Angular Material Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="/resources/angular-csp.css"></link>
    <link rel="stylesheet" href="../vendor/angular-material/angular-material.css">
    <link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css">
    <link rel="stylesheet" href="../vendor/mdPickers/mdPickers.css">
</head>

<!-- <body layout="column"> <-->
    
    <div ng-if="appLoading">
			<img src="images/loader.gif" alt="App loading.." style="margin-left:50%;margin-top:25%">
		</div>

 <div ng-cloak>  <!-- layout="column" flex> <-->
        <!-- Your content here -->
   
      <md-toolbar layout-align="center" class="md-tall" md-colors="{background: 'light-blue'}">
	  
      <div class="md-toolbar-tools" layout-align="center center">
        <img ng-src="/modules/dashboards/web/EMC Logo.png">
        
          <!-- <h1 class="md-display-3" style="color:white">Karratha Building 4 Generation Management System </h1>  <-->
 		   <p class="md-display-2" style="color:white">Karratha Building 4 Generation Management System</p>

        
        <!-- fill up the space between left and right area -->
        <span flex></span>


        </div>

      </md-toolbar>
  
    
   
   
   
          <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card1').style.display='block'">Unhide Card 1
  
  </md-button>
   <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}"  onclick="document.getElementById('card2').style.display='block'">Unhide Card 2
  
  </md-button>
 
 <md-button class="md-raised md-primary"  md-colors="{background: 'light-blue'}" onclick="document.getElementById('card3').style.display='block'">Unhide Card 3
  
  </md-button>
  
   <md-button class="md-raised md-primary"  md-colors="{background: 'light-blue'}" onclick="document.getElementById('card4').style.display='block'">Unhide Card 4
  
  </md-button>
   
   <md-button class="md-raised md-primary"  md-colors="{background: 'light-blue'}" onclick="document.getElementById('card5').style.display='block'">Unhide Card 5
  
  </md-button>

<div flex layout="column" layout-fill>
    <div flex-gt-sm="33" flex="50" layout="column" layout-gt-sm="row">
        <div layout="row" flex>
            <md-card id="card1" class="cardage">
        
            <md-toolbar md-colors="{background: 'light-blue'}">
                <div class="md-toolbar-tools">
                    <div layout="row">
                </div>
                    <h1 class="md-title" style="color:white">Solar</h1>
            
                    </div>
         
            </md-toolbar>
      
       <img ng-src="/modules/dashboards/web/solar_240_60pct.png" class="md-card-image" alt="Washed Out">
       <md-card-content>

         <h2 class="md-title">Now: <ma-point-value point-xid="DP_KAR-MIRB4_854391"></ma-point-value> 

         <ma-point-statistics point-xid="DP_KAR-MIRB4_854391" from="from" to="to" statistics="statsObj1"></ma-point-statistics>

         <div>
             Max:    {{ statsObj1.maximum.value }}<br>
             Min:     {{ statsObj1.minimum.value }}<br>
             Avg:   {{ statsObj1.average.value }}
         </div>
         </h2>
         
        </md-card-content>
 
        <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card1').style.display='none'">Hide Card</md-button> 
 
    </md-card>
        </div>

        <div layout="row" flex>
            <md-card id="card2" class="cardage">
        
      <md-toolbar md-colors="{background: 'light-blue'}">
      <div class="md-toolbar-tools">
      <div layout="row">
     </div>
       <h1 class="md-title" style="color:white">Battery</h1>
            
      </div>
         
    </md-toolbar>
      
      <img ng-src="/modules/dashboards/web/battery_240_60pct.png" class="md-card-image" alt="Washed Out">
 <md-card-content>
     <!--
     <h2 class="md-title"> Battery Power: <br> <ma-point-value point-xid="DP_KAR-MIRB4_597247"></ma-point-value>
     </h2> <-->
     <h2 class="md-title">Now: <ma-point-value point-xid="DP_KAR-MIRB4_597247"></ma-point-value> <br>

   <ma-point-statistics point-xid="DP_KAR-MIRB4_597247" from="from" to="to" statistics="statsObj2"></ma-point-statistics>
<div>
     Max:    {{ statsObj2.maximum.value }}<br>
     Min:     {{ statsObj2.minimum.value }}<br>
     Avg:   {{ statsObj2.average.value }}  
     
</div>

</h2>
     
     
 </md-card-content>
 
    <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card2').style.display='none'">Hide Card</md-button>
  <!--<md-button ng-style="{color:'blue','font-size':'18px'}"> Button </md-button
  -->
  </md-card>
  
        </div>

        <div layout="row" flex>
            <md-card id="card3" class="cardage">
        
      <md-toolbar md-colors="{background: 'light-blue'}">
      <div class="md-toolbar-tools">
      <div layout="row">
     </div>
       <h1 class="md-title" style="color:white">GMS</h1>
            
      </div>
         
    </md-toolbar>
      
      <img ng-src="/modules/dashboards/web/battery_240_60pct.png" class="md-card-image" alt="Washed Out">
 <md-card-content>
     
    <h2 class="md-title">Now: <ma-point-value point-xid="DP_KAR-MIRB4_859174"></ma-point-value> 

    
   <ma-point-statistics point-xid="DP_KAR-MIRB4_859174" from="from" to="to" statistics="statsObj3"></ma-point-statistics>

<div>
     Max:{{ statsObj3.maximum.value }}<br>
     Min:{{ statsObj3.minimum.value }}<br>
     Avg:{{ statsObj3.average.value }}
</div>
</h2>
     
 </md-card-content>
 
    <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card3').style.display='none'">Hide Card</md-button>
  <!--<md-button ng-style="{color:'blue','font-size':'18px'}"> Button </md-button
  -->
  </md-card>
  </div>
  
  <div layout="row" flex>
            <md-card id="card4" class="cardage">
        
      <md-toolbar md-colors="{background: 'light-blue'}">
      <div class="md-toolbar-tools">
      <div layout="row">
     </div>
       <h1 class="md-title" style="color:white">SoC</h1>
            
      </div>
         
    </md-toolbar >
      
      <img ng-src="/modules/dashboards/web/battery_240_60pct.png" class="md-card-image" alt="Washed Out">
 <md-card-content>
    
     <h2 class="md-title">Now: <ma-point-value point-xid="DP_KAR-MIRB4_524460"></ma-point-value> <br>

   <ma-point-statistics point-xid="DP_KAR-MIRB4_524460" from="from" to="to" statistics="statsObj4"></ma-point-statistics>
<div>
     Max:    {{ statsObj4.maximum.value }}<br>
     Min:     {{ statsObj4.minimum.value }}<br>
     Avg:   {{ statsObj4.average.value }}  
     
</div>

</h2>
     
     
 </md-card-content>
 
    <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card4').style.display='none'">Hide Card</md-button>
  <!--<md-button ng-style="{color:'blue','font-size':'18px'}"> Button </md-button
  -->
  </md-card>
  
  </div>
  
   <div layout="row" flex>
            <md-card id="card5" class="cardage">
        
      <md-toolbar md-colors="{background: 'light-blue'}">
      <div class="md-toolbar-tools">
      <div layout="row">
     </div>
       <h1 class="md-title" style="color:white">Energy</h1>
            
      </div>
         
    </md-toolbar>
      
      <img ng-src="/modules/dashboards/web/battery_240_60pct.png" class="md-card-image" alt="Washed Out">
 <md-card-content>
    
     <h2 class="md-title">Total: <ma-point-value point-xid="DP_KAR-MIRB4_314854"></ma-point-value> <br>
        Today: <ma-point-value point-xid="DP_383564"></ma-point-value> <br>
     Total $: <ma-point-value point-xid="DP_522056"></ma-point-value> <br>
     Today $: <ma-point-value point-xid="DP_293348"></ma-point-value> <br>
     </h2>
    
     
     
 </md-card-content>
 
    <md-button class="md-raised md-primary" md-colors="{background: 'light-blue'}" onclick="document.getElementById('card5').style.display='none'">Hide Card</md-button>
  <!--<md-button ng-style="{color:'blue','font-size':'18px'}"> Button </md-button
  -->
  </md-card>
  
  </div>
  
  
    </div>
    </div>
    <div flex layout="column" layout-fill>
       <div flex layout="row">
    
</div>


<div layout="row" layout-xs="column" class="no-errors-spacer">
    <md-input-container flex="">
       <label>Date preset</label>
       <ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="1 minutes"></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>

<ma-point-values point-xid="DP_KAR-MIRB4_597247" values="point1Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>

<ma-point-values point-xid="DP_KAR-MIRB4_854391" values="point2Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>

<ma-point-values point-xid="DP_KAR-MIRB4_859174" values="point3Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>

<ma-point-values point-xid="DP_KAR-MIRB4_524460" values="point4Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>


<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-title="Battery" legend="true" balloon="true" export="true" series-2-values="point2Values" series-2-title="Solar" series-3-values="point3Values" series-3-title="GMS" series-4-values="point4Values" series-4-title="SoC" series-4-axis="right" options="{valueAxes:[{title: 'Power(kW)',},{minimum:0,title:'SoC(%)'}]}" >
</ma-serial-chart>

 <p>*Savings based on flat 34.9 cent Tarriff* </p>
</div>  
    </div>
</div>
        
    </div>

    <script src="/resources/require.js"></script>
    <script src="/resources/loaderConfig.js"></script>
    <script src="../js/loaderConfig.js"></script>
  <script>require(['mango-3.2/bootstrap']);</script>
	<script>require(['dashboards/TestDBoard/app']);</script>
</body>
</html>

[JoelHaggar]

Is there a reason you copied the template rather than using editable pages in the webapp provided as shown in this video? http://help.infiniteautomation.com/support/solutions/articles/14000041730-introduction-to-html5-web-apps

[MaP]

I started on the editable pages and thought that the natural progression was to then create your own index.html file - I haven't watched that video but sounds like I should. I had already saved the page with a new name in the edit pages section. Im not too sure how the edit menu options work - when a user logs in they still see the navigation bar but none of the values load (perhaps need to associate specific XID's with that users permissions . Will watch the video now. Cheers

[JoelHaggar]

Coping the template was one of the original ways to work with it before we had the editable webapp. the idea is that you can use the webapp and fully customize the menu and pages within it. This makes development much much simpler because all you have to worry about is the content of your pages and most of the hard work is already done for you.

[MaP]

I tried using the loginPageTemplate to get the login functionality and have basically hijacked the home.html file by commenting out what it contained and then pasted in my previous index.html file. The login redirection worked perfectly the only issue with this seems to be the dashboard area is restricted somehow but i cant find where I have looked through the css file but cant see where this window sizing is defined.

[MaP]

The dashboard sizing was in the main.html in the views folder; commenting out the md-content portion fixed the dashboard sizing issue.

<div ui-view flex="noshrink"></div>

<!--
<div flex layout="row">
<md-content ui-view flex="100" flex-gt-sm="50" flex-offset-gt-sm="25"></md-content>
</div>
<-->

I had changed this but hadn't cleared my browser cache so i wasnt able to see it work so i kept looking for another cause.. rookie mistake i thinks. Always clear browsing data!

[phildunlap]

There is a setting in your developer tools that can disable caching while you have the developer tools open. I would encourage you to check that and keep your developer tools open during development, both for the cache and seeing anything that is being printed to the console.