chore: GUI 增加路由。
This commit is contained in:
parent
782f3bf029
commit
932cc78bcf
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@ -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"
|
||||
}
|
||||
}
|
18
.vscode/tasks.json
vendored
18
.vscode/tasks.json
vendored
@ -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"
|
||||
|
@ -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",
|
||||
|
@ -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'}
|
||||
|
107
src/App.tsx
107
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<string>('list_display_info').then((displays) => {
|
||||
setDisplayStore({
|
||||
displays: JSON.parse(displays),
|
||||
});
|
||||
});
|
||||
invoke<LedStripConfigContainer>('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<Uint8ClampedArray>('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<Uint8ClampedArray>('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 (
|
||||
<div>
|
||||
<LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
|
||||
<LedStripPartsSorter />
|
||||
<DisplayListContainer>
|
||||
{displayStore.displays.map((display) => {
|
||||
return <DisplayView display={display} />;
|
||||
})}
|
||||
</DisplayListContainer>
|
||||
</LedStripConfigurationContext.Provider>
|
||||
<div>
|
||||
<a href="/led-strips-configuration">灯条配置</a>
|
||||
<a href="/white-balance">白平衡</a>
|
||||
</div>
|
||||
<Routes>
|
||||
<Route path="/led-strips-configuration" component={LedStripConfiguration} />
|
||||
<Route path="/white-balance" component={LedStripConfiguration} />
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -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;
|
@ -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;
|
@ -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';
|
@ -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<string>('list_display_info').then((displays) => {
|
||||
setDisplayStore({
|
||||
displays: JSON.parse(displays),
|
||||
});
|
||||
});
|
||||
invoke<LedStripConfigContainer>('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<Uint8ClampedArray>('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<Uint8ClampedArray>('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 (
|
||||
<div>
|
||||
<LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
|
||||
<LedStripPartsSorter />
|
||||
<DisplayListContainer>
|
||||
{displayStore.displays.map((display) => {
|
||||
return <DisplayView display={display} />;
|
||||
})}
|
||||
</DisplayListContainer>
|
||||
</LedStripConfigurationContext.Provider>
|
||||
</div>
|
||||
);
|
||||
};
|
@ -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;
|
@ -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,
|
@ -3,5 +3,13 @@ import { render } from "solid-js/web";
|
||||
|
||||
import "./styles.css";
|
||||
import App from "./App";
|
||||
import { Router } from '@solidjs/router';
|
||||
|
||||
render(() => <App />, document.getElementById("root") as HTMLElement);
|
||||
render(
|
||||
() => (
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
),
|
||||
document.getElementById('root') as HTMLElement,
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user