initial gauge widget

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"

src/components/widget-gauge.js

@@ -0,0 +1,79 @@
+/**
+ * File: widget-gauge.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * 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 (
+      <div className="gauge-widget">
+          <div className="gauge-name">{ this.props.widget.name }</div>
+          <canvas ref={ (node) => this.gaugeCanvas = node } />
+          <div className="gauge-value">{ this.state.value }</div>
+      </div>
+    );
+  }
+}
+
+export default WidgetGauge;

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 {
               <ToolboxItem name="Button" type="widget" />
               <ToolboxItem name="NumberInput" type="widget" />
               <ToolboxItem name="Slider" type="widget" />
+              <ToolboxItem name="Gauge" type="widget" />
             </div>
           }
 

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 = <WidgetNumberInput widget={widget} editing={this.props.editing} />
     } else if (widget.type === 'Slider') {
       element = <WidgetSlider widget={widget} editing={this.props.editing} />
+    } else if (widget.type === 'Gauge') {
+      element = <WidgetGauge widget={widget} data={this.state.simulatorData} editing={this.props.editing} />
     }
     
     if (this.props.editing) {

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;
-}
+}
+/* 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 */