({
51 | key: key + '-receive-selector',
52 | get: () => {
53 | throw new Error('cant get here')
54 | },
55 | set: ({ set }, newValue) => {
56 | if (newValue instanceof DefaultValue) throw new Error('no reset allowed')
57 | set(remoteState, newValue)
58 | }
59 | })
60 |
61 | return { send, receive }
62 | }
63 |
--------------------------------------------------------------------------------
/src/communication/parseSerial.ts:
--------------------------------------------------------------------------------
1 | import { voltageRanges } from './bindings'
2 |
3 | type Data = {
4 | data: number[]
5 | i: number
6 | }
7 |
8 | function pull(data: Data, count: number) {
9 | const result = data.data.slice(data.i, data.i + count)
10 | data.i += count
11 | return Array.from(result)
12 | }
13 |
14 | function get_uint8_t(data: Data) {
15 | const res = data.data[data.i]
16 | data.i++
17 | return res
18 | }
19 | const get_bool = get_uint8_t
20 |
21 | function get_uint16_t(data: Data) {
22 | const l = data.data[data.i]
23 | data.i++
24 | const h = data.data[data.i]
25 | data.i++
26 | return (h << 8) | l
27 | }
28 | function get_float32_t(data: Data) {
29 | // IEEE 754
30 | // https://gist.github.com/Jozo132/2c0fae763f5dc6635a6714bb741d152f#file-float32encoding-js-L32-L43
31 | const arr = data.data.slice(data.i, data.i + 4)
32 | data.i += 4
33 |
34 | const int = arr.reverse().reduce((acc, curr) => (acc << 8) + curr)
35 | if (int === 0) return 0
36 | const sign = int >>> 31 ? -1 : 1
37 | let exp = ((int >>> 23) & 0xff) - 127
38 | const mantissa = ((int & 0x7fffff) + 0x800000).toString(2)
39 | let float32 = 0
40 | for (let i = 0; i < mantissa.length; i += 1) {
41 | float32 += parseInt(mantissa[i]) ? Math.pow(2, exp) : 0
42 | exp--
43 | }
44 | return float32 * sign
45 | }
46 | // function get_int16_t(buffer: number[]) {
47 | // const raw = get_uint16_t(buffer)
48 | // if (raw & (1 << 15)) {
49 | // // negative
50 | // return -(~raw + (1 << 16) + 1)
51 | // }
52 | // return raw
53 | // }
54 | export default function parseSerial(data: number[]) {
55 | const myData: Data = {
56 | data,
57 | i: 0
58 | }
59 | // input
60 | const triggerVoltage = get_uint8_t(myData)
61 | const triggerDir = get_uint8_t(myData)
62 | const secPerSample = get_float32_t(myData)
63 | const triggerPos = get_uint16_t(myData)
64 | const amplifier = get_uint8_t(myData)
65 | const triggerMode = get_uint8_t(myData)
66 | const triggerChannel = get_uint8_t(myData)
67 | const isChannelOn = get_uint8_t(myData)
68 | // input output
69 | // output
70 | const needData = get_bool(myData)
71 | const forceUIUpdate = get_bool(myData)
72 | const didTrigger = get_bool(myData)
73 | const freeMemory = get_uint16_t(myData)
74 | const sentSamples = get_uint16_t(myData)
75 | const samplesPerBuffer = get_uint16_t(myData)
76 | const analogs = [
77 | isChannelOn & 0b1 ? pull(myData, sentSamples) : [],
78 | isChannelOn & 0b10 ? pull(myData, sentSamples) : []
79 | ]
80 | const digitalBytes = isChannelOn & 0b11111100 ? pull(myData, sentSamples) : []
81 | const digitals = [0b000100, 0b001000, 0b010000, 0b100000].map((mask) => {
82 | if (isChannelOn & mask) {
83 | return digitalBytes.map((byte) => byte & mask && 1)
84 | }
85 | return []
86 | })
87 | const vMax = voltageRanges[amplifier]
88 | const buffers = [
89 | ...analogs.map((analog) => analog.map((n) => (n / 256) * vMax)),
90 | ...digitals.map((digital, i) =>
91 | digital.map((bit) => (bit * vMax) / 8 + ((i + 0.25) * vMax) / 4)
92 | )
93 | ].map((channel) => channel.map((v, i) => ({ v, t: (i + 1) * secPerSample })))
94 |
95 | return {
96 | //input
97 | triggerVoltage,
98 | triggerDir,
99 | secPerSample,
100 | triggerPos,
101 | amplifier,
102 | triggerMode,
103 | triggerChannel,
104 | isChannelOn,
105 | // output
106 | needData,
107 | forceUIUpdate,
108 | didTrigger,
109 | freeMemory,
110 | samplesPerBuffer,
111 | buffers
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/src/communication/profile.ts:
--------------------------------------------------------------------------------
1 | const report = {} as any
2 | const starts = {} as any
3 | let startT = 0
4 | export function profileS(name: string) {
5 | report[name] = report[name] || { calls: 0, t: 0 }
6 | starts[name] = performance.now()
7 | startT = startT || performance.now()
8 | }
9 | export function profileE(name: string) {
10 | report[name].t += performance.now() - starts[name]
11 | report[name].calls++
12 | starts[name] = undefined
13 | }
14 |
15 | const win = window as any
16 | win.startReport = () => {
17 | startT = performance.now()
18 | Object.keys(report).forEach((name) => {
19 | report[name] = { calls: 0, t: 0 }
20 | })
21 | }
22 | win.report = report
23 | win.getReport = () => {
24 | const tab = Object.keys(report).map((name) => {
25 | const { calls, t } = report[name]
26 | return {
27 | name,
28 | calls,
29 | t,
30 | tPerCall: t / calls,
31 | percentage: t / (startT - performance.now())
32 | }
33 | })
34 | console.table(tab)
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/About.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { Panel } from 'rsuite'
4 |
5 | export default function About() {
6 | return (
7 |
8 | David Buezas 2020
9 |
10 | https://github.com/dbuezas/arduino-web-oscilloscope
11 |
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/App.scss:
--------------------------------------------------------------------------------
1 | body {
2 | /* prevent scroll bounce on body */
3 | overflow: hidden;
4 | }
5 |
6 | form {
7 | display: inline-block;
8 | }
9 |
10 | .App {
11 | display: flex;
12 | position: absolute;
13 |
14 | top: 0;
15 | left: 0;
16 | right: 0;
17 | bottom: 0;
18 | }
19 |
20 | header {
21 | /* no flex rules, it will grow */
22 | width: 100%;
23 | }
24 | .rs-content {
25 | padding: 10px;
26 | padding-right: 0;
27 | }
28 | .rs-content,
29 | .rs-content > .rs-panel,
30 | .rs-content .rs-panel-body {
31 | height: 100%;
32 | }
33 | .rs-sidebar {
34 | overflow: scroll;
35 | padding: 10px;
36 | }
37 | .rs-sidebar .rs-panel {
38 | margin-bottom: 10px;
39 | }
40 | footer {
41 | width: 100%;
42 | }
43 | .rs-panel-heading {
44 | padding: 10px;
45 | }
46 | .rs-panel-body {
47 | padding: 10px;
48 | padding-top: 0 !important;
49 | }
50 |
51 | .rs-panel-collapsible > .rs-panel-heading::before {
52 | top: 10px;
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Plot from './Plot/Plot'
3 |
4 | import Controls from './Controls'
5 | import { Panel, Container, Content, Sidebar } from 'rsuite'
6 | import About from './About'
7 | import EnableSerialInstructions from './EnableSerialInstructions'
8 |
9 | function getChromeVersion() {
10 | const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)
11 | return Number(raw ? parseInt(raw[2], 10) : false)
12 | }
13 | function App() {
14 | if (getChromeVersion() < 86)
15 | return Requires an updated version of Chrome (≥ 86.x.x)
16 | if (!navigator.serial) return
19 |
20 |
21 |
22 |
24 |
25 |
26 |
29 |
30 |
39 | {
51 | return {
52 | label: formatVoltage(v / 10) + ' / div',
53 | value: i
54 | }
55 | })}
56 | style={{ flex: 1, marginLeft: 5, marginRight: 5 }}
57 | />
58 |
65 | )
66 | }
67 |
68 | export default Amplifier
69 |
--------------------------------------------------------------------------------
/src/components/Controls/Channels.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {
3 | useIsChannelOn,
4 | oversamplingFactorState,
5 | fftState0,
6 | fftState1,
7 | XYModeState
8 | } from '../../communication/bindings'
9 | import { Panel, ButtonToolbar, ButtonGroup, Button, Slider } from 'rsuite'
10 | import { useRecoilState } from 'recoil'
11 |
12 | const ButtonToolbarStyle = {
13 | marginTop: 10,
14 | display: 'flex',
15 | justifyContent: 'space-between',
16 | alignItems: 'center'
17 | }
18 |
19 | export default function Channels() {
20 | const [oversamplingFactor, setOversamplingFactor] = useRecoilState(
21 | oversamplingFactorState
22 | )
23 | const [xyMode, setXYMode] = useRecoilState(XYModeState)
24 | const [fft0, setFFT0] = useRecoilState(fftState0)
25 | const [fft1, setFFT1] = useRecoilState(fftState1)
26 | const [isChannelOn, setIsChannelOn] = useRecoilState(useIsChannelOn.send)
27 |
28 | return (
29 |
30 |
31 |
32 | {['A0', 'AS', 'A2', 'A3', 'A4', 'A5'].map((name, i) => (
33 | {
43 | const buffer = isChannelOn.slice()
44 | buffer[i] = !buffer[i]
45 | setIsChannelOn(buffer)
46 | }}
47 | >
48 | {name}
49 |
50 | ))}
51 |
52 |
53 |
54 | Oversample
55 |
64 |
65 |
66 | {
71 | setFFT0(!fft0)
72 | }}
73 | >
74 | FFT A0
75 |
76 | {
81 | setFFT1(!fft1)
82 | }}
83 | >
84 | FFT AS
85 |
86 | {
91 | setXYMode(!xyMode)
92 | }}
93 | >
94 | XY
95 |
96 |
97 |
98 | )
99 | }
100 |
--------------------------------------------------------------------------------
/src/components/Controls/Scales.tsx:
--------------------------------------------------------------------------------
1 | import MouseTrap from 'mousetrap'
2 | import React, { useEffect } from 'react'
3 | import { isRunningState } from '../../communication/bindings'
4 | import { Panel, Button } from 'rsuite'
5 | import { useRecoilState } from 'recoil'
6 | import Amplifier from './Amplifier'
7 | import TimeScales from './TimeScales'
8 | import { useActiveBtns } from './hooks'
9 |
10 | export default function Scales() {
11 | const [isRunning, setIsRunning] = useRecoilState(isRunningState)
12 | const [isSpaceActive, tapSpace] = useActiveBtns()
13 |
14 | useEffect(() => {
15 | MouseTrap.bind('space', (e) => {
16 | e.preventDefault()
17 | tapSpace()
18 | setIsRunning((isRunning) => !isRunning)
19 | })
20 | return () => {
21 | MouseTrap.unbind('space')
22 | }
23 | }, [setIsRunning, tapSpace])
24 |
25 | return (
26 |
27 | {
37 | setIsRunning(!isRunning)
38 | }}
39 | >
40 | {(isRunning ? 'Run' : 'Hold') + ' [space]'}
41 |
42 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/Controls/SerialControls.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | IconButton,
3 | Icon,
4 | ButtonToolbar,
5 | Tag,
6 | ButtonGroup,
7 | Panel
8 | } from 'rsuite'
9 | import React, { useEffect, useState } from 'react'
10 | import { allDataState } from '../../communication/bindings'
11 | import serial from '../../communication/Serial'
12 | import { useSetRecoilState } from 'recoil'
13 | import Uploader from './Uploader'
14 |
15 | const serialOptions = {
16 | baudRate: 115200 * 1,
17 | bufferSize: 20000
18 | }
19 | const ButtonToolbarStyle = {
20 | marginTop: 10,
21 | display: 'flex',
22 | justifyContent: 'space-between',
23 | alignItems: 'center'
24 | }
25 | type ConnectedState = 'Connected' | 'Disconnected' | 'Connecting...' | 'Error'
26 |
27 | function SerialControls() {
28 | const [connectedWith, setConnectedWith] = useState({})
29 | const [error, setError] = useState('')
30 | const [serialState, setSerialState] = useState('Disconnected')
31 | const setAllData = useSetRecoilState(allDataState)
32 | useEffect(() => {
33 | if (serialState !== 'Error') setError('')
34 | }, [serialState])
35 | useEffect(() => {
36 | return serial.onData((data) => {
37 | setAllData(data)
38 | })
39 | }, [setAllData])
40 | useEffect(() => {
41 | setSerialState('Connecting...')
42 | serial
43 | .connectWithPaired(serialOptions)
44 | .then(setConnectedWith)
45 | .then(() => setSerialState('Connected'))
46 | .catch(() => setSerialState('Disconnected'))
47 | }, [])
48 | return (
49 |
50 |
51 | {
56 | serial
57 | .connect(serialOptions)
58 | .then(setConnectedWith)
59 | .then(() => setSerialState('Connected'))
60 | .catch((e) => {
61 | setSerialState('Error')
62 | setError(e.toString())
63 | })
64 | }}
65 | icon={ {
73 | serial
74 | .close()
75 | .then(() => setSerialState('Disconnected'))
76 | .catch(() => setSerialState('Error'))
77 | }}
78 | icon={ {
86 | setSerialState('Connecting...')
87 |
88 | await serial
89 | .connectWithPaired(serialOptions)
90 | .then(setConnectedWith)
91 | .catch(() => serial.connect(serialOptions).then(setConnectedWith))
92 | .then(() => setSerialState('Connected'))
93 | .catch(() => setSerialState('Error'))
94 | }}
95 | icon={
99 |
100 |
101 | State:
102 | {(() => {
103 | const color = {
104 | Connected: 'green',
105 | 'Connecting...': 'yellow',
106 | Error: 'red',
107 | Disconnected: undefined
108 | }[serialState]
109 |
110 | return (
111 |
112 | {serialState} {error}
113 |
114 | )
115 | })()}
116 |
117 | {serialState === 'Connected' && (
118 | {JSON.stringify(connectedWith)}
119 | )}
120 | {serialState === 'Disconnected' &&
122 | )
123 | }
124 |
125 | export default SerialControls
126 |
--------------------------------------------------------------------------------
/src/components/Controls/Stats.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import {
3 | dataState,
4 | freeMemoryState,
5 | frequencyState,
6 | voltagesState
7 | } from '../../communication/bindings'
8 | import { formatFreq, formatTime, formatVoltage } from '../formatters'
9 | import { Panel, Tag } from 'rsuite'
10 | import { useRecoilValue } from 'recoil'
11 |
12 | function FreeMemory() {
13 | const freeMemory = useRecoilValue(freeMemoryState)
14 | return Mem: {freeMemory}bytes
15 | }
16 | function FPS() {
17 | const [, setLastT] = useState(0)
18 | const [fps, setFps] = useState(0)
19 | const data = useRecoilValue(dataState)
20 | useEffect(() => {
21 | setLastT((lastT) => {
22 | setFps((fps) => {
23 | const newFps = 1000 / (performance.now() - lastT)
24 | return fps * 0.9 + newFps * 0.1
25 | })
26 | return performance.now()
27 | })
28 | }, [data])
29 | return FPS: {Math.round(fps)}
30 | }
31 |
32 | function Frequency() {
33 | const frequency = useRecoilValue(frequencyState)
34 | return Freq: {formatFreq(frequency)}
35 | }
36 | function Wavelength() {
37 | const frequency = useRecoilValue(frequencyState)
38 | return WLength: {formatTime(1 / frequency)}
39 | }
40 |
41 | const style = {
42 | width: ' 100%',
43 | display: ' flex',
44 | justifyContent: ' space-between'
45 | }
46 | function Voltages() {
47 | const voltages = useRecoilValue(voltagesState)
48 | return (
49 | <>
50 |
51 | Vmin: {formatVoltage(voltages.vmin)}
52 | Vmax: {formatVoltage(voltages.vmax)}
53 |
54 |
55 | Vavr: {formatVoltage(voltages.vavr)}
56 | Vp-p: {formatVoltage(voltages.vpp)}
57 |
58 |
59 | )
60 | }
61 | export default function Stats() {
62 | return (
63 |
64 |
65 |
67 |
70 |
71 |
74 |
75 |
85 | {
96 | setSecPerSample(n)
97 | }}
98 | data={perSample}
99 | style={{ flex: 1, marginLeft: 5, marginRight: 5 }}
100 | />
101 |
108 | )
109 | }
110 |
--------------------------------------------------------------------------------
/src/components/Controls/Trigger.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {
3 | useTriggerDirection,
4 | isRunningState,
5 | useTriggerMode,
6 | TriggerMode,
7 | didTriggerState,
8 | useTriggerChannel,
9 | TriggerDirection,
10 | requestData,
11 | useSecPerSample
12 | } from '../../communication/bindings'
13 | import {
14 | Icon,
15 | Panel,
16 | Tag,
17 | ButtonToolbar,
18 | ButtonGroup,
19 | Button,
20 | IconButton
21 | } from 'rsuite'
22 | import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
23 | import win from '../../win'
24 |
25 | const ButtonToolbarStyle = {
26 | marginTop: 10,
27 | display: 'flex',
28 | justifyContent: 'space-between',
29 | alignItems: 'center'
30 | }
31 |
32 | export default function Trigger() {
33 | const isRunning = useRecoilValue(isRunningState)
34 | win.requestData = useSetRecoilState(requestData.send)
35 | const [triggerMode, setTriggerMode] = useRecoilState(useTriggerMode.send)
36 | const [triggerChannel, setTriggerChannel] = useRecoilState(
37 | useTriggerChannel.send
38 | )
39 | const didTrigger = useRecoilValue(didTriggerState)
40 | const [triggerDirection, setTriggerDirection] = useRecoilState(
41 | useTriggerDirection.send
42 | )
43 | const secPerSample = useRecoilValue(useSecPerSample.send)
44 | const tooFastForSlowMode = secPerSample < 0.003
45 | return (
46 |
47 |
48 |
49 | {['A0', 'AS', 'A2', 'A3', 'A4', 'A5'].map((name, idx) => (
50 | setTriggerChannel(idx)}
60 | >
61 | {name}
62 |
63 | ))}
64 |
65 |
66 |
67 |
68 | {Object.values(TriggerMode).map((mode) => (
69 | setTriggerMode(mode)}
79 | >
80 | {mode}
81 |
82 | ))}
83 |
84 |
85 |
86 | Direction:
87 |
88 |
109 |
110 |
111 | State:
112 | {!isRunning ? (
113 | Hold
114 | ) : didTrigger ? (
115 | Triggered
116 | ) : (
117 | Searching
118 | )}
119 |
120 |
121 | )
122 | }
123 |
--------------------------------------------------------------------------------
/src/components/Controls/Uploader.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Button, Icon, Progress } from 'rsuite'
3 | import serial2 from '../../communication/Serial2'
4 | import async from 'async'
5 | import intel_hex from 'intel-hex'
6 | import Stk500 from 'stk500'
7 |
8 | const stk500 = new Stk500()
9 | const bootload = async (
10 | stream: NodeJS.ReadWriteStream,
11 | hex: string,
12 | opt: typeof board,
13 | progress: (percent: number) => void
14 | ) => {
15 | let sent = 0
16 | stk500.log = (what: string) => {
17 | if (what === 'loaded page') {
18 | sent += 1
19 | const percent = Math.round((100 * sent) / (hex.length / opt.pageSize))
20 | progress(percent)
21 | }
22 | }
23 |
24 | await async.series([
25 | // send two dummy syncs like avrdude does
26 | stk500.sync.bind(stk500, stream, 3, opt.timeout),
27 | stk500.sync.bind(stk500, stream, 3, opt.timeout),
28 | stk500.sync.bind(stk500, stream, 3, opt.timeout),
29 | stk500.verifySignature.bind(stk500, stream, opt.signature, opt.timeout),
30 | stk500.setOptions.bind(stk500, stream, {}, opt.timeout),
31 | stk500.enterProgrammingMode.bind(stk500, stream, opt.timeout),
32 | stk500.upload.bind(stk500, stream, hex, opt.pageSize, opt.timeout),
33 | // stk500.verify.bind(stk500, stream, hex, opt.pageSize, opt.timeout),
34 | stk500.exitProgrammingMode.bind(stk500, stream, opt.timeout)
35 | ])
36 | }
37 |
38 | const serialOptions = {
39 | baudRate: 57600,
40 | bufferSize: 20000
41 | }
42 | const board = {
43 | signature: Buffer.from([0x1e, 0x95, 0x0f]),
44 | pageSize: 128,
45 | timeout: 400
46 | }
47 | function Uploader() {
48 | const [percent, setPercent] = useState(0)
49 | const [status, setStatus] = useState<'active' | 'fail' | 'success'>('active')
50 | const [isProgressHidden, setIsProgressHidden] = useState(true)
51 | const [message, setMessage] = useState('')
52 | const onClick = async () => {
53 | setMessage('Uploading...')
54 | try {
55 | setIsProgressHidden(true)
56 | const hex = await fetch(process.env.PUBLIC_URL + '/src.ino.hex')
57 | .then((response) => response.text())
58 | .then((text) => intel_hex.parse(text).data)
59 | const serialStream = await serial2.connect(serialOptions)
60 | setStatus('active')
61 | setPercent(0)
62 | setIsProgressHidden(false)
63 | await bootload(serialStream, hex, board, setPercent)
64 | setStatus('success')
65 | setMessage(`Uploaded ${hex.length} bytes.`)
66 | } catch (e) {
67 | console.error(e)
68 | setMessage(e.toString())
69 | setStatus('fail')
70 | }
71 | serial2.close()
72 | }
73 | return (
74 | <>
75 |
77 |
79 | {!isProgressHidden && (
80 | <>
81 |
18 |
28 |
31 |
32 | Enable experimental web platform features to activate the Web
33 | Serial API{' '}
34 |
35 |
40 | {
46 | copy()
47 | Notification.success({
48 | title: 'It is now in your clipboard',
49 | description: chromeFlagsUrl
50 | })
51 | }}
52 | >
53 | {chromeFlagsUrl}
54 |
55 | }
56 | />
57 |
61 |
66 | Right there. This will take you to the the page where you
67 | can support for the serial port.
68 |
69 |
70 | }
71 | />
72 |
82 | }
83 | />
84 |
92 |
98 | Do not do something stupid, the board is connected to your
99 | computer so it shares Ground with it, also do not push more
100 | than 5v to it.
101 |
102 |
103 | }
104 | />
105 |
106 |
107 |
108 |
((_props, ref) => {
20 | const [dragging, setDragging] = useState(false)
21 | const xScale = useRecoilValue(xScaleSelector)
22 | const yScale = useRecoilValue(yScaleSelector)
23 | const [startPos, setStartPos] = useState({ x: -1, y: -1 })
24 | const [endPos, setEndPos] = useState({ x: -1, y: -1 })
25 | useImperativeHandle(ref, () => ({
26 | onMouseDown(e) {
27 | setStartPos({
28 | x: xScale.invert(e.nativeEvent.offsetX),
29 | y: yScale.invert(e.nativeEvent.offsetY)
30 | })
31 | setEndPos({
32 | x: xScale.invert(e.nativeEvent.offsetX),
33 | y: yScale.invert(e.nativeEvent.offsetY)
34 | })
35 | setDragging(true)
36 | },
37 | onMouseUp(e) {
38 | if (dragging) {
39 | setEndPos({
40 | x: xScale.invert(e.nativeEvent.offsetX),
41 | y: yScale.invert(e.nativeEvent.offsetY)
42 | })
43 | setDragging(false)
44 | }
45 | },
46 | onMouseMove(e) {
47 | if (dragging) {
48 | setEndPos({
49 | x: xScale.invert(e.nativeEvent.offsetX),
50 | y: yScale.invert(e.nativeEvent.offsetY)
51 | })
52 | }
53 | }
54 | }))
55 | if (isEqual(startPos, endPos)) return <>
56 | return (
57 |
58 |
86 | {formatTime(endPos.x - startPos.x)}
87 |
88 |
116 | {formatVoltage(endPos.y - startPos.y)}
117 |
118 |
119 | )
120 | })
121 |
122 | Measure.displayName = 'Measure'
123 | export default Measure
124 |
--------------------------------------------------------------------------------
/src/components/Plot/Plot.scss:
--------------------------------------------------------------------------------
1 | .plotContainer {
2 |
3 | width: 100%;
4 | height: 100%;
5 |
6 | svg.plot {
7 | width: 100%;
8 | height: 100%;
9 | }
10 |
11 | text {
12 | font-size: 14px;
13 | paint-order: stroke;
14 | stroke: #ffffff;
15 | stroke-width: 2px;
16 | stroke-linecap: butt;
17 | stroke-linejoin: miter;
18 | }
19 |
20 |
21 | path {
22 | stroke-width: 1;
23 | fill: none;
24 |
25 | &.plot-area-a0 {
26 | stroke: steelblue;
27 | stroke-width: 3;
28 | }
29 |
30 | &.plot-area-a1 {
31 | stroke: crimson;
32 | stroke-width: 3;
33 | }
34 |
35 | &.plot-area-d0 {
36 | stroke: lightcoral;
37 | }
38 |
39 | &.plot-area-d1 {
40 | stroke: chartreuse;
41 | }
42 |
43 | &.plot-area-d2 {
44 | stroke: cornsilk;
45 | }
46 |
47 | &.plot-area-d3 {
48 | stroke: darkmagenta;
49 | }
50 |
51 | &.plot-area-fft0 {
52 | stroke: rgb(4, 65, 116);
53 | }
54 |
55 | &.plot-area-fft1 {
56 | stroke: rgb(160, 4, 35);
57 | }
58 |
59 | &.plot-area-xy {
60 | stroke: rgb(3, 102, 53);
61 | }
62 | }
63 |
64 | line {
65 |
66 | &.measureX,
67 | &.measureY {
68 | stroke: black;
69 | stroke-dasharray: 5;
70 | stroke-width: 1;
71 | }
72 |
73 | &.measureCap {
74 | stroke: black;
75 | stroke-width: 1;
76 | }
77 |
78 | &.triggerPosHandle {
79 | cursor: col-resize;
80 | }
81 |
82 | &.triggerVoltageHandle {
83 | cursor: row-resize;
84 | }
85 |
86 | &.triggerPosHandle,
87 | &.triggerVoltageHandle {
88 | stroke-width: 40;
89 | stroke: white;
90 | opacity: 0.03;
91 | }
92 |
93 | &.triggerPos,
94 | &.triggerVoltage {
95 | fill: none;
96 | stroke-dasharray: 10;
97 | stroke-width: 2;
98 | opacity: 0.7;
99 | }
100 |
101 | &.triggerPos {
102 | stroke: black;
103 | }
104 |
105 | &.triggerVoltage {
106 | stroke: black;
107 | }
108 |
109 | &.triggerPos.active,
110 | &.triggerVoltage.active {
111 | stroke-width: 1;
112 | }
113 | }
114 |
115 | .axis {
116 | .domain {
117 | fill: rgba(0, 0, 0, 0.2);
118 | stroke: grey;
119 | stroke-width: 2;
120 | }
121 |
122 | &.y text {
123 | font-size: 14px;
124 | }
125 |
126 | line {
127 | fill: none;
128 | stroke: grey;
129 | stroke-width: 1;
130 | opacity: 0.3;
131 | stroke-dasharray: 5;
132 | }
133 |
134 | }
135 | }
--------------------------------------------------------------------------------
/src/components/Plot/Plot.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from 'react'
2 | import useSize from '@react-hook/size'
3 |
4 | import {
5 | dataState,
6 | useIsChannelOn,
7 | XYModeState
8 | } from '../../communication/bindings'
9 | import { useRecoilValue, useSetRecoilState } from 'recoil'
10 | import TriggerVoltageHandle, { TriggerVoltageRef } from './TriggerVoltageHandle'
11 | import TriggerPosHandle, { TriggerPosRef } from './TriggerPosHandle'
12 | import {
13 | lineSelector,
14 | plotHeightSelector,
15 | plotWidthSelector,
16 | XYLineSelector
17 | } from './hooks'
18 | import XAxis from './XAxis'
19 | import YAxis from './YAxis'
20 | import Measure, { MeasureRef } from './Measure'
21 |
22 | function XYCurve() {
23 | const xyMode = useRecoilValue(XYModeState)
24 | const isChannelOn = useRecoilValue(useIsChannelOn.send)
25 |
26 | const xyLine = useRecoilValue(XYLineSelector)
27 | const data = useRecoilValue(dataState)
28 | const d = data[0].map(
29 | (d, i) => [-data[1][i]?.v || 0, d.v] as [number, number]
30 | )
31 | if (!xyMode || !isChannelOn[0] || !isChannelOn[1]) return <>
32 | return (
33 | <>
34 | (null)
62 | const triggerPosRef = useRef(null)
63 | const triggerVoltageRef = useRef(null)
64 | const measureRef = useRef(null)
65 | const containerRef = useRef(null)
66 | const [width, height] = useSize(containerRef)
67 | const setPlotHeight = useSetRecoilState(plotHeightSelector)
68 | const setPlotWidth = useSetRecoilState(plotWidthSelector)
69 | useEffect(() => {
70 | setPlotHeight(height)
71 | setPlotWidth(width)
72 | }, [height, setPlotHeight, setPlotWidth, width])
73 | return (
74 |
75 | {
79 | triggerPosRef.current?.onMouseMove(e)
80 | triggerVoltageRef.current?.onMouseMove(e)
81 | measureRef.current?.onMouseMove(e)
82 | e.preventDefault()
83 | }}
84 | onMouseLeave={(e) => {
85 | triggerPosRef.current?.onMouseUp(e)
86 | triggerVoltageRef.current?.onMouseUp(e)
87 | measureRef.current?.onMouseUp(e)
88 | e.preventDefault()
89 | }}
90 | onMouseUp={(e) => {
91 | triggerPosRef.current?.onMouseUp(e)
92 | triggerVoltageRef.current?.onMouseUp(e)
93 | measureRef.current?.onMouseUp(e)
94 | e.preventDefault()
95 | }}
96 | onMouseDown={(e) => {
97 | measureRef.current?.onMouseDown(e)
98 | e.preventDefault()
99 | }}
100 | >
101 |
109 |
110 | )
111 | }
112 |
--------------------------------------------------------------------------------
/src/components/Plot/TriggerPosHandle.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | forwardRef,
3 | MouseEventHandler,
4 | useImperativeHandle,
5 | useState
6 | } from 'react'
7 |
8 | import { useRecoilState, useRecoilValue } from 'recoil'
9 | import { useTriggerPos } from '../../communication/bindings'
10 | import {
11 | margin,
12 | plotHeightSelector,
13 | xDomainSelector,
14 | xScaleSelector
15 | } from './hooks'
16 |
17 | export type TriggerPosRef = {
18 | onMouseUp: MouseEventHandler
19 | onMouseMove: MouseEventHandler
20 | }
21 |
22 | const TriggerPosHandle = forwardRef((_props, ref) => {
23 | const [draggingTP, setDraggingTP] = useState(false)
24 | const xScale = useRecoilValue(xScaleSelector)
25 | const height = useRecoilValue(plotHeightSelector)
26 | const [triggerPos, setTriggerPos] = useRecoilState(useTriggerPos.send)
27 |
28 | const xDomain = useRecoilValue(xDomainSelector)
29 | useImperativeHandle(ref, () => ({
30 | onMouseUp() {
31 | setDraggingTP(false)
32 | },
33 | onMouseMove(e) {
34 | if (draggingTP) {
35 | setTriggerPos(xScale.invert(e.nativeEvent.offsetX) / xDomain[1])
36 | }
37 | }
38 | }))
39 | const scaledX = xScale(triggerPos * xDomain[1])
40 |
41 | return (
42 | <>
43 | {
53 | e.preventDefault()
54 | e.stopPropagation()
55 | setDraggingTP(true)
56 | }}
57 | x1={scaledX}
58 | x2={scaledX}
59 | y1={height - margin.bottom}
60 | y2={margin.top}
61 | >
62 |
63 | {Math.round(triggerPos * 100)}%
64 |
65 |
66 | )
67 | })
68 |
69 | TriggerPosHandle.displayName = 'TriggerPosHandle'
70 | export default TriggerPosHandle
71 |
--------------------------------------------------------------------------------
/src/components/Plot/TriggerVoltageHandle.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | forwardRef,
3 | MouseEventHandler,
4 | useImperativeHandle,
5 | useState
6 | } from 'react'
7 |
8 | import { useTriggerVoltage } from '../../communication/bindings'
9 | import { useRecoilState, useRecoilValue } from 'recoil'
10 | import { margin, plotWidthSelector, yScaleSelector } from './hooks'
11 |
12 | export type TriggerVoltageRef = {
13 | onMouseUp: MouseEventHandler
14 | onMouseMove: MouseEventHandler
15 | }
16 |
17 | const TriggerVoltageHandle = forwardRef((_props, ref) => {
18 | const [draggingTV, setDraggingTV] = useState(false)
19 | const yScale = useRecoilValue(yScaleSelector)
20 | const width = useRecoilValue(plotWidthSelector)
21 | const [triggerVoltage, setTriggerVoltage] = useRecoilState(
22 | useTriggerVoltage.send
23 | )
24 | useImperativeHandle(ref, () => ({
25 | onMouseUp() {
26 | setDraggingTV(false)
27 | },
28 | onMouseMove(e) {
29 | if (draggingTV) {
30 | setTriggerVoltage(yScale.invert(e.nativeEvent.offsetY))
31 | }
32 | }
33 | }))
34 | const scaledY = yScale(triggerVoltage)
35 | return (
36 | <>
37 | {
47 | e.preventDefault()
48 | e.stopPropagation()
49 | setDraggingTV(true)
50 | }}
51 | x1={margin.left}
52 | x2={width - margin.right}
53 | y1={scaledY}
54 | y2={scaledY}
55 | >
56 |
63 | {triggerVoltage.toFixed(2)}v
64 |
65 |
66 | )
67 | })
68 |
69 | TriggerVoltageHandle.displayName = 'TriggerVoltageHandle'
70 |
71 | export default TriggerVoltageHandle
72 |
--------------------------------------------------------------------------------
/src/components/Plot/XAxis.tsx:
--------------------------------------------------------------------------------
1 | import * as d3 from 'd3'
2 | import React, { useRef, useLayoutEffect } from 'react'
3 |
4 | import { useRecoilValue } from 'recoil'
5 | import { margin, plotHeightSelector, xScaleSelector } from './hooks'
6 | import { formatTime } from '../formatters'
7 |
8 | export default function XAxis() {
9 | const nodeRef = useRef(null)
10 | const height = useRecoilValue(plotHeightSelector)
11 | const xScale = useRecoilValue(xScaleSelector)
12 | const gEl = nodeRef.current
13 | useLayoutEffect(() => {
14 | if (!gEl) return
15 | const xTicks = d3.ticks(xScale.domain()[0], xScale.domain()[1], 10)
16 | d3.select(gEl).call((g) =>
17 | g
18 | .attr('transform', `translate(0,${height - margin.bottom})`)
19 | .call(
20 | d3
21 | .axisBottom(xScale)
22 | .tickValues(xTicks)
23 | .tickPadding(10)
24 | .tickSize(-height + margin.top + margin.bottom)
25 | .tickFormat(formatTime)
26 | .tickSizeOuter(0)
27 | )
28 | .call((g) => g.select('.domain').remove())
29 | )
30 | }, [gEl, xScale, height])
31 |
32 | return (null)
9 | const width = useRecoilValue(plotWidthSelector)
10 | const yScale = useRecoilValue(yScaleSelector)
11 | const gEl = nodeRef.current
12 |
13 | useLayoutEffect(() => {
14 | if (!gEl) return
15 | const yTicks = d3.ticks(yScale.domain()[0], yScale.domain()[1], 10)
16 | d3.select(gEl)
17 | .call((g) =>
18 | g.attr('transform', `translate(${margin.left},0)`).call(
19 | d3
20 | .axisLeft(yScale)
21 | .tickValues(yTicks)
22 | .tickPadding(10)
23 | .tickSize(-width + margin.right + margin.left - 1)
24 | .tickFormat((v) => v + 'v')
25 | )
26 | )
27 | .call((g) =>
28 | g.select('.domain').attr(
29 | 'd',
30 | (_d, _, path) =>
31 | // close path so the domain has a right border
32 | d3.select(path[0]).attr('d') + 'z'
33 | )
34 | )
35 | }, [gEl, yScale, width])
36 |
37 | return
12 |
13 |
15 | ,
16 | document.getElementById('root')
17 | )
18 |
19 | // If you want your app to work offline and load faster, you can change
20 | // unregister() to register() below. Note this comes with some pitfalls.
21 | // Learn more about service workers: https://bit.ly/CRA-PWA
22 | serviceWorker.unregister()
23 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// 
12 |
13 | # Web firmware uploader
14 | If you want to add browser firmware upload to your page (also supports atmel MCUs), visit https://github.com/dbuezas/arduino-web-uploader
15 |
16 | # Featured in Hackaday!
17 | This makes me so happy! thanks Hackaday!
18 | https://hackaday.com/2021/02/22/slick-web-oscilloscope-is-ready-in-a-flash-literally/
19 |
20 | # the react stuff
21 |
22 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
23 |
24 | ## Available Scripts
25 |
26 | In the project directory, you can run:
27 |
28 | ### `yarn start`
29 |
30 | Runs the app in the development mode.
65 |