djmil/egui-circles
djmil/egui-circles
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web assembly + trunk

Browse Source
This commit is contained in:
djmil 2024-07-03 22:22:53 +02:00
parent 433ee08f66
commit ed2f243970
7 changed files with 261 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -18,3 +18,5 @@ Cargo.lock
# MSVC Windows builds of rustc generate these, which store debugging information
*.pdb
# trunk output folder
dist

40
Cargo.toml
View File

@ -1,10 +1,42 @@
[package]
name = "egui-circles"
version = "0.1.0"
version = "0.2.0"
authors = ["Andriy Djmil <andriy@djmil.dev>"]
edition = "2021"
rust-version = "1.56"
rust-version = "1.76"
[package.metadata.docs.rs]
all-features = true
targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"]
[dependencies]
eframe = "0.24.0" # Gives us egui, epi and web+native backends
emath = "0.24.0"
egui = "0.28"
eframe = { version = "0.28", default-features = false, features = [
# "accesskit", # Make egui compatible with screen readers. NOTE: adds a lot of dependencies.
"default_fonts", # Embed the default egui fonts.
"glow", # Use the glow rendering backend. Alternative: "wgpu".
# "persistence", # Enable restoring app state when restarting the app.
] }
log = "0.4"
emath = "0.28.0"
rand = "0.8"
getrandom = { version = "0.2", features = ["js"] }
# native:
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
env_logger = "0.10"
# web:
[target.'cfg(target_arch = "wasm32")'.dependencies]
wasm-bindgen-futures = "0.4"
# to access the DOM (to hide the loading text)
[target.'cfg(target_arch = "wasm32")'.dependencies.web-sys]
version = "0.3.4"
[profile.release]
opt-level = 2 # fast and small wasm
# Optimize all dependencies even in debug builds:
[profile.dev.package."*"]
opt-level = 2

25
assets/sw.js Normal file
View File

@ -0,0 +1,25 @@
var cacheName = 'egui-template-pwa';
var filesToCache = [
'./',
'./index.html',
'./eframe_template.js',
'./eframe_template_bg.wasm',
];
/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll(filesToCache);
})
);
});
/* Serve cached content when offline */
self.addEventListener('fetch', function (e) {
e.respondWith(
caches.match(e.request).then(function (response) {
return response || fetch(e.request);
})
);
});

140
index.html Normal file
View File

@ -0,0 +1,140 @@
<!DOCTYPE html>
<html>
<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">
<head>
<!-- change this to your project name -->
<title>eframe template</title>
<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
<link data-trunk rel="rust" 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">
<link data-trunk rel="copy-file" href="assets/sw.js" />
<link data-trunk rel="copy-file" href="assets/manifest.json" />
<link data-trunk rel="copy-file" href="assets/icon-1024.png" />
<link data-trunk rel="copy-file" href="assets/icon-256.png" />
<link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" />
<link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" />
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="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 {
/* Remove touch delay: */
touch-action: manipulation;
}
body {
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #909090;
}
@media (prefers-color-scheme: dark) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
}
}
/* Allow canvas to fill entire web page: */
html,
body {
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
height: 100%;
width: 100%;
}
/* Position canvas in center-top: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
}
.centered {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f0f0f0;
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
}
/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
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="the_canvas_id" width="800" height="600"></canvas>
<!--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>
</body>
</html>
<!-- Powered by egui: https://github.com/emilk/egui/ -->

15
src/app.rs
View File

@ -1,8 +1,12 @@
use emath::Vec2;
use eframe::egui;
use egui::Color32;
use egui::Stroke;
use rand::Rng;
extern crate emath;
extern crate rand;
extern crate eframe;
use self::emath::Vec2;
use self::eframe::egui;
use self::egui::Color32;
use self::egui::Stroke;
use self::rand::Rng;
use crate::circle::Circle;
@ -39,7 +43,6 @@ impl eframe::App for Simulation {
y: rand::thread_rng().gen_range(-2.0..2.0)});
};
ui.add(egui::Slider::new(&mut self.circles_count, 0..=25).text("circles count"));
let diff = (self.circles.len() as i32) - (self.circles_count as i32);

11
src/circle.rs
View File

@ -1,7 +1,10 @@
use emath::Vec2;
use emath::Pos2;
use emath::Rect;
use rand::Rng;
extern crate emath;
extern crate rand;
use self::emath::Vec2;
use self::emath::Pos2;
use self::emath::Rect;
use self::rand::Rng;
pub static FRICTION: f32 = 0.995;

42
src/main.rs
View File

@ -1,6 +1,8 @@
mod app;
mod circle;
// When compiling natively:
#[cfg(not(target_arch = "wasm32"))]
fn main() -> eframe::Result<()> {
//env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
@ -19,6 +21,44 @@ fn main() -> eframe::Result<()> {
eframe::run_native(
"egui-circles",
native_options,
Box::new(|_| Box::<crate::app::Simulation>::default()),
Box::new(|_| Ok(Box::<crate::app::Simulation>::default())),
)
}
// When compiling to web using trunk:
#[cfg(target_arch = "wasm32")]
fn main() {
// Redirect `log` message to `console.log` and friends:
eframe::WebLogger::init(log::LevelFilter::Debug).ok();
let web_options = eframe::WebOptions::default();
wasm_bindgen_futures::spawn_local(async {
let start_result = eframe::WebRunner::new()
.start(
"the_canvas_id",
web_options,
//Box::new(|cc| Ok(Box::new(eframe_template::TemplateApp::new(cc)))),
Box::new(|_| Ok(Box::<crate::app::Simulation>::default())),
)
.await;
// Remove the loading text and spinner:
let loading_text = 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:?}");
}
}
}
});
}