Merge branch 'add-splash-screen'

README.md

@@ -69,8 +69,12 @@ to get the development build up and running.
 
 ### Installation steps
 
-1. Clone the repository. The `client` folder contains the vast majority of the
-   source code for the desktop app.
+1. Clone the repository. The `client` directory contains the vast majority of
+   the source code for the desktop app, while the `splash-screen` directory
+   contains the source code for the splash screen displayed before the app
+   loads. You don't have to touch anything in `splash-screen` unless you want to
+   modify it, in which case check the README in `splash-screen` for more
+   information.
 2. `cd` into the `client` folder. The configuration files and `package.json`,
    This is where stuff like `package.json` and configuration files for our
    various tooling are housed. The `client/src-tauri` directory contains the

client/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

client/public/site.webmanifest

@@ -0,0 +1,14 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

client/src-tauri/src/close_splashscreen.rs

@@ -0,0 +1,17 @@
+use tauri::{Manager, Window};
+// Create the command:
+// This command must be async so that it doesn't run on the main thread.
+#[tauri::command]
+pub async fn close_splashscreen(window: Window) {
+    tracing::info!("Closing splashscreen");
+    // Close splashscreen
+    match window.get_window("splashscreen") {
+        Some(window) => window.close().unwrap(),
+        None => tracing::info!("Couldn't find splashscreen window"),
+    }
+
+    match window.get_window("main") {
+        Some(window) => window.show().unwrap(),
+        None => tracing::info!("Couldn't find main window"),
+    }
+}

client/src-tauri/src/main.rs

@@ -4,6 +4,8 @@
 use tauri::Manager;
 mod telemetry;
 use tracing_subscriber::FmtSubscriber;
+mod close_splashscreen;
+use close_splashscreen::close_splashscreen;
 
 #[derive(Clone, serde::Serialize)]
 struct Payload {
@@ -34,6 +36,7 @@ fn main() {
 
                 Ok(())
             })
+            .invoke_handler(tauri::generate_handler![close_splashscreen])
             .run(tauri::generate_context!())
             .expect("failed to run app")
     })

client/src-tauri/tauri.conf.json

@@ -1,8 +1,8 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "build": {
-    "beforeBuildCommand": "npm run build",
-    "beforeDevCommand": "npm run dev",
+    "beforeBuildCommand": "pnpm build",
+    "beforeDevCommand": "pnpm dev",
     "devPath": "http://localhost:5173",
     "distDir": "../dist"
   },
@@ -62,7 +62,21 @@
         "height": 600,
         "resizable": true,
         "title": "Jankboard 2",
-        "width": 800
+        "width": 800,
+        "visible": false,
+        "label": "main"
+      },
+      {
+        "fullscreen": false,
+        "maximized": true,
+        "decorations": false,
+        "titleBarStyle": "Transparent",
+        "height": 600,
+        "resizable": true,
+        "width": 800,
+        "url": "splashscreen.html",
+        "label": "splashscreen",
+        "visible": true
       }
     ]
   }

client/src/App.svelte

@@ -9,13 +9,17 @@
   import { onDestroy, onMount } from 'svelte'
   import { Toaster } from 'svelte-french-toast'
   import { initializationSequence } from './lib/Sequences/sequences'
-  import Loading from './lib/Loading/Loading.svelte'
   import { settingsStore } from './lib/stores/settingsStore'
   import getSettings from './lib/utils/getSettings'
+  import hideSplashscreen from './lib/utils/hideSplashscreen'
 
   let activeApp: App = 'camera'
+  // fake loading splash screen to look cool if the model loads too fast
+  let fakeLoadingDone = false
+  // and the real one, to wait for massive robot model to load if it's slow
+  let realLoadingDone = false
+  let started = false
 
-  let loading = $settingsStore.fastStartup ? false : true
   let unlistenAll: () => void
 
   onMount(() => {
@@ -28,28 +32,39 @@
     initializeTelemetry().then((unsubFunction: () => void) => {
       unlistenAll = unsubFunction
     })
-    setTimeout(() => {
-      loading = false
-      initializationSequence()
-    }, 3000)
 
     settingsStore.subscribe((value) => {
       localStorage.setItem('settings', JSON.stringify(value))
     })
+
+    setTimeout(() => {
+      fakeLoadingDone = true
+    }, 3000)
   })
 
   onDestroy(() => {
     unlistenAll && unlistenAll()
   })
+
+  const start = () => {
+    hideSplashscreen()
+    initializationSequence()
+  }
+
+  const onVisualizationLoaded = () => {
+    realLoadingDone = true
+  }
+
+  $: if (realLoadingDone && fakeLoadingDone && !started) {
+    started = true
+    start()
+  }
 </script>
 
