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 
-          channelList={this.channelList}
-          triggerInformation={this.triggerInformation}
-          timePerDivisionInformation={this.timePerDivisionInformation}
-          />
+        <BottomBar />
         <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 {
-  channelList: {
-    color: string, 
-    className: string
-  }[]
-  triggerInformation: {
-    channel: string, 
-    mode: string
-  };
-  timePerDivisionInformation: { 
-    timeValue: number, 
-    timeUnit: string 
-  }
-}
-
-function BottomBar(props: IBottomBarProps) {
+function BottomBar() {
   return (
     <div className="BottomBarComponent">
-      {
-        props.channelList.map((c, i) => {
-          return (
-            <Channel
-              channelNumber={i+1}
-              voltsPerDiv={1}
-              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}
-      />
-    
+      <Channel channelNumber={1}/>
+      <Channel channelNumber={2}/>
+      <Channel channelNumber={3}/>
+      <Channel channelNumber={4}/>
+      <TimePerDivision />
+      <Trigger />
     </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 {
-  channelNumber: number
-  voltsPerDiv: number
-  voltageValue: number
-  voltageUnit: string
-  measurementType: string
-  channelClass: string
-  channelColor: string
-};
-
-function Channel(props: IChannelProps) {
+class Channel extends React.Component<any, any> {
+  render() {
     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 {
-  timeValue: number,
-  timeUnit: string
-}
-
-function TimePerDivision(props: ITimePerDivisionProps) {
+class TimePerDivision extends React.Component<any, any> { 
+  render() {
     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,17 +1,21 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import './../../../css/bottombar/subscomponents/trigger.css';
 
-interface ITriggerProps {
-  channel: string, 
-  mode: string
-}
-
-function Trigger(props: ITriggerProps) {
+class Trigger extends React.Component<any, any> { 
+  render() {
     return (
       <div className="TriggerStatus"> 
-      Trig:{props.channel}, Mode:{props.mode}
+        Trig:CH{this.props.triggerWidget.triggerChannel}, Mode:{this.props.triggerWidget.triggerType}
       </div>
     )
+  }
 }
 
-export default Trigger;
+function mapStateToProps(state: { triggerWidget: any; }) {
+  return {
+    triggerWidget: state.triggerWidget
+  };
+}
+
+export default connect(mapStateToProps)(Trigger);

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) => {
-    this.props.dispatch({ type: 'horizontal/increaseValue', payload: value});
+  // Horizontal Time Base
+  incrementTimeBase = () => {
+    this.props.dispatch({ type: 'horizontal/increaseTimeBase'});
   }
 
-  decrementValue = (value: any) => {
-    this.props.dispatch({ type: 'horizontal/decreaseValue' , payload: value});
+  decrementTimeBase = () => {
+    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

@@ -1,16 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import DefaultValues from '../../../configuration/defaultValues';
 import './../../../css/sidebar/widgets/verticalWidget.css';
 
 class VerticalWidget extends React.Component<any, any> { 
-  incrementValue = (value: any) => {
-    this.props.dispatch({ type: 'vertical/increaseValue', payload: value});
-  }
-
-  decrementValue = (value: any) => {
-    this.props.dispatch({ type: 'vertical/decreaseValue' , payload: value});
-  }
-
+   // Active Channel
    increaseChannel = () => {
     this.props.dispatch({type: 'vertical/increaseChannel'});
   }
@@ -19,6 +13,24 @@ class VerticalWidget extends React.Component<any, any> {
     this.props.dispatch({type: 'vertical/decreaseChannel'});
   }
 
+  // Vertical Offset
+  incrementVerticalOffset = () => {
+    this.props.dispatch({ type: 'vertical/increaseVerticalOffset'});
+  }
+
+  decrementVerticalOffset = () => {
+    this.props.dispatch({ type: 'vertical/decreaseVerticalOffset'});
+  }
+
+  // Time Per Division
+  incrementTimePerDivision = () => {
+    this.props.dispatch({type: 'vertical/increaseTimePerDivision'});
+  }
+
+  decrementTimePerDivision = () => {
+    this.props.dispatch({type: 'vertical/decreaseTimePerDivision'});
+  }
+
   render() {
     return (
       <div className="VerticalWidget">
@@ -29,56 +41,56 @@ class VerticalWidget extends React.Component<any, any> {
       <div className="VerticalWidgetAdjustChannelBlock">
         <button 
           className="MinusButton"
-          onClick={this.decreaseChannel}>
+          onClick={() => this.decreaseChannel()}>
           -
         </button>
         <label 
           className="AdjustChannelBlockValue"
-          style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.channel-1]}}
+          style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.activeChannel-1]}}
         >
-          CH{this.props.verticalWidget.channel.toString()}
+          CH{this.props.verticalWidget.activeChannel.toString()}
         </label>
         <button 
           className="PlusButton"
-          onClick={this.increaseChannel}>
+          onClick={() => this.increaseChannel()}>
           +
         </button>
       </div>
 
-      <div className="VerticalWidgetAdjustBlock-Value1">
+      <div className="VerticalWidgetAdjustBlock-TimePerDivision">
         <button 
           className="MinusButton"
-          onClick={() => this.decrementValue(1)}>
+          onClick={() => this.decrementTimePerDivision()}>
           -
         </button>
         <label 
-          className="AdjustValueBlockValue1"
-          style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.channel-1]}}
+          className="AdjustValueBlockTimePerDivision"
+          style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.activeChannel-1]}}
         >
-          {this.props.verticalWidget.value1.toString()}{"V/div"}
+          {DefaultValues.x1ProbeValues[this.props.verticalWidget.timePerDivision[this.props.verticalWidget.activeChannel-1].index]}
         </label>
         <button 
           className="PlusButton"
-          onClick={() => this.incrementValue(1)}>
+          onClick={() => this.incrementTimePerDivision()}>
           +
         </button>
       </div>
 
-      <div className="VerticalWidgetAdjustBlock-Value2">
+      <div className="VerticalWidgetAdjustBlock-VerticalOffset">
         <button 
           className="MinusButton"
-          onClick={() => this.decrementValue(2)}>
+          onClick={() => this.decrementVerticalOffset()}>
           -
         </button>
         <label 
-          className="AdjustValueBlockValue2"
-          style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.channel-1]}}
+          className="AdjustValueBlockVerticalOffset"
+          style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.activeChannel-1]}}
         >
-          {this.props.verticalWidget.value2.toString()}{"mV"}
+          {this.props.verticalWidget.verticalOffset[this.props.verticalWidget.activeChannel-1].value}{"mV"}
         </label>
         <button 
           className="PlusButton"
-          onClick={() => this.incrementValue(2)}>
+          onClick={() => this.incrementVerticalOffset()}>
           +
         </button>
       </div>

Software/waveview/src/configuration/defaultValues.tsx

@@ -0,0 +1,74 @@
+const x1ProbeValues = [
+  "10V/div", 
+  "5V/div", 
+  "2V/div", 
+  "1V/div",
+  "500mV/div",
+  "200mV/div",
+  "100mV/div",
+  "50mV/div",
+  "20mV/div",
+  "10mV/div",
+  "5mV/div",
+  "2mV/div",
+  "1mV/div"
+];
+const x10ProbeValues = [
+  "100V/div", 
+  "50V/div", 
+  "20V/div", 
+  "10V/div",
+  "5V/div",
+  "2V/div",
+  "1V/div",
+  "500mV/div",
+  "200mV/div",
+  "100mV/div",
+  "50mV/div",
+  "20mV/div",
+  "10mV/div"
+];
+// 13 different voltages per divison presets
+// Start at x1ProbeValues[6] and change accordingly 
+
+const horizontalTimeBases = [
+  "1ns/div",
+  "2ns/div",
+  "5ns/div",
+  "10ns/div",
+  "20ns/div",
+  "50ns/div",
+  "100ns/div",
+  "200ns/div",
+  "500ns/div",
+  "1µs/div",
+  "2µs/div",
+  "5µs/div",
+  "10µs/div",
+  "20µs/div",
+  "50µs/div",
+  "100µs/div",
+  "200µs/div",
+  "500µs/div",
+  "1ms/div",
+  "2ms/div",
+  "5ms/div",
+  "10ms/div",
+  "20ms/div",
+  "50ms/div",
+  "100ms/div",
+  "200ms/div",
+  "500ms/div",
+  "1s/div",
+  "2s/div",
+  "5s/div",
+  "10s/div"
+];
+// 31 different voltages per division presets
+// Start at horizontalTimeBases[15] and change accordingly
+
+export default {
+  x1ProbeValues, 
+  x10ProbeValues,
+  horizontalTimeBases
+};

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

@@ -0,0 +1,8 @@
+enum DefaultChannelColor {
+  Channel1 = "#EBFF00",
+  Channel2 = "#00FF19",
+  Channel3 = "#0075FF",
+  Channel4 = "#FF0000"
+};
+
+export default DefaultChannelColor;

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

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

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

@@ -0,0 +1,8 @@
+enum TimeUnit {
+  NanoSecond = "ns",
+  MicroSecond = "µs",
+  MilliSecond = "ms",
+  Second = "s"
+}
+
+export default TimeUnit;

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

@@ -0,0 +1,6 @@
+enum TriggerType {
+  RisingEdge = "RisingEdge",
+  FallingEdge = "FallingEdge"
+}
+
+export default TriggerType;

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

@@ -0,0 +1,8 @@
+enum VoltageUnit {
+  NanoVolt = "nV",
+  MicroVolt = "µV",
+  MilliVolt = "mV",
+  Volt = "V"
+}
+
+export default VoltageUnit;

Software/waveview/src/css/bottombar/subscomponents/channel.css

@@ -11,6 +11,7 @@
   height: 2vh;
   background: #4b4b4b;
   z-index: 1000;
+  user-select: none;
 }
 
 .Channel2 {
@@ -21,6 +22,7 @@
   height: 2vh;
   background: #4b4b4b;
   z-index: 1000;
+  user-select: none;
 }
 
 .Channel3 {
@@ -31,6 +33,7 @@
   height: 2vh;
   background: #4b4b4b;
   z-index: 1000;
+  user-select: none;
 }
 
 .Channel4 {
@@ -41,4 +44,5 @@
   height: 2vh;
   background: #4b4b4b;
   z-index: 1000;
+  user-select: none;
 }

