From b2e6af2ea2d2889c42ceeee10dc6e009066711b6 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Thu, 21 Sep 2017 01:21:23 +0200 Subject: [PATCH] added new lamp widget (closes #126) --- .../dialog/edit-widget-control-creator.js | 1 + .../dialog/edit-widget-control-creator.js | 14 +++- src/components/widget-factory.js | 11 +++ src/components/widget-lamp.js | 74 +++++++++++++++++++ src/containers/visualization.js | 19 ++--- src/containers/widget.js | 5 +- 6 files changed, 113 insertions(+), 11 deletions(-) create mode 100644 src/components/widget-lamp.js diff --git a/src/__tests__/components/dialog/edit-widget-control-creator.js b/src/__tests__/components/dialog/edit-widget-control-creator.js index f426ac8..91bea92 100644 --- a/src/__tests__/components/dialog/edit-widget-control-creator.js +++ b/src/__tests__/components/dialog/edit-widget-control-creator.js @@ -24,6 +24,7 @@ describe('edit widget control creator', () => { }); var runs = [ + { args: { widgetType: 'Lamp' }, result: { controlNumber: 5, controlTypes: [EditWidgetSimulatorControl, EditWidgetSignalControl, EditWidgetTextControl, EditWidgetColorControl, EditWidgetColorControl] } }, { args: { widgetType: 'Value' }, result: { controlNumber: 5, controlTypes: [EditWidgetTextControl, EditWidgetSimulatorControl, EditWidgetSignalControl, EditWidgetTextSizeControl, EditWidgetCheckboxControl] } }, { args: { widgetType: 'Plot' }, result: { controlNumber: 5, controlTypes: [EditWidgetTimeControl, EditWidgetSimulatorControl, EditWidgetSignalsControl, EditWidgetTextControl, EditWidgetMinMaxControl] } }, { args: { widgetType: 'Table' }, result: { controlNumber: 1, controlTypes: [EditWidgetSimulatorControl] } }, diff --git a/src/components/dialog/edit-widget-control-creator.js b/src/components/dialog/edit-widget-control-creator.js index 5b30a1e..c45f53b 100644 --- a/src/components/dialog/edit-widget-control-creator.js +++ b/src/components/dialog/edit-widget-control-creator.js @@ -52,7 +52,19 @@ export default function createControls(widgetType = null, widget = null, session handleChange(e)} />, handleChange(e)} /> ); - break; + break; + case 'Lamp': + let lampBoundOnChange = (e) => { + handleChange([e, {target: {id: 'signal', value: 0}}]); + } + dialogControls.push( + validateForm(id)} simulation={simulation} handleChange={(e) => lampBoundOnChange(e)} />, + validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />, + validateForm(id)} handleChange={e => handleChange(e)} />, + validateForm(id)} handleChange={(e) => handleChange(e)} />, + validateForm(id)} handleChange={(e) => handleChange(e)} />, + ); + break; case 'Plot': let plotBoundOnChange = (e) => { handleChange([e, {target: {id: 'signals', value: []}}]); diff --git a/src/components/widget-factory.js b/src/components/widget-factory.js index ac4bd70..7908e00 100644 --- a/src/components/widget-factory.js +++ b/src/components/widget-factory.js @@ -27,6 +27,17 @@ class WidgetFactory { // set type specific properties switch(type) { + case 'Lamp': + widget.simulator = defaultSimulator; + widget.signal = 0; + widget.minWidth = 5; + widget.minHeight = 5; + widget.width = 20; + widget.height = 20; + widget.on_color = 6; + widget.off_color = 8; + widget.threshold = 0.5; + break; case 'Value': widget.simulator = defaultSimulator; widget.signal = 0; diff --git a/src/components/widget-lamp.js b/src/components/widget-lamp.js new file mode 100644 index 0000000..83d228c --- /dev/null +++ b/src/components/widget-lamp.js @@ -0,0 +1,74 @@ +/** + * File: widget-lamp.js + * Author: Steffen Vogel + * Date: 20.09.2017 + * + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ + +import React, { Component } from 'react'; + +import EditWidgetColorControl from './dialog/edit-widget-color-control'; + +class WidgetLamp extends Component { + constructor(props) { + super(props); + + this.state = { + value: '', + threshold: 0 + }; + } + + componentWillReceiveProps(nextProps) { + // update value + const simulator = nextProps.widget.simulator.simulator; + const node = nextProps.widget.simulator.node; + + if (nextProps.data == null || nextProps.data[node] == null || nextProps.data[node][simulator] == null || nextProps.data[node][simulator].values == null) { + this.setState({ value: '' }); + return; + } + + // check if value has changed + const signal = nextProps.data[node][simulator].values[nextProps.widget.signal]; + if (signal != null && this.state.value !== signal[signal.length - 1].y) { + this.setState({ value: signal[signal.length - 1].y }); + } + } + + render() { + let colors = EditWidgetColorControl.ColorPalette; + let color; + + if (Number(this.state.value) > Number(this.props.widget.threshold)) + color = colors[this.props.widget.on_color]; + else + color = colors[this.props.widget.off_color]; + + let style = { + backgroundColor: color, + width: this.props.widget.width, + height: this.props.widget.height + } + + return ( +
+ ); + } +} + +export default WidgetLamp; diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 8492737..ae5ef41 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -471,6 +471,7 @@ class Visualization extends React.Component {
e.preventDefault() }> {this.state.editing &&
+ @@ -489,15 +490,15 @@ class Visualization extends React.Component { this.handleDrop(item, position)} editing={this.state.editing}> {current_widgets != null && Object.keys(current_widgets).map(widget_key => ( - this.widgetChange(w, k)} - onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} - editing={this.state.editing} - index={widget_key} - grid={this.state.visualization.grid} + this.widgetChange(w, k)} + onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} + editing={this.state.editing} + index={widget_key} + grid={this.state.visualization.grid} paused={this.state.paused} /> ))} diff --git a/src/containers/widget.js b/src/containers/widget.js index dc4e66c..4aae170 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -30,6 +30,7 @@ import UserStore from '../stores/user-store'; import SimulatorDataStore from '../stores/simulator-data-store'; import FileStore from '../stores/file-store'; +import WidgetLamp from '../components/widget-lamp'; import WidgetValue from '../components/widget-value'; import WidgetPlot from '../components/widget-plot'; import WidgetTable from '../components/widget-table'; @@ -162,7 +163,9 @@ class Widget extends React.Component { let element = null; // dummy is passed to widgets to keep updating them while in edit mode - if (widget.type === 'Value') { + if (widget.type === 'Lamp') { + element = + } else if (widget.type === 'Value') { element = } else if (widget.type === 'Plot') { element =