Final version

app/controllers/lab-mashup.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import ENV from '../config/environment';
 
 export default Ember.Controller.extend({
   freq575GreenZones: [{from: 49.5, to: 50.5}],
@@ -28,6 +29,11 @@ export default Ember.Controller.extend({
     return this.get('state') === 2 || this.get('state') === 0;
   }.property('state'),
 
+  showExtendedView: function() {
+    Ember.debug(ENV.APP.SHOW_EXTENDED_VIEW);
+    return ENV.APP.SHOW_EXTENDED_VIEW;
+  }.property(),
+
   _updateController: function() {
     // update attribute values
     this._updateAttributes();
@@ -35,21 +41,28 @@ export default Ember.Controller.extend({
     // get new data file control state from store
     if (this._freezeState === false) {
       var control = this.store.peekRecord('data-file-control', 'DataFileControl');
+      var reload = control.get('ForceReload');
 
-      if (control.get('Filename') === '/share/data/m1_S1_ElectricalGrid_data.txt') {
-	// state 1
-	if (this.get('state') !== 1) {
-	  this.set('state', 1);
-	}
-      } else {
-	// state 2
-	if (this.get('state') !== 2) {
-	  this.set('state', 2);
+      if (reload === false || reload === 'false') {
+	if (control.get('Filename') === '/share/data/m1_S1_ElectricalGrid_data.txt') {
+	  // state 1
+	  if (this.get('state') !== 1) {
+	    this.set('state', 1);
+
+	    Ember.debug('update state (1)');
+	  }
+	} else {
+	  // state 2
+	  if (this.get('state') !== 2) {
+	    this.set('state', 2);
+
+	    Ember.debug('update state (2)');
+	  }
 	}
       }
 
       var status = control.get('Status');
-      var reload = control.get('ForceReload');
+      
 
       /*Ember.debug('status: ' + status + ', reload: ' + reload);*/
 
@@ -67,7 +80,7 @@ export default Ember.Controller.extend({
       }
     }
 
-    Ember.run.later(this, this._updateController, 100);
+    Ember.run.later(this, this._updateController, ENV.APP.UPDATE_RATE);
   }.on('init'),
 
   _updateAttributes: function() {

app/routes/lab-mashup.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import ENV from '../config/environment';
 
 export default Ember.Route.extend({
   model() {
@@ -21,7 +22,7 @@ export default Ember.Route.extend({
     // first time call poll
     Ember.run.later(this, function() {
       this.refreshEntities();
-    }, 100);
+    }, ENV.APP.UPDATE_RATE);
   },
 
   refreshEntities: function() {
@@ -43,6 +44,6 @@ export default Ember.Route.extend({
     // reschedule refresh
     Ember.run.later(this, function() {
       this.refreshEntities();
-    }, 100);
+    }, ENV.APP.UPDATE_RATE);
   }
 });

app/serializers/application.js

@@ -80,6 +80,20 @@ export default DS.RESTSerializer.extend({
     }
   },
 
+  normalizeSaveResponse: function(store, primaryModelClass, payload, id, requestType) {
+    if (payload.contextResponses) {
+      payload.contextResponses.forEach(function(response) {
+	if (response.statusCode.code !== 200 && response.statusCode.code !== '200') {
+	  Ember.debug('Failed update DataFileControl: ' + response.statusCode.code + ', ' + response.statusCode.details);
+	}
+      });
+    }
+
+    Ember.debug('cb response');
+
+    return { data: {} };
+  },
+
   _normalizePayload: function(payload, handleItem) {
     var propertyIndex = 0;
 
@@ -145,11 +159,11 @@ export default DS.RESTSerializer.extend({
 		      if (metadata.name === 'timestamp') {
 			timestamp = Date.parse(metadata.value);
 		      } else if (metadata.name === 'source') {
-									    source = metadata.value;
+			source = metadata.value;
 		      } else if (metadata.name === 'min') {
-									    minValue = metadata.value;
+			minValue = metadata.value;
 		      } else if (metadata.name === 'max') {
-									    maxValue = metadata.value;
+			maxValue = metadata.value;
 		      }
 		    });
 		  }
@@ -233,6 +247,12 @@ export default DS.RESTSerializer.extend({
           record.get('values').push(value);
         });
 
+	// erase old data
+	while (record.get('values').length > 500) {
+	  record.get('values').shift();
+	  /*Ember.debug('Shift on ' + record.get('name'));*/
+	}
+
         record.set('timestamp', item.attributes.timestamp);
 	record.set('currentValue', item.attributes.currentValue);
       }

app/styles/app.css

@@ -61,29 +61,29 @@ header {
 	color: #103B7D;
 	background-color: #fff;
 
-	height: 60px;
+	height: 80px;
 	top: 0;
 	
 	border-bottom: 3px solid #bbb;
 }
 
 header #title {
-	font-size: 25px;
+	font-size: 30px;
 	font-weight: 100;
 	text-align: left;
 	text-rendering: optimizeLegibility;
 	-webkit-text-rendering: optimizeLegiblity;
 	-moz-text-rendering: optimizeLegibitliy;
 	
-	padding: 15px 0 20px 30px;
+	padding: 25px 0 20px 30px;
 	
 	float: left;
 }
 
 header #logos {
-	height: 60px;
+	height: 80px;
 	
-	padding-top: 15px;
+	padding-top: 8px;
 	
 	float: right;
 }
@@ -100,7 +100,7 @@ footer {
 }
 
 #main {
-	top: 60px;
+	top: 80px;
 	bottom: 0px;
 	
 	left: 20px;
@@ -108,13 +108,13 @@ footer {
 }
 
 .svg-image {
-	width: 60%;
+	width: 95%;
 	height: auto;
 }
 
 .svg-logo {
 	width: auto;
-	height: 30px;
+	height: 60px;
 	
 	padding-right: 30px;
 	
@@ -122,19 +122,19 @@ footer {
 }
 
 #rwth-logo {
-	margin-top: 10px;
+	margin-top: 15px;
 	
-	height: 15px !important;
+	height: 30px !important;
 }
 
 #DS-image {
   width: auto;
-  height: 405px;
+  height: 395px;
 }
 
 #TS-image {
   width: auto;
-  height: 410px;
+  height: 395px;
 }
 
 h1 {

app/templates/application.hbs

@@ -6,8 +6,7 @@
 		<div id="logos">
 			<img src={{"assets/images/EU.svg"}} class="svg-logo" />
 			<img src={{"assets/images/RWTH.svg"}} class="svg-logo" id="rwth-logo" />
-			<img src={{"assets/images/Logo3_Polito.svg"}} class="svg-logo" />
-			<img src={{"assets/images/flexmeter_logo.svg"}} class="svg-logo" />
+			<img src={{"assets/images/PoliTo.svg"}} class="svg-logo" />
 		</div>
 	</header>
 

app/templates/lab-mashup.hbs

@@ -63,13 +63,13 @@
 					      <h2>Control Center</h2>
 					    </td>
 					    <td style="width: 25%">
-					      <img src={{"assets/images/ControlCenter_section/CS_fig1.svg"}} class="svg-image" style="float: right; width: 50% !important" />
+					      <img src={{"assets/images/ControlCenter_section/CS_fig1.svg"}} class="svg-image" style="float: right; width: 65% !important" />
 					    </td>
 					  </tr>
 					  <tr style="height: 85%">
 					    <td style="width: 50%" colspan="2">
 					      <h3 style="text-align: center">
-						Distribution grid monitoring voltage measurement
+						Distribution grid monitoring: voltage measurement
 					      </h3>
 
 					      {{line-chart data=voltage203937 height="90%" xaxisLength=120 minValue=0.90  maxValue=1.05 label="RMS voltage [pu]"}}
@@ -81,9 +81,11 @@
 						<div style="position: relative; top: 30%; left: 30%">
 						  <button {{action 'eventData'}} disabled={{eventButtonState}} id="event-button">ABNORMAL<br />cloudy + high demand</button>
 						</div>
-						<div style="position: relative; top: 48%; left: 72%">
-						  <a class="link-button" href="/technical/" target="_blank">Technical</a>
-						</div>
+						{{#if showExtendedView}}
+						  <div style="position: relative; top: 45%; left: 72%">
+						    <a class="link-button" href="/technical/" target="_blank">Extended View</a>
+						  </div>
+						{{/if}}
 					    </td>
 					  </tr>
 					</table>
@@ -120,7 +122,7 @@
 					    <li>Total length of lines: 38,54 km</li>
 					  </ul>
 					</p>
-					{{bar-chart data=totalPValue width='200px' height='250px' maxValue=30}}
+					{{bar-chart data=totalPValue width='200px' height='230px' maxValue=30}}
 					<h3 style="padding-left: 15px;">
 					  Total Net Consumption [MW]
 					</h3>
@@ -140,7 +142,7 @@
 					      <h2>Prosumer behavior</h2>
 					    </td>
 					    <td style="width: 25%">
-					      <img src={{"assets/images/Prosumer_section/Cnsmr_fig1.svg"}} class="svg-image" style="float: right; width: 50% !important;" />
+					      <img src={{"assets/images/Prosumer_section/Cnsmr_fig1.svg"}} class="svg-image" style="float: right; width: 65% !important;" />
 					    </td>
 					  </tr>
 					  <tr style="height: 85%">

config/environment.js

@@ -17,7 +17,9 @@ module.exports = function(environment) {
       // Here you can pass flags/options to your application instance
       // when it is created
 
-      API_HOST: 'http://46.101.131.212:80'
+      API_HOST: '',
+      UPDATE_RATE: 200,
+      SHOW_EXTENDED_VIEW: true,
     },
 
     contentSecurityPolicy: {
@@ -31,6 +33,11 @@ module.exports = function(environment) {
     }
   };
 
+  // disable mirage
+  ENV['ember-cli-mirage'] = {
+    enabled: false
+  }
+
   if (environment === 'development') {
     // ENV.APP.LOG_RESOLVER = true;
     // ENV.APP.LOG_ACTIVE_GENERATION = true;
@@ -38,12 +45,7 @@ module.exports = function(environment) {
     // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
     // ENV.APP.LOG_VIEW_LOOKUPS = true;
 
-    //ENV.APP.API_HOST = 'http://localhost:4200';
-
-    ENV['ember-cli-mirage'] = {
-      //enabled: true
-      enabled: false
-    }
+    ENV.APP.API_HOST = 'http://46.101.131.212:80';
   }
 
   if (environment === 'test') {
@@ -59,12 +61,15 @@ module.exports = function(environment) {
   }
 
   if (environment === 'production') {
-    ENV.APP.API_HOST = 'http://46.101.131.212:80';
     ENV.baseURL = '/simple/';
+  }
 
-    ENV['ember-cli-mirage'] = {
-      enabled: false
-    }
+  if (environment === 'simple') {
+    ENV.APP.SHOW_EXTENDED_VIEW = false;
+  }
+
+  if (environment === 'extended') {
+    ENV.APP.SHOW_EXTENDED_VIEW = true;
   }
 
   return ENV;