feat: 支持列出显示器。
This commit is contained in:
@ -6,6 +6,7 @@ import { invoke } from '@tauri-apps/api';
|
||||
import { setLedStripStore } from './stores/led-strip.store';
|
||||
import { LedStripConfigContainer } from './models/led-strip-config';
|
||||
import { InfoIndex } from './components/info/info-index';
|
||||
import { DisplayStateIndex } from './components/displays/display-state-index';
|
||||
|
||||
function App() {
|
||||
createEffect(() => {
|
||||
@ -23,11 +24,13 @@ function App() {
|
||||
<div>
|
||||
<div>
|
||||
<a href="/info">基本信息</a>
|
||||
<a href="/displays">显示器信息</a>
|
||||
<a href="/led-strips-configuration">灯条配置</a>
|
||||
<a href="/white-balance">白平衡</a>
|
||||
</div>
|
||||
<Routes>
|
||||
<Route path="/info" component={InfoIndex} />
|
||||
<Route path="/displays" component={DisplayStateIndex} />
|
||||
<Route path="/led-strips-configuration" component={LedStripConfiguration} />
|
||||
<Route path="/white-balance" component={WhiteBalance} />
|
||||
</Routes>
|
||||
|
36
src/components/displays/display-state-card.tsx
Normal file
36
src/components/displays/display-state-card.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { Component, ParentComponent } from 'solid-js';
|
||||
import { DisplayState } from '../../models/display-state.model';
|
||||
|
||||
type DisplayStateCardProps = {
|
||||
state: DisplayState;
|
||||
};
|
||||
|
||||
type ItemProps = {
|
||||
label: string;
|
||||
};
|
||||
|
||||
const Item: ParentComponent<ItemProps> = (props) => {
|
||||
return (
|
||||
<dl class="flex">
|
||||
<dt class="w-20">{props.label}</dt>
|
||||
<dd class="flex-auto">{props.children}</dd>
|
||||
</dl>
|
||||
);
|
||||
};
|
||||
|
||||
export const DisplayStateCard: Component<DisplayStateCardProps> = (props) => {
|
||||
return (
|
||||
<section class="p-2 rounded shadow">
|
||||
<Item label="Brightness">{props.state.brightness}</Item>
|
||||
<Item label="Max Brightness">{props.state.max_brightness}</Item>
|
||||
<Item label="Min Brightness">{props.state.min_brightness}</Item>
|
||||
<Item label="Contrast">{props.state.contrast}</Item>
|
||||
<Item label="Max Contrast">{props.state.max_contrast}</Item>
|
||||
<Item label="Min Contrast">{props.state.min_contrast}</Item>
|
||||
<Item label="Max Mode">{props.state.max_mode}</Item>
|
||||
<Item label="Min Mode">{props.state.min_mode}</Item>
|
||||
<Item label="Mode">{props.state.mode}</Item>
|
||||
<Item label="Last Modified At">{props.state.last_modified_at.toISOString()}</Item>
|
||||
</section>
|
||||
);
|
||||
};
|
52
src/components/displays/display-state-index.tsx
Normal file
52
src/components/displays/display-state-index.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Component, For, createEffect, createSignal } from 'solid-js';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import debug from 'debug';
|
||||
import { invoke } from '@tauri-apps/api';
|
||||
import { DisplayState, RawDisplayState } from '../../models/display-state.model';
|
||||
import { DisplayStateCard } from './display-state-card';
|
||||
|
||||
const logger = debug('app:components:displays:display-state-index');
|
||||
|
||||
export const DisplayStateIndex: Component = () => {
|
||||
const [states, setStates] = createSignal<DisplayState[]>([]);
|
||||
|
||||
createEffect(() => {
|
||||
const unlisten = listen<RawDisplayState[]>('displays_changed', (ev) => {
|
||||
logger('displays_changed', ev);
|
||||
setStates(
|
||||
ev.payload.map((it) => ({
|
||||
...it,
|
||||
last_modified_at: new Date(it.last_modified_at.secs_since_epoch * 1000),
|
||||
})),
|
||||
);
|
||||
});
|
||||
|
||||
invoke<RawDisplayState[]>('get_displays').then((states) => {
|
||||
logger('get_displays', states);
|
||||
setStates(
|
||||
states.map((it) => ({
|
||||
...it,
|
||||
last_modified_at: new Date(it.last_modified_at.secs_since_epoch * 1000),
|
||||
})),
|
||||
);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlisten.then((unlisten) => unlisten());
|
||||
};
|
||||
});
|
||||
return (
|
||||
<ol class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-2 gap-2">
|
||||
<For each={states()}>
|
||||
{(state, index) => (
|
||||
<li class="bg-slate-50 text-gray-800 relative border-2 border-slate-50 hover:border-sky-300 focus:border-sky-300 transition">
|
||||
<DisplayStateCard state={state} />
|
||||
<span class="absolute left-2 -top-3 bg-sky-300 text-white px-1 py-0.5 text-xs rounded-sm font-mono">
|
||||
#{index() + 1}
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ol>
|
||||
);
|
||||
};
|
16
src/models/display-state.model.ts
Normal file
16
src/models/display-state.model.ts
Normal file
@ -0,0 +1,16 @@
|
||||
export type DisplayState = {
|
||||
brightness: number;
|
||||
max_brightness: number;
|
||||
min_brightness: number;
|
||||
contrast: number;
|
||||
max_contrast: number;
|
||||
min_contrast: number;
|
||||
mode: number;
|
||||
max_mode: number;
|
||||
min_mode: number;
|
||||
last_modified_at: Date;
|
||||
};
|
||||
|
||||
export type RawDisplayState = DisplayState & {
|
||||
last_modified_at: { secs_since_epoch: number };
|
||||
};
|
Reference in New Issue
Block a user