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

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

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import './../../../css/sidebar/widgets/triggerWidget.css';
+
+class TriggerWidget extends React.Component<any, any> {
+
+  // Trigger Channel
+  increaseChannel = () => {
+    this.props.dispatch({type: 'trigger/increaseChannel'});
+  }
+
+  decreaseChannel = () => {
+    this.props.dispatch({type: 'trigger/decreaseChannel'});
+  }
+
+  render() {
+    return (
+      <div className="TriggerWidget">
+      <div className="WidgetTitle">
+        Trigger
+      </div>
+      
+      <div className="TriggerWidgetAdjustChannelBlock">
+        <button 
+          className="MinusButton"
+          onClick={() => this.decreaseChannel()}>
+          -
+        </button>
+        <label 
+          className="AdjustChannelBlockValue"
+          style={{color: this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1]}}
+        >
+          CH{this.props.triggerWidget.triggerChannel.toString()}
+        </label>
+        <button 
+          className="PlusButton"
+          onClick={() => this.increaseChannel()}>
+          +
+        </button>
+      </div>
+      
+    </div>
+    )
+  }
+}
+
+function mapStateToProps(state: { triggerWidget: any; }) {
+  return {
+    triggerWidget: state.triggerWidget
+  };
+}
+
+export default connect(mapStateToProps)(TriggerWidget);

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

@@ -0,0 +1,17 @@
+.TriggerWidget {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+.WidgetTitle {
+  background-color: #4B4B4B;
+  color: black;
+  margin: 10px;
+}
+
+.AdjustChannelBlockValue {
+  padding-left: 2vw;
+  padding-right: 2vw;
+}

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

@@ -1,15 +1,36 @@
 import TriggerType from '../../configuration/enums/triggerType';
+import DefaultChannelColor from '../../configuration/enums/defaultChannelColor';
 
 const initialState = {
   triggerChannel: 1,
+  channelColorsList: [
+    DefaultChannelColor.Channel1, 
+    DefaultChannelColor.Channel2, 
+    DefaultChannelColor.Channel3, 
+    DefaultChannelColor.Channel4
+  ],
   triggerType: TriggerType.RisingEdge,
   triggerLevel: 0
 };
 
 export default function(state = initialState, action: {type: any, payload: any}) {
   switch(action.type) {
-    case "trigger/test":
-      return { ...state };
+    case "trigger/increaseChannel":
+      if (state.triggerChannel >= 4) {
+        return { ...state }
+      }
+      return {
+        ...state,
+        activeChannel: state.triggerChannel + 1
+      };
+    case "trigger/decreaseChannel":
+      if (state.triggerChannel == 1) {
+        return { ...state }
+      }
+      return {
+        ...state,
+        activeChannel: state.triggerChannel - 1
+      };
     default:
       return state;
   }