Add changes to extended layout

app/components/line-chart.js

@@ -1,11 +1,11 @@
 import Ember from 'ember';
+import ENV from '../config/environment';
 
 export default Ember.Component.extend({
   tagName: 'div',
   classNames: ['line-chart'],
 	attributeBindings: ['style'],
-  xaxisLength: 300,
-  updateTime: 100,
+  xaxisLength: 120,
 	height: '100%',
 	useLabel: true,
 
@@ -19,7 +19,7 @@ export default Ember.Component.extend({
 
     Ember.run.later(this, function() {
       this._drawPlot();
-    }, this.updateTime);
+    }, ENV.APP.UPDATE_RATE);
   },
 
   dataDidChange: function() {
@@ -108,6 +108,6 @@ export default Ember.Component.extend({
     // try again
     Ember.run.later(this, function() {
       this._drawPlot();
-    }, this.updateTime);
+    }, ENV.APP.UPDATE_RATE);
   }
 });

app/controllers/lab-mashup.js

@@ -9,24 +9,38 @@ export default Ember.Controller.extend({
     return this.model.findBy('id', 'S2_ElectricalGrid');
   }.property('model.[]'),
 	
-	S1Freq575: function() {
-		var entity = this.model.findBy('id', 'S1_ElectricalGrid');
-		if (entity) {
-			return entity.get('properties').findBy('name', 'Freq_575');
-		}
-	}.property('model.[]'),
-	
-	S2Voltage203937: function() {
-		var entity = this.model.findBy('id', 'S2_ElectricalGrid');
-		if (entity) {
-			return entity.get('properties').findBy('name', 'Voltage203937');
-		}
-	}.property('model.[]'),
-	
-	S2Flow1551412_204871: function() {
-		var entity = this.model.findBy('id', 'S2_ElectricalGrid');
-		if (entity) {
-			return entity.get('properties').findBy('name', 'Flow1551412_204871');
-		}
-	}.property('model.[]')
+  S1Freq575: function() {
+    var entity = this.model.findBy('id', 'S1_ElectricalGrid');
+    if (entity) {
+      return entity.get('properties').findBy('name', 'Freq_575');
+    }
+  }.property('model.[]'),
+
+  S2Voltage203937: function() {
+    var entity = this.model.findBy('id', 'S2_ElectricalGrid');
+    if (entity) {
+      return entity.get('properties').findBy('name', 'Voltage203937');
+    }
+  }.property('model.[]'),
+
+  S2Flow1551412_204871: function() {
+    var entity = this.model.findBy('id', 'S2_ElectricalGrid');
+    if (entity) {
+      return entity.get('properties').findBy('name', 'Flow1551412_204871');
+    }
+  }.property('model.[]'),
+
+  S3LoadProfile: function() {
+    var entity = this.model.findBy('id', 'S3_ElectricalGrid');
+    if (entity) {
+      return entity.get('properties').findBy('name', 'LoadProfile');
+    }
+  }.property('model.[]'),
+
+  S3GenProfile: function() {
+    var entity = this.model.findBy('id', 'S3_ElectricalGrid');
+    if (entity) {
+      return entity.get('properties').findBy('name', 'GenProfile');
+    }
+  }.property('model.[]')
 });

app/routes/lab-mashup.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import ENV from '../config/environment';
 
 export default Ember.Route.extend({
   model() {
@@ -12,6 +13,11 @@ export default Ember.Route.extend({
         id: 'S2_ElectricalGrid',
         isPattern: false,
         type: 'ElectricalGridMonitoring'
+      },
+      {
+	id: 'S3_ElectricalGrid',
+	isPattern: false,
+	type: 'ElectricalGridMonitoring'
       }
     ]});
     //return this.store.findAll('entity');
@@ -21,7 +27,7 @@ export default Ember.Route.extend({
     // first time call poll
     Ember.run.later(this, function() {
       this.refreshEntities();
-    }, 100);
+    }, ENV.APP.UPDATE_RATE);
   },
 
   refreshEntities: function() {
@@ -36,6 +42,11 @@ export default Ember.Route.extend({
         id: 'S2_ElectricalGrid',
         isPattern: false,
         type: 'ElectricalGridMonitoring'
+      },
+      {
+	id: 'S3_ElectricalGrid',
+	isPattern: false,
+	type: 'ElectricalGridMonitoring'
       }
     ]});
     //this.store.findAll('entity');
