[update] add show datastream buffer in dev mode

src/components/analysis/replay/toolbox/CanvasChartReplayCalculation.vue

@@ -46,7 +46,7 @@ export default {
   },
   computed: {
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'chartData',

src/components/project/task/config/ProjectTaskConfigParameter.vue

@@ -9,7 +9,7 @@
       <device-parameter-recording
         :ref="'device_parameter_ref'"
         :parameter="parameter"
-        :library="'EliteEDC1.5'"
+        :library="'Elite_EDC_1.5'"
         @setParameter="setParameter"
         @setParameterWithDebounce="setParameterWithDebounce"
       />

src/components/task/content/TaskContent.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="task-content">
-
     <va-modal
       v-model="showShutdownModal"
       size="small"
@@ -29,7 +28,7 @@
           <div class="flex sm12 xl12 md12 xs12">
             <task-devices-new :ref="'devices_ref'" @add="addDevice($event)" @remove="removeDevice($event)" @refreshSetting="refreshChartSetting($event)" class="pa-0" />
           </div>
-          <div class="flex sm12 xl12 md12 xs12" v-if="developer_mode">
+          <div class="flex sm12 xl12 md12 xs12" v-if="developerMode">
             <task-formula :ref="'formula_ref'" @add="addFormula($event)" @remove="removeFormula($event)" class="pa-0" />
           </div>
         </div>
@@ -129,7 +128,7 @@ export default {
       'deviceListNew',
     ]),
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
   },
   data () {
@@ -591,6 +590,9 @@ export default {
         path: '/',
       })
     },
