Youwen Wu
17dd6ac011
Didn't even code it, Svelte magic made it start working mid development even though I didn't add half the logic. :D
109 lines
3.1 KiB
Svelte
109 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import '@fontsource/roboto/latin.css'
|
|
import 'material-icons/iconfont/material-icons.css'
|
|
import Dashboard from './lib/Dashboard/Dashboard.svelte'
|
|
import 'material-symbols'
|
|
import AppBar from './lib/Apps/AppBar.svelte'
|
|
import { appList } from './lib/Apps/appList'
|
|
import { initializeTelemetry } from './lib/utils/initializeTelemetry'
|
|
import { onDestroy, onMount } from 'svelte'
|
|
import { Toaster } from 'svelte-french-toast'
|
|
import { initializationSequence } from './lib/Sequences/sequences'
|
|
import { settingsStore } from './lib/stores/settingsStore'
|
|
import getSettings from './lib/utils/getSettings'
|
|
import hideSplashscreen from './lib/utils/hideSplashscreen'
|
|
import Cutouts from './lib/Dashboard/Cutouts/Cutouts.svelte'
|
|
|
|
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 unlistenAll: () => void
|
|
|
|
onMount(() => {
|
|
let savedSettings = getSettings()
|
|
if (savedSettings !== false) {
|
|
settingsStore.set(savedSettings)
|
|
}
|
|
window.ResizeObserver = ResizeObserver
|
|
// disabled while migrating away from python
|
|
initializeTelemetry().then((unsubFunction: () => void) => {
|
|
unlistenAll = unsubFunction
|
|
})
|
|
|
|
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">
|
|
<!-- driver dashboard -->
|
|
<div class="h-screen w-[35vw] fixed shadow-lg shadow-slate-800 z-10">
|
|
<Dashboard on:loaded={onVisualizationLoaded} />
|
|
</div>
|
|
<!-- the infotainment system -->
|
|
<div class="min-h-screen w-[65vw] right-0 absolute infotainment-container">
|
|
<!-- dynamic app system (edit appList.ts to add new apps) -->
|
|
<div class="mx-10 mt-10 overflow-hidden">
|
|
<svelte:component this={appList[activeApp].component} />
|
|
</div>
|
|
<div class="fixed w-[65vw] flex justify-center right-0 bottom-0 mb-4">
|
|
<AppBar bind:activeApp {appList} />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Camera cutouts -->
|
|
<Cutouts show={activeApp !== 'camera'} />
|
|
|
|
<!-- toast service -->
|
|
<Toaster />
|
|
|
|
<style lang="postcss">
|
|
main {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
.infotainment-container {
|
|
background-image: url('./assets/wallpaper.jpg');
|
|
background-repeat: repeat-y;
|
|
background-size: cover;
|
|
/* hide scrollbar */
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
background-position: top right;
|
|
width: 65vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.infotainment-container::-webkit-scrollbar {
|
|
/* hide scrollbar */
|
|
display: none;
|
|
}
|
|
</style>
|