From e43c780ba351bb64abb8c49f2e4eb18c7d941f99 Mon Sep 17 00:00:00 2001 From: Laura Fuentes Grau Date: Sun, 19 Apr 2020 19:16:02 +0200 Subject: [PATCH] Gauge Widget and its edit options now work --- src/widget/widgets/gauge.js | 47 +++++++++++++++++++++++++++---------- 1 file changed, 35 insertions(+), 12 deletions(-) diff --git a/src/widget/widgets/gauge.js b/src/widget/widgets/gauge.js index 4079c2d..cd778ad 100644 --- a/src/widget/widgets/gauge.js +++ b/src/widget/widgets/gauge.js @@ -31,17 +31,20 @@ class WidgetGauge extends Component { unit: '', minValue: null, maxValue: null, + useColorZones: false, + useMinMax: false, + useMinMaxChange: false, }; } componentDidMount() { this.gauge = new Gauge(this.gaugeCanvas).setOptions(this.computeGaugeOptions(this.props.widget)); - //this.gauge.maxValue = this.state.maxValue; - //this.gauge.setMinValue(this.state.minValue); + this.gauge.maxValue = this.state.maxValue; + this.gauge.setMinValue(this.state.minValue); this.gauge.animationSpeed = 30; - //this.gauge.set(this.state.value); + this.gauge.set(this.state.value); - //this.updateLabels(this.state.minValue, this.state.maxValue); + this.updateLabels(this.state.minValue, this.state.maxValue); } componentDidUpdate(prevProps: Readonly

, prevState: Readonly, snapshot: SS): void { @@ -57,9 +60,19 @@ class WidgetGauge extends Component { this.gauge.set(this.state.value) } + if(prevState.useMinMax === true && this.state.useMinMax === false){ + this.setState({useMinMaxChange: true}); + } + // update labels - if(prevState.minValue !== this.state.minValue || prevState.maxValue !== this.state.maxValue){ - this.updateLabels(this.state.minValue, this.state.maxValue) + if(prevState.minValue !== this.state.minValue || prevState.maxValue !== this.state.maxValue || prevState.useColorZones !== this.state.useColorZones + || prevState.useMinMax !== this.state.useMinMax){ + this.gauge = new Gauge(this.gaugeCanvas).setOptions(this.computeGaugeOptions(this.props.widget)); + this.gauge.maxValue = this.state.maxValue; + this.gauge.setMinValue(this.state.minValue); + this.gauge.animationSpeed = 30; + this.gauge.set(this.state.value); + this.updateLabels(this.state.minValue, this.state.maxValue) } } @@ -69,9 +82,10 @@ class WidgetGauge extends Component { if(props.widget.signalIDs.length === 0){ return null; } - let returnState = {} + returnState["useColorZones"] = props.widget.customProperties.colorZones; + // Update unit (assuming there is exactly one signal for this widget) let signalID = props.widget.signalIDs[0]; let widgetSignal = props.signals.find(sig => sig.id === signalID); @@ -105,7 +119,8 @@ class WidgetGauge extends Component { const value = Math.round(signalData[signalData.length - 1].y * 1e3) / 1e3; let minValue = null; let maxValue = null; - if (state.value !== value && value != null) { + + if ((state.value !== value && value != null) || props.widget.customProperties.valueUseMinMax || state.useMinMaxChange) { //value has changed updateValue = true; @@ -114,17 +129,18 @@ class WidgetGauge extends Component { minValue = state.minValue; maxValue = state.maxValue; - - if (minValue == null) { + + if (minValue == null || state.useMinMaxChange) { minValue = value - 0.5; updateLabels = true; updateMinValue = true; } - if (maxValue == null) { + if (maxValue == null || state.useMinMaxChange) { maxValue = value + 0.5; updateLabels = true; updateMaxValue = true; + returnState["useMinMaxChange"] = false; } if (props.widget.customProperties.valueUseMinMax) { @@ -141,7 +157,7 @@ class WidgetGauge extends Component { } } - if (updateLabels === false) { + if (updateLabels === false && state.gauge) { // check if min/max changed if (minValue > state.gauge.minValue) { minValue = state.gauge.minValue; @@ -155,6 +171,13 @@ class WidgetGauge extends Component { } } + if(props.widget.customProperties.valueUseMinMax !== state.useMinMax){ + returnState["useMinMax"] = props.widget.customProperties.valueUseMinMax; + } + if(props.widget.customProperties.colorZones !== state.useColorZones){ + returnState["useColorZones"] = props.widget.customProperties.colorZones; + } + // prepare returned state if(updateValue === true){ returnState["value"] = value;