basic app outline

README.md

···
-# Tauri + Solid + Typescript
-
-This template should help get you started developing with Tauri, Solid and Typescript in Vite.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)

src-tauri/Cargo.lock

···
 name = "VRCMacros"
 version = "0.1.0"
 dependencies = [
+ "anyhow",
  "dirs",
  "serde",
  "serde_json",
···
 
 [[package]]
 name = "anyhow"
-version = "1.0.98"
+version = "1.0.99"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e16d2d3311acee920a9eb8d33b8cbc1787ce4a264e85f964c2404b969bdcd487"
+checksum = "b0674a1ddeecb70197781e945de4b3b8ffb61fa939a5597bcf48503737663100"
 
 [[package]]
 name = "async-broadcast"

src-tauri/Cargo.toml

···
 sqlx = { version = "0.8.6", features = [ "sqlite", "runtime-tokio" ] }
 tokio = { version = "1.47.0", features = [ "macros" ] }
 dirs = "6.0.0"
+anyhow = "1.0.99"
 

src-tauri/src/lib.rs

···
 use std::fs;
 
-use sqlx::{migrate::MigrateDatabase, Sqlite, SqlitePool};
+use sqlx::{ migrate::MigrateDatabase, Sqlite, SqlitePool };
 
-use crate::utils::config::Config;
+use crate::{ setup::setup, utils::config::Config };
 
+mod setup;
 mod utils;
+mod osc;
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 #[tokio::main]
···
   if !db_file.exists(){ Sqlite::create_database(db_file.to_str().unwrap()).await.unwrap(); }
 
   let conf_file = container_folder.join("VRCMacros.json");
-  if !conf_file.exists(){ fs::write(&conf_file, "{ \"setup_complete\": false }").unwrap() }
+  if !conf_file.exists(){ fs::write(&conf_file, "{}").unwrap() }
 
   let pool = SqlitePool::connect(db_file.to_str().unwrap()).await.unwrap();
   let conf = Config::new(conf_file);
···
     .invoke_handler(tauri::generate_handler![])
     .manage(pool)
     .manage(conf)
+    .setup(| app | {
+      setup(app);
+
+      Ok(())
+    })
     .run(tauri::generate_context!())
     .expect("error while running tauri application");
 }

src-tauri/src/osc.rs

···
 
 use std::{ net::UdpSocket, sync::mpsc::Sender };
 
-#[derive(Debug, Clone)]
+use serde::Serialize;
+
+#[derive(Debug, Clone, Serialize)]
 pub enum OSCValue{
   Int(i32),
   Float(f32),
···
   String(String),
 }
 
-#[derive(Debug)]
+#[derive(Debug, Clone, Serialize)]
 pub struct OSCMessage{
   pub address: String,
   pub values: Vec<OSCValue>
 }
 
