From e9c553b993525de1f4622033442233a36784450d Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez-Montoya Date: Fri, 31 Mar 2017 14:53:19 +0200 Subject: [PATCH] initial gauge widget --- package.json | 3 +- src/components/widget-gauge.js | 79 +++++++++++++++++++++++++++++++++ src/containers/visualization.js | 8 ++++ src/containers/widget.js | 3 ++ src/styles/widgets.css | 31 ++++++++++++- 5 files changed, 122 insertions(+), 2 deletions(-) create mode 100644 src/components/widget-gauge.js diff --git a/package.json b/package.json index 0116f0a..82f575a 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "react-notification-system": "^0.2.13", "react-rnd": "^4.2.2", "react-router": "^3.0.2", - "superagent": "^3.5.0" + "superagent": "^3.5.0", + "gaugeJS": "^1.3.2" }, "devDependencies": { "react-scripts": "0.9.3" diff --git a/src/components/widget-gauge.js b/src/components/widget-gauge.js new file mode 100644 index 0000000..064d7c6 --- /dev/null +++ b/src/components/widget-gauge.js @@ -0,0 +1,79 @@ +/** + * File: widget-gauge.js + * Author: Ricardo Hernandez-Montoya + * Date: 31.03.2017 + * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC + * This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential. + * Unauthorized copying of this file, via any medium is strictly prohibited. + **********************************************************************************/ + +import React, { Component } from 'react'; +import { Gauge } from 'gaugeJS'; + +class WidgetGauge extends Component { + constructor(props) { + super(props); + + this.gaugeCanvas = null; + this.gauge = null; + + this.state = { + value: 0 + }; + } + + componentDidMount() { + const opts = { + angle: -0.25, + lineWidth: 0.2, + pointer: { + length: 0.6, + strokeWidth: 0.035 + }, + colorStart: '#6EA2B0', + colorStop: '#6EA2B0', + strokeColor: '#E0E0E0', + highDpiSupport: true + }; + + this.gauge = new Gauge(this.gaugeCanvas).setOptions(opts); + this.gauge.maxValue = 1; + this.gauge.setMinValue(0); + this.gauge.animationSpeed = 30; + this.gauge.set(this.state.value); + } + + componentDidUpdate() { + // update gauge's value + this.gauge.set(this.state.value); + } + + componentWillReceiveProps(nextProps) { + // update value + const simulator = nextProps.widget.simulator; + + if (nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].values == null) { + this.setState({ value: 0 }); + return; + } + + // 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 + if (this.state.value !== new_value) { + this.setState({ value: new_value }); + } + } + + render() { + return ( +
+
{ this.props.widget.name }
+ this.gaugeCanvas = node } /> +
{ this.state.value }
+
+ ); + } +} + +export default WidgetGauge; diff --git a/src/containers/visualization.js b/src/containers/visualization.js index fa74942..432b1b3 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -188,6 +188,13 @@ class Visualization extends Component { widget.minHeight = 30; widget.width = 400; widget.height = 50; + } else if (item.name === 'Gauge') { + widget.simulator = this.state.simulation.models[0].simulator; + widget.signal = 0; + widget.minWidth = 200; + widget.minHeight = 150; + widget.width = 200; + widget.height = 150; } var new_widgets = this.state.visualization.widgets; @@ -359,6 +366,7 @@ class Visualization extends Component { + } diff --git a/src/containers/widget.js b/src/containers/widget.js index 8120d41..c34bc1c 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -25,6 +25,7 @@ import WidgetImage from '../components/widget-image'; import WidgetButton from '../components/widget-button'; import WidgetNumberInput from '../components/widget-number-input'; import WidgetSlider from '../components/widget-slider'; +import WidgetGauge from '../components/widget-gauge'; import '../styles/widgets.css'; @@ -137,6 +138,8 @@ class Widget extends Component { element = } else if (widget.type === 'Slider') { element = + } else if (widget.type === 'Gauge') { + element = } if (this.props.editing) { diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 707bb0a..4e404ac 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -182,6 +182,7 @@ div[class*="-widget"] label { } /* End number input widget */ +/* Slider widget */ input[type=range]::-moz-range-thumb { background: #ffffff; } @@ -192,4 +193,32 @@ input[type=range]::-webkit-slider-thumb { input[type=range]::-ms-thumb { background: #ffffff; -} \ No newline at end of file +} +/* End slider widget */ + +/* Gauge widget */ +.gauge-widget { + width: 100%; + height: 100%; +} + +.gauge-widget canvas { + width: 100%; + height: 100%; +} + +.gauge-name { + width: 100%; + text-align: center; + font-weight: bold; +} + +.gauge-value { + position: absolute; + width: 100%; + font-weight: bold; + font-size: large; + bottom: 0px; + text-align: center; +} +/* End gauge widget */ \ No newline at end of file