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

autoscale

Browse Source
This commit is contained in:
djmil 2024-08-30 20:15:52 +02:00
parent a23a328e50
commit 7c01b355a9
11 changed files with 2688 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.cargo/config.toml Normal file
View File

@ -0,0 +1,6 @@
# clipboard api is still unstable, so web-sys requires the below flag to be passed for copy (ctrl + c) to work
# https://rustwasm.github.io/docs/wasm-bindgen/web-sys/unstable-apis.html
# check status at https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
# we don't use `[build]` because of rust analyzer's build cache invalidation https://github.com/emilk/eframe_template/issues/93
[target.wasm32-unknown-unknown]
rustflags = ["--cfg=web_sys_unstable_apis"]

29
.gitignore vendored
View File

@ -1,22 +1,13 @@
# Mac stuff:
.obsidian/* .DS_Store
.vscode/*
# ---> Rust
# Generated by Cargo
# will have compiled files and executables
debug/
target/
# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
Cargo.lock
# These are backup files generated by rustfmt
**/*.rs.bk
# MSVC Windows builds of rustc generate these, which store debugging information
*.pdb
# trunk output folder # trunk output folder
dist dist
# Rust compile target directories:
target
target_ra
target_wasm
# https://github.com/lycheeverse/lychee
.lycheecache

2416
Cargo.lock generated Normal file
View File

File diff suppressed because it is too large Load Diff

99
Cargo.toml Executable file → Normal file
View File

