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

gauge widget: static labels and measurement unit

Browse source
This commit is contained in:
Ricardo Hernandez-Montoya 2017-04-03 13:52:39 +02:00
parent e9c553b993
commit 47520e2ca9
2 changed files with 43 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/widget-gauge.js
View file

@ -22,20 +22,35 @@ class WidgetGauge extends Component {
};
}
componentDidMount() {
const opts = {
staticLabels(gauge_dom_width) {
var label_font_size = gauge_dom_width * 0.05; // font scaling factor
return {
font: label_font_size + 'px "Helvetica Neue"',
labels: [0.0, 0.1, 0.5, 0.9, 1.0],
color: "#000000",
fractionDigits: 1
}
}
computeGaugeOptions(gauge_dom_width) {
return {
angle: -0.25,
lineWidth: 0.2,
pointer: {
length: 0.6,
strokeWidth: 0.035
},
radiusScale: 0.9,
colorStart: '#6EA2B0',
colorStop: '#6EA2B0',
strokeColor: '#E0E0E0',
highDpiSupport: true
highDpiSupport: true,
staticLabels: this.staticLabels(gauge_dom_width)
};
}
componentDidMount() {
const opts = this.computeGaugeOptions(this.gaugeCanvas.width);
this.gauge = new Gauge(this.gaugeCanvas).setOptions(opts);
this.gauge.maxValue = 1;
this.gauge.setMinValue(0);
@ -43,6 +58,12 @@ class WidgetGauge extends Component {
this.gauge.set(this.state.value);
}
componentWillUpdate() {
// Update labels after possible resize
this.gauge.setOptions({ staticLabels: this.staticLabels(this.gaugeCanvas.width) });
}
componentDidUpdate() {
// update gauge's value
this.gauge.set(this.state.value);
@ -59,17 +80,22 @@ class WidgetGauge extends Component {
// check if value has changed
const signal = nextProps.data[simulator].values[nextProps.widget.signal];
const new_value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3; // Take just 3 decimal positions
// Take just 3 decimal positions
// Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String
const new_value = Math.round( signal[signal.length - 1].y * 1e3 ) / 1e3;
if (this.state.value !== new_value) {
this.setState({ value: new_value });
}
}
render() {
var componentClass = this.props.editing ? "gauge-widget editing" : "gauge-widget";
return (
<div className="gauge-widget">
<div className={ componentClass }>
<div className="gauge-name">{ this.props.widget.name }</div>
<canvas ref={ (node) => this.gaugeCanvas = node } />
<div className="gauge-unit">Voltage (V)</div>
<div className="gauge-value">{ this.state.value }</div>
</div>
);

15
src/styles/widgets.css
View file

@ -204,21 +204,30 @@ input[type=range]::-ms-thumb {
.gauge-widget canvas {
width: 100%;
height: 100%;
height: 90%;
}
.gauge-name {
height: 10%;
width: 100%;
text-align: center;
font-weight: bold;
}
.gauge-unit {
position: absolute;
width: 100%;
font-size: large;
bottom: 25%;
text-align: center;
}
.gauge-value {
position: absolute;
width: 100%;
font-weight: bold;
font-size: large;
bottom: 0px;
font-size: xx-large;
bottom: 10%;
text-align: center;
}
/* End gauge widget */