Features/trigger widget #101

Merged
A-Nilfgaardian merged 4 commits from features/trigger-widget into master 2021-02-09 23:58:27 +00:00
10 changed files with 299 additions and 8 deletions

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import './../../../css/bottombar/subscomponents/channel.css'; import './../../../css/bottombar/subcomponents/channel.css';
class Channel extends React.Component<any, any> { class Channel extends React.Component<any, any> {
render() { render() {

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import './../../../css/bottombar/subscomponents/timeperdivision.css'; import './../../../css/bottombar/subcomponents/timeperdivision.css';
class TimePerDivision extends React.Component<any, any> { class TimePerDivision extends React.Component<any, any> {
render() { render() {

View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import './../../../css/bottombar/subscomponents/trigger.css'; import './../../../css/bottombar/subcomponents/trigger.css';
class Trigger extends React.Component<any, any> { class Trigger extends React.Component<any, any> {
render() { render() {
return ( return (
<div className="TriggerStatus"> <div className="TriggerStatus">
Trig:CH{this.props.triggerWidget.triggerChannel}, Mode:{this.props.triggerWidget.triggerType} Trig:CH{this.props.triggerWidget.triggerChannel}, Mode: {this.props.triggerWidget.triggerType[this.props.triggerWidget.triggerChannel-1]}
</div> </div>
) )
} }

View File

@ -6,6 +6,7 @@ import './../../css/sidebar/sidebar.css';
import HorizontalWidget from './widgets/horizontalWidget'; import HorizontalWidget from './widgets/horizontalWidget';
import VerticalWidget from './widgets/verticalWidget'; import VerticalWidget from './widgets/verticalWidget';
import MeasurementsWidget from './widgets/measurementsWidget'; import MeasurementsWidget from './widgets/measurementsWidget';
import TriggerWidget from './widgets/triggerWidget';
class SideBar extends React.Component { class SideBar extends React.Component {
@ -18,6 +19,7 @@ class SideBar extends React.Component {
<HorizontalWidget /> <HorizontalWidget />
<VerticalWidget /> <VerticalWidget />
<MeasurementsWidget /> <MeasurementsWidget />
<TriggerWidget />
</div> </div>
) )
} }

View File

@ -0,0 +1,151 @@
import React from 'react';
import { connect } from 'react-redux';
import './../../../css/sidebar/widgets/triggerWidget.css';
import VoltageUnit from '../../../configuration/enums/voltageUnit';
class TriggerWidget extends React.Component<any, any> {
// Trigger Channel
increaseChannel = () => {
this.props.dispatch({type: 'trigger/increaseChannel'});
}
decreaseChannel = () => {
this.props.dispatch({type: 'trigger/decreaseChannel'});
}
// Trigger Type
changeTriggerType = () => {
this.props.dispatch({type: 'trigger/changeTriggerType'});
}
// Trigger Level
increaseTriggerLevel = () => {
this.props.dispatch({type: 'trigger/increaseTriggerLevelValue'});
}
decreaseTriggerLevel = () => {
this.props.dispatch({type: 'trigger/decreaseTriggerLevelValue'});
}
// Trigger Level Unit
changeTriggerLevelUnit = (voltageUnit: VoltageUnit) => {
this.props.dispatch({type: 'trigger/changeTriggerLevelUnit', payload: voltageUnit})
}
render() {
return (
<div className="TriggerWidget">
<div className="WidgetTitle">
Trigger
</div>
<div className="TriggerWidgetAdjustChannelBlock">
<button
className="MinusButton"
onClick={() => this.decreaseChannel()}>
-
</button>
<label
className="AdjustChannelBlockValue"
style={{color: this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1]}}
>
CH{this.props.triggerWidget.triggerChannel.toString()}
</label>
<button
className="PlusButton"
onClick={() => this.increaseChannel()}>
+
</button>
</div>
<div className="TriggerWidgetAdjustTriggerType">
<button
className="MinusButton"
onClick={() => this.changeTriggerType()}>
-
</button>
<label
className="AdjustChannelBlockValue"
style={{color: this.props.triggerWidget.channelColorsList[this.props.triggerWidget.triggerChannel-1]}}
>
{this.props.triggerWidget.triggerType[this.props.triggerWidget.triggerChannel-1].toString()}
</label>
<button
className="PlusButton"
onClick={() => this.changeTriggerType()}>
+
</button>
</div>
<div className="TriggerWidgetAdjustTriggerLevelValue">
<button
className="MinusButton"
onClick={() => this.decreaseTriggerLevel()}>
-
</button>
<label
className="AdjustChannelBlockValue"
style={{color: this.props.triggerWidget.channelColorsList[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}
</label>
<button
className="PlusButton"
onClick={() => this.increaseTriggerLevel()}>
+
</button>
</div>
<div className="TriggerWidgetAdjustTriggerLevelUnit">
<button
className="NanoVoltButton"
onClick={() => this.changeTriggerLevelUnit(VoltageUnit.NanoVolt)}>
<label
className={"NanoVoltButtonText"}
style={{fontWeight: this.props.triggerWidget.triggerLevel[this.props.triggerWidget.triggerChannel-1].unit == VoltageUnit.NanoVolt ? "bold" : "normal"}}>
{VoltageUnit.NanoVolt}
</label>
</button>
<button
className="MicroVoltButton"
onClick={() => this.changeTriggerLevelUnit(VoltageUnit.MicroVolt)}>
<label
className={"MicroVoltButtonText"}
style={{fontWeight: this.props.triggerWidget.triggerLevel[this.props.triggerWidget.triggerChannel-1].unit == VoltageUnit.MicroVolt ? "bold" : "normal"}}>
{VoltageUnit.MicroVolt}
</label>
</button>
<button
className="MilliVoltButton"
onClick={() => this.changeTriggerLevelUnit(VoltageUnit.MilliVolt)}>
<label
className={"MilliVoltButtonText"}
style={{fontWeight: this.props.triggerWidget.triggerLevel[this.props.triggerWidget.triggerChannel-1].unit == VoltageUnit.MilliVolt ? "bold" : "normal"}}>
{VoltageUnit.MilliVolt}
</label>
</button>
<button
className="VoltButton"
onClick={() => this.changeTriggerLevelUnit(VoltageUnit.Volt)}>
<label
className={"VoltButtonText"}
style={{fontWeight: this.props.triggerWidget.triggerLevel[this.props.triggerWidget.triggerChannel-1].unit == VoltageUnit.Volt ? "bold" : "normal"}}>
{VoltageUnit.Volt}
</label>
</button>
</div>
</div>
)
}
}
function mapStateToProps(state: { triggerWidget: any; }) {
return {
triggerWidget: state.triggerWidget
};
}
export default connect(mapStateToProps)(TriggerWidget);

View File

@ -0,0 +1,67 @@
.TriggerWidget {
text-align: center;
display: flex;
flex-direction: column;
user-select: none;
}
.WidgetTitle {
background-color: #4B4B4B;
color: black;
margin: 10px;
}
.AdjustChannelBlockValue {
padding-left: 2vw;
padding-right: 2vw;
}
.TriggerWidgetAdjustTriggerType {
margin-top: 1vh;
}
.TriggerWidgetAdjustTriggerLevelValue {
margin-top: 1vh;
}
.TriggerWidgetAdjustTriggerLevelUnit {
margin-top: 1vh;
position: relative;
}
.NanoVoltButton {
margin-right: 1vw;
}
.NanoVoltButtonText {
user-select: none;
}
.MicroVoltButton {
margin-right: 1vw;
margin-left: 1vw;
}
.MicroVoltButtonText {
user-select: none;
}
.MilliVoltButton {
margin-right: 1vw;
margin-left: 1vw;
}
.MilliVoltButtonText {
user-select: none;
}
.VoltButton {
margin-right: 1vw;
margin-left: 1vw;
}
.VoltButtonText {
user-select: none;
}

View File

@ -1,15 +1,86 @@
import TriggerType from '../../configuration/enums/triggerType'; import TriggerType from '../../configuration/enums/triggerType';
import DefaultChannelColor from '../../configuration/enums/defaultChannelColor';
import VoltageUnit from '../../configuration/enums/voltageUnit';
const initialState = { const initialState = {
triggerChannel: 1, triggerChannel: 1,
triggerType: TriggerType.RisingEdge, channelColorsList: [
triggerLevel: 0 DefaultChannelColor.Channel1,
DefaultChannelColor.Channel2,
DefaultChannelColor.Channel3,
DefaultChannelColor.Channel4
],
triggerType: [
TriggerType.RisingEdge,
TriggerType.RisingEdge,
TriggerType.RisingEdge,
TriggerType.RisingEdge
],
triggerLevel: [
{value: 0.0, unit: VoltageUnit.MilliVolt},
{value: 0.0, unit: VoltageUnit.MilliVolt},
{value: 0.0, unit: VoltageUnit.MilliVolt},
{value: 0.0, unit: VoltageUnit.MilliVolt}
]
}; };
export default function(state = initialState, action: {type: any, payload: any}) { export default function(state = initialState, action: {type: any, payload: any}) {
var channelIndex = state.triggerChannel - 1;
var tmp;
switch(action.type) { switch(action.type) {
case "trigger/test": case "trigger/increaseChannel":
return { ...state }; if (state.triggerChannel >= 4) {
return { ...state }
}
return {
...state,
triggerChannel: state.triggerChannel + 1
};
case "trigger/decreaseChannel":
if (state.triggerChannel == 1) {
return { ...state }
}
return {
...state,
triggerChannel: state.triggerChannel - 1
};
case "trigger/changeTriggerType":
tmp = state.triggerType;
if (state.triggerType[channelIndex] == TriggerType.RisingEdge) {
tmp[channelIndex] = TriggerType.FallingEdge;
return {
...state,
triggerType: tmp
}
}
tmp[channelIndex] = TriggerType.RisingEdge;
return {
...state,
triggerType: tmp
}
case "trigger/increaseTriggerLevelValue":
tmp = state.triggerLevel;
tmp[channelIndex].value = Number((state.triggerLevel[channelIndex].value + 0.1).toFixed(1));
return {
...state,
triggerLevel: tmp
};
case "trigger/decreaseTriggerLevelValue":
tmp = state.triggerLevel;
tmp[channelIndex].value = Number((state.triggerLevel[channelIndex].value - 0.1).toFixed(1));
return {
...state,
triggerLevel: tmp
};
case "trigger/changeTriggerLevelUnit":
tmp = state.triggerLevel;
tmp[channelIndex].unit = action.payload;
return {
...state,
triggerLevel: tmp
}
default: default:
return state; return state;
} }