+    switchMode: function () {
+      this.developerMode = !this.developerMode
+    },
 
     ...mapActions('taskContent', [
       taskTypes.chart.initCustomizedFromCache,
@@ -609,7 +611,7 @@ export default {
   async mounted () {
     const devMode = this.$route.params.mode
     if (devMode === 'dev') {
-      this.developer_mode = true
+      this.developerMode = true
     }
 
     await taskInfo.updateTaskInfo(this.$route.params.taskID)
@@ -617,6 +619,18 @@ export default {
     await this.pageInit()
 
     this.dataRefreshTimer = setInterval(this.refreshData, 1000)
+
+    var switchModeHander = function (switchMode, e) {
+      if (e.shiftKey && e.metaKey && e.keyCode === 83) {
+        switchMode()
+      }
+      if (e.shiftKey && e.ctrlKey && e.keyCode === 83) {
+        switchMode()
+      }
+    }
+
+    // eslint-disable-next-line no-undef
+    window.addEventListener('keydown', switchModeHander.bind(_, this.switchMode))
   },
   destroyed () {
     taskInfo.destroyed(this.deviceList)

src/components/task/content/chart/CanvasChart.vue

@@ -37,6 +37,13 @@
           <canvas-chart-real-time-display
             :chartID="chartID" ref="CanvasChartRealTimeDisplay"
           />
+          <div class="flex" v-if="developerMode">
+            <div v-for="(data, device) in dataStreamBuffer.getByChartID(chartID)" :key="device">
+              <div v-for="(i, channel) in data" :key="channel">
+                {{ device }} {{ channel }} {{ i.length }} first data: {{ (i[0] !== undefined) && i[0][0] }} last data: {{ (i[i.length-1] !== undefined) && i[i.length-1][i[i.length-1].length-1]}}
+              </div>
+            </div>
+          </div>
           <!-- chart -->
           <chart :key="taskContentChartKey" :ref="'chart_ref'" :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" :option="data" @dataZoom="updateZoom" :auto-resize="true"></chart>
         </div>
@@ -46,15 +53,15 @@
       </div>
       <div v-else :style="'width: '+ cardwidth + '; height: ' + cardheight + ';'" >
       </div>
-      <div v-if="this.$refs.chart_ref != null">
+      <!-- <div v-if="this.$refs.chart_ref != null">
         <va-button small class="mb-3" @click="selectAllSeries">
           SELECT ALL
         </va-button>
         <va-button small class="mb-3" @click="inverseSelectAllSeries">
           INVERSE SELECT
         </va-button>
-      </div>
-      <div class="row flex align--left ma-0 pa-0">
+      </div> -->
+      <div class="row flex align--left ma-0 pa-0 mt-2">
         <va-input
           v-if="chartData[chartID].chartXMode === 'time'"
           class="mx-1"
@@ -103,7 +110,7 @@
           </p>
         </va-input>
       </div>
-      <div class="row flex ma-0 pa-0" v-if="developer_mode === true">
+      <div class="row flex ma-0 pa-0" v-if="developerMode === true">
         <canvas-chart-filter :chartID="chartID" :filterIndex="0" />
         <canvas-chart-filter :chartID="chartID" :filterIndex="1" />
         <canvas-chart-filter :chartID="chartID" :filterIndex="2" />
@@ -123,6 +130,7 @@ import CanvasChartRealTimeDisplay from '@/components/task/content/chart/CanvasCh
 import { mapActions } from 'vuex'
 import taskTypes from '@/store/modules/task/content/types'
 import CanvasChartRealTimeCalculation from './CanvasChartRealTimeCalculation.vue'
+import { dataStreamBuffer } from '@/data/task/DataStreamBuffer'
 
 export default {
   name: 'CanvasChart',
@@ -156,7 +164,7 @@ export default {
   },
   computed: {
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'chartData',
@@ -183,6 +191,7 @@ export default {
       dataZoomEnd: 100,
       captured: false,
       calClicked: false,
+      dataStreamBuffer: dataStreamBuffer,
     }
   },
   methods: {
@@ -213,7 +222,7 @@ export default {
         this.timeIntervalInput = 'auto'
         this.chartData[this.chartID].xAxis.forEach(x => {
           if (x.type === 'time') {
-            x.interval = 500 * 1000
+            x.interval = null
           }
         })
       }

src/components/task/content/chart/CanvasChartRealTimeCalculation.vue

@@ -64,7 +64,7 @@ export default {
   },
   computed: {
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'chartData',

src/components/task/content/chart/CanvasChartTable.js

@@ -13,7 +13,7 @@ const chartTable = {
           min: 60 * 1e6,
           hour: 60 * 60 * 1e6,
         },
-        defaultUnit: 'ms',
+        defaultUnit: 's',
         downloadUnit: 'ms',
       },
     },
@@ -43,7 +43,7 @@ const chartTable = {
           min: 60 * 1e6,
           hour: 60 * 60 * 1e6,
         },
-        defaultUnit: 'ms',
+        defaultUnit: 's',
         downloadUnit: 'ms',
       },
     },
@@ -86,7 +86,7 @@ const chartTable = {
           min: 60 * 1e6,
           hour: 60 * 60 * 1e6,
         },
-        defaultUnit: 'ms',
+        defaultUnit: 's',
         downloadUnit: 'ms',
       },
     },

src/components/task/content/controller/TaskDeviceListNew.vue

@@ -36,6 +36,7 @@
                 <va-button @click.stop="start(device)" v-if="device.library_name.includes('Elite') && device.status !== 1" class="px-2 py-0 mr-0" color="success" small>START</va-button>
                 <va-button @click.stop="stop(device)" v-if="device.library_name.includes('Elite') && device.status === 1" class="px-2 py-0 mr-0" color="danger" small>STOP</va-button>
                 <va-button id="detectButton" @click.stop="detect(device)" v-if="device.library_name.includes('Elite')" color="primary" class="px-2 py-0 mr-0" small>DETECT</va-button>
+                <va-button  @click.stop="show($event, device)" v-if="developerMode" color="warning" class="px-2 py-0 mr-0" small>Show</va-button>
               </va-item-label>
             </va-item-section>
           </va-item>
@@ -65,6 +66,7 @@ import types from '@/store/modules/task/content/types'
 import { taskInfo } from '../../../../data/task/TaskInfo'
 import api from '@/data/api'
 // import CanvasChart from '../chart/CanvasChart'
+import { mapFields } from 'vuex-map-fields'
 
 export default {
   name: 'TaskDeviceList',
@@ -88,6 +90,9 @@ export default {
     }
   },
   computed: {
+    ...mapFields('', [
+      'developerMode',
+    ]),
   },
   methods: {
     mqttPub: function (topic, mes) {
@@ -151,6 +156,12 @@ export default {
       this.$emit('detect', device)
       this.pageToast('The device ' + device.name + ' has been detect.')
     },
+    show: function (event, device) {
+      this.mqttPub(taskInfo.getTaskInfo().controllerID + '_user', JSON.stringify({
+        header: 'show_device_data/0',
+        device: device.memory_board,
+      }))
+    },
     recoverDetectButton () {
       document.getElementById('detectButton').className += ' no-dark-style-va-button'
     },

src/components/task/content/parameter/DeviceParameterRecording.vue

@@ -197,7 +197,7 @@ export default {
       }
     },
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'deviceListNew',
@@ -262,7 +262,7 @@ export default {
   },
   mounted () {
     // dev mode
-    // this.developer_mode === true
+    // this.developerMode === true
     //   ? this.workingModeOptions = this.workingModeDevOptions
     //   : this.workingModeOptions = this.workingModeNoDevOptions
     this.workingModeOptions = this.parameterTable.MODE_OPTIONS

src/components/task/content/parameter/EliteParameterRecordingElitezm15.vue

@@ -168,7 +168,7 @@ export default {
       }
     },
     ...mapFields('', [
-      'developer_mode',
+      'developerMode',
     ]),
     ...mapFields('taskContent', [
       'deviceListNew',
@@ -233,7 +233,7 @@ export default {
   },
   mounted () {
     // dev mode
-    // this.developer_mode === true
+    // this.developerMode === true
     //   ? this.workingModeOptions = this.workingModeDevOptions
     //   : this.workingModeOptions = this.workingModeNoDevOptions
     this.workingModeOptions = this.parameterTable.MODE_OPTIONS

src/data/config-table/EliteEIS/Chronoamperometry.js

@@ -0,0 +1,97 @@
+export default {
+  name: 'Chronoamperometry',
+  parameter: ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'TIME_DURATION'], // 這個mode用到的參數
+  showParameter: ['ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'CTRL_HIGH_Z_15', 'VOLT_VSCAN', 'SAMPLE_RATE', 'TIME_DURATION'], // 有要秀給user看的參數
+  headerParameter: () => ['VOLT_VSCAN', 'SAMPLE_RATE', 'ADC_LEVEL_I_15', 'ADC_LEVEL_V_IN_15', 'TIME_DURATION'], // 有要秀給user看的參數
+  valScales: {
+    linear: {
+      func: (val) => {
+        return val
+      },
+    },
+    log: {
+      func: (val) => {
+        return Math.log10(Math.abs(val))
+      },
+    },
+  },
+  channels: {
+    time: {
+      name: 'Time',
+      unit: {
+        us: 1,
+        ms: 1e3,
+        s: 1e6,
+        minute: 60 * 1e6,
+        hour: 60 * 60 * 1e6,
+      },
+      defaultUnit: 'ms',
+      downloadUnit: 'ms',
+    },
+    0: {
+      name: 'I_in',
+      unit: {
+        nA: 1,
+        uA: 1e3,
+        mA: 1e6,
+      },
+      defaultUnit: 'mA',
+      downloadUnit: 'mA',
+    },
+    1: {
+      name: 'Potential',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+    2: {
+      name: 'V_out',
+      unit: {
+        uV: 1,
+        mV: 1e3,
+        V: 1e6,
+      },
+      defaultUnit: 'mV',
+      downloadUnit: 'mV',
+    },
+  },
+  charts: {
+    default: [
+      {
+        name: 'Chronoamperometric',
+        description: '',
+        subplot: [
+          {
+            x1: {
+              type: 'time',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            y1: {
+              type: 'value',
+              valScale: 'linear',
+              min: 'dataMin',
+              max: 'dataMax',
+            },
+            data: [
+              {
+                legend: 'chrono',
+                x1: {
+                  channel: 'time',
+                },
+                y1: {
+                  channel: 0,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

src/data/config-table/EliteEIS/index.js

@@ -1,6 +1,7 @@
 import PotentiostaticEIS from './PotentiostaticEIS'
 import CyclicVoltammetry from './CyclicVoltammetry'
 import DevMode from './DevMode'
+import Chronoamperometry from './Chronoamperometry'
 
 const EliteEIS = {
   ADC_VALUE_I: {
@@ -361,13 +362,18 @@ const EliteEIS = {
     },
     {
       id: 2,
+      description: 'Chronoamperometry',
+    },
+    {
+      id: 3,
       description: 'Dev Tools',
     },
   ],
   MODE: {
     0: PotentiostaticEIS,
     1: CyclicVoltammetry,
-    2: DevMode,
+    2: Chronoamperometry,
+    3: DevMode,
   },
 }
 

src/factories/chart/chartFactory.js

@@ -18,8 +18,9 @@ function newChart (chartID, numOfCharts) {
     legend: {
       type: 'scroll',
       data: [],
-      x: 'center',
-      y: '92%',
+      // x: 'center',
+      // y: '-10%',
+      bottom: '0%',
       textStyle: {
         color: '#34495e',
       },

src/factories/chart/dataZoomFactory.js

@@ -5,7 +5,8 @@ function newDataZoom () {
     // top: '0%',
     height: '10px',
     // realtime: false,
-    bottom: '8%',
+    bottom: '6%',
+    brushSelect: false,
     zoomLock: false,
     handleStyle: {
       shadowColor: 'rgba(0, 0, 0, 0)',

src/factories/chart/seriesFactory.js

@@ -55,14 +55,11 @@ function newSeries (type, legendName, xAxisIndex, yAxisIndex, xAxisSource, yAxis
     xAxisSource: xAxisSource,
     yAxisSource: yAxisSource,
     animation: false,
-    hoverAnimation: false,
     dataXMax: null,
     dataXMin: null,
     dataYMax: null,
     dataYMin: null,
     itemStyle: {
-      normal: {
-      },
     },
     lineStyle: {
       width: 1.5,

src/factories/stateFactory.js

@@ -20,7 +20,7 @@ function newState () {
     },
     isLoading: true,
     licenseCheck: true,
-    developer_mode: false,
+    developerMode: false,
     controller: null,
   }
 }

src/store/modules/task/content/actions/chartAct.js

@@ -241,7 +241,7 @@ const chartActs = {
       state.chartData[chartID].xAxis[_xAxisIndex].axisLabel.formatter = function (val) {
         return getTimeFormatter(val)
       }
-      state.chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
+      // state.chartData[chartID].xAxis[_xAxisIndex].interval = 500 * 1000
     } else if (sourceList[0].name === 'Elite') {
       // state.chartData[chartID].series[state.chartData[chartID].series.length - 1].sampling = false
       switch (sourceList[0].channel) {
@@ -1157,7 +1157,7 @@ function makeXAxis (gridIndex, type, channel) {
       showMaxLabel: false,
       color: '#34495e',
       // rotate: 45,
-      margin: 12,
+      // margin: 12,
     },
     splitLine: { show: true, lineStyle: { color: '#aaa' } },
     // minorSplitLine: {
@@ -1212,8 +1212,8 @@ function makeYAxis (gridIndex, type, channel) {
 
 // generate grid
 function makeGrid (index, length) {
-  const _height = (85 / length) + '%'
-  const _top = index * (85 / length) + 1 + '%'
+  const _height = (80 / length) + '%'
+  const _top = index * (80 / length) + 5 + '%'
   return {
     index: index,
     top: _top,