berkus
/
topola
mirror of https://codeberg.org/topola/topola.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

egui: base web app on newer version of official eframe template

This commit is contained in:
Mikolaj Wielgus 2024-09-17 01:52:19 +02:00
parent be03f190a0
commit e1b56875ed
2 changed files with 59 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
index.html
View File

@ -3,19 +3,30 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Disable zooming: --> <!-- Disable zooming: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<head> <head>
<title>Topola</title> <title>Topola PCB router</title>
<link data-trunk rel="rust" data-bin="topola-egui" data-cargo-features="egui" data-wasm-opt="2" /> <link data-trunk rel="rust" data-bin="topola-egui" data-cargo-features="egui" data-wasm-opt="2" />
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
<base data-trunk-public-url /> <base data-trunk-public-url />
<link data-trunk rel="icon" href="assets/favicon.ico"> <link data-trunk rel="icon" href="assets/favicon.ico" />
<!-- TODO: More icons -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040"> <link data-trunk rel="copy-file" href="assets/sw.js"/>
<!--<link data-trunk rel="copy-file" href="assets/manifest.json" data-target-path="assets"/>-->
<!--<link data-trunk rel="copy-file" href="assets/icon-1024.png" data-target-path="assets"/>-->
<!--<link data-trunk rel="copy-file" href="assets/icon-256.png" data-target-path="assets"/>-->
<!--<link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" data-target-path="assets"/>-->
<!--<link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" data-target-path="assets"/>-->
<!--<link rel="manifest" href="assets/manifest.json">-->
<!--<link rel="apple-touch-icon" href="assets/icon_ios_touch_192.png">-->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#404040" />
<style> <style>
html { html {
@ -47,15 +58,16 @@
width: 100%; width: 100%;
} }
/* Position canvas in center-top: */ /* Make canvas fill entire document: */
canvas { canvas {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
display: block; display: block;
position: absolute; position: absolute;
top: 0%; top: 0;
left: 50%; left: 0;
transform: translate(-50%, 0%); width: 100%;
height: 100%;
} }
.centered { .centered {
@ -101,22 +113,34 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
</head> </head>
<body> <body>
<!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="topola-egui"></canvas> <canvas id="topola-egui"></canvas>
<!--Register a service worker to cache the WASM and JS scripts for offline use. --> <!-- the loading spinner will be removed in main.rs -->
<script> <div class="centered" id="loading_text">
// Disable caching during development so that we don't end up seeing an outdated version. <p style="font-size:16px">
Loading…
</p>
<div class="lds-dual-ring"></div>
</div>
<!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
<!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files -->
<!--<script>
// We disable caching during development so that we always view the latest version.
if ('serviceWorker' in navigator && window.location.hash !== "#dev") { if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
window.addEventListener('load', function () { window.addEventListener('load', function () {
navigator.serviceWorker.register('sw.js'); navigator.serviceWorker.register('sw.js');
}); });
} }
</script> </script>-->
</body> </body>
</html> </html>
<!-- Powered by egui: https://github.com/emilk/egui/ -->

23
src/bin/topola-egui/main.rs
View File

@ -50,13 +50,30 @@ fn main() {
let web_options = eframe::WebOptions::default(); let web_options = eframe::WebOptions::default();
wasm_bindgen_futures::spawn_local(async { wasm_bindgen_futures::spawn_local(async {
eframe::WebRunner::new() let start_result = eframe::WebRunner::new()
.start( .start(
"topola-egui", "topola-egui",
web_options, web_options,
Box::new(|cc| Ok(Box::new(App::new(cc, langid!("en-US"))))), Box::new(|cc| Ok(Box::new(App::new(cc, langid!("en-US"))))),
) )
.await .await;
.expect("failed to start eframe");
// Remove the loading text and spinner:
let loading_text = eframe::web_sys::window()
.and_then(|w| w.document())
.and_then(|d| d.get_element_by_id("loading_text"));
if let Some(loading_text) = loading_text {
match start_result {
Ok(_) => {
loading_text.remove();
}
Err(e) => {
loading_text.set_inner_html(
"<p> The app has crashed. See the developer console for details. </p>",
);
panic!("Failed to start eframe: {e:?}");
}
}
}
}); });
} }