+// TODO: implement osc bundles
 pub fn start_server( sender: Sender<OSCMessage>, addr: &str ) {
   let socket = UdpSocket::bind(addr).unwrap();
 

src-tauri/src/setup.rs

···
+use std::sync;
+
+use tauri::{ App, Emitter, Manager };
+
+use crate::osc;
+
+pub fn setup( app: &mut App ){
+  let window = app.get_webview_window("main").unwrap();
+
+  let ( sender, receiver ) = sync::mpsc::channel();
+
+  tokio::spawn(async move {
+    osc::start_server(sender, "127.0.0.1:9001");
+  });
+
+  tokio::spawn(async move {
+    loop {
+      let message = receiver.recv().unwrap();
+
+
+
+      window.emit("osc-message", message).unwrap();
+    }
+  });
+}

src-tauri/src/utils/config.rs

···
 use std::{ collections::HashMap, fs, path::PathBuf, sync::Mutex };
 
 use serde::{ Deserialize, Serialize };
-use serde_json::{json, Value};
+use serde_json::Value;
 
 #[derive(Clone, Deserialize, Serialize)]
 pub enum ConfigValue{

src/App.css

···
 
 h1, h2, h3, h4, h5, h6, p{
   margin: 0;
+  font-weight: 500;
 }
 
-div[app-centre]{
+div[app-carousel]{
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
+  top: 10px;
+  left: 220px;
+  width: calc(100vw - 230px);
+  height: calc(100vh - 20px);
+  overflow: hidden;
+}
+
+div[app-page]{
+  width: calc(100vw - 230px);
+  height: calc(100vh - 20px);
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 div[app-button]{
···
 
 div[app-col]{
   display: flex;
-  justify-content: center;
-  align-items: center;
+}
+
+div[app-col] > div{
+  width: 50%;
 }

src/App.tsx

···
-import { onMount } from "solid-js";
 import "./App.css";
 
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { listen } from "@tauri-apps/api/event";
+
+import { Sidebar } from "./Components/Sidebar";
+import { Actions } from "./Components/Actions";
+import { Relays } from "./Components/Relays";
+import { animate } from "animejs";
+import { Settings } from "./Components/Settings";
+import { Debug } from "./Components/Debug";
+
 let App = () => {
-  onMount(() => {
+  let [ page, setPage ] = createSignal(0);
+  let carousel!: HTMLDivElement;
+
+  onMount(async () => {
 
   });
+
+  createEffect(() => {
+    let pagenum = page();
+    animate(carousel.children, { translateY: '-' + ( 100 * pagenum ) + '%', ease: 'outElastic(.1, .7)', duration: 500 });
+  })
 
   return (
     <>
+      <Sidebar setPage={setPage} />
 
+      <div app-carousel ref={carousel}>
+        <Actions />
+        <Relays />
+        <Debug page={page} />
+        <Settings />
+      </div>
     </>
   );
 }

src/Components/Actions.tsx

···
+import './Actions.css';
+
+export let Actions = () => {
+  return (
+    <div app-page>
+      <div app-col>
+        <div><h1>Actions</h1></div>
+        <div app-button style={{ width: 'fit-content', "margin-left": '50%' }}>+</div>
+      </div>
+
+      <div>
+
+      </div>
+    </div>
+  )
+}

src/Components/Debug.css

···
+div[app-debug-el]{
+  padding: 10px;
+  background: #272e44;
+  margin: 10px;
+  border-radius: 5px;
+  box-shadow: #00ccff 0 0 10px;
+  transition: 0.5s;
+}

src/Components/Debug.tsx

···
+import './Debug.css';
+
+import { createEffect, onCleanup, onMount } from 'solid-js';
+import { listen, UnlistenFn } from '@tauri-apps/api/event';
+import { OSCMessage, OSCValue } from '../Structs/OSCMessage';
+
+let formatValuesForDebug = ( values: OSCValue[] ): string => {
+  let text = '';
+
+  for(let value of values){
+    if(value.Boolean !== undefined)
+      text += ' Boolean: ' + value.Boolean;
+    else if(value.Float !== undefined)
+      text += ' Float: ' + value.Float.toFixed(6);
+    else if(value.Int !== undefined)
+      text += ' Int: ' + value.Int;
+    else if(value.String !== undefined)
+      text += ' String: ' + value.String;
+  }
+
+  return text.trimStart();
+}
+
+export interface DebugProps{
+  page: () => number
+}
+
+export let Debug = ( props: DebugProps ) => {
+  let debugContainer!: HTMLDivElement;
+
+  let debugEls: any = {};
+
+  let isListening = false;
+  let unlisten: UnlistenFn;
+
+  let stopListening = () => {
+    if(!isListening)return;
+    isListening = false;
+
+    unlisten();
+  }
+
+  let startListening = async () => {
+    if(isListening)return;
+    isListening = true;
+
+    unlisten = await listen<OSCMessage>('osc-message', ( ev ) => {
+      let el = debugEls[ev.payload.address];
+      if(el){
+        el.style.boxShadow = '#00ccff 0 0 10px';
+        debugContainer.insertBefore(el, debugContainer.firstChild);
+
+        el.innerHTML = `<div>${ ev.payload.address }</div><div>${ formatValuesForDebug(ev.payload.values) }</div>`;
+        setTimeout(() => { el.style.boxShadow = '#00ccff 0 0 0px'; })
+      } else{
+        el = <div app-debug-el app-col><div>{ ev.payload.address }</div><div>{ formatValuesForDebug(ev.payload.values) }</div></div> as Node;
+
+        el.style.boxShadow = '#00ccff 0 0 10px';
+        debugContainer.insertBefore(el, debugContainer.firstChild);
+
+        setTimeout(() => { el.style.boxShadow = '#00ccff 0 0 0px'; })
+        debugEls[ev.payload.address] = el;
+      }
+    })
+  }
+
+  onMount(() => {
+    createEffect(() => {
+      if(props.page() === 2)
+        startListening();
+      else
+        stopListening();
+    });
+  });
+
+  onCleanup(() => {
+    stopListening();
+  });
+
+  return (
+    <div app-page>
+      <h1>Debug</h1>
+
+      <div ref={debugContainer}>
+
+      </div>
+    </div>
+  )
+}

src/Components/Relays.tsx

···
+import './Relays.css';
+
+export let Relays = () => {
+  return (
+    <div app-page>
+      <h1>Relays</h1>
+    </div>
+  )
+}

src/Components/Settings.tsx

···
+import './Settings.css';
+
+export let Settings = () => {
+  return (
+    <div app-page>
+      <h1>Settings</h1>
+    </div>
+  )
+}

src/Components/Sidebar.css

···
+div[app-sidebar]{
+  position: fixed;
+  top: 10px;
+  left: 10px;
+
+  height: calc(100vh - 20px);
+  width: 200px;
+  padding: 0px;
+
+  background: #272e44;
+  border-radius: 5px;
+}
+
+div[app-sidebar-tab]{
+  padding: 10px;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: 0.1s;
+  margin: 10px;
+  border-radius: 5px;
+}
+
+div[app-sidebar-tab]:hover{
+  background: #5b6ca5;
+}
+
+div[app-sidebar-tab-dropped]{
+  position: absolute;
+  width: calc(100% - 20px);
+  bottom: 0px;
+}

src/Components/Sidebar.tsx

···
+import './Sidebar.css'
+
+export interface SidebarProps{
+  setPage: ( page: number ) => number
+}
+
+export let Sidebar = ( props: SidebarProps ) => {
+  return (
+    <>
+      <div app-sidebar>
+        <div app-sidebar-tab onClick={() => props.setPage(0)}>Actions</div>
+        <div app-sidebar-tab onClick={() => props.setPage(1)}>Relays</div>
+        <div app-sidebar-tab onClick={() => props.setPage(2)}>Debug</div>
+
+        <div app-sidebar-tab app-sidebar-tab-dropped onClick={() => props.setPage(3)}>Settings</div>
+      </div>
+    </>
+  )
+}

src/Structs/OSCMessage.ts

···
+export interface OSCMessage{
+  address: string,
+  values: OSCValue[]
+}
+
+export interface OSCValue{
+  Float?: number,
+  Int?: number,
+  Boolean?: boolean,
+  String?: string
+}