prepared an "action" widget which can be used to control a simulation from within a visualization

src/components/dialogs/edit-widget-control-creator.js

@@ -42,6 +42,11 @@ export default function createControls(widgetType = null, widget = null, session
     var dialogControls = [];
 
     switch(widgetType) {
+        case 'Action':
+            dialogControls.push(
+              <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
+            )
+            break;
         case 'Value':
             let valueBoundOnChange = (e) => {
                 handleChange([e, {target: {id: 'signal', value: 0}}]);

src/components/widget-factory.js

@@ -39,6 +39,9 @@ class WidgetFactory {
 
         // set type specific properties
         switch(type) {
+            case 'Action':
+                widget.simulationModel = defaultSimulationModel;
+                break;
             case 'Lamp':
                 widget.simulationModel = defaultSimulationModel;
                 widget.signal = 0;

src/components/widgets/action.js

@@ -0,0 +1,48 @@
+/**
+ * File: action.js
+ * Author: Steffen Vogel <stvogel@eonerc.rwth-aachen.de>
+ * Date: 17.06.2018
+ * Copyright: 2018, Institute for Automation of Complex Power Systems, EONERC
+ *
+ * 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 { Button, ButtonGroup } from 'react-bootstrap';
+import Icon from '../icon';
+
+class WidgetAction extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+    };
+  }
+
+  onClick(e) {
+
+  }
+
+  render() {
+    return <ButtonGroup>
+            <Button onClick={this.onClick} ><Icon icon="play" /> Start</Button>
+            <Button onClick={this.onClick} ><Icon icon="pause" /> Pause</Button>
+            <Button onClick={this.onClick} ><Icon icon="stop" /> Stop</Button>
+          </ButtonGroup>;
+  }
+}
+
+export default WidgetAction;

src/containers/visualization.js

@@ -485,6 +485,7 @@ class Visualization extends React.Component {
                 { editingControls }
               </ButtonToolbar>
               <ButtonToolbar className="toolbox box-header">
+                <ToolboxItem icon="play" name="Action" type="widget" disabled={true} />
                 <ToolboxItem icon="lightbulb" name="Lamp" type="widget" />
                 <ToolboxItem icon="font" name="Value" type="widget" />
                 <ToolboxItem icon="chart-area" name="Plot" type="widget" />

src/containers/widget.js

@@ -31,6 +31,7 @@ import SimulatorDataStore from '../stores/simulator-data-store';
 import SimulationModelStore from '../stores/simulation-model-store';
 import FileStore from '../stores/file-store';
 
+import WidgetAction from '../components/widgets/action';
 import WidgetLamp from '../components/widgets/lamp';
 import WidgetValue from '../components/widgets/value';
 import WidgetPlot from '../components/widgets/plot';
@@ -203,7 +204,9 @@ class Widget extends React.Component {
     }
 
     // dummy is passed to widgets to keep updating them while in edit mode
-    if (widget.type === 'Lamp') {
+    if (widget.type === 'Action') {
+      element = <WidgetAction widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulationModel={simulationModel} />
+    } else if (widget.type === 'Lamp') {
       element = <WidgetLamp widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulationModel={simulationModel} />
     } else if (widget.type === 'Value') {
       element = <WidgetValue widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulationModel={simulationModel} />