display-ambient-light/desktop
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: GUI 控制的，LED 灯条颜色预览。

Browse Source
This commit is contained in:
Ivan Li
2023-03-26 10:48:50 +08:00
parent 3ede04c31b
commit 1a3102257e
23 changed files with 1067 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/display-view.tsx
View File

@ -1,7 +1,10 @@
import { Component, createMemo } from 'solid-js';
import { LedStripConfigOfBorders } from '../models/display-config';
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';
type DisplayViewProps = {
@ -19,6 +22,12 @@ export const DisplayView: Component<DisplayViewProps> = (props) => {
height: `${size().height}px`,
width: `${size().width}px`,
}));
const ledStripConfigs = createMemo(() => {
console.log('ledStripConfigs', ledStripStore.strips);
return ledStripStore.strips.filter((c) => c.display_id === props.display.id);
});
return (
<section
class="absolute bg-gray-300 grid grid-cols-[16px,auto,16px] grid-rows-[16px,auto,16px] overflow-hidden"
@ -35,10 +44,22 @@ export const DisplayView: Component<DisplayViewProps> = (props) => {
display={props.display}
class="absolute bg-slate-50/10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded backdrop-blur w-1/3 min-w-[300px] text-black"
/>
<div class="row-start-1 col-start-2">Test</div>
<div class="row-start-2 col-start-1">Test</div>
<div class="row-start-2 col-start-3">Test</div>
<div class="row-start-3 col-start-2">Test</div>
<LedStripPart
class="row-start-1 col-start-2 flex-row"
config={ledStripConfigs().find((c) => c.border === 'Top')}
/>
<LedStripPart
class="row-start-2 col-start-1 flex-col"
config={ledStripConfigs().find((c) => c.border === 'Left')}
/>
<LedStripPart
class="row-start-2 col-start-3 flex-col"
config={ledStripConfigs().find((c) => c.border === 'Right')}
/>
<LedStripPart
class="row-start-3 col-start-2 flex-row"
config={ledStripConfigs().find((c) => c.border === 'Bottom')}
/>
</section>
);
};