7
mirror of https://github.com/EEVengers/ThunderScope.git synced 2025-04-14 23:59:19 +00:00

Merge pull request from EEVengers/features/more-redux

Features/more redux
This commit is contained in:
Jason Bonnell 2021-03-20 20:29:19 -04:00 committed by GitHub
commit 6e46382719
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 122 additions and 114 deletions

View File

@ -17,22 +17,12 @@ class App extends React.Component {
timerID: number = 0;
generator: TestPoints;
conf: TestConf;
channelList: {
color: string,
className:string
}[];
constructor(props: any) {
super(props);
this.state = initialState;
this.generator = new TestPoints(1000, 30);
this.conf = new TestConf();
this.channelList = [
{color: "#EBFF00", className: "Channel1"},
{color: "#00FF19", className: "Channel2"},
{color: "#0075FF", className: "Channel3"},
{color: "#FF0000", className: "Channel4"}
]
}
componentDidMount() {
@ -67,7 +57,6 @@ class App extends React.Component {
yDomain={this.generator.y.getDomain()}
xDomain={this.generator.x.getDomain()}
dataSeries={this.generator.getData()}
colorSeries={this.channelList.map((c, i) => c.color)}
/>
<BottomBar />
<Sidebar />

View File

@ -7,7 +7,7 @@ import './../../../css/bottombar/subcomponents/channel.css';
class Channel extends React.Component<any, any> {
render() {
return (
<div className={"Channel" + this.props.channelNumber} style={{color: this.props.verticalWidget.channelColorsList[this.props.channelNumber-1]}}>
<div className={"Channel" + this.props.channelNumber} style={{color: this.props.settings.colors.channel[this.props.channelNumber-1]}}>
<label>
CH{this.props.channelNumber}:
{" "}
@ -30,9 +30,10 @@ class Channel extends React.Component<any, any> {
}
}
function mapStateToProps(state: { verticalWidget: any; }) {
function mapStateToProps(state: { verticalWidget: any, settings: any }) {
return {
verticalWidget: state.verticalWidget
verticalWidget: state.verticalWidget,
settings: state.settings
};
}

View File

@ -8,7 +8,7 @@ class Trigger extends React.Component<any, any> {
<div className="TriggerStatus">
Trig:
<label
style={{color: this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1]}}>
style={{color: this.props.settings.colors.channel[this.props.triggerWidget.triggerChannel-1]}}>
CH{this.props.triggerWidget.triggerChannel}
</label>
, Mode: {this.props.triggerWidget.triggerType[this.props.triggerWidget.triggerChannel-1]}
@ -17,9 +17,10 @@ class Trigger extends React.Component<any, any> {
}
}
function mapStateToProps(state: { triggerWidget: any; }) {
function mapStateToProps(state: { triggerWidget: any, settings: any }) {
return {
triggerWidget: state.triggerWidget
triggerWidget: state.triggerWidget,
settings: state.settings
};
}

View File

@ -1,4 +1,5 @@
import React from 'react';
import { connect } from 'react-redux';
import './../../css/graph/graph.css';
import {
FlexibleXYPlot,
@ -9,67 +10,69 @@ import {
LineSeries
} from 'react-vis';
interface IGraphProps {
yDomain: number[],
xDomain: number[],
dataSeries: any[][],
colorSeries: string[]
}
class Graph extends React.Component<any, any> {
function Graph(props: IGraphProps) {
return (
<div className="graph_view">
<div
className="graph_sidebar"
>
<p
className = "graph_arrow"
render() {
return (
<div className="graph_view">
<div
className="graph_sidebar"
>
&#x21b3;
</p>
<p
className = "graph_arrow"
>
&#x21b3;
</p>
</div>
<FlexibleXYPlot
yDomain={this.props.yDomain}
xDomain={this.props.xDomain}
margin={{right:0, bottom:0}}
>
<HorizontalGridLines
style={{stroke: '#4D4D4D'}}
left={0}
top={0}
width={10000}
height={10000}
tickTotal={12}
/>
<VerticalGridLines
style={{stroke: '#4D4D4D'}}
left={0}
top={0}
width={10000}
height={10000}
tickTotal={10}
/>
<XAxis
title=""
hideTicks
/>
<YAxis
title=""
hideTicks
/>
{
this.props.dataSeries.map((data: any, index: any) => {
return <LineSeries
className="data-series"
data={data}
style={{fill:"none", transform: "translate(0,0)"}}
color={this.props.settings.colors.channel[index]}
/>
})
}
</FlexibleXYPlot>
</div>
<FlexibleXYPlot
yDomain={props.yDomain}
xDomain={props.xDomain}
margin={{right:0, bottom:0}}
>
<HorizontalGridLines
style={{stroke: '#4D4D4D'}}
left={0}
top={0}
width={10000}
height={10000}
tickTotal={12}
/>
<VerticalGridLines
style={{stroke: '#4D4D4D'}}
left={0}
top={0}
width={10000}
height={10000}
tickTotal={10}
/>
<XAxis
title=""
hideTicks
/>
<YAxis
title=""
hideTicks
/>
{
props.dataSeries.map((data, index) => {
return <LineSeries
className="data-series"
data={data}
style={{fill:"none", transform: "translate(0,0)"}}
color={props.colorSeries[index]}
/>
})
}
</FlexibleXYPlot>
</div>
)
)
}
}
export default Graph;
function mapStateToProps(state: { settings: any }) {
return {
settings: state.settings
};
}
export default connect(mapStateToProps)(Graph);

View File

@ -54,7 +54,7 @@ class TriggerWidget extends React.Component<any, any> {
onClick={() => this.changeChannel(1)}>
<label
className={"Channel1ButtonText"}
style={{color: this.props.triggerWidget.triggerChannel === 1 ? this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1] : "black"}}>
style={{color: this.props.triggerWidget.triggerChannel === 1 ? this.props.settings.colors.channel[this.props.triggerWidget.triggerChannel-1] : "black"}}>
CH1
</label>
</button>
@ -63,7 +63,7 @@ class TriggerWidget extends React.Component<any, any> {
onClick={() => this.changeChannel(2)}>
<label
className={"Channel2ButtonText"}
style={{color: this.props.triggerWidget.triggerChannel === 2 ? this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1] : "black"}}>
style={{color: this.props.triggerWidget.triggerChannel === 2 ? this.props.settings.colors.channel[this.props.triggerWidget.triggerChannel-1] : "black"}}>
CH2
</label>
</button>
@ -72,7 +72,7 @@ class TriggerWidget extends React.Component<any, any> {
onClick={() => this.changeChannel(3)}>
<label
className={"Channel3ButtonText"}
style={{color: this.props.triggerWidget.triggerChannel === 3 ? this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1] : "black"}}>
style={{color: this.props.triggerWidget.triggerChannel === 3 ? this.props.settings.colors.channel[this.props.triggerWidget.triggerChannel-1] : "black"}}>
CH3
</label>
</button>
@ -81,7 +81,7 @@ class TriggerWidget extends React.Component<any, any> {
onClick={() => this.changeChannel(4)}>
<label
className={"Channel4ButtonText"}
style={{color: this.props.triggerWidget.triggerChannel === 4 ? this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1] : "black"}}>
style={{color: this.props.triggerWidget.triggerChannel === 4 ? this.props.settings.colors.channel[this.props.triggerWidget.triggerChannel-1] : "black"}}>
CH4
</label>
</button>
@ -122,7 +122,7 @@ class TriggerWidget extends React.Component<any, any> {
</button>
<label
className="AdjustChannelBlockValue"
style={{color: this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1]}}
style={{color: this.props.settings.colors.channel[this.props.triggerWidget.triggerChannel-1]}}
>
{this.props.triggerWidget.triggerLevel[this.props.triggerWidget.triggerChannel-1].value.toString()}
{this.props.triggerWidget.triggerLevel[this.props.triggerWidget.triggerChannel-1].unit}
@ -178,9 +178,10 @@ class TriggerWidget extends React.Component<any, any> {
}
}
function mapStateToProps(state: { triggerWidget: any; }) {
function mapStateToProps(state: { triggerWidget: any, settings: any }) {
return {
triggerWidget: state.triggerWidget
triggerWidget: state.triggerWidget,
settings: state.settings
};
}

View File

@ -80,7 +80,7 @@ class VerticalWidget extends React.Component<any, any> {
onDoubleClick={() => this.changeChannelStatus(0)}>
<label
className={"Channel1ButtonText"}
style={{color: this.props.verticalWidget.settings[0].status === 1 ? this.props.verticalWidget.channelColorsList[0] : "black"}}>
style={{color: this.props.verticalWidget.settings[0].status === 1 ? this.props.settings.colors.channel[0] : "black"}}>
CH1
</label>
</button>
@ -90,7 +90,7 @@ class VerticalWidget extends React.Component<any, any> {
onDoubleClick={() => this.changeChannelStatus(1)}>
<label
className={"Channel2ButtonText"}
style={{color: this.props.verticalWidget.settings[1].status === 1 ? this.props.verticalWidget.channelColorsList[1] : "black"}}>
style={{color: this.props.verticalWidget.settings[1].status === 1 ? this.props.settings.colors.channel[1] : "black"}}>
CH2
</label>
</button>
@ -100,7 +100,7 @@ class VerticalWidget extends React.Component<any, any> {
onDoubleClick={() => this.changeChannelStatus(2)}>
<label
className={"Channel3ButtonText"}
style={{color: this.props.verticalWidget.settings[2].status === 1 ? this.props.verticalWidget.channelColorsList[2] : "black"}}>
style={{color: this.props.verticalWidget.settings[2].status === 1 ? this.props.settings.colors.channel[2]: "black"}}>
CH3
</label>
</button>
@ -110,7 +110,7 @@ class VerticalWidget extends React.Component<any, any> {
onDoubleClick={() => this.changeChannelStatus(3)}>
<label
className={"Channel4ButtonText"}
style={{color: this.props.verticalWidget.settings[3].status === 1 ? this.props.verticalWidget.channelColorsList[3] : "black"}}>
style={{color: this.props.verticalWidget.settings[3].status === 1 ? this.props.settings.colors.channel[3] : "black"}}>
CH4
</label>
</button>
@ -148,7 +148,7 @@ class VerticalWidget extends React.Component<any, any> {
</button>
<label
className="AdjustValueBlockTimePerDivision"
style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.activeChannel-1]}}
style={{color: this.props.settings.colors.channel[this.props.verticalWidget.activeChannel-1]}}
>
{this.props.verticalWidget.settings[this.props.verticalWidget.activeChannel-1].controlMode === ControlMode.Course
&& this.props.verticalWidget.timePerDivision[this.props.verticalWidget.activeChannel-1].course.value.toString()
@ -218,7 +218,7 @@ class VerticalWidget extends React.Component<any, any> {
</button>
<label
className="AdjustValueBlockVerticalOffset"
style={{color: this.props.verticalWidget.channelColorsList[this.props.verticalWidget.activeChannel-1]}}
style={{color: this.props.settings.colors.channel[this.props.verticalWidget.activeChannel-1]}}
>
{this.props.verticalWidget.verticalOffset[this.props.verticalWidget.activeChannel-1].value}
{this.props.verticalWidget.verticalOffset[this.props.verticalWidget.activeChannel-1].unit}
@ -325,9 +325,10 @@ class VerticalWidget extends React.Component<any, any> {
}
}
function mapStateToProps(state: { verticalWidget: any; }) {
function mapStateToProps(state: { verticalWidget: any, settings: any }) {
return {
verticalWidget: state.verticalWidget
verticalWidget: state.verticalWidget,
settings: state.settings
};
}

View File

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

View File

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

View File

@ -0,0 +1,15 @@
import DefaultColors from '../../configuration/enums/defaultColors';
const SettingsInitialState = {
colors: {
channel: [
DefaultColors.Channel1,
DefaultColors.Channel2,
DefaultColors.Channel3,
DefaultColors.Channel4
],
math: DefaultColors.Math
}
};
export default SettingsInitialState;

View File

@ -1,15 +1,8 @@
import TriggerType from '../../configuration/enums/triggerType';
import DefaultChannelColor from '../../configuration/enums/defaultChannelColor';
import VoltageUnit from '../../configuration/enums/voltageUnit';
const TriggerWidgetInitialState = {
triggerChannel: 1,
channelColorsList: [
DefaultChannelColor.Channel1,
DefaultChannelColor.Channel2,
DefaultChannelColor.Channel3,
DefaultChannelColor.Channel4
],
triggerType: [
TriggerType.RisingEdge,
TriggerType.RisingEdge,

View File

@ -1,4 +1,3 @@
import DefaultChannelColor from '../../configuration/enums/defaultChannelColor';
import MeasurementType from '../../configuration/enums/measurementType';
import VoltageUnit from '../../configuration/enums/voltageUnit';
import ControlMode from '../../configuration/enums/controlMode';
@ -8,12 +7,6 @@ import DefaultValues from '../../configuration/defaultValues';
const VerticalWidgetInitialState = {
activeChannel: 1,
totalChannelsUsed: 4,
channelColorsList: [
DefaultChannelColor.Channel1,
DefaultChannelColor.Channel2,
DefaultChannelColor.Channel3,
DefaultChannelColor.Channel4
],
timePerDivision: [
{
course: {

View File

@ -3,12 +3,14 @@ import horizontalWidgetReducer from './widgets/horizontalWidgetReducer';
import verticalWidgetReducer from './widgets/verticalWidgetReducer';
import measurementsWidgetReducer from './widgets/measurementsWidgetReducer';
import triggerWidgetReducer from './widgets/triggerWidgetReducer';
import settingsReducer from './settingsReducer';
export default combineReducers(
{
horizontalWidget: horizontalWidgetReducer,
verticalWidget: verticalWidgetReducer,
measurementsWidget: measurementsWidgetReducer,
triggerWidget: triggerWidgetReducer
triggerWidget: triggerWidgetReducer,
settings: settingsReducer
}
);

View File

@ -0,0 +1,8 @@
import SettingsInitialState from '../initialStates/settingsInitialState';
export default function(state = SettingsInitialState, action: {type: any, payload: any}) {
switch(action.type) {
default:
return state;
}
}