-<main
-  class="select-none transition-opacity duration-300"
-  class:opacity-0={loading}
->
+<main class="select-none transition-opacity duration-300">
   <!-- driver dashboard -->
   <div class="h-screen w-[35vw] fixed shadow-lg shadow-slate-800 z-10">
-    <Dashboard />
+    <Dashboard on:loaded={onVisualizationLoaded} />
   </div>
   <!-- the infotainment system -->
   <div class="min-h-screen w-[65vw] right-0 absolute infotainment-container">
@@ -63,10 +78,6 @@
   </div>
 </main>
 
-{#if loading}
-  <Loading />
-{/if}
-
 <!-- toast service -->
 <Toaster />
 

client/src/lib/Dashboard/Dashboard.svelte

@@ -45,7 +45,7 @@
   </div>
 
   <div class="left-0 mt-2 h-[475px] w-[35vw]">
-    <Visualization />
+    <Visualization on:loaded />
   </div>
 
   <Bottom>

client/src/lib/Dashboard/Visualization/Scene.svelte

@@ -11,6 +11,9 @@
   import RobotDecimated from './models/RobotDecimated.svelte'
   import { telemetryReadonlyStore } from '../../stores/telemetryStore'
   import { DEG2RAD } from 'three/src/math/MathUtils.js'
+  import { createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
 
   const SPEED_MULTIPLIER = 4
   const axis = new Vector3(0, 1, 0)
@@ -137,6 +140,7 @@
   on:create={({ ref }) => {
     // @ts-expect-error
     mesh.set(ref)
+    dispatch('loaded')
   }}
 />
 

client/src/lib/Dashboard/Visualization/Visualization.svelte

@@ -4,5 +4,5 @@
 </script>
 
 <Canvas>
-  <Scene />
+  <Scene on:loaded />
 </Canvas>

client/src/lib/utils/hideSplashscreen.ts

@@ -0,0 +1,6 @@
+import { invoke } from '@tauri-apps/api/tauri'
+
+export default async () => {
+  console.log('hiding')
+  await invoke('close_splashscreen')
+}

splash-screen/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

splash-screen/README.md

@@ -0,0 +1,46 @@
+# Jankboard 2 Splash Screen
+
+This directory contains the source code for the splash screen used by the Tauri
+app. It's a standalone Svelte + Vite project, with its own separate
+dependencies. In most cases, you won't ever have to touch the code in this
+directory unless you want to modify the loading screen. However, if you do
+decide to modify the files in this directory, keep in mind that **_they will not
+be reflected in the app until you compile and replace the_** `splashscreen.html`
+**_file in_** `/client/public`. Read more below to figure out how to do that.
+
+## How it works
+
+Tauri allows you to add a splash screen to display before your app loads by
+adding a file to the output directory called `splashscreen.html`. This is done
+in Jankboard 2 by adding the `splashscreen.html` file to the `public` directory,
+as recommended by Tauri's docs. However, since it's just one HTML file, we can't
+typically use a framework like Svelte, which outputs a CSS and JS bundle. While
+we can definitely write a simple splash screen in a raw HTML file, we miss out
+on nice Svelte features like easy to write animations. The Vite project in this
+directory solves that by using
+[vite-plugin-singlefile](https://github.com/richardtallent/vite-plugin-singlefile)
+to inline all CSS and JS outputted by Svelte's compiler into the HTML, resulting
+in a nice single `index.html` output in `./dist`, which can then be renamed as
+`splashscreen.html` and moved into the main Jankboard 2 project to be used as
+the loading splash screen. The best part about this is that since Svelte is
+meant to be compiled into such a small bundle size, there are virtually zero
+downsides to doing this versus writing the splash screen in raw HTML. We can
+easily write a nice looking splash screen using the same techniques as our
+existing codebase without having to deal with raw HTML and CSS. If you don't
+need to modify the splash screen, you **don't need to touch this project!**
+`splashscreen.html` is already included in the main project and you don't have
+to build it yourself here. If you do want to modify this splash screen, continue
+to the instructions below.
+
+## Installation and development instructions
+
+**Again, you don't need to do this if you don't want to modify the splash
+screen!**
+
+1. Install dependencies via `pnpm install`.
+2. Run `pnpm dev` to start the development server.
+3. After you're done making your changes, run `pnpm build`. This will output a
+   single `index.html` file to `./dist`, which contains all of the JS and CSS
+   inlined.
+4. Rename this outputted `index.html` to `splashscreen.html`, and then move it
+   into `/client/public`, replacing the existing `splashscreen.html`.

splash-screen/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jankboard 2</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

splash-screen/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "splash-screen",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@tsconfig/svelte": "^5.0.2",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "svelte": "^4.2.11",
+    "svelte-check": "^3.6.4",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4",
+    "vite-plugin-singlefile": "^2.0.1"
+  }
+}