Software/waveview/src/App.tsx

@@ -19,14 +19,6 @@ class App extends React.Component {
     color: string, 
     className:string
   }[];
-  triggerInformation: {
-    channel: string, 
-    mode: string
-  };
-  timePerDivisionInformation: { 
-    timeValue: number, 
-    timeUnit: string 
-  }
   
   constructor(props: any) {
     super(props);
@@ -41,14 +33,6 @@ class App extends React.Component {
       {color: "#0075FF", className: "Channel3"},
       {color: "#FF0000", className: "Channel4"}
     ]
-    this.triggerInformation = {
-      channel: "CH1",
-      mode: "RisingEdge"
-    }
-    this.timePerDivisionInformation = { 
-      timeValue: 10, 
-      timeUnit: "ns" 
-    }
   }
 
   componentDidMount() {
@@ -83,11 +67,7 @@ class App extends React.Component {
           dataSeries={this.generatorList.map((gen, idx) => gen.getData())}
           colorSeries={this.channelList.map((c, i) => c.color)}
           />
-        <BottomBar 
+        <BottomBar />
-          channelList={this.channelList}
-          triggerInformation={this.triggerInformation}
-          timePerDivisionInformation={this.timePerDivisionInformation}
-          />
         <Sidebar />
       </div>
       );

Software/waveview/src/components/bottombar/bottombar.tsx

@@ -4,48 +4,15 @@ import TimePerDivision from './subcomponents/timeperdivision';
 import Trigger from './subcomponents/trigger';
 import './../../css/bottombar/bottombar.css';
 
-interface IBottomBarProps {
+function BottomBar() {
-  channelList: {
-    color: string, 
-    className: string
-  }[]
-  triggerInformation: {
-    channel: string, 
-    mode: string
-  };
-  timePerDivisionInformation: { 
-    timeValue: number, 
-    timeUnit: string 
-  }
-}
-
-function BottomBar(props: IBottomBarProps) {
   return (
     <div className="BottomBarComponent">
-      {
+      <Channel channelNumber={1}/>
-        props.channelList.map((c, i) => {
+      <Channel channelNumber={2}/>
-          return (
+      <Channel channelNumber={3}/>
-            <Channel
+      <Channel channelNumber={4}/>
-              channelNumber={i+1}
+      <TimePerDivision />
-              voltsPerDiv={1}
+      <Trigger />
-              voltageValue={5}
-              voltageUnit="mV"
-              measurementType="DC"
-              channelClass={c.className}
-              channelColor={c.color}
-            />
-          )
-        })
-      }
-      <TimePerDivision 
-        timeValue={props.timePerDivisionInformation.timeValue}
-        timeUnit={props.timePerDivisionInformation.timeUnit}
-      />
-      <Trigger
-        channel={props.triggerInformation.channel}
-        mode={props.triggerInformation.mode}
-      />
-    
     </div>
   )
 }

Software/waveview/src/components/bottombar/subcomponents/channel.tsx

@@ -1,25 +1,31 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import './../../../css/bottombar/subscomponents/channel.css';
 
-interface IChannelProps {
+class Channel extends React.Component<any, any> {
-  channelNumber: number
+  render() {
-  voltsPerDiv: number
-  voltageValue: number
-  voltageUnit: string
-  measurementType: string
-  channelClass: string
-  channelColor: string
-};
-
-function Channel(props: IChannelProps) {
     return (
-    <div className={props.channelClass} style={{color:props.channelColor}}>
+      <div className={"Channel" + this.props.channelNumber} style={{color: this.props.verticalWidget.channelColorsList[this.props.channelNumber-1]}}>
         <label>
-        CH{props.channelNumber}: {props.voltsPerDiv}V/div, {props.voltageValue}{props.voltageUnit}, {props.measurementType}
+          CH{this.props.channelNumber}: 
+          {" "}
+          {this.props.verticalWidget.timePerDivision[this.props.channelNumber-1].value},
+          {" "}
+          {this.props.verticalWidget.verticalOffset[this.props.channelNumber-1].value}
+          {this.props.verticalWidget.verticalOffset[this.props.channelNumber-1].unit},
+          {" "}
+          {this.props.verticalWidget.measurementType[this.props.channelNumber-1]}
         </label>
       </div>
     )
   }
+}
 
-export default Channel;
+function mapStateToProps(state: { verticalWidget: any; }) {
+  return {
+    verticalWidget: state.verticalWidget
+  };
+}
+
+export default connect(mapStateToProps)(Channel);
   

Software/waveview/src/components/bottombar/subcomponents/timeperdivision.tsx

@@ -1,17 +1,22 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import './../../../css/bottombar/subscomponents/timeperdivision.css';
 
-interface ITimePerDivisionProps {
+class TimePerDivision extends React.Component<any, any> { 
-  timeValue: number,
+  render() {
-  timeUnit: string
-}
-
-function TimePerDivision(props: ITimePerDivisionProps) {
     return(
       <div className="TimePerDivisionComponent">
-      {props.timeValue}{props.timeUnit}/div
+        {this.props.horizontalWidget.horizontalTimeBase.value.toString()}
+        {this.props.horizontalWidget.horizontalTimeBase.unit}
       </div>
     )
   }
+}
 
-export default TimePerDivision;
+function mapStateToProps(state: { horizontalWidget: any; }) {
+  return {
+    horizontalWidget: state.horizontalWidget
+  };
+}
+
+export default connect(mapStateToProps)(TimePerDivision);

Software/waveview/src/components/bottombar/subcomponents/trigger.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
 import './../../../css/bottombar/subscomponents/trigger.css';
 
-interface ITriggerProps {
+function Trigger() {
-  channel: string, 
-  mode: string
-}
-
-function Trigger(props: ITriggerProps) {
   return (
     <div className="TriggerStatus"> 
-      Trig:{props.channel}, Mode:{props.mode}
+      Trig:CH1, Mode:RisingEdge
     </div>
   )
 }

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

@@ -4,12 +4,22 @@ import './../../../css/sidebar/widgets/horizontalWidget.css';
 
 class HorizontalWidget extends React.Component<any, any> { 
 
-  incrementValue = (value: any) => {
+  // Horizontal Time Base
-    this.props.dispatch({ type: 'horizontal/increaseValue', payload: value});
+  incrementTimeBase = () => {
+    this.props.dispatch({ type: 'horizontal/increaseTimeBase'});
   }
 
-  decrementValue = (value: any) => {
+  decrementTimeBase = () => {
-    this.props.dispatch({ type: 'horizontal/decreaseValue' , payload: value});
+    this.props.dispatch({ type: 'horizontal/decreaseTimeBase'});
+  }
+
+  // Horizontal Offset
+  incrementOffset = () => {
+    this.props.dispatch({ type: 'horizontal/increaseOffset'});
+  }
+
+  decrementOffset = () => {
+    this.props.dispatch({ type: 'horizontal/decreaseOffset'});
   }
 
   render() {
@@ -19,40 +29,40 @@ class HorizontalWidget extends React.Component<any, any> {
           Horizontal
         </div>
         
-        <div className="HorizontalWidgetAdjustBlock-Value1">
+        <div className="HorizontalWidgetAdjustBlock-HorizontalTimeBase">
           <button 
             className="MinusButton"
-            onClick={() => this.decrementValue(1)}>
+            onClick={() => this.decrementTimeBase}>
             -
           </button>
           <label 
-            className="AdjustValueBlockValue1"
+            className="AdjustValueBlockHorizontalTimeBase"
             style={{color: "white"}}
           >
-            {this.props.horizontalWidget.value1.toString()}{"ns/div"}
+            {this.props.horizontalWidget.horizontalTimeBase.value.toString()}{this.props.horizontalWidget.horizontalTimeBase.unit}
           </label>
           <button 
             className="PlusButton"
-            onClick={() => this.incrementValue(1)}>
+            onClick={() => this.incrementTimeBase}>
             +
           </button>
         </div>
 
-        <div className="HorizontalWidgetAdjustBlock-Value2">
+        <div className="HorizontalWidgetAdjustBlock-HorizontalOffset">
           <button 
             className="MinusButton"
-            onClick={() => this.decrementValue(2)}>
+            onClick={() => this.decrementOffset}>
             -
           </button>
           <label 
-            className="AdjustValueBlockValue2"
+            className="AdjustValueBlockHorizontalOffset"
             style={{color: "white"}}
           >
-            {this.props.horizontalWidget.value2.toString()}{"ms"}
+            {this.props.horizontalWidget.horizontalOffset.value.toString()}{this.props.horizontalWidget.horizontalOffset.unit}
           </label>
           <button 
             className="PlusButton"
-            onClick={() => this.incrementValue(2)}>
+            onClick={() => this.incrementOffset}>
             +
           </button>
         </div>

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

@@ -67,7 +67,7 @@ class VerticalWidget extends React.Component<any, any> {
           className="AdjustValueBlockTimePerDivision"
           style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.activeChannel-1]}}
         >
-          {DefaultValues.x1ProbeValues[this.props.verticalWidget.timePerDivisionIndex[this.props.verticalWidget.activeChannel-1]]}
+          {DefaultValues.x1ProbeValues[this.props.verticalWidget.timePerDivision[this.props.verticalWidget.activeChannel-1].index]}
         </label>
         <button 
           className="PlusButton"
@@ -86,7 +86,7 @@ class VerticalWidget extends React.Component<any, any> {
           className="AdjustValueBlockVerticalOffset"
           style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.activeChannel-1]}}
         >
-          {this.props.verticalWidget.verticalOffset[this.props.verticalWidget.activeChannel-1].toString()}{"mV"}
+          {this.props.verticalWidget.verticalOffset[this.props.verticalWidget.activeChannel-1].value}{"mV"}
         </label>
         <button 
           className="PlusButton"

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

@@ -0,0 +1,6 @@
+enum MeasurementType {
+  DC = "DC",
+  AC = "AC"
+}
+
+export default MeasurementType;

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

@@ -10,16 +10,16 @@
   margin: 10px;
 }
 
-.AdjustValueBlockValue1 {
+.AdjustValueBlockHorizontalTimeBase {
   padding-left: 2vw;
   padding-right: 2vw;
 }
 
-.HorizontalWidgetAdjustBlock-Value2 {
+.HorizontalWidgetAdjustBlock-HorizontalOffset {
   margin-top: 1vh;
 }
 
-.AdjustValueBlockValue2 {
+.AdjustValueBlockHorizontalOffset {
   padding-left: 2vw;
   padding-right: 2vw;
 }

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

@@ -1,44 +1,42 @@
 const initialState = {
-  value1: 0,
+  horizontalTimeBase: {value: 0, unit: "ns/div"},
-  value2: 0
+  horizontalOffset: {value: 0, unit: "ms"}
 };
 
 export default function(state = initialState, action: {type: any, payload: any}) {
   switch(action.type) {
-    case "horizontal/increaseValue":
+    case "horizontal/increaseTimeBase":
-      if (action.payload == 1) {
       return {
-          value1: state.value1 + 1,
+        ...state,
-          value2: state.value2
+        horizontalTimeBase: {
+          value: state.horizontalTimeBase.value + 1,
+          unit: state.horizontalTimeBase.unit
         }
       }
-      else if (action.payload == 2) {
+    case "horizontal/decreaseTimeBase":
       return {
-          value1: state.value1,
+        ...state,
-          value2: state.value2 + 1
+        horizontalTimeBase: {
+          value: state.horizontalTimeBase.value - 1,
+          unit: state.horizontalTimeBase.unit
         }
       }
-      else return {
+    case "horizontal/increaseOffset":
-        value1: state.value1,
-        value2: state.value2
-      };
-    case "horizontal/decreaseValue":
-      if (action.payload == 1) {
       return {
-          value1: state.value1 - 1,
+        ...state,
-          value2: state.value2
+        horizontalOffset: {
+          value: state.horizontalOffset.value + 1,
+          unit: state.horizontalOffset.unit
         }
       }
-      else if (action.payload == 2) {
+    case "horizontal/decreaseOffset":
       return {
-          value1: state.value1,
+        ...state,
-          value2: state.value2 - 1
+        horizontalOffset: {
+          value: state.horizontalOffset.value - 1,
+          unit: state.horizontalOffset.unit
         }
       }
-      else return {
-        value1: state.value1,
-        value2: state.value2
-      };
     default:
       return state;
   }

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

@@ -1,11 +1,32 @@
 import DefaultValues from '../../configuration/defaultValues';
+import MeasurementType from '../../configuration/enums/measurementType';
 
 const initialState = {
   activeChannel: 1,
-  channelColorsList: ["#EBFF00", "#00FF19", "#0075FF", "#FF0000"],
+  channelColorsList: [
-  timePerDivision: [DefaultValues.x1ProbeValues[6], DefaultValues.x1ProbeValues[6], DefaultValues.x1ProbeValues[6], DefaultValues.x1ProbeValues[6]],
+    "#EBFF00", 
-  timePerDivisionIndex: [6, 6, 6, 6],
+    "#00FF19", 
-  verticalOffset: [0, 0, 0, 0]
+    "#0075FF", 
+    "#FF0000"
+  ],
+  timePerDivision: [
+    {value: DefaultValues.x1ProbeValues[6], index: 6}, 
+    {value: DefaultValues.x1ProbeValues[6], index: 6}, 
+    {value: DefaultValues.x1ProbeValues[6], index: 6}, 
+    {value: DefaultValues.x1ProbeValues[6], index: 6}
+  ],
+  verticalOffset: [
+    {value: 0, unit: "mV"},
+    {value: 0, unit: "mV"},
+    {value: 0, unit: "mV"},
+    {value: 0, unit: "mV"}
+  ],
+  measurementType: [
+    MeasurementType.DC,
+    MeasurementType.DC,
+    MeasurementType.DC,
+    MeasurementType.DC
+  ]
 };
 
 export default function(state = initialState, action: {type: any, payload: any}) {
@@ -33,12 +54,12 @@ export default function(state = initialState, action: {type: any, payload: any})
       return { ...state }
       // Decrease vertical offset
     case "vertical/increaseTimePerDivision":
-      if (state.timePerDivisionIndex[state.activeChannel - 1] >= 12) {
+      if (state.timePerDivision[state.activeChannel - 1].index >= 12) {
         return { ...state }
       };
       // Increase time per division
     case "vertical/decreaseTimePerDivision":
-      if (state.timePerDivisionIndex[state.activeChannel - 1] == 0) {
+      if (state.timePerDivision[state.activeChannel - 1].index == 0) {
         return { ...state }
       };
       // Decrease time per division