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

updated measurements widget

Browse Source
This commit is contained in:
Jason Bonnell 2021-03-21 18:43:04 -04:00
parent d90ba2d23e
commit 537a47faa1
4 changed files with 362 additions and 47 deletions
Software/waveview/src
components/sidebar/widgets
measurementsWidget.tsx
css/sidebar/widgets
measurementsWidget.css
redux
initialStates
measurementsWidgetInitialState.tsx
reducers/widgets
measurementsWidgetReducer.tsx

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

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

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

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