Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

Improve displaying of signal scalingFactor for Plot, Table, Value and Gauge widgets; closes #248

Browse source
This commit is contained in:
Sonja Happ 2020-07-20 15:00:09 +02:00
parent 3c1e5107d4
commit 13359db606
5 changed files with 100 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/styles/widgets.css
View file

@ -181,6 +181,22 @@ span.signal-unit::after {
font-style: normal;
}
span.signal-scale {
color: grey;
font-style: italic;
font-weight: 200;
}
span.signal-scale::before {
content: '(x';
font-style: italic;
}
span.signal-scale::after {
content: ')';
font-style: italic;
}
/* End Plots */
.single-value-widget {

32
src/widget/widget-plot/plot-legend.js
View file

@ -19,17 +19,39 @@ import React from 'react';
import { scaleOrdinal} from 'd3-scale';
import {schemeCategory10} from 'd3-scale-chromatic'
function Legend(props){
const signal = props.sig;
const hasScalingFactor = (signal.scalingFactor !== 1);
if(hasScalingFactor){
return (
<li key={signal.id} className="signal-legend" style={{ color: props.colorScale(signal.id) }}>
<span className="signal-legend-name">{signal.name}</span>
<span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
<span style={{ marginLeft: '0.3em' }} className="signal-scale">{signal.scalingFactor}</span>
</li>
)
} else {
return (
<li key={signal.id} className="signal-legend" style={{ color: props.colorScale(signal.id) }}>
<span className="signal-legend-name">{signal.name}</span>
<span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
</li>
)
}
}
class PlotLegend extends React.Component {
render() {
const colorScale = scaleOrdinal(schemeCategory10);
return <div className="plot-legend">
<ul>
{this.props.signals.map(signal =>
<li key={signal.id} className="signal-legend" style={{ color: colorScale(signal.id) }}>
<span className="signal-legend-name">{signal.name + "(x" + signal.scalingFactor + ")"}</span>
<span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
</li>
{
this.props.signals.map( signal =>
<Legend key={signal.id} sig={signal} colorScale={colorScale}/>
)}
</ul>
</div>;

28
src/widget/widgets/gauge.js
View file

@ -29,6 +29,7 @@ class WidgetGauge extends Component {
this.state = {
value: 0,
unit: '',
scalingFactor: 1.0,
signalID: '',
minValue: null,
maxValue: null,
@ -96,6 +97,7 @@ class WidgetGauge extends Component {
// Update unit (assuming there is exactly one signal for this widget)
if (signal !== undefined) {
returnState["unit"] = signal[0].unit;
returnState["scalingFactor"] = signal[0].scalingFactor;
}
// update value
@ -105,7 +107,11 @@ class WidgetGauge extends Component {
|| props.data[icID] == null
|| props.data[icID].output == null
|| props.data[icID].output.values == null) {
return {value: 0, minValue: 0, maxValue: 10};
returnState["value"] = 0;
returnState["minValue"] = 0;
returnState["maxValue"] = 10;
return returnState;
}
// memorize if min or max value is updated
@ -183,12 +189,14 @@ class WidgetGauge extends Component {
returnState["maxValue"] = maxValue;
}
if (returnState !== {}) {
return returnState;
} else {
return null;
}
} // if there is signal data
if (JSON.stringify(returnState) !== JSON.stringify({})) {
return returnState;
} else {
return null;
}
}
return null;
@ -248,13 +256,19 @@ class WidgetGauge extends Component {
render() {
const componentClass = this.props.editing ? "gauge-widget editing" : "gauge-widget";
let scaleText = "";
if(this.state.scalingFactor !== 1){
scaleText = " (x" + this.state.scalingFactor + ")"
}
return (
<div className={componentClass}>
<div className="gauge-name">{this.props.widget.name}</div>
<canvas ref={node => this.gaugeCanvas = node} />
<div className="gauge-unit">{this.state.unit}</div>
<div className="gauge-unit">{this.state.unit + scaleText}</div>
<div className="gauge-value">{this.state.value}</div>
</div>
);
}

37
src/widget/widgets/table.js
View file

@ -41,22 +41,27 @@ class WidgetTable extends Component {
// determine ID of infrastructure component related to signal (via config)
let icID = props.icIDs[sig.id]
let signalName = sig.name;
if(sig.scalingFactor !== 1.0){
signalName = signalName + "(x" + String(sig.scalingFactor) + ")";
}
// distinguish between input and output signals
if (sig.direction === "out") {
if (props.data[icID] != null && props.data[icID].output != null && props.data[icID].output.values != null) {
if (props.data[icID].output.values[sig.index-1] !== undefined) {
console.log("Table: sig", sig)
let data = props.data[icID].output.values[sig.index-1];
rows.push({
name: signalName,
name: sig.name,
unit: sig.unit,
value: data[data.length - 1].y * sig.scalingFactor
value: data[data.length - 1].y * sig.scalingFactor,
scalingFactor: sig.scalingFactor
});
} else {
// no data available
rows.push({
name: sig.name,
unit: sig.unit,
value: NaN,
scalingFactor: sig.scalingFactor
})
}
}
} else if (sig.direction === "in") {
@ -64,10 +69,19 @@ class WidgetTable extends Component {
if (props.data[icID].input.values[sig.index-1] !== undefined) {
let data = props.data[icID].input.values[sig.index-1];
rows.push({
name: signalName,
name: sig.name,
unit: sig.unit,
value: data[data.length - 1].y * sig.scalingFactor
value: data[data.length - 1].y * sig.scalingFactor,
scalingFactor: sig.scalingFactor
});
} else {
// no data available
rows.push({
name: sig.name,
unit: sig.unit,
value: NaN,
scalingFactor: sig.scalingFactor
})
}
}
}
@ -91,11 +105,12 @@ class WidgetTable extends Component {
var columns = [
<TableColumn key={1} title="Signal" dataKey="name" width={120} />,
<TableColumn key={2} title="Value" dataKey="value" modifier={format('.4f')} />
<TableColumn key={2} title="Value" dataKey="value" modifier={format('.4f')} />,
<TableColumn key={3} title="Scale" dataKey="scalingFactor" modifier={format('.2f')} />
];
if (this.props.widget.customProperties.showUnit)
columns.push(<TableColumn key={3} title="Unit" dataKey="unit" />)
columns.push(<TableColumn key={4} title="Unit" dataKey="unit" />)
return (
<div className="table-widget" style={{width: this.props.widget.width, height: this.props.widget.height, overflowY: 'auto'}}>

11
src/widget/widgets/value.js
View file

@ -24,7 +24,8 @@ class WidgetValue extends Component {
this.state = {
value: '',
unit: ''
unit: '',
scalingFactor: 1.0
};
}
@ -54,13 +55,16 @@ class WidgetValue extends Component {
// Update unit (assuming there is exactly one signal for this widget)
let unit = '';
let scalingFactor = ''
if (signal !== undefined) {
unit = signal[0].unit;
scalingFactor = signal[0].scalingFactor
}
return {
value: value,
unit: unit,
scalingFactor: scalingFactor
};
}
@ -72,6 +76,7 @@ class WidgetValue extends Component {
let value_to_render = Number(this.state.value);
let value_width = this.props.widget.customProperties.textSize*(Math.abs(value_to_render) < 1000 ? (5):(8));
let unit_width = this.props.widget.customProperties.textSize*(this.state.unit.length + 0.7);
const showScalingFactor = (this.state.scalingFactor !== 1);
return (
<div className="single-value-widget">
<strong style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: '1 1 auto'}}>{this.props.widget.name}</strong>
@ -79,6 +84,10 @@ class WidgetValue extends Component {
{this.props.widget.customProperties.showUnit &&
<span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: 'none', width: unit_width}}>[{this.state.unit}]</span>
}
{showScalingFactor &&
<span style={{ fontSize: this.props.widget.customProperties.textSize + 'px', flex: 'none', marginLeft: '0.2em' }} className="signal-scale">{this.state.scalingFactor}</ span>
}
</div>
);
}