Features/bottombar redux #97

Merged
A-Nilfgaardian merged 7 commits from features/bottombar-redux into master 2021-01-20 14:34:28 +00:00
4 changed files with 104 additions and 96 deletions
Showing only changes of commit 4701d736c4 - Show all commits

View File

@ -1,16 +1,10 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import DefaultValues from '../../../configuration/defaultValues';
import './../../../css/sidebar/widgets/verticalWidget.css'; import './../../../css/sidebar/widgets/verticalWidget.css';
class VerticalWidget extends React.Component<any, any> { class VerticalWidget extends React.Component<any, any> {
incrementValue = (value: any) => { // Active Channel
this.props.dispatch({ type: 'vertical/increaseValue', payload: value});
}
decrementValue = (value: any) => {
this.props.dispatch({ type: 'vertical/decreaseValue' , payload: value});
}
increaseChannel = () => { increaseChannel = () => {
this.props.dispatch({type: 'vertical/increaseChannel'}); this.props.dispatch({type: 'vertical/increaseChannel'});
} }
@ -19,6 +13,24 @@ class VerticalWidget extends React.Component<any, any> {
this.props.dispatch({type: 'vertical/decreaseChannel'}); 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() { render() {
return ( return (
<div className="VerticalWidget"> <div className="VerticalWidget">
@ -34,9 +46,9 @@ class VerticalWidget extends React.Component<any, any> {
</button> </button>
<label <label
className="AdjustChannelBlockValue" 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> </label>
<button <button
className="PlusButton" className="PlusButton"
@ -45,40 +57,40 @@ class VerticalWidget extends React.Component<any, any> {
</button> </button>
</div> </div>
<div className="VerticalWidgetAdjustBlock-Value1"> <div className="VerticalWidgetAdjustBlock-TimePerDivision">
<button <button
className="MinusButton" className="MinusButton"
onClick={() => this.decrementValue(1)}> onClick={() => this.decrementTimePerDivision}>
- -
</button> </button>
<label <label
className="AdjustValueBlockValue1" className="AdjustValueBlockTimePerDivision"
style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.channel-1]}} style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.activeChannel-1]}}
> >
{this.props.verticalWidget.value1.toString()}{"V/div"} {DefaultValues.x1ProbeValues[this.props.verticalWidget.timePerDivisionIndex[this.props.verticalWidget.activeChannel-1]]}
</label> </label>
<button <button
className="PlusButton" className="PlusButton"
onClick={() => this.incrementValue(1)}> onClick={() => this.incrementTimePerDivision}>
+ +
</button> </button>
</div> </div>
<div className="VerticalWidgetAdjustBlock-Value2"> <div className="VerticalWidgetAdjustBlock-VerticalOffset">
<button <button
className="MinusButton" className="MinusButton"
onClick={() => this.decrementValue(2)}> onClick={() => this.decrementVerticalOffset}>
- -
</button> </button>
<label <label
className="AdjustValueBlockValue2" className="AdjustValueBlockVerticalOffset"
style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.channel-1]}} 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].toString()}{"mV"}
</label> </label>
<button <button
className="PlusButton" className="PlusButton"
onClick={() => this.incrementValue(2)}> onClick={() => this.incrementVerticalOffset}>
+ +
</button> </button>
</div> </div>

View File

@ -0,0 +1,37 @@
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
export default {
x1ProbeValues,
x10ProbeValues
};

View File

@ -15,20 +15,20 @@
padding-right: 2vw; padding-right: 2vw;
} }
.VerticalWidgetAdjustBlock-Value1 { .VerticalWidgetAdjustBlock-TimePerDivision {
margin-top: 1vh; margin-top: 1vh;
} }
.AdjustValueBlockValue1 { .AdjustValueBlockTimePerDivision {
padding-left: 2vw; padding-left: 2vw;
padding-right: 2vw; padding-right: 2vw;
} }
.VerticalWidgetAdjustBlock-Value2 { .VerticalWidgetAdjustBlock-VerticalOffset {
margin-top: 1vh; margin-top: 1vh;
} }
.AdjustValueBlockValue2 { .AdjustValueBlockVerticalOffset {
padding-left: 2vw; padding-left: 2vw;
padding-right: 2vw; padding-right: 2vw;
} }

View File

@ -1,88 +1,47 @@
import DefaultValues from '../../configuration/defaultValues';
const initialState = { const initialState = {
channel: 1, activeChannel: 1,
channelColorsList: ["#EBFF00", "#00FF19", "#0075FF", "#FF0000"], channelColorsList: ["#EBFF00", "#00FF19", "#0075FF", "#FF0000"],
value1: 0, timePerDivision: [DefaultValues.x1ProbeValues[6], DefaultValues.x1ProbeValues[6], DefaultValues.x1ProbeValues[6], DefaultValues.x1ProbeValues[6]],
value2: 0 timePerDivisionIndex: [6, 6, 6, 6],
verticalOffset: [0, 0, 0, 0]
}; };
export default function(state = initialState, action: {type: any, payload: any}) { export default function(state = initialState, action: {type: any, payload: any}) {
switch(action.type) { switch(action.type) {
case "vertical/increaseChannel": case "vertical/increaseChannel":
if (state.channel >= 4) { if (state.activeChannel >= 4) {
return { return { ...state }
channel: state.channel,
channelColorsList: state.channelColorsList,
value1: state.value1,
value2: state.value2
}
} }
return { return {
channel: state.channel + 1, ...state,
channelColorsList: state.channelColorsList, activeChannel: state.activeChannel + 1
value1: state.value1,
value2: state.value2
}; };
case "vertical/decreaseChannel": case "vertical/decreaseChannel":
if (state.channel == 1) { if (state.activeChannel == 1) {
return { return { ...state }
channel: state.channel,
channelColorsList: state.channelColorsList,
value1: state.value1,
value2: state.value2
}
} }
return { return {
channel: state.channel - 1, ...state,
channelColorsList: state.channelColorsList, activeChannel: state.activeChannel - 1
value1: state.value1,
value2: state.value2
}; };
case "vertical/increaseValue": case "vertical/increaseVerticalOffset":
if (action.payload == 1) { return { ...state }
return { // Decrease vertical offset
channel: state.channel, case "vertical/decreaseVerticalOffset":
channelColorsList: state.channelColorsList, return { ...state }
value1: state.value1 + 1, // Decrease vertical offset
value2: state.value2 case "vertical/increaseTimePerDivision":
} if (state.timePerDivisionIndex[state.activeChannel - 1] >= 12) {
} return { ...state }
else if (action.payload == 2) {
return {
channel: state.channel,
channelColorsList: state.channelColorsList,
value1: state.value1,
value2: state.value2 + 1
}
}
else return {
channel: state.channel,
channelColorsList: state.channelColorsList,
value1: state.value1,
value2: state.value2
}; };
case "vertical/decreaseValue": // Increase time per division
if (action.payload == 1) { case "vertical/decreaseTimePerDivision":
return { if (state.timePerDivisionIndex[state.activeChannel - 1] == 0) {
channel: state.channel, return { ...state }
channelColorsList: state.channelColorsList,
value1: state.value1 - 1,
value2: state.value2
}
}
else if (action.payload == 2) {
return {
channel: state.channel,
channelColorsList: state.channelColorsList,
value1: state.value1,
value2: state.value2 - 1
}
}
else return {
channel: state.channel,
channelColorsList: state.channelColorsList,
value1: state.value1,
value2: state.value2
}; };
// Decrease time per division
default: default:
return state; return state;
} }