Skip to content

Commit 061eecd

Browse files
ZanzyTHEbarZanzyTHEbar
committed
refactor: begin adding window handler
- add logic to add and remove active windows to/from a store - implement window store for two windows - implement handling window close on app exit
1 parent 4257e71 commit 061eecd

File tree

13 files changed

+193
-25
lines changed

13 files changed

+193
-25
lines changed

‎GUI/ETVR/index.html

-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
<link rel="stylesheet" type="text/css"
3434
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700">
3535
<script type="module" src="./scripts/typetura.min.js"></script>
36-
<script type="module" src="https://unpkg.com/esp-web-tools@9.2.0/dist/web/install-button.js?module"></script>
3736
</head>
3837

3938
<body>

‎GUI/ETVR/src/app.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const ToastNotificationWindow = lazy(() => import('@components/Notifications'))
1111
const App = () => {
1212
const ref = document.getElementById('titlebar')
1313
onMount(() => {
14-
handleTitlebar()
14+
handleTitlebar(true)
1515
handleAppBoot()
1616
})
1717

‎GUI/ETVR/src/components/Button/OpenDocs/index.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { WebviewWindow, getCurrent } from '@tauri-apps/api/window'
22
import Button from '..'
3+
import { addWindow } from '@store/app/windows/windows'
34

45
export const OpenDocs = () => {
56
const openDocs = () => {
@@ -20,8 +21,8 @@ export const OpenDocs = () => {
2021
})
2122
webview.once('tauri://created', () => {
2223
console.log('WebView Window Created')
24+
addWindow(webview.label, webview)
2325
webview.show()
24-
/* webview.setFocus() */
2526
})
2627
})
2728
}
@@ -34,8 +35,3 @@ export const OpenDocs = () => {
3435
/>
3536
)
3637
}
37-
38-
// q: what kind of app can i make with tauri and sell on the app store?
39-
// a: any kind of app you want, as long as you follow the app store guidelines
40-
// give me an idea of an app that i can make that will be profitable
41-

‎GUI/ETVR/src/components/Button/WebSerial/index.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { WebviewWindow, getCurrent } from '@tauri-apps/api/window'
2+
import Button from '..'
3+
import { addWindow } from '@store/app/windows/windows'
4+
5+
export const WebSerial = () => {
6+
const openWebSerial = () => {
7+
const currentMainWindow = getCurrent()
8+
currentMainWindow.innerPosition().then((position) => {
9+
console.log(position)
10+
const webview = new WebviewWindow('eyetrack-webserial', {
11+
url: 'src/windows/webserial/index.html',
12+
resizable: true,
13+
decorations: false,
14+
titleBarStyle: 'transparent',
15+
hiddenTitle: true,
16+
width: 800,
17+
height: 600,
18+
x: position.x,
19+
y: position.y,
20+
transparent: true,
21+
})
22+
webview.once('tauri://created', () => {
23+
console.log('WebView Window Created')
24+
addWindow(webview.label, webview)
25+
webview.show()
26+
})
27+
})
28+
}
29+
return (
30+
<Button
31+
color="#800080"
32+
shadow="0 0 10px #800080"
33+
text="Open Web Serial Flasher"
34+
onClick={openWebSerial}
35+
/>
36+
)
37+
}

‎GUI/ETVR/src/pages/appSettings/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { EraseButton } from '@components/Button/EraseButton'
22
import { OpenDocs } from '@components/Button/OpenDocs'
3-
import WebSerial from '@components/WebSerial'
3+
import { WebSerial } from '@components/Button/WebSerial'
44
import { useDownloadFirmware } from '@hooks/api/useDownloadFirmware'
55
import { handleSound } from '@hooks/app'
66

@@ -23,8 +23,8 @@ const AppSettings = () => {
2323
}>
2424
Play Sound
2525
</button>
26-
<WebSerial />
2726
<EraseButton />
27+
<WebSerial />
2828
<OpenDocs />
2929
</div>
3030
)

‎GUI/ETVR/src/store/app/windows/selectors.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createMemo } from 'solid-js'
2+
import { windowsState } from './windows'
3+
4+
export const getActiveWindows = createMemo(() => windowsState().activeWindows)

