Leahnaya/slidershim
1
0
Fork 0
mirror of https://github.com/4yn/slidershim.git synced 2026-09-10 17:55:36 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

basic ui

Browse Source
This commit is contained in:
4yn
2022-01-28 00:31:41 +08:00
parent 08186c0fc1
commit 511a6a605d
6 changed files with 320 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/App.svelte
View File

@@ -1,30 +1,148 @@
<script lang="ts">
export let name: string;
import { onMount } from "svelte";
import { emit, listen } from "@tauri-apps/api/event";
import Preview from "./Preview.svelte"
let deviceMode = "none";
let outputMode = "none";
let lightingMode = "none";
let keyboardSensitivity = 20;
let websocketOutputUrl = "http://localhost:3000";
let websocketLedUrl = "http://localhost:3001";
onMount(async () => {
await listen("showConfig", (event) => {
const payload: any = event.payload;
deviceMode = payload.deviceMode;
outputMode = payload.outputMode;
lightingMode = payload.lightingMode;
keyboardSensitivity = payload.keyboardSensitivity;
websocketOutputUrl = payload.websocketOutputUrl;
websocketLedUrl = payload.websocketLedUrl;
});
});
async function setConfig() {
console.log("Updating config");
await emit("setConfig", JSON.stringify({
deviceMode,
outputMode,
lightingMode,
keyboardSensitivity,
websocketOutputUrl,
websocketLedUrl
}));
console.log("Done");
}
async function hide() {
await emit("hide", "")
}
async function quit() {
await emit("quit", "")
}
</script>
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
<main class="main">
<div class="row">
<div class="header">
slidershim
<!-- slidershim by @4yn -->
</div>
</div>
<div class="row">
<Preview />
</div>
<div class="row">
<div class="label">Input Device</div>
<div class="input">
<select bind:value={deviceMode}>
<option value="none">None</option>
<option value="tasoller">GAMO2 Tasoller, HID Firmware</option>
<option value="yuancon">Yuancon Laverita, HID Firmware</option>
<option value="brokenithm">Brokenithm</option>
<option value="brokenithm-ground">Brokenithm, Ground only</option>
</select>
</div>
</div>
<div class="row">
<div class="label">Output Mode</div>
<div class="input">
<select bind:value={outputMode}>
<option value="none">None</option>
<option value="kb-32-tasoller">Keyboard 32-zone, Tasoller Layout</option
>
<option value="kb-32-yuancon">Keyboard 32-zone, Yuancon Layout</option>
<option value="kb-6-deemo">Keyboard 6-zone, Deemo Layout</option>
<option value="websocket">Websocket</option>
</select>
</div>
</div>
{#if outputMode.slice(0, 2) === "kb"}
<div class="row">
<div class="label">Sensitivity</div>
<div class="input">
<input
type="number"
min="1"
max="255"
step="1"
bind:value={keyboardSensitivity}
/>
</div>
</div>
<div class="row">
<div class="label"></div>
<div class="input">
<input
type="range"
min="1"
max="255"
step="1"
bind:value={keyboardSensitivity}
/>
</div>
</div>
{/if}
{#if outputMode === "websocket"}
<div class="row">
<div class="label">Output URL</div>
<div class="input">
<input placeholder="URL" bind:value={websocketOutputUrl} />
</div>
</div>
{/if}
<div class="row">
<div class="label">LED Mode</div>
<div class="input">
<select bind:value={lightingMode}>
<option value="none">None</option>
<option value="reactive-4">Reactive, 4-Zone</option>
<option value="reactive-8">Reactive, 8-Zone</option>
<option value="reactive-16">Reactive, 16-Zone</option>
<option value="attract">Rainbow Attract Mode</option>
<option value="test">LED Test</option>
<option value="websocket">Websocket</option>
</select>
</div>
</div>
{#if lightingMode === "websocket"}
<div class="row">
<div class="label">LED URL</div>
<div class="input">
<input placeholder="URL" bind:value={websocketLedUrl} />
</div>
</div>
{/if}
<div class="row">
<button on:click={async () => await setConfig()}>Apply</button>
<button on:click={async () => await hide()}>Hide</button>
<button on:click={async () => await quit()}>Quit</button>
</div>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4em;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>
</style>

35
src/Preview.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
let topDatas = Array(16).fill(0);
let botDatas = Array(16).fill(0);
let ledDatas = Array(31).fill(0).map((_, idx) => ({
color: !!(idx % 2) ? "f0f" : "ff0",
spec: idx % 2
}))
</script>
<main class="preview">
<div class="air"></div>
<div class="ground">
<div class="ground-led">
<div class="ground-row">
<div class="ground-led-2"></div>
{#each ledDatas as {color, spec}, idx (idx)}
<div class={`ground-led-${spec}`} style={`background-color: #${color}`}></div>
{/each}
<div class="ground-led-2"></div>
</div>
</div>
<div class="ground-btn">
<div class="ground-row">
{#each topDatas as topData, idx (idx)}
<div class="ground-data">{topData}</div>
{/each}
</div>
<div class="ground-row">
{#each botDatas as botData, idx (idx)}
<div class="ground-data">{botData}</div>
{/each}
</div>
</div>
</div>
</main>

5
src/main.ts
View File

@@ -1,10 +1,7 @@
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
target: document.body
});
export default app;