mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
added new lamp widget (closes #126)
This commit is contained in:
parent
12d60786a4
commit
b2e6af2ea2
6 changed files with 113 additions and 11 deletions
|
|
@ -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] } },
|
||||
|
|
|
|||
|
|
@ -52,7 +52,19 @@ export default function createControls(widgetType = null, widget = null, session
|
|||
<EditWidgetTextSizeControl key={3} widget={widget} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetCheckboxControl key={4} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
|
||||
);
|
||||
break;
|
||||
break;
|
||||
case 'Lamp':
|
||||
let lampBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signal', value: 0}}]);
|
||||
}
|
||||
dialogControls.push(
|
||||
<EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => lampBoundOnChange(e)} />,
|
||||
<EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetTextControl key={2} widget={widget} controlId={'threshold'} label={'Threshold'} placeholder={'0.5'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={3} widget={widget} controlId={'on_color'} label={'Color On'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
<EditWidgetColorControl key={4} widget={widget} controlId={'off_color'} label={'Color Off'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
|
||||
);
|
||||
break;
|
||||
case 'Plot':
|
||||
let plotBoundOnChange = (e) => {
|
||||
handleChange([e, {target: {id: 'signals', value: []}}]);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
74
src/components/widget-lamp.js
Normal file
74
src/components/widget-lamp.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/**
|
||||
* File: widget-lamp.js
|
||||
* Author: Steffen Vogel <stvogel@eonerc.rwth-aachen.de>
|
||||
* 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 <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
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 (
|
||||
<div className="lamp-widget" style={style} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default WidgetLamp;
|
||||
|
|
@ -471,6 +471,7 @@ class Visualization extends React.Component {
|
|||
<div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>
|
||||
{this.state.editing &&
|
||||
<div className="toolbox box-header">
|
||||
<ToolboxItem name="Lamp" type="widget" />
|
||||
<ToolboxItem name="Value" type="widget" />
|
||||
<ToolboxItem name="Plot" type="widget" />
|
||||
<ToolboxItem name="Table" type="widget" />
|
||||
|
|
@ -489,15 +490,15 @@ class Visualization extends React.Component {
|
|||
<Dropzone height={this.state.dropZoneHeight} onDrop={(item, position) => this.handleDrop(item, position)} editing={this.state.editing}>
|
||||
{current_widgets != null &&
|
||||
Object.keys(current_widgets).map(widget_key => (
|
||||
<Widget
|
||||
key={widget_key}
|
||||
data={current_widgets[widget_key]}
|
||||
simulation={this.state.simulation}
|
||||
onWidgetChange={(w, k) => this.widgetChange(w, k)}
|
||||
onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
|
||||
editing={this.state.editing}
|
||||
index={widget_key}
|
||||
grid={this.state.visualization.grid}
|
||||
<Widget
|
||||
key={widget_key}
|
||||
data={current_widgets[widget_key]}
|
||||
simulation={this.state.simulation}
|
||||
onWidgetChange={(w, k) => 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}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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 = <WidgetLamp widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
|
||||
} else if (widget.type === 'Value') {
|
||||
element = <WidgetValue widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />
|
||||
} else if (widget.type === 'Plot') {
|
||||
element = <WidgetPlot widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} paused={this.props.paused} />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue