Feat (Logic Analyzer): Auto Recapture and Capture Time slider

cynthi8 · orangecms · commit 5ae2b0385a5d · 2021-04-10T12:58:20.000+02:00
Capture time slider is changed to allow for larger values and more
fine-tuned control. Auto Recapture checkbox added to have the logic
analyzer continously recapture until an event is detected.

The Graph component is recieving the LA data and if a capture has no
event within it and the auto recapture is on, the LA is toggled
back on.

Standarized UI to use μs which is converted to ms for the backend communication.

Fix (Logic Analyzer): Define inputCheck

The CustomDialog dispatch needs an inputCheck function to be defined.
The Logic Analyzer capture time slider will always be an
non-negative float so inputCheck will check for that.
diff --git a/src/screen/LogicAnalyzer/LogicAnalyzer.js b/src/screen/LogicAnalyzer/LogicAnalyzer.js
@@ -13,24 +13,18 @@ const loadBalancer = window.require('electron-load-balancer');
 class LogicAnalyzer extends Component {
   constructor(props) {
     super(props);
-    this.captureTimeList = [0.05, 0.1, 0.25, 0.5, 1, 2];
     this.state = {
-      captureTimeIndex: 0,
       isReading: false,
+      isAutoReading: true,
       numberOfChannels: 1,
       channel1Map: 'ID1',
       channel2Map: 'ID2',
       trigger1Type: 1,
       trigger2Type: 1,
       trigger3Type: 1,
       trigger4Type: 1,
-      timeMeasureChannel1: 'ID1',
-      timeMeasureChannel2: 'ID2',
-      timeMeasuretrigger1Type: 1,
-      timeMeasuretrigger2Type: 1,
-      timeMeasureWrite1: 1,
-      timeMeasureWrite2: 2,
-      timeout: 10,
+      captureTime: 1, // ms
+      maxCaptureTime: 1e3, // ms
     };
   }
 
@@ -49,7 +43,7 @@ class LogicAnalyzer extends Component {
         trigger4Type,
       } = args;
       this.setState({
-        captureTimeIndex: this.captureTimeList.indexOf(captureTime),
+        captureTime,
         numberOfChannels,
         trigger1Type,
         trigger2Type,
@@ -80,7 +74,7 @@ class LogicAnalyzer extends Component {
   sendConfigToDevice = debounce(() => {
     const { isConnected } = this.props;
     const {
-      captureTimeIndex,
+      captureTime,
       numberOfChannels,
       trigger1Type,
       trigger2Type,
@@ -90,7 +84,7 @@ class LogicAnalyzer extends Component {
     isConnected &&
       loadBalancer.sendData(ipcRenderer, 'linker', {
         command: 'SET_CONFIG_LA',
-        captureTime: this.captureTimeList[captureTimeIndex],
+        captureTime: captureTime,
         numberOfChannels,
         trigger1Type,
         trigger2Type,
@@ -112,6 +106,9 @@ class LogicAnalyzer extends Component {
       });
     }
   };
+  toggleAutoRead = () => {
+    this.setState(prevState => ({ isAutoReading: !prevState.isAutoReading }));
+  };
 
   changeNumberOfChannels = event => {
     this.setState(
@@ -139,30 +136,10 @@ class LogicAnalyzer extends Component {
     );
   };
 
-  changeTimeMeasureChannel = channelName => event => {
-    this.setState({
-      [channelName]: event.target.value,
-    });
-  };
-  changeTimeMeasureTriggerType = triggerNumber => event => {
-    this.setState({
-      [triggerNumber]: event.target.value,
-    });
-  };
-  changeTimeMeasureWrite = writeNumber => event => {
-    this.setState({
-      [writeNumber]: event.target.value,
-    });
-  };
-  changeTimeout = (event, value) => {
-    this.setState({
-      timeout: value,
-    });
-  };
-  onChangeCaptureTimeIndex = (event, value) => {
+  onChangeCaptureTime = (event, value) => {
     this.setState(
       () => ({
-        captureTimeIndex: value,
+        captureTime: value / 1e3, // convert μs to ms
       }),
       () => {
         this.sendConfigToDevice();
@@ -172,21 +149,16 @@ class LogicAnalyzer extends Component {
   render() {
     const {
       isReading,
+      isAutoReading,
       numberOfChannels,
       channel1Map,
       channel2Map,
       trigger1Type,
       trigger2Type,
       trigger3Type,
       trigger4Type,
-      timeMeasureChannel1,
-      timeMeasureChannel2,
-      timeMeasuretrigger1Type,
-      timeMeasuretrigger2Type,
-      timeMeasureWrite1,
-      timeMeasureWrite2,
-      timeout,
-      captureTimeIndex,
+      captureTime,
+      maxCaptureTime,
     } = this.state;
     const { isConnected } = this.props;
     return (
@@ -200,38 +172,29 @@ class LogicAnalyzer extends Component {
             trigger2Type={trigger2Type}
             trigger3Type={trigger3Type}
             trigger4Type={trigger4Type}
-            timeMeasureChannel1={timeMeasureChannel1}
-            timeMeasureChannel2={timeMeasureChannel2}
-            timeMeasuretrigger1Type={timeMeasuretrigger1Type}
-            timeMeasuretrigger2Type={timeMeasuretrigger2Type}
-            timeMeasureWrite1={timeMeasureWrite1}
-            timeMeasureWrite2={timeMeasureWrite2}
-            timeout={timeout}
             changeNumberOfChannels={this.changeNumberOfChannels}
             changeChannelMap={this.changeChannelMap}
             changeTriggerType={this.changeTriggerType}
-            changeTimeMeasureChannel={this.changeTimeMeasureChannel}
-            changeTimeMeasureTriggerType={this.changeTimeMeasureTriggerType}
-            changeTimeMeasureWrite={this.changeTimeMeasureWrite}
-            changeTimeout={this.changeTimeout}
-            captureTimeIndex={captureTimeIndex}
-            captureTime={this.captureTimeList[captureTimeIndex]}
-            onChangeCaptureTimeIndex={this.onChangeCaptureTimeIndex}
-            captureTimeListLength={this.captureTimeList.length}
+            onChangeCaptureTime={this.onChangeCaptureTime}
+            captureTime={captureTime}
+            maxCaptureTime={maxCaptureTime}
           />
         }
         actionButtons={
           <ActionButtons
             isConnected={isConnected}
             isReading={isReading}
             toggleRead={this.toggleRead}
+            isAutoReading={isAutoReading}
+            toggleAutoRead={this.toggleAutoRead}
           />
         }
         graph={
           <Graph
             isReading={isReading}
-            numberOfChannels={numberOfChannels}
             toggleRead={this.toggleRead}
+            isAutoReading={isAutoReading}
+            numberOfChannels={numberOfChannels}
             dataPath={this.props.dataPath}
           />
         }
diff --git a/src/screen/LogicAnalyzer/components/ActionButtons.js b/src/screen/LogicAnalyzer/components/ActionButtons.js
@@ -1,28 +1,49 @@
 import React from 'react';
-import { Button } from '@material-ui/core';
+import { Checkbox, FormControlLabel, Button } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
-import { ButtonWrapper } from './ActionButtons.styles';
+import {
+  ActionButtonsWrapper,
+  ButtonWrapper,
+  CheckboxWrapper,
+} from './ActionButtons.styles';
 
 const styles = () => ({
   buttonMargin: {
     margin: '0px 0px 0px 16px',
   },
 });
 
-const ActionButtons = ({ isConnected, isReading, toggleRead, classes }) => {
+const ActionButtons = ({
+  isConnected,
+  isReading,
+  toggleRead,
+  isAutoReading,
+  toggleAutoRead,
+  classes,
+}) => {
   return (
-    <ButtonWrapper>
-      <Button
-        fullWidth={true}
-        variant="contained"
-        size="large"
-        disabled={!isConnected}
-        onClick={toggleRead}
-        style={{ color: '#d32f2f' }}
-      >
-        {isReading ? <b>ANALYZING</b> : <b>ANALYZE</b>}
-      </Button>
-    </ButtonWrapper>
+    <ActionButtonsWrapper>
+      <ButtonWrapper>
+        <Button
+          fullWidth={true}
+          variant="contained"
+          size="large"
+          disabled={!isConnected}
+          onClick={toggleRead}
+          style={{ color: '#d32f2f' }}
+        >
+          {isReading ? <b>ANALYZING</b> : <b>ANALYZE</b>}
+        </Button>
+      </ButtonWrapper>
+      <CheckboxWrapper>
+        <FormControlLabel
+          control={
+            <Checkbox checked={isAutoReading} onChange={toggleAutoRead} />
+          }
+          label="Auto Recapture"
+        />
+      </CheckboxWrapper>
+    </ActionButtonsWrapper>
   );
 };
 
diff --git a/src/screen/LogicAnalyzer/components/ActionButtons.styles.js b/src/screen/LogicAnalyzer/components/ActionButtons.styles.js
@@ -1,9 +1,21 @@
 import styled from 'styled-components';
+import { Card } from '@material-ui/core';
+
+export const ActionButtonsWrapper = styled(Card)`
+  width: calc(100% - 16px);
+  margin: 16px;
+`;
 
 export const ButtonWrapper = styled.div`
   display: flex;
-  margin: 16px;
+  margin: 16px 16px 0px 16px;
   width: calc(100% - 32px);
   justify-content: center;
   align-items: center;
 `;
+
+export const CheckboxWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/screen/LogicAnalyzer/components/Graph.js b/src/screen/LogicAnalyzer/components/Graph.js
@@ -51,12 +51,18 @@ class Graph extends Component {
 
   componentDidMount() {
     ipcRenderer.on('LA_DATA', (event, args) => {
-      const { isReading, toggleRead } = this.props;
+      const { isReading, toggleRead, isAutoReading } = this.props;
       if (isReading) {
         this.setState({
           ...args.data,
         });
         toggleRead();
+        const reducer = (accumulator, currentArray) =>
+          accumulator && currentArray.length == 0;
+        const noEventsDetected = Object.values(args.data).reduce(reducer, true);
+        if (isAutoReading && noEventsDetected) {
+          toggleRead();
+        }
       }
     });
 
@@ -112,7 +118,7 @@ class Graph extends Component {
               tickCount={20}
               interval="preserveStart"
             >
-              <Label value="mSec" position="bottom" />
+              <Label value="μs" position="bottom" />
             </XAxis>
             <YAxis yAxisId="left" domain={['dataMin - 2', 'dataMax + 2']} />
             <YAxis dataKey="voltage" yAxisId="right" orientation="right" />
diff --git a/src/screen/LogicAnalyzer/components/Settings.js b/src/screen/LogicAnalyzer/components/Settings.js
@@ -16,24 +16,12 @@ const Settings = ({
   trigger2Type,
   trigger3Type,
   trigger4Type,
-  timeMeasureChannel1,
-  timeMeasureChannel2,
-  timeMeasuretrigger1Type,
-  timeMeasuretrigger2Type,
-  timeMeasureWrite1,
-  timeMeasureWrite2,
-  timeout,
   changeNumberOfChannels,
   changeChannelMap,
   changeTriggerType,
-  changeTimeMeasureChannel,
-  changeTimeMeasureTriggerType,
-  changeTimeMeasureWrite,
-  changeTimeout,
-  captureTimeListLength,
-  captureTimeIndex,
+  onChangeCaptureTime,
   captureTime,
-  onChangeCaptureTimeIndex,
+  maxCaptureTime,
 }) => (
   <SettingsContainer>
     <FixedWrapper>
@@ -56,24 +44,10 @@ const Settings = ({
           changeTriggerType={changeTriggerType}
         />
         <TimeParameters
-          captureTimeListLength={captureTimeListLength}
-          captureTimeIndex={captureTimeIndex}
+          onChangeCaptureTime={onChangeCaptureTime}
           captureTime={captureTime}
-          onChangeCaptureTimeIndex={onChangeCaptureTimeIndex}
+          maxCaptureTime={maxCaptureTime}
         />
-        {/* <AnalysisParameters
-          timeMeasureChannel1={timeMeasureChannel1}
-          timeMeasureChannel2={timeMeasureChannel2}
-          timeMeasuretrigger1Type={timeMeasuretrigger1Type}
-          timeMeasuretrigger2Type={timeMeasuretrigger2Type}
-          timeMeasureWrite1={timeMeasureWrite1}
-          timeMeasureWrite2={timeMeasureWrite2}
-          timeout={timeout}
-          changeTimeMeasureChannel={changeTimeMeasureChannel}
-          changeTimeMeasureTriggerType={changeTimeMeasureTriggerType}
-          changeTimeMeasureWrite={changeTimeMeasureWrite}
-          changeTimeout={changeTimeout}
-        /> */}
       </Scrollbars>
     </ScrollWrapper>
   </SettingsContainer>
diff --git a/src/screen/LogicAnalyzer/components/TimeParameters.js b/src/screen/LogicAnalyzer/components/TimeParameters.js
@@ -3,14 +3,14 @@ import { Typography, Divider } from '@material-ui/core';
 import CustomSliderInput from '../../../components/CustomSliderInput';
 import { SettingsWrapper, OptionsRowWrapper } from './Settings.styles';
 
+const inputCheck = value => {
+  let regex = /(^([0-9]+([.][0-9]*)?|[.][0-9]+)$|^$)/; // non-negative float or blank
+  return regex.test(value);
+};
+
 class TimeParameters extends Component {
   render() {
-    const {
-      captureTimeListLength,
-      captureTimeIndex,
-      captureTime,
-      onChangeCaptureTimeIndex,
-    } = this.props;
+    const { onChangeCaptureTime, captureTime, maxCaptureTime } = this.props;
     return (
       <SettingsWrapper>
         <Typography style={{ padding: '0.6rem' }} component="h6" variant="h6">
@@ -20,15 +20,15 @@ class TimeParameters extends Component {
         <OptionsRowWrapper>
           <CustomSliderInput
             title="captureTime"
-            unit="ms"
-            onChangeSlider={onChangeCaptureTimeIndex}
-            value={captureTimeIndex}
-            min={0}
-            max={captureTimeListLength - 1}
-            step={1}
+            unit="μs"
+            onChangeSlider={onChangeCaptureTime}
+            value={captureTime * 1e3} // convert ms to μs
+            min={10}
+            max={maxCaptureTime * 1e3} // convert ms to μs
+            inputCheck={inputCheck}
+            step={10}
             minTitleWidth="60px"
             minUnitWidth="66px"
-            display={captureTime}
           />
         </OptionsRowWrapper>
       </SettingsWrapper>
