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 -
0_1483596417412_upload-100604de-be6c-4885-ab42-40a6adef911c

Page at http://XX.XXX.X.XXX/modules/dashboards/web/TestDBoard/
0_1483596473658_upload-1840ced5-a879-415b-ae77-9810b764b6f2

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>

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>

0_1483662987487_upload-209b77e5-8ade-4ce4-aa00-ff4bedacd3a5

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.

0_1483670143547_upload-a558bedb-d1ac-44d2-8cce-586c24b448e4

MaP

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

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.