76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { useCallback, useState } from 'react';
|
|
import tw from 'twin.macro';
|
|
import { invoke } from '@tauri-apps/api/tauri';
|
|
import './App.css';
|
|
import { Configurator } from './configurator/configurator';
|
|
import { ButtonSwitch } from './commons/components/button';
|
|
import { fillParentCss } from './styles/fill-parent';
|
|
|
|
type Mode = 'Flowing' | 'Follow' | null;
|
|
|
|
localStorage.setItem('debug', '*');
|
|
|
|
function App() {
|
|
const [screenshots, setScreenshots] = useState<string[]>([]);
|
|
const [ledStripColors, setLedStripColors] = useState<string[]>([]);
|
|
const [currentMode, setCurrentMode] = useState<Mode>(null);
|
|
|
|
async function takeSnapshot() {
|
|
const base64TextList: string[] = await invoke('take_snapshot');
|
|
|
|
setScreenshots(base64TextList.map((text) => `data:image/webp;base64,${text}`));
|
|
}
|
|
|
|
const getLedStripColors = useCallback(async () => {
|
|
setLedStripColors(await invoke('get_led_strip_colors'));
|
|
}, []);
|
|
|
|
const switchCurrentMode = useCallback(
|
|
async (targetMode: Mode) => {
|
|
console.log(targetMode, currentMode, currentMode === targetMode);
|
|
if (currentMode === targetMode) {
|
|
await invoke('play_mode', { targetMode: 'None' });
|
|
setCurrentMode(null);
|
|
} else {
|
|
await invoke('play_mode', { targetMode });
|
|
setCurrentMode(targetMode);
|
|
}
|
|
console.log(targetMode, currentMode, currentMode === targetMode);
|
|
},
|
|
[currentMode, setCurrentMode],
|
|
);
|
|
|
|
return (
|
|
<div css={[fillParentCss]} tw="box-border flex flex-col">
|
|
<div tw="flex justify-between">
|
|
{ledStripColors.map((it) => (
|
|
<span tw="h-8 flex-auto" style={{ backgroundColor: it }}></span>
|
|
))}
|
|
</div>
|
|
|
|
<div tw="flex gap-1 justify-center w-screen overflow-hidden">
|
|
{screenshots.map((screenshot) => (
|
|
<div tw="flex-auto">
|
|
<img src={screenshot} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div tw="flex gap-5 justify-center">
|
|
<ButtonSwitch onClick={() => takeSnapshot()}>Take Snapshot</ButtonSwitch>
|
|
<ButtonSwitch onClick={() => getLedStripColors()}>Get Colors</ButtonSwitch>
|
|
<ButtonSwitch onClick={() => switchCurrentMode('Flowing')}>
|
|
Flowing Light
|
|
</ButtonSwitch>
|
|
<ButtonSwitch onClick={() => switchCurrentMode('Follow')}>Follow</ButtonSwitch>
|
|
</div>
|
|
|
|
<div css={[fillParentCss]}>
|
|
<Configurator />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|