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

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

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

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;
+`;

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" />

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>

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>