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" />
<!-- 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>
<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" />
<!-- 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 />
<link data-trunk rel="icon" href="assets/favicon.ico">
<!-- TODO: More icons -->
<link data-trunk rel="icon" href="assets/favicon.ico" />
<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>
html {
@ -47,15 +58,16 @@
width: 100%;
}
/* Position canvas in center-top: */
/* Make canvas fill entire document: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.centered {
@ -101,22 +113,34 @@
transform: rotate(360deg);
}
}
</style>
</head>
<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>
<!--Register a service worker to cache the WASM and JS scripts for offline use. -->
<script>
// Disable caching during development so that we don't end up seeing an outdated version.
<!-- the loading spinner will be removed in main.rs -->
<div class="centered" id="loading_text">
<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") {
window.addEventListener('load', function () {
navigator.serviceWorker.register('sw.js');
});
}
</script>
</script>-->
</body>
</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();
wasm_bindgen_futures::spawn_local(async {
eframe::WebRunner::new()
let start_result = eframe::WebRunner::new()
.start(
"topola-egui",
web_options,
Box::new(|cc| Ok(Box::new(App::new(cc, langid!("en-US"))))),
)
.await
.expect("failed to start eframe");
.await;
// 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:?}");
}
}
}
});
}