Features/trigger widget #101
@ -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() {
|
||||||
|
@ -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() {
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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);
|
67
Software/waveview/src/css/sidebar/widgets/triggerWidget.css
Normal file
67
Software/waveview/src/css/sidebar/widgets/triggerWidget.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user