From 932cc78bcff143bf4bcc30e2489c1e098bea11f9 Mon Sep 17 00:00:00 2001 From: Ivan Li Date: Sat, 15 Apr 2023 18:58:40 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20GUI=20=E5=A2=9E=E5=8A=A0=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 5 +- .vscode/tasks.json | 18 ++- package.json | 1 + pnpm-lock.yaml | 11 ++ src/App.tsx | 107 ++---------------- .../display-info-panel.tsx | 2 +- .../display-list-container.tsx | 4 +- .../display-view.tsx | 6 +- .../led-strip-configuration.tsx | 106 +++++++++++++++++ .../led-strip-part.tsx | 6 +- .../led-strip-parts-sorter.tsx | 8 +- .../screen-view.tsx | 0 src/index.tsx | 10 +- 13 files changed, 167 insertions(+), 117 deletions(-) rename src/components/{ => led-strip-configuration}/display-info-panel.tsx (95%) rename src/components/{ => led-strip-configuration}/display-list-container.tsx (92%) rename src/components/{ => led-strip-configuration}/display-view.tsx (92%) create mode 100644 src/components/led-strip-configuration/led-strip-configuration.tsx rename src/components/{ => led-strip-configuration}/led-strip-part.tsx (93%) rename src/components/{ => led-strip-configuration}/led-strip-parts-sorter.tsx (96%) rename src/components/{ => led-strip-configuration}/screen-view.tsx (100%) diff --git a/.vscode/settings.json b/.vscode/settings.json index 5098d60..6e187d5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,8 @@ "cSpell.words": [ "Itertools", "Leds" - ] + ], + "idf.customExtraVars": { + "OPENOCD_SCRIPTS": "/Users/ivan/.espressif/tools/openocd-esp32/v0.11.0-esp32-20211220/openocd-esp32/share/openocd/scripts" + } } \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json index 4090584..56c4897 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -3,14 +3,23 @@ // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ + { + "label": "dev", + "type": "shell", + "isBackground": true, + "command": "pnpm", + "args": [ + "tauri", + "dev" + ], + "problemMatcher": [ + "$eslint-stylish" + ] + }, { "label": "ui:dev", "type": "shell", - // `dev` keeps running in the background - // ideally you should also configure a `problemMatcher` - // see https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson "isBackground": true, - // change this to your `beforeDevCommand`: "command": "pnpm", "args": [ "dev" @@ -19,7 +28,6 @@ { "label": "ui:build", "type": "shell", - // change this to your `beforeBuildCommand`: "command": "pnpm", "args": [ "build" diff --git a/package.json b/package.json index 467b5c8..d559c2a 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "license": "MIT", "dependencies": { + "@solidjs/router": "^0.8.2", "@tauri-apps/api": "^1.2.0", "solid-js": "^1.4.7", "solid-tippy": "^0.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89e42e7..8acd81e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,9 @@ lockfileVersion: '6.0' dependencies: + '@solidjs/router': + specifier: ^0.8.2 + version: 0.8.2(solid-js@1.6.14) '@tauri-apps/api': specifier: ^1.2.0 version: 1.2.0 @@ -621,6 +624,14 @@ packages: resolution: {integrity: sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==} dev: false + /@solidjs/router@0.8.2(solid-js@1.6.14): + resolution: {integrity: sha512-gUKW+LZqxtX6y/Aw6JKyy4gQ9E7dLqp513oB9pSYJR1HM5c56Pf7eijzyXX+b3WuXig18Cxqah4tMtF0YGu80w==} + peerDependencies: + solid-js: ^1.5.3 + dependencies: + solid-js: 1.6.14 + dev: false + /@tauri-apps/api@1.2.0: resolution: {integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw==} engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'} diff --git a/src/App.tsx b/src/App.tsx index 89c3f20..f61fe7e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,104 +1,17 @@ -import { createEffect, onCleanup } from 'solid-js'; -import { invoke } from '@tauri-apps/api/tauri'; -import { DisplayView } from './components/display-view'; -import { DisplayListContainer } from './components/display-list-container'; -import { displayStore, setDisplayStore } from './stores/display.store'; -import { LedStripConfigContainer } from './models/led-strip-config'; -import { setLedStripStore } from './stores/led-strip.store'; -import { listen } from '@tauri-apps/api/event'; -import { LedStripPartsSorter } from './components/led-strip-parts-sorter'; -import { createStore } from 'solid-js/store'; -import { - LedStripConfigurationContext, - LedStripConfigurationContextType, -} from './contexts/led-strip-configuration.context'; +import { Routes, Route } from '@solidjs/router'; +import { LedStripConfiguration } from './components/led-strip-configuration/led-strip-configuration'; function App() { - createEffect(() => { - invoke('list_display_info').then((displays) => { - setDisplayStore({ - displays: JSON.parse(displays), - }); - }); - invoke('read_led_strip_configs').then((configs) => { - console.log(configs); - setLedStripStore(configs); - }); - }); - - // listen to config_changed event - createEffect(() => { - const unlisten = listen('config_changed', (event) => { - const { strips, mappers } = event.payload as LedStripConfigContainer; - console.log(event.payload); - setLedStripStore({ - strips, - mappers, - }); - }); - - onCleanup(() => { - unlisten.then((unlisten) => unlisten()); - }); - }); - - // listen to led_colors_changed event - createEffect(() => { - const unlisten = listen('led_colors_changed', (event) => { - const colors = event.payload; - - setLedStripStore({ - colors, - }); - }); - - onCleanup(() => { - unlisten.then((unlisten) => unlisten()); - }); - }); - - // listen to led_sorted_colors_changed event - createEffect(() => { - const unlisten = listen('led_sorted_colors_changed', (event) => { - const sortedColors = event.payload; - - setLedStripStore({ - sortedColors, - }); - }); - - onCleanup(() => { - unlisten.then((unlisten) => unlisten()); - }); - }); - - const [ledStripConfiguration, setLedStripConfiguration] = createStore< - LedStripConfigurationContextType[0] - >({ - selectedStripPart: null, - }); - - const ledStripConfigurationContextValue: LedStripConfigurationContextType = [ - ledStripConfiguration, - { - setSelectedStripPart: (v) => { - setLedStripConfiguration({ - selectedStripPart: v, - }); - }, - }, - ]; - return (
- - - - {displayStore.displays.map((display) => { - return ; - })} - - + + + + +
); } diff --git a/src/components/display-info-panel.tsx b/src/components/led-strip-configuration/display-info-panel.tsx similarity index 95% rename from src/components/display-info-panel.tsx rename to src/components/led-strip-configuration/display-info-panel.tsx index 9c84850..14d7a3d 100644 --- a/src/components/display-info-panel.tsx +++ b/src/components/led-strip-configuration/display-info-panel.tsx @@ -1,5 +1,5 @@ import { Component, JSX, ParentComponent, splitProps } from 'solid-js'; -import { DisplayInfo } from '../models/display-info.model'; +import { DisplayInfo } from '../../models/display-info.model'; type DisplayInfoItemProps = { label: string; diff --git a/src/components/display-list-container.tsx b/src/components/led-strip-configuration/display-list-container.tsx similarity index 92% rename from src/components/display-list-container.tsx rename to src/components/led-strip-configuration/display-list-container.tsx index 81e2c4c..e0fb3a2 100644 --- a/src/components/display-list-container.tsx +++ b/src/components/led-strip-configuration/display-list-container.tsx @@ -6,8 +6,8 @@ import { onMount, ParentComponent, } from 'solid-js'; -import { displayStore, setDisplayStore } from '../stores/display.store'; -import background from '../assets/transparent-grid-background.svg?url'; +import { displayStore, setDisplayStore } from '../../stores/display.store'; +import background from '../../assets/transparent-grid-background.svg?url'; export const DisplayListContainer: ParentComponent = (props) => { let root: HTMLElement; diff --git a/src/components/display-view.tsx b/src/components/led-strip-configuration/display-view.tsx similarity index 92% rename from src/components/display-view.tsx rename to src/components/led-strip-configuration/display-view.tsx index 9441cd5..061760d 100644 --- a/src/components/display-view.tsx +++ b/src/components/led-strip-configuration/display-view.tsx @@ -1,7 +1,7 @@ import { Component, createMemo } from 'solid-js'; -import { DisplayInfo } from '../models/display-info.model'; -import { displayStore } from '../stores/display.store'; -import { ledStripStore } from '../stores/led-strip.store'; +import { DisplayInfo } from '../../models/display-info.model'; +import { displayStore } from '../../stores/display.store'; +import { ledStripStore } from '../../stores/led-strip.store'; import { DisplayInfoPanel } from './display-info-panel'; import { LedStripPart } from './led-strip-part'; import { ScreenView } from './screen-view'; diff --git a/src/components/led-strip-configuration/led-strip-configuration.tsx b/src/components/led-strip-configuration/led-strip-configuration.tsx new file mode 100644 index 0000000..4ffadeb --- /dev/null +++ b/src/components/led-strip-configuration/led-strip-configuration.tsx @@ -0,0 +1,106 @@ +import { createEffect, onCleanup } from 'solid-js'; +import { invoke } from '@tauri-apps/api/tauri'; +import { DisplayView } from './display-view'; +import { DisplayListContainer } from './display-list-container'; +import { displayStore, setDisplayStore } from '../../stores/display.store'; +import { LedStripConfigContainer } from '../../models/led-strip-config'; +import { setLedStripStore } from '../../stores/led-strip.store'; +import { listen } from '@tauri-apps/api/event'; +import { LedStripPartsSorter } from './led-strip-parts-sorter'; +import { createStore } from 'solid-js/store'; +import { + LedStripConfigurationContext, + LedStripConfigurationContextType, +} from '../../contexts/led-strip-configuration.context'; + +export const LedStripConfiguration = () => { + createEffect(() => { + invoke('list_display_info').then((displays) => { + setDisplayStore({ + displays: JSON.parse(displays), + }); + }); + invoke('read_led_strip_configs').then((configs) => { + console.log(configs); + setLedStripStore(configs); + }); + }); + + // listen to config_changed event + createEffect(() => { + const unlisten = listen('config_changed', (event) => { + const { strips, mappers } = event.payload as LedStripConfigContainer; + console.log(event.payload); + setLedStripStore({ + strips, + mappers, + }); + }); + + onCleanup(() => { + unlisten.then((unlisten) => unlisten()); + }); + }); + + // listen to led_colors_changed event + createEffect(() => { + const unlisten = listen('led_colors_changed', (event) => { + if (!window.document.hidden) { + const colors = event.payload; + setLedStripStore({ + colors, + }); + } + }); + + onCleanup(() => { + unlisten.then((unlisten) => unlisten()); + }); + }); + + // listen to led_sorted_colors_changed event + createEffect(() => { + const unlisten = listen('led_sorted_colors_changed', (event) => { + if (!window.document.hidden) { + const sortedColors = event.payload; + setLedStripStore({ + sortedColors, + }); + } + }); + + onCleanup(() => { + unlisten.then((unlisten) => unlisten()); + }); + }); + + const [ledStripConfiguration, setLedStripConfiguration] = createStore< + LedStripConfigurationContextType[0] + >({ + selectedStripPart: null, + }); + + const ledStripConfigurationContextValue: LedStripConfigurationContextType = [ + ledStripConfiguration, + { + setSelectedStripPart: (v) => { + setLedStripConfiguration({ + selectedStripPart: v, + }); + }, + }, + ]; + + return ( +
+ + + + {displayStore.displays.map((display) => { + return ; + })} + + +
+ ); +}; diff --git a/src/components/led-strip-part.tsx b/src/components/led-strip-configuration/led-strip-part.tsx similarity index 93% rename from src/components/led-strip-part.tsx rename to src/components/led-strip-configuration/led-strip-part.tsx index 892ee0d..add74f6 100644 --- a/src/components/led-strip-part.tsx +++ b/src/components/led-strip-configuration/led-strip-part.tsx @@ -12,9 +12,9 @@ import { } from 'solid-js'; import { useTippy } from 'solid-tippy'; import { followCursor } from 'tippy.js'; -import { LedStripConfig } from '../models/led-strip-config'; -import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context'; -import { ledStripStore } from '../stores/led-strip.store'; +import { LedStripConfig } from '../../models/led-strip-config'; +import { LedStripConfigurationContext } from '../../contexts/led-strip-configuration.context'; +import { ledStripStore } from '../../stores/led-strip.store'; type LedStripPartProps = { config?: LedStripConfig | null; diff --git a/src/components/led-strip-parts-sorter.tsx b/src/components/led-strip-configuration/led-strip-parts-sorter.tsx similarity index 96% rename from src/components/led-strip-parts-sorter.tsx rename to src/components/led-strip-configuration/led-strip-parts-sorter.tsx index 6e2d514..67bd603 100644 --- a/src/components/led-strip-parts-sorter.tsx +++ b/src/components/led-strip-configuration/led-strip-parts-sorter.tsx @@ -14,11 +14,11 @@ import { untrack, useContext, } from 'solid-js'; -import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config'; -import { ledStripStore } from '../stores/led-strip.store'; +import { LedStripConfig, LedStripPixelMapper } from '../../models/led-strip-config'; +import { ledStripStore } from '../../stores/led-strip.store'; import { invoke } from '@tauri-apps/api'; -import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context'; -import background from '../assets/transparent-grid-background.svg?url'; +import { LedStripConfigurationContext } from '../../contexts/led-strip-configuration.context'; +import background from '../../assets/transparent-grid-background.svg?url'; const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = ( props, diff --git a/src/components/screen-view.tsx b/src/components/led-strip-configuration/screen-view.tsx similarity index 100% rename from src/components/screen-view.tsx rename to src/components/led-strip-configuration/screen-view.tsx diff --git a/src/index.tsx b/src/index.tsx index adf4f16..57c5f41 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,5 +3,13 @@ import { render } from "solid-js/web"; import "./styles.css"; import App from "./App"; +import { Router } from '@solidjs/router'; -render(() => , document.getElementById("root") as HTMLElement); +render( + () => ( + + + + ), + document.getElementById('root') as HTMLElement, +);