@ -1,42 +1,57 @@
[package] [package]
name = "egui-circles" name = "egui_circles"
version = "0.2.0" version = "0.2.1"
authors = ["Andriy Djmil <andriy@djmil.dev>"] authors = ["Andriy Djmil <andriy@djmil.dev>"]
edition = "2021" edition = "2021"
rust-version = "1.76" include = ["LICENSE", "**/*.rs", "Cargo.toml"]
rust-version = "1.76"
[package.metadata.docs.rs]
all-features = true [package.metadata.docs.rs]
targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"] all-features = true
targets = ["x86_64-unknown-linux-gnu", "wasm32-unknown-unknown"]
[dependencies]
egui = "0.28" [dependencies]
eframe = { version = "0.28", default-features = false, features = [ egui = "0.28"
# "accesskit", # Make egui compatible with screen readers. NOTE: adds a lot of dependencies. eframe = { version = "0.28", default-features = false, features = [
"default_fonts", # Embed the default egui fonts. # "accesskit", # Make egui compatible with screen readers. NOTE: adds a lot of dependencies.
"glow", # Use the glow rendering backend. Alternative: "wgpu". "default_fonts", # Embed the default egui fonts.
# "persistence", # Enable restoring app state when restarting the app. "glow", # Use the glow rendering backend. Alternative: "wgpu".
] } "persistence", # Enable restoring app state when restarting the app.
log = "0.4" ] }
emath = "0.28.0" log = "0.4"
rand = "0.8" emath = "0.28.0"
getrandom = { version = "0.2", features = ["js"] } rand = "0.8"
getrandom = { version = "0.2", features = ["js"] }
# native:
[target.'cfg(not(target_arch = "wasm32"))'.dependencies] # You only need serde if you want app persistence:
env_logger = "0.10" serde = { version = "1", features = ["derive"] }
# web: # native:
[target.'cfg(target_arch = "wasm32")'.dependencies] [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
wasm-bindgen-futures = "0.4" env_logger = "0.10"
# to access the DOM (to hide the loading text) # web:
[target.'cfg(target_arch = "wasm32")'.dependencies.web-sys] [target.'cfg(target_arch = "wasm32")'.dependencies]
version = "0.3.4" wasm-bindgen-futures = "0.4"
[profile.release] # to access the DOM (to hide the loading text)
opt-level = 2 # fast and small wasm [target.'cfg(target_arch = "wasm32")'.dependencies.web-sys]
version = "0.3.4"
# Optimize all dependencies even in debug builds:
[profile.dev.package."*"] [profile.release]
opt-level = 2 opt-level = 2 # fast and small wasm
# Optimize all dependencies even in debug builds:
[profile.dev.package."*"]
opt-level = 2
[patch.crates-io]
# If you want to use the bleeding edge version of egui and eframe:
# egui = { git = "https://github.com/emilk/egui", branch = "master" }
# eframe = { git = "https://github.com/emilk/egui", branch = "master" }
# If you fork https://github.com/emilk/egui you can test with:
# egui = { path = "../egui/crates/egui" }
# eframe = { path = "../egui/crates/eframe" }

6
assets/sw.js
View File

@ -1,9 +1,9 @@
var cacheName = 'egui-circles'; var cacheName = 'egui_circles';
var filesToCache = [ var filesToCache = [
'./', './',
'./index.html', './index.html',
'./egui-circles.js', './egui_circles.js',
'./egui-circles_bg.wasm', './egui_circles_bg.wasm',
]; ];
/* Start the service worker and cache all of the app's content */ /* Start the service worker and cache all of the app's content */

24
index.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<meta http-equiv="Content-Type" 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.5, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<head> <head>
<!-- change this to your project name --> <!-- change this to your project name -->
@ -56,15 +56,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 {
@ -110,14 +111,21 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
</head> </head>
<body> <body>
<!-- The WASM code will resize the canvas dynamically --> <!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. --> <!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="the_canvas_id" width="800" height="600"></canvas> <canvas id="the_canvas_id"></canvas>
<!-- 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). --> <!--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 --> <!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files -->

131
src/app.rs
View File

@ -1,25 +1,24 @@
extern crate emath; use egui::{Color32, Stroke, Vec2};
extern crate rand; use rand::Rng;
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; use crate::circle::Circle;
/// We derive Deserialize/Serialize so we can persist app state on shutdown.
#[derive(serde::Deserialize, serde::Serialize)]
#[serde(default)] // if we add new fields, give them default values when deserializing old state
pub struct Simulation { pub struct Simulation {
circles: Vec<Circle>,
circles_count: usize, circles_count: usize,
#[serde(skip)] // This how you opt-out of serialization of a field
circles: Vec<Circle>,
#[serde(skip)]
colors: Vec<egui::Color32>, colors: Vec<egui::Color32>,
} }
impl Default for Simulation { impl Default for Simulation {
fn default() -> Self { fn default() -> Self {
Self { Self {
circles: Vec::new(), circles: Vec::new(),
circles_count: 2, circles_count: 2,
colors: Vec::new(), colors: Vec::new(),
@ -27,26 +26,87 @@ impl Default for Simulation {
} }
} }
impl eframe::App for Simulation { impl Simulation {
fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) { /// Called once before the first frame.
pub fn new(cc: &eframe::CreationContext<'_>) -> Self {
// This is also where you can customize the look and feel of egui using
// `cc.egui_ctx.set_visuals` and `cc.egui_ctx.set_fonts`.
// Looks better on 4k montior // Looks better on 4k montior
ctx.set_pixels_per_point(1.5); cc.egui_ctx.set_pixels_per_point(1.5);
// Load previous app state (if any).
// Note that you must enable the `persistence` feature for this to work.
if let Some(storage) = cc.storage {
return eframe::get_value(storage, eframe::APP_KEY).unwrap_or_default();
}
Default::default()
}
}
impl eframe::App for Simulation {
/// Called by the frame work to save state before shutdown.
fn save(&mut self, storage: &mut dyn eframe::Storage) {
eframe::set_value(storage, eframe::APP_KEY, self);
}
/// Called each time the UI needs repainting, which may be many times per second.
fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
// Put your widgets into a `SidePanel`, `TopBottomPanel`, `CentralPanel`, `Window` or `Area`.
// For inspiration and more examples, go to https://emilk.github.io/egui
egui::TopBottomPanel::top("top_panel").show(ctx, |ui| { egui::TopBottomPanel::top("top_panel").show(ctx, |ui| {
// The top panel is often a good place for a menu bar: // The top panel is often a good place for a menu bar:
egui::widgets::global_dark_light_mode_buttons(ui);
egui::menu::bar(ui, |ui| {
// NOTE: no File->Quit on web pages!
let is_web = cfg!(target_arch = "wasm32");
if !is_web {
ui.menu_button("File", |ui| {
if ui.button("Quit").clicked() {
ctx.send_viewport_cmd(egui::ViewportCommand::Close);
}
});
ui.add_space(16.0);
}
egui::widgets::global_dark_light_mode_buttons(ui);
ui.with_layout(egui::Layout::top_down(egui::Align::RIGHT), |ui| {
ui.horizontal(|ui| {
ui.spacing_mut().item_spacing.x = 4.0;
ui.hyperlink_to(
"source code",
"https://gitea.djmil.dev/djmil/egui-circles",
);
ui.label("rust");
});
});
});
}); });
egui::CentralPanel::default().show(ctx, |ui| { egui::CentralPanel::default().show(ctx, |ui| {
if ui.button("halt").clicked() { // The central panel the region left after adding TopPanel's and SidePanel's
self.circles.iter_mut().for_each(|c| (*c).v = Vec2{x: 0.0, y: 0.0});
};
if ui.button("push").clicked() { // Simulatiom
self.circles.iter_mut().for_each(|c| (*c).v = Vec2{ ui.horizontal(|ui| {
x: rand::thread_rng().gen_range(-2.0..2.0), ui.label("Click on circles or press");
y: rand::thread_rng().gen_range(-2.0..2.0)});
}; if ui.button("push").clicked() {
self.circles.iter_mut().for_each(|c| (*c).v = Vec2{
x: rand::thread_rng().gen_range(-4.0..4.0),
y: rand::thread_rng().gen_range(-4.0..4.0)});
};
ui.label("or");
if ui.button("halt").clicked() {
self.circles.iter_mut().for_each(|c| (*c).v = Vec2{x: 0.0, y: 0.0});
};
ui.label("buttons");
});
ui.add(egui::Slider::new(&mut self.circles_count, 0..=25).text("circles count")); ui.add(egui::Slider::new(&mut self.circles_count, 0..=25).text("circles count"));
@ -100,6 +160,16 @@ impl eframe::App for Simulation {
Stroke{width: 2.0, color: Color32::from_rgb(200, 255, 255)} Stroke{width: 2.0, color: Color32::from_rgb(200, 255, 255)}
); );
} }
// End simultion
ui.separator();
ui.with_layout(egui::Layout::bottom_up(egui::Align::LEFT), |ui| {
powered_by_egui_and_eframe(ui);
egui::warn_if_debug_build(ui);
});
}); });
for circle in &mut self.circles { for circle in &mut self.circles {
@ -126,9 +196,22 @@ impl eframe::App for Simulation {
// This is how to go into continuous mode - uncomment this to see example of continuous mode // This is how to go into continuous mode - uncomment this to see example of continuous mode
ctx.request_repaint(); ctx.request_repaint();
} }
} }
fn powered_by_egui_and_eframe(ui: &mut egui::Ui) {
ui.horizontal(|ui| {
ui.spacing_mut().item_spacing.x = 0.0;
ui.label("Powered by ");
ui.hyperlink_to("egui", "https://github.com/emilk/egui");
ui.label(" and ");
ui.hyperlink_to(
"eframe",
"https://github.com/emilk/egui/tree/master/crates/eframe",
);
});
}
fn collision(c1: &Circle, c2: &Circle) -> (Vec2, Vec2) { fn collision(c1: &Circle, c2: &Circle) -> (Vec2, Vec2) {
let m1 = c1.r; let m1 = c1.r;
@ -173,5 +256,3 @@ fn collision(c1: &Circle, c2: &Circle) -> (Vec2, Vec2) {
vec2n + vec2t vec2n + vec2t
); );
} }
//}

9
src/circle.rs
View File

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

6
src/lib.rs Normal file
View File

@ -0,0 +1,6 @@
#![warn(clippy::all, rust_2018_idioms)]
mod app;
pub use app::Simulation;
mod circle;

127
src/main.rs Executable file → Normal file
View File

@ -1,64 +1,63 @@
mod app; #![warn(clippy::all, rust_2018_idioms)]
mod circle; #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] // hide console window on Windows in release
// When compiling natively: // When compiling natively:
#[cfg(not(target_arch = "wasm32"))] #[cfg(not(target_arch = "wasm32"))]
fn main() -> eframe::Result<()> { fn main() -> eframe::Result {
//env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`). env_logger::init(); // Log to stderr (if you run with `RUST_LOG=debug`).
let native_options = eframe::NativeOptions { let native_options = eframe::NativeOptions {
viewport: eframe::egui::ViewportBuilder::default() viewport: egui::ViewportBuilder::default()
.with_inner_size([800.0, 600.0]) .with_inner_size([800.0, 600.0])
.with_min_inner_size([300.0, 220.0]) .with_min_inner_size([300.0, 220.0])
.with_icon( .with_icon(
// NOTE: Adding an icon is optional // NOTE: Adding an icon is optional
eframe::icon_data::from_png_bytes(&include_bytes!("../assets/icon-192.png")[..]) eframe::icon_data::from_png_bytes(&include_bytes!("../assets/icon-192.png")[..])
.expect("Failed to load icon"), .expect("Failed to load icon"),
), ),
..Default::default() ..Default::default()
}; };
eframe::run_native( eframe::run_native(
"egui-circles", "eGUI Circles",
native_options, native_options,
Box::new(|_| Ok(Box::<crate::app::Simulation>::default())), Box::new(|cc| Ok(Box::new(egui_circles::Simulation::new(cc)))),
) )
} }
// When compiling to web using trunk: // When compiling to web using trunk:
#[cfg(target_arch = "wasm32")] #[cfg(target_arch = "wasm32")]
fn main() { fn main() {
// Redirect `log` message to `console.log` and friends: // Redirect `log` message to `console.log` and friends:
eframe::WebLogger::init(log::LevelFilter::Debug).ok(); eframe::WebLogger::init(log::LevelFilter::Debug).ok();
let web_options = eframe::WebOptions::default(); let web_options = eframe::WebOptions::default();
wasm_bindgen_futures::spawn_local(async { wasm_bindgen_futures::spawn_local(async {
let start_result = eframe::WebRunner::new() let start_result = eframe::WebRunner::new()
.start( .start(
"the_canvas_id", "the_canvas_id",
web_options, web_options,
//Box::new(|cc| Ok(Box::new(eframe_template::TemplateApp::new(cc)))), Box::new(|cc| Ok(Box::new(egui_circles::Simulation::new(cc)))),
Box::new(|_| Ok(Box::<crate::app::Simulation>::default())), )
) .await;
.await;
// Remove the loading text and spinner:
// Remove the loading text and spinner: let loading_text = web_sys::window()
let loading_text = web_sys::window() .and_then(|w| w.document())
.and_then(|w| w.document()) .and_then(|d| d.get_element_by_id("loading_text"));
.and_then(|d| d.get_element_by_id("loading_text")); if let Some(loading_text) = loading_text {
if let Some(loading_text) = loading_text { match start_result {
match start_result { Ok(_) => {
Ok(_) => { loading_text.remove();
loading_text.remove(); }
} Err(e) => {
Err(e) => { loading_text.set_inner_html(
loading_text.set_inner_html( "<p> The app has crashed. See the developer console for details. </p>",
"<p> The app has crashed. See the developer console for details. </p>", );
); panic!("Failed to start eframe: {e:?}");
panic!("Failed to start eframe: {e:?}"); }
} }
} }
} });
}); }
}

6
wasm32/build.sh
View File

@ -33,8 +33,8 @@ if has_docker_container $TRAGET; then
--attach --attach
else else
docker run \ docker run \
--volume $(pwd)/..:/$NAME \ --volume $(pwd):/$NAME \
--name $TRAGET \ --name $TRAGET \
$BUILDER \ $BUILDER \
build --release build --release --public-url /$NAME --verbose
fi fi