@@ -43,6 +54,6 @@ export default Ember.Route.extend({
     // reschedule refresh
     Ember.run.later(this, function() {
       this.refreshEntities();
-    }, 100);
+    }, ENV.APP.UPDATE_RATE);
   }
 });

app/serializers/application.js

@@ -78,33 +78,35 @@ export default DS.RESTSerializer.extend({
           }
 
           if (item.contextElement.attributes) {
-            item.contextElement.attributes.forEach(function(attribute) {
+            var timestamp = 0;
+
+	    item.contextElement.attributes.forEach(function(attribute) {
+	      if (attribute.name === 'timestamp') {
+		timestamp = attribute.value;
+	      }
+	    });
+	    
+	    item.contextElement.attributes.forEach(function(attribute) {
               if (attribute.type !== 'category' && attribute.name !== 'timestamp') {
                 // find metadata
-                var timestamp = 0;
-				var source = "";
-				var minValue;
-				var maxValue;
+		var source = "";
+		var minValue;
+		var maxValue;
 
 		if (attribute.metadatas) {
 		  attribute.metadatas.forEach(function(metadata) {
 		    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;
 		    }
 		  });
 		}
 
-                if (timestamp === 0) {
-                  timestamp = (new Date()).getTime();
-                }
-				
-
                 // create property
                 var property = {
                   type: 'property',
@@ -114,9 +116,9 @@ export default DS.RESTSerializer.extend({
                     type: attribute.type,
                     timestamp: timestamp,
                     visible: false,
-										source: source,
-										minValue: minValue,
-										maxValue: maxValue,
+		    source: source,
+		    minValue: minValue,
+		    maxValue: maxValue,
                     values: []
                   },
                   relationships: {
@@ -136,7 +138,7 @@ export default DS.RESTSerializer.extend({
                     	property.attributes.values.push(value);
                     });
                   } else {
-                    property.attributes.values.push([timestamp, attribute.value]);
+                    property.attributes.values.push([(new Date()).getTime(), attribute.value]);
                   }
                 }
 
@@ -181,6 +183,10 @@ export default DS.RESTSerializer.extend({
           record.get('values').push(value);
         });
 
+	while (record.get('values').length > 500) {
+	  record.get('values').shift();
+	}
+
         record.set('timestamp', item.attributes.timestamp);
       }
     } else {

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,23 +100,23 @@ footer {
 }
 
 #main {
-	top: 60px;
-	bottom: 25px;
+	top: 80px;
+	bottom: 0px;
 	
 	left: 20px;
 	right: 20px;
 }
 
 .svg-image {
-	width: 90%;
+	width: 96%;
 	height: auto;
 
-	padding-left: 130px;
+	padding-left: 42px;
 }
 
 .svg-logo {
 	width: auto;
-	height: 30px;
+	height: 60px;
 	
 	padding-right: 30px;
 	
@@ -124,9 +124,9 @@ footer {
 }
 
 #rwth-logo {
-	margin-top: 10px;
+	margin-top: 15px;
 	
-	height: 15px !important;
+	height: 30px !important;
 }
 
 h1 {
@@ -235,7 +235,6 @@ p {
 }
 
 #simulation-page {
-
 }
 
 #consumer-page h2 {

app/templates/application.hbs

@@ -7,14 +7,8 @@
 			<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/PoliTo.svg"}} class="svg-logo" />
-			<img src={{"assets/images/flexmeter_logo.svg"}} class="svg-logo" />
 		</div>
 	</header>
 
 	{{outlet}}
 </section>
-
-
-<footer class="row">
-	<p>&copy; 2015 - Institute for Automation of Complex Power Systems</p>
-</footer>

app/templates/components/entity-chart.hbs

@@ -1,15 +1,15 @@
 <table class="page-grid">
 	<tr>
-		<td valign="top" class="property-cell">
+		<td valign="top" class="property-cell" style="padding-top: 30px;">
 			{{#if entityAvailable}}
 				{{property-table model=entity showProperty="showPropertyValues"}}
 			{{/if}}
 		</td>
 		<td valign="top" width="100%" height="100%" class="chart-cell">	
-			<h2>{{entityName}}</h2>
+			<h1 style="text-align: center">{{entityName}}</h1>
 		
 			{{#if entityAvailable}}
-				{{line-chart data=visibleProperty height="80%"}}
+				{{line-chart data=visibleProperty height="95%"}}
 				
 				<!-- {{#if visibleProperty}}
 					<h4 class="label-source">Source: {{visibleProperty.source}}</h4>

app/templates/lab-mashup.hbs

@@ -1,35 +1,40 @@
 <section class="row" id="main">
 	<table class="grid">
-		<tr height="50%">
-			<td colspan="2" style="padding-top: 20px;">
-				<div class="layout-page" id="simulation-page" width="66%" height="100%">
+		<tr style="height: 50%">
+			<td colspan="2" style="padding-top: 20px; padding-right: 5px;">
+				<div class="layout-page" id="simulation-page">
 					<img src={{"assets/images/TS_DS_grid_withSimulators_web.svg"}} class="svg-image" />
 				</div>
 			</td>
-			<td rowspan="2" width="33%" style="padding-top: 20px; padding-bottom: 20px">
-				<div class="layout-page" id="consumer-page">
-					<h1>Consumer – JRC Petten</h1>
-					
-					<h2>Distribution grid: consumption and PV generation</h2>
-					{{static-chart height="35%"}}
-					
-					<h2>Voltage203937 [pu]</h2>
-					{{line-chart data=S2Voltage203937 height="15%" useLabel=false}}
-					
-					<h2>Flow1551412_204871 [MW]</h2>
-					{{line-chart data=S2Flow1551412_204871 height="15%" useLabel=false}}
-					
-					<h2>Frequency at the substation bus [Hz]</h2>
-					{{line-chart data=S1Freq575 height="15%" useLabel=false}}
-				</div>
+			<td width="33%" style="padding-top: 20px;">
+			  <div class="layout-page">
+			    <h1>Control Center</h1>
+
+			    <h2>Voltage203937 [pu]</h2>
+			    {{line-chart data=S2Voltage203937 height="40%" useLabel=false}}
+					  
+			    <h2>Frequency at the substation bus [Hz]</h2>
+			    {{line-chart data=S1Freq575 height="40%" useLabel=false}}
+			  </div>
 			</td>
 		</tr>
-		<tr height="50%">
+		<tr style="height: 50%">
 			<td width="33%" style="padding-bottom: 20px;">
-				{{entity-chart entity=S1Entity entityName="Transmission – RWTH Aachen University"}}
+				{{entity-chart entity=S1Entity entityName="Transmission system simulation"}}
 			</td>
 			<td width="33%" style="padding-bottom: 20px;">
-				{{entity-chart entity=S2Entity entityName="Distribution – Politecnico di Torino"}}
+				{{entity-chart entity=S2Entity entityName="Distribution system simulation"}}
+			</td>
+			<td style="width: 33%; padding-bottom: 20px;">
+			  <div class="layout-page" id="consumer-page">
+					<h1>Prosumer behavior</h1>
+					
+					<h2>Prosumer: Total consumption [MW]</h2>
+					{{line-chart data=S3LoadProfile height="40%" useLabel=false}}
+
+					<h2>Prosumer: Total PV generation [MW]</h2>
+					{{line-chart data=S3GenProfile height="40%" useLabel=false}}
+				</div>
 			</td>
 		</tr>
 	</table>

config/environment.js

@@ -5,7 +5,7 @@ module.exports = function(environment) {
     modulePrefix: 'lab-mashup',
     environment: environment,
     baseURL: '/',
-    locationType: 'auto',
+    locationType: 'none',
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
@@ -17,7 +17,8 @@ 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,
     },
 
     contentSecurityPolicy: {
@@ -31,6 +32,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 +44,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 +60,7 @@ module.exports = function(environment) {
   }
 
   if (environment === 'production') {
-    ENV.APP.API_HOST = 'http://46.101.131.212:80';
     ENV.baseURL = '/technical/';
-
-    ENV['ember-cli-mirage'] = {
-      enabled: false
-    }
   }
 
   return ENV;