AllSpiceMirrors/ThunderScope
7
Fork 0
mirror of https://github.com/EEVengers/ThunderScope.git synced 2025-04-22 17:43:44 +00:00
Files Issues Releases Activity

Merge pull request from EEVengers/features/ux-crunch

Browse Source 
Features/ux crunch
This commit is contained in:
Jason Bonnell 2021-03-21 18:44:24 -04:00 committed by GitHub
commit efe75ca381
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 674 additions and 53 deletions

3
Software/waveview/src/components/graph/graph.tsx
View File

@ -69,8 +69,9 @@ class Graph extends React.Component<any, any> {
}
}
function mapStateToProps(state: { settings: any }) {
function mapStateToProps(state: { graph: any, settings: any }) {
return {
graph: state.graph,
settings: state.settings
};
}

4
Software/waveview/src/components/sidebar/core/singleButton.tsx
View File

@ -4,7 +4,7 @@ import './../../../css/sidebar/core/singleButton.css';
class SingleButton extends React.Component<any, any> {
singleClickHandler = () => {
toggleSingleMode = () => {
this.props.dispatch({type: 'graph/singleMode'});
}
@ -13,7 +13,7 @@ class SingleButton extends React.Component<any, any> {
<div className={"SingleButtonComponent"}>
<button
className={"SingleButton"}
onClick={() => this.singleClickHandler()}
onClick={() => this.toggleSingleMode()}
>
<label
className={"SingleButtonText"}>

2
Software/waveview/src/components/sidebar/sidebar.tsx
View File

@ -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>
)

189
Software/waveview/src/components/sidebar/widgets/mathWidget.tsx Normal file
View File

@ -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);

210
Software/waveview/src/components/sidebar/widgets/measurementsWidget.tsx
View File

@ -1,9 +1,14 @@
import React from 'react';
import { connect } from 'react-redux';
import MathType from '../../../configuration/enums/mathType';
import './../../../css/sidebar/widgets/measurementsWidget.css';
class MeasurementsWidget extends React.Component<any, any> {
measureChannel = (channelNumber: number) => {
this.props.dispatch({type: 'measurements/selectChannel', payload: channelNumber });
}
render() {
return (
<div className="MeasurementsWidget">
@ -11,44 +16,193 @@ class MeasurementsWidget extends React.Component<any, any> {
Measurements
</div>
<div className="MeasurementsWidget-Max">
<label
className="DisplayValue-MaxLabel"
>
{this.props.measurementsWidget.measurement[0].mathType}
</label>
<label
className="DisplayValue-MaxValue"
>
{this.props.measurementsWidget.measurement[0].value}
{this.props.measurementsWidget.measurement[0].unit}
</label>
<div className="ClearBlock"></div>
<div className="ChannelTitle">
Channel
</div>
<div className="ChannelSelectionButtons">
<button
className="Channel1Button"
onClick={() => this.measureChannel(1)}>
<label
className={"Channel1ButtonText"}
style={{color: this.props.measurementsWidget.displayChannel[0] === true ? this.props.settings.colors.channel[0] : "black"}}>
CH1
</label>
</button>
<button
className="Channel2Button"
onClick={() => this.measureChannel(2)}>
<label
className={"Channel2ButtonText"}
style={{color: this.props.measurementsWidget.displayChannel[1] === true ? this.props.settings.colors.channel[1] : "black"}}>
CH2
</label>
</button>
<button
className="Channel3Button"
onClick={() => this.measureChannel(3)}>
<label
className={"Channel3ButtonText"}
style={{color: this.props.measurementsWidget.displayChannel[2] === true ? this.props.settings.colors.channel[2] : "black"}}>
CH3
</label>
</button>
<button
className="Channel4Button"
onClick={() => this.measureChannel(4)}>
<label
className={"Channel4ButtonText"}
style={{color: this.props.measurementsWidget.displayChannel[3] === true ? this.props.settings.colors.channel[3] : "black"}}>
CH4
</label>
</button>
</div>
<div className="MeasurementsWidget-Min">
<label
className="DisplayValue-MinLabel"
>
{this.props.measurementsWidget.measurement[1].mathType}
</label>
<label
className="DisplayValue-MinValue"
>
{this.props.measurementsWidget.measurement[1].value}
{this.props.measurementsWidget.measurement[1].unit}
</label>
<div className="ClearBlock"></div>
{this.props.measurementsWidget.displayChannel[0] === true &&
<div className="Channel1Measurements-Title">
CH1 Measurements
</div>
}
{this.props.measurementsWidget.displayChannel[0] === true &&
<div className="Channel1Measurements">
<label
className="Channel1-MaxLabel"
style={{color: this.props.settings.colors.channel[0]}}>
{MathType.Max}
</label>
<label
className="Channel1-MaxValue"
style={{color: this.props.settings.colors.channel[0]}}>
{this.props.measurementsWidget.max[0].value}
{this.props.measurementsWidget.max[0].unit}
</label>
<div className="ClearBlock"></div>
<label
className="Channel1-MinLabel"
style={{color: this.props.settings.colors.channel[0]}}>
{MathType.Min}
</label>
<label
className="Channel1-MinValue"
style={{color: this.props.settings.colors.channel[0]}}>
{this.props.measurementsWidget.min[0].value}
{this.props.measurementsWidget.min[0].unit}
</label>
<div className="ClearBlock"></div>
</div>
}
{this.props.measurementsWidget.displayChannel[1] === true &&
<div className="Channel2Measurements-Title">
CH2 Measurements
</div>
}
{this.props.measurementsWidget.displayChannel[1] === true &&
<div className="Channel2Measurements">
<label
className="Channel2-MaxLabel"
style={{color: this.props.settings.colors.channel[1]}}>
{MathType.Max}
</label>
<label
className="Channel2-MaxValue"
style={{color: this.props.settings.colors.channel[1]}}>
{this.props.measurementsWidget.max[1].value}
{this.props.measurementsWidget.max[1].unit}
</label>
<div className="ClearBlock"></div>
<label
className="Channel2-MinLabel"
style={{color: this.props.settings.colors.channel[1]}}>
{MathType.Min}
</label>
<label
className="Channel2-MinValue"
style={{color: this.props.settings.colors.channel[1]}}>
{this.props.measurementsWidget.min[1].value}
{this.props.measurementsWidget.min[1].unit}
</label>
<div className="ClearBlock"></div>
</div>
}
{this.props.measurementsWidget.displayChannel[2] === true &&
<div className="Channel3Measurements-Title">
CH3 Measurements
</div>
}
{this.props.measurementsWidget.displayChannel[2] === true &&
<div className="Channel3Measurements">
<label
className="Channel3-MaxLabel"
style={{color: this.props.settings.colors.channel[2]}}>
{MathType.Max}
</label>
<label
className="Channel3-MaxValue"
style={{color: this.props.settings.colors.channel[2]}}>
{this.props.measurementsWidget.max[2].value}
{this.props.measurementsWidget.max[2].unit}
</label>
<div className="ClearBlock"></div>
<label
className="Channel3-MinLabel"
style={{color: this.props.settings.colors.channel[2]}}>
{MathType.Min}
</label>
<label
className="Channel3-MinValue"
style={{color: this.props.settings.colors.channel[2]}}>
{this.props.measurementsWidget.min[2].value}
{this.props.measurementsWidget.min[2].unit}
</label>
<div className="ClearBlock"></div>
</div>
}
{this.props.measurementsWidget.displayChannel[3] === true &&
<div className="Channel4Measurements-Title">
CH4 Measurements
</div>
}
{this.props.measurementsWidget.displayChannel[3] === true &&
<div className="Channel4Measurements">
<label
className="Channel4-MaxLabel"
style={{color: this.props.settings.colors.channel[3]}}>
{MathType.Max}
</label>
<label
className="Channel4-MaxValue"
style={{color: this.props.settings.colors.channel[3]}}>
{this.props.measurementsWidget.max[3].value}
{this.props.measurementsWidget.max[3].unit}
</label>
<div className="ClearBlock"></div>
<label
className="Channel4-MinLabel"
style={{color: this.props.settings.colors.channel[3]}}>
{MathType.Min}
</label>
<label
className="Channel4-MinValue"
style={{color: this.props.settings.colors.channel[3]}}>
{this.props.measurementsWidget.min[3].value}
{this.props.measurementsWidget.min[3].unit}
</label>
<div className="ClearBlock"></div>
</div>
}
</div>
)
}
}
function mapStateToProps(state: { measurementsWidget: any; }) {
function mapStateToProps(state: { measurementsWidget: any, settings: any }) {
return {
measurementsWidget: state.measurementsWidget
measurementsWidget: state.measurementsWidget,
settings: state.settings
};
}

6
Software/waveview/src/configuration/enums/mathOperators.tsx Normal file
View File

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

51
Software/waveview/src/css/sidebar/widgets/mathWidget.css Normal file
View File

@ -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;
}

137
Software/waveview/src/css/sidebar/widgets/measurementsWidget.css
View File

@ -2,31 +2,146 @@
user-select: none;
}
.MeasurementsWidget-Min {
.ClearBlock {
clear: both;
}
.Channel1Measurements-Title {
background-color: #4B4B4B;
color: black;
margin-left: 50px;
margin-right: 50px;
font-size: small;
margin-top: 1vh;
margin-bottom: 1vh;
}
.DisplayValue-MaxLabel {
padding-left: 2vw;
.Channel1Measurements {
margin-top: 1vh;
margin-bottom: 1vh;
}
.Channel1-MaxLabel {
padding-left: 3vw;
float: left;
}
.DisplayValue-MaxValue {
padding-right: 2vw;
.Channel1-MaxValue {
padding-right: 3vw;
float: right;
}
.DisplayValue-MinLabel {
padding-left: 2vw;
.Channel1-MinLabel {
padding-left: 3vw;
float: left;
}
.DisplayValue-MinValue {
padding-right: 2vw;
.Channel1-MinValue {
padding-right: 3vw;
float: right;
}
.ClearBlock {
clear: both;
.Channel2Measurements-Title {
background-color: #4B4B4B;
color: black;
margin-left: 50px;
margin-right: 50px;
font-size: small;
margin-top: 1vh;
margin-bottom: 1vh;
}
.Channel2Measurements {
margin-top: 1vh;
margin-bottom: 1vh;
}
.Channel2-MaxLabel {
padding-left: 3vw;
float: left;
}
.Channel2-MaxValue {
padding-right: 3vw;
float: right;
}
.Channel2-MinLabel {
padding-left: 3vw;
float: left;
}
.Channel2-MinValue {
padding-right: 3vw;
float: right;
}
.Channel3Measurements-Title {
background-color: #4B4B4B;
color: black;
margin-left: 50px;
margin-right: 50px;
font-size: small;
margin-top: 1vh;
margin-bottom: 1vh;
}
.Channel3Measurements {
margin-top: 1vh;
margin-bottom: 1vh;
}
.Channel3-MaxLabel {
padding-left: 3vw;
float: left;
}
.Channel3-MaxValue {
padding-right: 3vw;
float: right;
}
.Channel3-MinLabel {
padding-left: 3vw;
float: left;
}
.Channel3-MinValue {
padding-right: 3vw;
float: right;
}
.Channel4Measurements-Title {
background-color: #4B4B4B;
color: black;
margin-left: 50px;
margin-right: 50px;
font-size: small;
margin-top: 1vh;
margin-bottom: 1vh;
}
.Channel4Measurements {
margin-top: 1vh;
margin-bottom: 1vh;
}
.Channel4-MaxLabel {
padding-left: 3vw;
float: left;
}
.Channel4-MaxValue {
padding-right: 3vw;
float: right;
}
.Channel4-MinLabel {
padding-left: 3vw;
float: left;
}
.Channel4-MinValue {
padding-right: 3vw;
float: right;
}

5
Software/waveview/src/redux/initialStates/graphInitialState.tsx
View File

@ -1,7 +1,10 @@
import GraphStatus from "../../configuration/enums/graphStatus";
const GraphInitialState = {
currentStatus: GraphStatus.On
currentStatus: GraphStatus.On,
singleMode: false,
xDomain: [0,0],
yDomain: [0,0]
};
export default GraphInitialState;

10
Software/waveview/src/redux/initialStates/mathWidgetInitialState.tsx Normal file
View File

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

52
Software/waveview/src/redux/initialStates/measurementsWidgetInitialState.tsx
View File

@ -1,18 +1,54 @@
import MathType from '../../configuration/enums/mathType';
import TimeUnit from '../../configuration/enums/timeUnit';
import VoltageUnit from '../../configuration/enums/voltageUnit';
const MeasurementsWidgetInitialState = {
measurement: [
displayChannel: [
false,
false,
false,
false
],
max: [
{
mathType: MathType.Max,
value: 500,
unit: TimeUnit.NanoSecond
value: 100,
unit: VoltageUnit.MicroVolt,
display: false
},
{
value: 200,
unit: VoltageUnit.NanoVolt,
display: false
},
{
mathType: MathType.Min,
value: 300,
unit: VoltageUnit.MilliVolt
unit: VoltageUnit.MilliVolt,
display: false
},
{
value: 400,
unit: VoltageUnit.Volt,
display: false
}
],
min: [
{
value: 10,
unit: VoltageUnit.MicroVolt,
display: false
},
{
value: 20,
unit: VoltageUnit.NanoVolt,
display: false
},
{
value: 30,
unit: VoltageUnit.MilliVolt,
display: false
},
{
value: 40,
unit: VoltageUnit.Volt,
display: false
}
]
};

8
Software/waveview/src/redux/reducers/graphReducer.tsx
View File

@ -10,8 +10,12 @@ export default function(state = GraphInitialState, action: {type: any, payload:
currentStatus: newStatus
};
case "graph/singleMode":
// Handle what needs to happen when clicking the Single button
return state;
// Need to implement this in the tick generator to stop/pause polling when in single mode
return {
...state,
currentStatus: GraphStatus.Off,
singleMode: !state.singleMode
};
default:
return state;
}

2
Software/waveview/src/redux/reducers/index.tsx
View File

@ -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
}

38
Software/waveview/src/redux/reducers/widgets/mathWidgetReducer.tsx Normal file
View File

@ -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;
}
}

10
Software/waveview/src/redux/reducers/widgets/measurementsWidgetReducer.tsx
View File

@ -1,7 +1,17 @@
import MeasurementsWidgetInitialState from '../../initialStates/measurementsWidgetInitialState';
export default function(state = MeasurementsWidgetInitialState, action: {type: any, payload: any}) {
var tmp;
switch(action.type) {
case "measurements/selectChannel":
tmp = state.displayChannel;
tmp[action.payload - 1] = !state.displayChannel[action.payload - 1];
return {
...state,
displayChannel: tmp
};
default:
return state;
}