added basic math widget

Software/waveview/src/components/sidebar/sidebar.tsx

@@ -6,6 +6,7 @@ import HorizontalWidget from './widgets/horizontalWidget';
 import VerticalWidget from './widgets/verticalWidget';
 import MeasurementsWidget from './widgets/measurementsWidget';
 import TriggerWidget from './widgets/triggerWidget';
+import MathWidget from './widgets/mathWidget';
 
 class SideBar extends React.Component {
 
@@ -17,6 +18,7 @@ class SideBar extends React.Component {
         <HorizontalWidget />
         <VerticalWidget />
         <TriggerWidget />
+        <MathWidget />
         <MeasurementsWidget />
       </div>
     )

Software/waveview/src/components/sidebar/widgets/mathWidget.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import MathOperators from '../../../configuration/enums/mathOperators';
+import '../../../css/sidebar/widgets/mathWidget.css';
+
+
+class TriggerWidget extends React.Component<any, any> {
+
+  toggleMathMode = (mathEnabled: boolean) => {
+    this.props.dispatch({type: 'math/toggleMathMode', payload: mathEnabled });
+  }
+
+  changeChannel1 = (channelNumber: number) => {
+    this.props.dispatch({type: 'math/changeChannel1', payload: channelNumber });
+  }
+
+  changeChannel2 = (channelNumber: number) => {
+    this.props.dispatch({type: 'math/changeChannel2', payload: channelNumber });
+  }
+
+  changeOperator = (operator: MathOperators) => {
+    this.props.dispatch({type: 'math/changeOperator', payload: operator });
+  }
+
+  render() {
+    return (
+      <div className="MathWidget">
+
+      <div className="WidgetTitle">
+        Math
+      </div>
+
+      <div className="MathModeTitle">
+        Math Mode
+      </div>
+      <div className="MathModeButtons">
+        <button
+          className="OnButton"
+          onClick={() => this.toggleMathMode(true)}>
+          <label
+            className="OnButtonText"
+            style={{fontWeight: this.props.mathWidget.mathEnabled === true ? "bold" : "normal"}}>
+            ON
+          </label>
+        </button>
+        <button
+          className="OffButton"
+          onClick={() => this.toggleMathMode(false)}>
+          <label
+            className="OffButtonText"
+            style={{fontWeight: this.props.mathWidget.mathEnabled === false ? "bold" : "normal"}}>
+            OFF
+          </label>
+        </button>
+      </div>
+
+      {this.props.mathWidget.mathEnabled === true && 
+      <div className="Channel1Title">
+        Channel 1
+      </div>
+      }
+      {this.props.mathWidget.mathEnabled === true &&
+      <div className="ChannelSelectionButtons">
+        <button
+          className="Channel1Button"
+          onClick={() => this.changeChannel1(1)}>
+          <label
+            className={"Channel1ButtonText"}
+            style={{color: this.props.mathWidget.channel1 === 1 ? this.props.settings.colors.channel[0] : "black"}}>
+            CH1
+          </label>
+        </button>
+        <button
+          className="Channel2Button"
+          onClick={() => this.changeChannel1(2)}>
+          <label
+            className={"Channel2ButtonText"}
+            style={{color: this.props.mathWidget.channel1 === 2 ? this.props.settings.colors.channel[1] : "black"}}>
+            CH2
+          </label>
+        </button>
+        <button
+          className="Channel3Button"
+          onClick={() => this.changeChannel1(3)}>
+          <label
+            className={"Channel3ButtonText"}
+            style={{color: this.props.mathWidget.channel1 === 3 ? this.props.settings.colors.channel[2] : "black"}}>
+            CH3
+          </label>
+        </button>
+        <button
+          className="Channel4Button"
+          onClick={() => this.changeChannel1(4)}>
+          <label
+            className={"Channel4ButtonText"}
+            style={{color: this.props.mathWidget.channel1 === 4 ? this.props.settings.colors.channel[3] : "black"}}>
+            CH4
+          </label>
+        </button>
+      </div>
+      }
+
+      {this.props.mathWidget.mathEnabled === true &&
+      <div className="OperatorTitle">
+        Operation
+      </div>
+      }
+      {this.props.mathWidget.mathEnabled === true &&
+      <div className="OperatorButtons">
+        <button
+          className="AdditionButton"
+          onClick={() => this.changeOperator(MathOperators.Addition)}>
+          <label
+            className="AdditionButtonText"
+            style={{fontWeight: this.props.mathWidget.mathOperator === MathOperators.Addition ? "bold" : "normal"}}>
+            {MathOperators.Addition}
+          </label>
+        </button>
+        <button
+          className="SubtractionButton"
+          onClick={() => this.changeOperator(MathOperators.Subtraction)}>
+          <label
+            className="SubtractionButtonText"
+            style={{fontWeight: this.props.mathWidget.mathOperator === MathOperators.Subtraction ? "bold" : "normal"}}>
+            {MathOperators.Subtraction}
+          </label>
+        </button>
+      </div>
+      }
+
+      {this.props.mathWidget.mathEnabled === true &&
+      <div className="Channel2Title">
+        Channel 2
+      </div>
+      }
+      {this.props.mathWidget.mathEnabled === true &&
+      <div className="ChannelSelectionButtons">
+        <button
+          className="Channel1Button"
+          onClick={() => this.changeChannel2(1)}>
+          <label
+            className={"Channel1ButtonText"}
+            style={{color: this.props.mathWidget.channel2 === 1 ? this.props.settings.colors.channel[0] : "black"}}>
+            CH1
+          </label>
+        </button>
+        <button
+          className="Channel2Button"
+          onClick={() => this.changeChannel2(2)}>
+          <label
+            className={"Channel2ButtonText"}
+            style={{color: this.props.mathWidget.channel2 === 2 ? this.props.settings.colors.channel[1] : "black"}}>
+            CH2
+          </label>
+        </button>
+        <button
+          className="Channel3Button"
+          onClick={() => this.changeChannel2(3)}>
+          <label
+            className={"Channel3ButtonText"}
+            style={{color: this.props.mathWidget.channel2 === 3 ? this.props.settings.colors.channel[2] : "black"}}>
+            CH3
+          </label>
+        </button>
+        <button
+          className="Channel4Button"
+          onClick={() => this.changeChannel2(4)}>
+          <label
+            className={"Channel4ButtonText"}
+            style={{color: this.props.mathWidget.channel2 === 4 ? this.props.settings.colors.channel[3] : "black"}}>
+            CH4
+          </label>
+        </button>
+      </div>
+      }
+
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state: { mathWidget: any, settings: any}) {
+  return {
+    mathWidget: state.mathWidget,
+    settings: state.settings
+  };
+}
+
+export default connect(mapStateToProps)(TriggerWidget);

Software/waveview/src/configuration/enums/mathOperators.tsx

@@ -0,0 +1,6 @@
+enum MathOperators {
+  Addition = "+",
+  Subtraction = "-"
+}
+
+export default MathOperators;

Software/waveview/src/css/sidebar/widgets/mathWidget.css

@@ -0,0 +1,51 @@
+.MathWidget {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+.WidgetTitle {
+  background-color: #4B4B4B;
+  color: black;
+  margin: 10px;
+}
+
+.MathModeTitle {
+  background-color: #4B4B4B;
+  color: black;
+  margin-left: 50px;
+  margin-right: 50px;
+  font-size: small;
+  margin-bottom: 1vh;
+}
+
+.Channel1Title {
+  background-color: #4B4B4B;
+  color: black;
+  margin-left: 50px;
+  margin-right: 50px;
+  font-size: small;
+  margin-bottom: 1vh;
+  margin-top: 1vh;
+}
+
+.Channel2Title {
+  background-color: #4B4B4B;
+  color: black;
+  margin-left: 50px;
+  margin-right: 50px;
+  font-size: small;
+  margin-bottom: 1vh;
+  margin-top: 1vh;
+}
+
+.OperatorTitle {
+  background-color: #4B4B4B;
+  color: black;
+  margin-left: 50px;
+  margin-right: 50px;
+  font-size: small;
+  margin-bottom: 1vh;
+  margin-top: 1vh;
+}

Software/waveview/src/redux/initialStates/mathWidgetInitialState.tsx

@@ -0,0 +1,10 @@
+import MathOperators from '../../configuration/enums/mathOperators';
+
+const MathWidgetInitialState = {
+  mathEnabled: true,
+  mathOperator: MathOperators.Addition,
+  channel1: 1,
+  channel2: 2
+};
+
+export default MathWidgetInitialState;

Software/waveview/src/redux/reducers/index.tsx

@@ -5,6 +5,7 @@ import measurementsWidgetReducer from './widgets/measurementsWidgetReducer';
 import triggerWidgetReducer from './widgets/triggerWidgetReducer';
 import settingsReducer from './settingsReducer';
 import graphReducer from './graphReducer';
+import mathWidgetReducer from './widgets/mathWidgetReducer';
 
 export default combineReducers(
   {
@@ -12,6 +13,7 @@ export default combineReducers(
     verticalWidget: verticalWidgetReducer,
     measurementsWidget: measurementsWidgetReducer,
     triggerWidget: triggerWidgetReducer,
+    mathWidget: mathWidgetReducer,
     settings: settingsReducer,
     graph: graphReducer
   }

Software/waveview/src/redux/reducers/widgets/mathWidgetReducer.tsx

@@ -0,0 +1,38 @@
+import MathWidgetInitialState from '../../initialStates/mathWidgetInitialState';
+
+export default function(state = MathWidgetInitialState, action: {type: any, payload: any}) { 
+  switch(action.type) {
+    case "math/toggleMathMode":
+      return {
+        ...state,
+        mathEnabled: action.payload
+      };
+    case "math/changeChannel1":
+      if (action.payload === state.channel2) {
+        return state;
+      }
+      return {
+        ...state,
+        channel1: action.payload
+      };
+    case "math/changeChannel2":
+      if (action.payload === state.channel1) {
+        return state;
+      }
+      return {
+        ...state,
+        channel2: action.payload
+      };
+    case "math/changeOperator":
+      return {
+        ...state,
+        mathOperator: action.payload
+      };
+    case "math/addChannels":
+      return state;
+    case "math/subtractChannels":
+      return state;
+    default:
+      return state;
+  }
+}