‎GUI/ETVR/src/store/app/windows/windows.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { type WebviewWindow } from '@tauri-apps/api/window'
2+
import { createMemo } from 'solid-js'
3+
import { createStore, produce } from 'solid-js/store'
4+
5+
interface IWindow {
6+
label: string
7+
window: WebviewWindow
8+
}
9+
10+
export interface IWindowsStore {
11+
activeWindows: IWindow[]
12+
}
13+
14+
const windowsStoreDefaultState: IWindowsStore = {
15+
activeWindows: [],
16+
}
17+
18+
const [state, setState] = createStore<IWindowsStore>(windowsStoreDefaultState)
19+
20+
export const addWindow = (label: string, window: WebviewWindow) => {
21+
setState(
22+
produce((s) => {
23+
s.activeWindows.push({ label, window })
24+
}),
25+
)
26+
}
27+
28+
export const removeWindow = (window: WebviewWindow) => {
29+
setState(
30+
produce((s) => {
31+
const index = s.activeWindows.findIndex((w) => w.label === window.label)
32+
if (index > -1) {
33+
s.activeWindows[index].window.close()
34+
s.activeWindows.splice(index, 1)
35+
}
36+
}),
37+
)
38+
}
39+
40+
export const windowsState = createMemo(() => state)

‎GUI/ETVR/src/utils/hooks/app/index.ts

+12-13
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { invoke } from '@tauri-apps/api/tauri'
33
import { appWindow } from '@tauri-apps/api/window'
44
import { ExitCodes } from '@static/types/enums'
55
import { enableNotificationsSounds } from '@store/app/settings/selectors'
6+
import { getActiveWindows } from '@store/app/windows/selectors'
7+
import { removeWindow } from '@store/app/windows/windows'
68
import { doGHRequest } from '@utils/hooks/api/useGHReleases'
79
import { checkPermission } from '@utils/hooks/notifications'
810
import { generateWebsocketClients } from '@utils/hooks/websocket'
911