Software/waveview/src/css/bottombar/subscomponents/timeperdivision.css

@@ -12,4 +12,5 @@
   height: 2vh;
   background: #4b4b4b;
   z-index: 1000;
+  user-select: none;
 }

Software/waveview/src/css/bottombar/subscomponents/trigger.css

@@ -12,4 +12,5 @@
   height: 2vh;
   background: #4b4b4b;
   z-index: 1000;
+  user-select: none;
 }

Software/waveview/src/css/graph/graph.css

@@ -20,5 +20,6 @@
   color: yellow;
   margin-top: 54vh;
   margin-bottom: 0;
+  user-select: none;
 }
 

Software/waveview/src/css/sidebar/core/search.css

@@ -1,10 +1,12 @@
 .Search {
   text-align: center;
   display: flex;
+  user-select: none;
 }
   
 .Searchbar {
   position: relative;
+  user-select: none;
   top: 10px;
   width: 15vw;
   height: 2vh;

Software/waveview/src/css/sidebar/core/singleButton.css

@@ -8,6 +8,7 @@
   background: #EBFF00;
   z-index: 100;
   border: none;
+  user-select: none;
 }
 
 .SingleButtonText {
@@ -16,4 +17,5 @@
   display: flex;
   position: relative;
   left: 2vw;
+  user-select: none;
 }

