From 511a6a605d7668e73c6dc4fb74845b22f2653ad2 Mon Sep 17 00:00:00 2001
From: 4yn <changsiyuan1999@gmail.com>
Date: Fri, 28 Jan 2022 00:31:41 +0800
Subject: [PATCH] basic ui

---
 public/global.css         | 143 +++++++++++++++++++++++---------
 src-tauri/src/main.rs     |  49 +++++++----
 src-tauri/tauri.conf.json |   4 +-
 src/App.svelte            | 166 ++++++++++++++++++++++++++++++++------
 src/Preview.svelte        |  35 ++++++++
 src/main.ts               |   5 +-
 6 files changed, 320 insertions(+), 82 deletions(-)
 create mode 100644 src/Preview.svelte

diff --git a/public/global.css b/public/global.css
index bb28a94..7c7a253 100644
--- a/public/global.css
+++ b/public/global.css
@@ -1,63 +1,132 @@
 html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  background-color: #222;
+}
+
+* {
+  box-sizing: border-box;
+  color: #ddd;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 1rem;
+  user-select: none;
 }
 
 body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  margin: 0;
+  padding: 1rem;
 }
 
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
+.main {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
 }
 
-a:hover {
-	text-decoration: underline;
+.header {
+  font-size: 2rem;
+  font-weight: 500;
 }
 
-a:visited {
-	color: rgb(0,80,160);
+.row, .row-2 {
+  margin: 0 0 0.5rem 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  justify-content: stretch;
 }
 
-label {
-	display: block;
+.row .label {
+  flex: 1 1 0;
 }
 
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	-webkit-padding: 0.4em 0;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
+.row .input {
+  flex: 2 2 0;
 }
 
-input:disabled {
-	color: #ccc;
+input, select {
+  width: 100%;
+  background-color: #444;
+  color: #ddd;
+  border: none;
 }
 
 button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
+  font-size: 1rem;
+  margin: 0.25rem;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  border: none;
+  background-color: #444;
 }
 
-button:disabled {
-	color: #999;
+button:hover {
+  background: #555;
 }
 
-button:not(:disabled):active {
-	background-color: #ddd;
+button:active {
+  background: #777;
 }
 
-button:focus {
-	border-color: #666;
+.preview {
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
 }
+
+.ground {
+  position: relative;
+  height: 3rem;
+}
+
+.ground-btn, .ground-led {
+  height: 3rem;
+  position:absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.ground-row {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: space-between;
+}
+
+.ground-btn > .ground-row > div {
+  text-align: center;
+  flex: 1 0 0;
+}
+
+.ground-led-0 {
+  flex: 1 0 0;
+}
+
+.ground-led-1 {
+  flex: 0.4rem 0 0;
+}
+
+.ground-led-2 {
+  flex: 0.2rem 0 0;
+}
+
+.ground-btn {
+  background-color: #0008;
+}
+
+.ground-data {
+  padding: 0.1rem 0;
+  font-size: 0.8rem;
+}
\ No newline at end of file
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 241cca0..645c76e 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -4,9 +4,21 @@
 )]
 
 use tauri::{
-  CustomMenuItem, Event, Manager, SystemTray, SystemTrayEvent, SystemTrayMenu,
+  AppHandle, CustomMenuItem, Event, Manager, Runtime, SystemTray, SystemTrayEvent, SystemTrayMenu,
 };
 
+fn show_window<R: Runtime>(handle: &AppHandle<R>) {
+  handle.get_window("main").unwrap().show().ok();
+}
+
+fn hide_window<R: Runtime>(handle: &AppHandle<R>) {
+  handle.get_window("main").unwrap().hide().ok();
+}
+
+fn quit_app() {
+  std::process::exit(0);
+}
+
 fn main() {
   tauri::Builder::default()
     .system_tray(
@@ -17,26 +29,20 @@ fn main() {
           .add_item(CustomMenuItem::new("quit".to_string(), "Quit")),
       ),
     )
-    .on_system_tray_event(|app, event| match event {
+    .on_system_tray_event(|app_handle, event| match event {
       SystemTrayEvent::LeftClick {
         position: _,
         size: _,
         ..
       } => {
-        app
-            .get_window("main")
-            .unwrap()
-            .show().ok();
+        show_window(app_handle);
       }
       SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {
         "show" => {
-          app
-            .get_window("main")
-            .unwrap()
-            .show().ok();
+          show_window(app_handle);
         }
         "quit" => {
-          std::process::exit(0);
+          quit_app();
         }
         _ => {
           panic!("Unexpected menu item click {}", id.as_str());
@@ -44,15 +50,28 @@ fn main() {
       },
       _ => {}
     })
+    .setup(|app| {
+      app.listen_global("setConfig", |event| {
+        println!("Setting config to {}", event.payload().unwrap());
+      });
+
+      let handle = app.handle();
+      app.listen_global("hide", move |_| {
+        hide_window(&handle);
+      });
+
+      app.listen_global("quit", |_| {
+        quit_app();
+      });
+
+      Ok(())
+    })
     .build(tauri::generate_context!())
     .expect("error while running tauri application")
     .run(|app_handle, event| match event {
       Event::CloseRequested { label, api, .. } if label.as_str() == "main" => {
         api.prevent_close();
-        app_handle
-          .get_window("main")
-          .unwrap()
-          .hide().ok();
+        hide_window(app_handle);
       }
       _ => {}
     });
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 6afa19d..2041763 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -54,8 +54,8 @@
     "windows": [
       {
         "title": "slidershim",
-        "width": 800,
-        "height": 600,
+        "width": 500,
+        "height": 400,
         "resizable": false,
         "fullscreen": false
       }
diff --git a/src/App.svelte b/src/App.svelte
index b95e066..90a0242 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -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>
\ No newline at end of file
+</style>
diff --git a/src/Preview.svelte b/src/Preview.svelte
new file mode 100644
index 0000000..dd81eff
--- /dev/null
+++ b/src/Preview.svelte
@@ -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>
diff --git a/src/main.ts b/src/main.ts
index d6cacbb..4c473fa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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;
\ No newline at end of file