10-
export const handleTitlebar = () => {
12+
export const handleTitlebar = (main = false) => {
1113
const titlebar = document.getElementsByClassName('titlebar')
1214
if (titlebar) {
1315
document
@@ -18,7 +20,7 @@ export const handleTitlebar = () => {
1820
?.addEventListener('click', () => appWindow.toggleMaximize())
1921
document
2022
.getElementById('titlebar-close')
21-
?.addEventListener('click', () => appWindow.close())
23+
?.addEventListener('click', () => (main ? handleAppExit() : appWindow.close()))
2224
}
2325
}
2426

@@ -40,17 +42,14 @@ export const handleAppBoot = () => {
4042
}
4143

4244
export const handleAppExit = async () => {
43-
window.addEventListener('beforeunload', async (e) => {
44-
e.preventDefault()
45-
46-
// TODO: call these before the app exits to shutdown gracefully
47-
// stopMDNS()
48-
// stopWebsocketClients()
49-
// saveSettings()
50-
// stopPythonBackend()
51-
// closeAllWindows()
52-
await exit(ExitCodes.USER_EXIT)
53-
})
45+
// TODO: call these before the app exits to shutdown gracefully
46+
// stopMDNS()
47+
// stopWebsocketClients()
48+
// saveSettings()
49+
// stopPythonBackend()
50+
getActiveWindows().forEach((w) => removeWindow(w.window))
51+
appWindow.close()
52+
await exit(ExitCodes.USER_EXIT)
5453
}
5554

5655
export const handleSound = async (

‎GUI/ETVR/src/docs.tsx ‎GUI/ETVR/src/windows/docs/docs.tsx

File renamed without changes.

‎GUI/ETVR/src/windows/docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</div>
5252
<div id="root"></div>
5353
</div>
54-
<script type="module" src="/src/docs.tsx"></script>
54+
<script type="module" src="./docs.tsx"></script>
5555
<script type="text/javascript" data-sqs-type="imageloader-bootstrapper">
5656
(function () { if (window.ImageLoader) { window.ImageLoader.bootstrap({}, document); } })();
5757
</script>

‎GUI/ETVR/src/windows/webserial/index.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- , shrink-to-fit=no -->
7+
<!-- etvr -->
8+
<base href="">
9+
<meta charset="utf-8">
10+
<title>ETVR Docs Site</title>
11+
<meta name="mobile-web-app-capable" content="yes">
12+
<meta name="apple-mobile-web-app-capable" content="yes">
13+
<meta name="application-name" content="ETVR">
14+
<meta name="apple-mobile-web-app-title" content="ETVR">
15+
<meta name="theme-color" content="#22222d">
16+
<meta name="msapplication-navbutton-color" content="#22222d">
17+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
18+
19+
<link rel="icon" href="images/logo.gif">
20+
<link rel="apple-touch-icon" href="images/logo.gif">
21+
<link rel="icon" href="images/transparent_logo.gif">
22+
<link rel="apple-touch-icon" href="images/transparent_logo.gif">
23+
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
24+
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
25+
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
26+
<link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="#22222d">
27+
<link rel="shortcut icon" href="images/icons/favicon.ico">
28+
29+
<meta property="og:site_name" content="ETVR">
30+
<meta property="og:title" content="ETVR">
31+
<meta itemprop="name" content="ETVR">
32+
<meta name="description" content="">
33+
<link rel="stylesheet" type="text/css"
34+
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700">
35+
<script type="module" src="../../../scripts/typetura.min.js"></script>
36+
<script type="module" src="https://unpkg.com/esp-web-tools@9.2.0/dist/web/install-button.js?module"></script>
37+
</head>
38+
39+
<body>
40+
<noscript>You need to enable JavaScript to run this app.</noscript>
41+
<div class="main-div">
42+
<div data-tauri-drag-region class="titlebar" id="titlebar" style="position:relative; z-index:10">
43+
<div class="titlebar-button" id="titlebar-minimize">
44+
<img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
45+
</div>
46+
<div class="titlebar-button" id="titlebar-maximize">
47+
<img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
48+
</div>
49+
<div class="titlebar-button" id="titlebar-close">
50+
<img src="https://api.iconify.design/mdi:close.svg" alt="close" />
51+
</div>
52+
</div>
53+
<div id="root"></div>
54+
</div>
55+
<script type="module" src="./webserial.tsx"></script>
56+
<script type="text/javascript" data-sqs-type="imageloader-bootstrapper">
57+
(function () { if (window.ImageLoader) { window.ImageLoader.bootstrap({}, document); } })();
58+
</script>
59+
<script type="module" src="../../../scripts/custom.js"></script>
60+
</body>
61+
62+
</html>

‎GUI/ETVR/src/windows/webserial/webserial.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* @refresh reload */
2+
import { Router } from '@solidjs/router'
3+
import { onMount, Suspense } from 'solid-js'
4+
import { render } from 'solid-js/web'
5+
import WebSerial from '@components/WebSerial'
6+
import { handleTitlebar } from '@utils/hooks/app'
7+
import '@styles/docs-imports.css'
8+
9+
const App = () => {
10+
onMount(() => {
11+
handleTitlebar()
12+
})
13+
14+
return (
15+
<div class="w-[100%] h-[100%]">
16+
<Suspense>
17+
<WebSerial />
18+
</Suspense>
19+
</div>
20+
)
21+
}
22+
23+
render(
24+
() => (
25+
<Router>
26+
<App />
27+
</Router>
28+
),
29+
document.getElementById('root') as HTMLElement,
30+
)

‎GUI/ETVR/vite.config.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ export default defineConfig({
3131
rollupOptions: {
3232
input: {
3333
main: path.resolve(__dirname, 'index.html'),
34-
nested: path.resolve(__dirname, 'src/windows/docs/index.html'),
34+
docs: path.resolve(__dirname, 'src/windows/docs/index.html'),
35+
webserial: path.resolve(__dirname, 'src/windows/webserial/index.html'),
3536
},
3637
},
3738
// Tauri supports es2021

0 commit comments

Comments
 (0)