Software/waveview/src/css/sidebar/core/stopButton.css

@@ -8,6 +8,7 @@
   background: #FF0000;
   z-index: 100;
   border: none;
+  user-select: none;
 }
 
 .StopButtonText {
@@ -16,4 +17,5 @@
   display: flex;
   position: relative;
   left: 2vw;
+  user-select: none;
 }

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

@@ -2,6 +2,7 @@
   text-align: center;
   display: flex;
   flex-direction: column;
+  user-select: none;
 }
 
 .WidgetTitle {
@@ -10,16 +11,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/css/sidebar/widgets/measurementsWidget.css

@@ -1,3 +1,7 @@
+.MeasurementsWidget {
+  user-select: none;
+}
+
 .MeasurementsWidgetDisplayValueBlock-Value2 {
   margin-top: 1vh;
 }

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

@@ -2,6 +2,7 @@
   text-align: center;
   display: flex;
   flex-direction: column;
+  user-select: none;
 }
 
 .WidgetTitle {
@@ -15,20 +16,20 @@
   padding-right: 2vw;
 }
 
-.VerticalWidgetAdjustBlock-Value1 {
+.VerticalWidgetAdjustBlock-TimePerDivision {
   margin-top: 1vh;
 }
 
-.AdjustValueBlockValue1 {
+.AdjustValueBlockTimePerDivision {
   padding-left: 2vw;
   padding-right: 2vw;
 }
 
-.VerticalWidgetAdjustBlock-Value2 {
+.VerticalWidgetAdjustBlock-VerticalOffset {
   margin-top: 1vh;
 }
 
-.AdjustValueBlockValue2 {
+.AdjustValueBlockVerticalOffset {
   padding-left: 2vw;
   padding-right: 2vw;
 }

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

@@ -1,44 +1,57 @@
+import DefaultValues from '../../configuration/defaultValues';
+import TimeUnit from '../../configuration/enums/timeUnit';
+
 const initialState = {
-  value1: 0,
-  value2: 0
+  horizontalTimeBase: {
+    value: DefaultValues.horizontalTimeBases[15], 
+    index: 15
+  },
+  horizontalOffset: {
+    value: 0, 
+    unit: TimeUnit.MilliSecond
+  }
 };
 
 export default function(state = initialState, action: {type: any, payload: any}) {
   switch(action.type) {
-    case "horizontal/increaseValue":
-      if (action.payload == 1) {
+    case "horizontal/increaseTimeBase":
+      if (state.horizontalTimeBase.index >= 30) {
+        return { ...state };
+      }
       return {
-          value1: state.value1 + 1,
-          value2: state.value2
+        ...state,
+        horizontalTimeBase: {
+          value: DefaultValues.horizontalTimeBases[state.horizontalTimeBase.index + 1],
+          index: state.horizontalTimeBase.index + 1
         }
       }
-      else if (action.payload == 2) {
+    case "horizontal/decreaseTimeBase":
+      if (state.horizontalTimeBase.index === 0) {
+        return { ...state };
+      }
       return {
-          value1: state.value1,
-          value2: state.value2 + 1
+        ...state,
+        horizontalTimeBase: {
+          value: DefaultValues.horizontalTimeBases[state.horizontalTimeBase.index - 1],
+          index: state.horizontalTimeBase.index - 1
         }
       }
-      else return {
-        value1: state.value1,
-        value2: state.value2
-      };
-    case "horizontal/decreaseValue":
-      if (action.payload == 1) {
+    case "horizontal/increaseOffset":
       return {
-          value1: state.value1 - 1,
-          value2: state.value2
+        ...state,
+        horizontalOffset: {
+          ...state.horizontalOffset,
+          value: state.horizontalOffset.value + 1
         }
       }
-      else if (action.payload == 2) {
+    case "horizontal/decreaseOffset":
       return {
-          value1: state.value1,
-          value2: state.value2 - 1
+        ...state,
+        horizontalOffset: {
+          ...state.horizontalOffset,
+          value: state.horizontalOffset.value - 1
         }
       }
-      else return {
-        value1: state.value1,
-        value2: state.value2
-      };
     default:
       return state;
   }

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

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
 import horizontalWidgetReducer from './horizontalWidgetReducer';
 import verticalWidgetReducer from './verticalWidgetReducer';
 import measurementsWidgetReducer from './measurementsWidgetReducer';
+import triggerWidgetReducer from './triggerWidgetReducer';
 
 export default combineReducers(
   {
     horizontalWidget: horizontalWidgetReducer,
     verticalWidget: verticalWidgetReducer,
-    measurementsWidget: measurementsWidgetReducer
+    measurementsWidget: measurementsWidgetReducer,
+    triggerWidget: triggerWidgetReducer
   }
 );