mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Add some small changes to the layout
This commit is contained in:
Markus Grigull
parent
c9b2b5778d
commit
7c681592a0
7 changed files with 91 additions and 53 deletions
2
app/components/d3-gauge.js
vendored
2
app/components/d3-gauge.js
vendored
|
|
@ -32,7 +32,7 @@ export default Ember.Component.extend({
|
|||
var majorDelta = range / (this.majorTicks - 1);
|
||||
var minorDelta = majorDelta / this.minorTicks;
|
||||
var midValue = (this.minValue + this.maxValue) / 2;
|
||||
var pointerFontSize = Math.round(this.size / 10);
|
||||
var pointerFontSize = Math.round(this.size / 7);
|
||||
|
||||
// create body element
|
||||
var body = d3.select('#' + this.elementId).append("svg:svg");
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ export default Ember.Component.extend({
|
|||
classNames: ['line-chart'],
|
||||
attributeBindings: ['style'],
|
||||
xaxisLength: 300,
|
||||
minValue: '',
|
||||
maxValue: '',
|
||||
label: '',
|
||||
updateTime: 100,
|
||||
height: '100%',
|
||||
useLabel: true,
|
||||
|
|
@ -33,8 +36,8 @@ export default Ember.Component.extend({
|
|||
_drawPlot: function() {
|
||||
var element = this.get('element');
|
||||
if (element && element.id) {
|
||||
if (this.data && this.data.get('values')) {
|
||||
var values = this.data.get('values');
|
||||
if (this.data) {
|
||||
var values = this.data[0].data;
|
||||
|
||||
if (values.length > 0) {
|
||||
// get first and last time stamp for plot
|
||||
|
|
@ -66,19 +69,23 @@ export default Ember.Component.extend({
|
|||
max: lastTimestamp
|
||||
},
|
||||
yaxis: {
|
||||
tickDecimals: 3
|
||||
tickDecimals: 2
|
||||
}
|
||||
}
|
||||
|
||||
// set y axis scale
|
||||
if (this.data.get('minValue')) {
|
||||
options.yaxis.min = this.data.get('minValue');
|
||||
} else if (this.get('minValue') !== '') {
|
||||
options.yaxis.min = this.get('minValue');
|
||||
}
|
||||
|
||||
if (this.data.get('maxValue')) {
|
||||
options.yaxis.max = this.data.get('maxValue');
|
||||
} else if (this.get('maxValue') !== '') {
|
||||
options.yaxis.max = this.get('maxValue');
|
||||
}
|
||||
|
||||
|
||||
// setup plot data
|
||||
var plotData = {
|
||||
data: values,
|
||||
|
|
@ -86,11 +93,15 @@ export default Ember.Component.extend({
|
|||
}
|
||||
|
||||
if (this.get('useLabel')) {
|
||||
plotData.label = this.data.get('name') + " [" + this.data.get('type') + "]";
|
||||
if (this.get('label') !== '') {
|
||||
plotData.label = this.get('label');
|
||||
} else {
|
||||
plotData.label = this.data.get('name') + " [" + this.data.get('type') + "]";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// draw plot
|
||||
$.plot('#' + element.id, [plotData], options);
|
||||
$.plot('#' + element.id, this.data, options);
|
||||
} else {
|
||||
// display empty chart
|
||||
$.plot('#' + element.id, [[]], {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,33 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
export default Ember.Controller.extend({
|
||||
state: 1,
|
||||
freq575GreenZones: [{from: 49.5, to: 50.5}],
|
||||
freq575YellowZones: [{from: 47.5, to: 49.5}, {from: 50.5, to: 52.5}],
|
||||
freq575RedZones: [{from: 45.0, to: 47.5}, {from: 52.5, to: 55}],
|
||||
freq575YellowZones: [{from: 49, to: 49.5}, {from: 50.5, to: 51}],
|
||||
|
||||
init: function() {
|
||||
this.set('dataSet', this.get('dataSetOne'));
|
||||
this.set('state', 1);
|
||||
|
||||
this._updateButtons();
|
||||
Ember.run.later(this, this._updateState, 100);
|
||||
},
|
||||
|
||||
S1Entity: function() {
|
||||
return this.model.findBy('id', 'S1_ElectricalGrid');
|
||||
}.property('model.[]'),
|
||||
|
||||
Voltage203937: function() {
|
||||
var entity = this.model.findBy('id', 'S1_ElectricalGrid');
|
||||
if (entity) {
|
||||
return entity.get('properties').findBy('name', 'Voltage203937');
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}.property('model.[]'),
|
||||
Voltage203937: function() {
|
||||
var entity = this.model.findBy('id', 'S1_ElectricalGrid');
|
||||
if (entity) {
|
||||
return [
|
||||
{
|
||||
label: 'Voltage203937',
|
||||
data: entity.get('properties').findBy('name', 'Voltage203937').get('values'),
|
||||
color: "rgb(51, 153, 255)"
|
||||
}
|
||||
];
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}.property('model.[]'),
|
||||
|
||||
Freq575Value: function() {
|
||||
var entity = this.model.findBy('id', 'S1_ElectricalGrid');
|
||||
|
|
@ -37,6 +41,28 @@ export default Ember.Controller.extend({
|
|||
}
|
||||
}.property('model.[]'),
|
||||
|
||||
LoadGenProfiles: function() {
|
||||
var entity = this.model.findBy('id', 'S1_ElectricalGrid');
|
||||
if (entity) {
|
||||
console.log(entity.get('properties').findBy('name', 'LoadProfile'));
|
||||
|
||||
return [
|
||||
{
|
||||
label: 'Total consumption [MW]',
|
||||
data: entity.get('properties').findBy('name', 'LoadProfile').get('values'),
|
||||
color: "rgb(51, 153, 255)"
|
||||
},
|
||||
{
|
||||
label: 'Total PV generation [MW]',
|
||||
data: entity.get('properties').findBy('name', 'GenProfile').get('values'),
|
||||
color: "rgb(255, 91, 51)"
|
||||
}
|
||||
];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}.property('model.[]'),
|
||||
|
||||
initState: function() {
|
||||
return this.get('state') === 1;
|
||||
}.property('state'),
|
||||
|
|
@ -45,19 +71,17 @@ export default Ember.Controller.extend({
|
|||
return this.get('state') === 2;
|
||||
}.property('state'),
|
||||
|
||||
_updateButtons: function() {
|
||||
_updateState: function() {
|
||||
var control = this.store.peekRecord('data-file-control', 'DataFileControl');
|
||||
var updated = false;
|
||||
|
||||
if (control.get('Filename') === 'm1_S1_ElectricalGrid_data.txt') {
|
||||
if (control.get('Filename') === '/share/data/m1_S1_ElectricalGrid_data.txt') {
|
||||
if (this.get('state') !== 1) {
|
||||
his.set('state', 1);
|
||||
updated = true;
|
||||
this.set('state', 1);
|
||||
}
|
||||
} else {
|
||||
if (this.get('state') !== 2) {
|
||||
this.set('state', 2);
|
||||
updated = true;
|
||||
this.set('state', 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,39 +89,41 @@ export default Ember.Controller.extend({
|
|||
if (this.get('state') === 1) {
|
||||
control.set('ForceReload', true);
|
||||
} else {
|
||||
control.set('Filename', 'm1_S1_ElectricalGrid_data.txt');
|
||||
control.set('Filename', '/share/data/m1_S1_ElectricalGrid_data.txt');
|
||||
}
|
||||
|
||||
updated = true;
|
||||
}
|
||||
|
||||
if (updated) {
|
||||
control.save();
|
||||
console.log("Update data control");
|
||||
control.save();
|
||||
}
|
||||
|
||||
Ember.run.later(this, this._updateState, 100);
|
||||
},
|
||||
|
||||
_updateDataFileControl: function() {
|
||||
_updateDataFileControl: function(state) {
|
||||
var control = this.store.peekRecord('data-file-control', 'DataFileControl');
|
||||
|
||||
if (this.get('state') === 1) {
|
||||
control.set('Filename', 'm1_S1_ElectricalGrid_data.txt');
|
||||
if (state === 1) {
|
||||
control.set('Filename', '/share/data/m1_S1_ElectricalGrid_data.txt');
|
||||
} else {
|
||||
control.set('Filename', 'm2_S1_ElectricalGrid_data.txt');
|
||||
control.set('Filename', '/share/data/m2_S1_ElectricalGrid_data.txt');
|
||||
}
|
||||
|
||||
console.log("changed data control");
|
||||
control.set('ForceReload', true);
|
||||
control.save();
|
||||
}.observes('state'),
|
||||
},
|
||||
|
||||
actions: {
|
||||
resetData: function() {
|
||||
this.set('state', 1);
|
||||
this.set('dataSet', this.get('dataSetOne'));
|
||||
this._updateDataFileControl(1);
|
||||
},
|
||||
|
||||
eventData: function() {
|
||||
this.set('state', 2);
|
||||
this.set('dataSet', this.get('dataSetTwo'));
|
||||
this._updateDataFileControl(2);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -159,10 +159,6 @@ export default DS.RESTSerializer.extend({
|
|||
});
|
||||
}
|
||||
|
||||
if (timestamp === 0) {
|
||||
timestamp = (new Date()).getTime();
|
||||
}
|
||||
|
||||
// create property
|
||||
var property = {
|
||||
type: 'property',
|
||||
|
|
@ -194,7 +190,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]);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -235,7 +231,7 @@ export default DS.RESTSerializer.extend({
|
|||
// create record if needed, otherwise add to current one
|
||||
var record = this.store.peekRecord('property', item.id);
|
||||
if (record) {
|
||||
if (record.timestamp !== item.attributes.timestamp) {
|
||||
if (record.get('timestamp') !== item.attributes.timestamp) {
|
||||
item.attributes.values.forEach(function (value) {
|
||||
record.get('values').push(value);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@
|
|||
</ul>
|
||||
</p>
|
||||
|
||||
{{d3-gauge label="Frequency" value=Freq575Value minValue=45 maxValue=55 minorTicks=4 greenZones=freq575GreenZones yellowZones=freq575YellowZones redZones=freq575RedZones}}
|
||||
{{d3-gauge label="Freq" value=Freq575Value minValue=49 maxValue=51 minorTicks=4 size=150 greenZones=freq575GreenZones yellowZones=freq575YellowZones}}
|
||||
</td>
|
||||
<td style="width: 25%">
|
||||
<img src={{"assets/images/TS_section/TS_fig1.svg"}} class="svg-image" />
|
||||
<img src={{"assets/images/TS_section/TS_fig1.svg"}} class="svg-image" style="float: right" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<h2>Control Center</h2>
|
||||
</td>
|
||||
<td style="width: 25%">
|
||||
<img src={{"assets/images/ControlCenter_section/CS_fig1.svg"}} class="svg-image" />
|
||||
<img src={{"assets/images/ControlCenter_section/CS_fig1.svg"}} class="svg-image" style="float: right" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 75%">
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
Voltage measurement
|
||||
</h3>
|
||||
|
||||
{{line-chart data=Voltage203937 height="90%"}}
|
||||
{{line-chart data=Voltage203937 height="90%" xaxisLength=120 minValue=0.95 maxValue=1.05 label="RMS voltage [pu]"}}
|
||||
</td>
|
||||
<td style="width: 50%" colspan="2">
|
||||
<button {{action 'resetData'}} disabled={{initState}}>Reset</button>
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
</p>
|
||||
</td>
|
||||
<td style="width: 25%">
|
||||
<img src={{"assets/images/DS_section/DS_fig1.svg"}} class="svg-image" />
|
||||
<img src={{"assets/images/DS_section/DS_fig1.svg"}} class="svg-image" style="float: right" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
<h2>Prosumer behavior</h2>
|
||||
</td>
|
||||
<td style="width: 25%">
|
||||
<img src={{"assets/images/Prosumer_section/Cnsmr_fig1.svg"}} class="svg-image" />
|
||||
<img src={{"assets/images/Prosumer_section/Cnsmr_fig1.svg"}} class="svg-image" style="float: right" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 75%">
|
||||
|
|
@ -133,10 +133,15 @@
|
|||
Prosumer: Consumption and generation profiles
|
||||
</h3>
|
||||
|
||||
{{line-chart data=LoadProfile height="40%"}}
|
||||
{{line-chart data=LoadGenProfiles height="90%" minValue=0 maxValue=25}}
|
||||
</td>
|
||||
<td style="width: 50%" colspan="2">
|
||||
<img src={{"assets/images/Prosumer_section/Cnsmr_fig2.svg"}} class="svg-image" />
|
||||
<td style="width: 50%;" colspan="2">
|
||||
{{#if initState}}
|
||||
<img src={{"assets/images/Prosumer_section/Prosumer_gif_m1.gif"}} style="width: 60%; height: auto" />
|
||||
{{/if}}
|
||||
{{#if eventState}}
|
||||
<img src={{"assets/images/Prosumer_section/Prosumer_gif_m2.gif"}} style="width: 60%; height: auto" />
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
BIN
public/assets/images/Prosumer_section/Prosumer_gif_m1.gif
Normal file
BIN
public/assets/images/Prosumer_section/Prosumer_gif_m1.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 KiB |
BIN
public/assets/images/Prosumer_section/Prosumer_gif_m2.gif
Normal file
BIN
public/assets/images/Prosumer_section/Prosumer_gif_m2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Loading…
Add table
Reference in a new issue