Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Graceful exit from web #1650

Merged
merged 5 commits into from
Aug 2, 2022
Merged

Graceful exit from web #1650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85568ca
Wasm graceful exit
enomado Jul 27, 2022
d0bcdfc
Update eframe/src/lib.rs
enomado Jul 30, 2022
6e01401
docs and example
enomado Jul 30, 2022
5c48c87
upd
enomado Jul 31, 2022
7d59980
improve changelog line
emilk Aug 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
height: 100%;
width: 100%;
emilk marked this conversation as resolved.
Show resolved Hide resolved
}

/* Position canvas in center-top: */
Expand Down Expand Up @@ -131,7 +133,11 @@
console.debug("wasm loaded. starting app…");

// This call installs a bunch of callbacks and then returns:
wasm_bindgen.start("the_canvas_id");
const handle = wasm_bindgen.start("the_canvas_id");

// call `handle.stop_web()` to stop
// uncomment to quick result
// setTimeout(() => {handle.stop_web(); handle.free())}, 2000)

console.debug("app started.");
document.getElementById("center_text").remove();
Expand Down
200 changes: 200 additions & 0 deletions docs/multiple_apps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
<!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>
<title>egui – An immediate mode GUI written in Rust</title>
<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;
display:flex;
}

.canvas_wrap{
/* height: 200px; */
width: 400px;
}

@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%); */
width:90%;
height:90%;
}

.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 -->

<div>controls</div>

<button class="stop_one">
stop
</button>

<div class="canvas_wrap one">
<canvas id="the_canvas_id_one"></canvas>
</div>

<div class="canvas_wrap two">
<canvas id="the_canvas_id_two"></canvas>
</div>



<div class="centered" id="center_text">
<p style="font-size:16px">
Loading…
</p>
<div class="lds-dual-ring"></div>
</div>

<script>
// The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
// `WebAssembly.instantiateStreaming` to instantiate the wasm module,
// but this doesn't work with `file://` urls. This example is frequently
// viewed by simply opening `index.html` in a browser (with a `file://`
// url), so it would fail if we were to call this function!
//
// Work around this for now by deleting the function to ensure that the
// `no_modules.js` script doesn't have access to it. You won't need this
// hack when deploying over HTTP.
delete WebAssembly.instantiateStreaming;
</script>

<!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
<script src="egui_demo_app.js"></script>

<script>
// We'll defer our execution until the wasm is ready to go.
// Here we tell bindgen the path to the wasm file so it can start
// initialization and return to us a promise when it's done.
console.debug("loading wasm…");
wasm_bindgen("./egui_demo_app_bg.wasm")
.then(on_wasm_loaded)
.catch(on_wasm_error);

function on_wasm_loaded() {
console.debug("wasm loaded. starting app…");

// This call installs a bunch of callbacks and then returns:

wasm_bindgen.init_wasm_hooks()

const handle_one = wasm_bindgen.start_separate("the_canvas_id_one");
const handle_two = wasm_bindgen.start_separate("the_canvas_id_two");

const button = document.getElementsByClassName("stop_one")[0]

button.addEventListener("click", ()=>{
handle_one.stop_web()
handle_one.free()
});


// call `handle.stop_web()` to stop
// uncomment to quick result
// setTimeout(() => {handle.stop_web()}, 2000)

console.debug("app started.");
document.getElementById("center_text").remove();
}

function on_wasm_error(error) {
console.error("Failed to start: " + error);
document.getElementById("center_text").innerHTML = `
<p>
An error occurred during loading:
</p>
<p style="font-family:Courier New">
${error}
</p>
<p style="font-size:14px">
Make sure you use a modern browser with WebGL and WASM enabled.
</p>`;
}
</script>
</body>

</html>

<!-- Powered by egui: https://github.com/emilk/egui/ -->
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The example is not very pretty, but it works for now :)

Screen Shot 2022-08-02 at 17 31 04

2 changes: 2 additions & 0 deletions eframe/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ NOTE: [`egui-winit`](../egui-winit/CHANGELOG.md), [`egui_glium`](../egui_glium/C

#### Web:
* Added option to select WebGL version ([#1803](https://github.com/emilk/egui/pull/1803)).
* Added ability to stop/re-run web app from JavaScript. ⚠️ You need to update your CSS with `html, body: { height: 100%; width: 100%; }` ([#1803](https://github.com/emilk/egui/pull/1650)).



## 0.18.0 - 2022-04-30
Expand Down
22 changes: 16 additions & 6 deletions eframe/src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,19 @@ pub use epi::*;
// When compiling for web

#[cfg(target_arch = "wasm32")]
mod web;
use egui::mutex::Mutex;

#[cfg(target_arch = "wasm32")]
use std::sync::Arc;

#[cfg(target_arch = "wasm32")]
pub mod web;

#[cfg(target_arch = "wasm32")]
pub use wasm_bindgen;

#[cfg(target_arch = "wasm32")]
use web::AppRunner;
#[cfg(target_arch = "wasm32")]
pub use web_sys;

Expand All @@ -93,12 +101,13 @@ pub use web_sys;
/// use wasm_bindgen::prelude::*;
///
/// /// This is the entry-point for all the web-assembly.
/// /// This is called once from the HTML.
/// /// This is called from the HTML.
/// /// It loads the app, installs some callbacks, then returns.
/// /// It returns a handle to the running app that can be stopped calling `AppRunner::stop_web`.
/// /// You can add more callbacks like this if you want to call in to your code.
/// #[cfg(target_arch = "wasm32")]
/// #[wasm_bindgen]
/// pub fn start(canvas_id: &str) -> Result<(), eframe::wasm_bindgen::JsValue> {
/// pub fn start(canvas_id: &str) -> Result<Arc<Mutex<AppRunner>>, eframe::wasm_bindgen::JsValue> {
/// let web_options = eframe::WebOptions::default();
/// eframe::start_web(canvas_id, web_options, Box::new(|cc| Box::new(MyEguiApp::new(cc))))
/// }
Expand All @@ -108,9 +117,10 @@ pub fn start_web(
canvas_id: &str,
web_options: WebOptions,
app_creator: AppCreator,
) -> Result<(), wasm_bindgen::JsValue> {
web::start(canvas_id, web_options, app_creator)?;
Ok(())
) -> Result<Arc<Mutex<AppRunner>>, wasm_bindgen::JsValue> {
let handle = web::start(canvas_id, web_options, app_creator)?;

Ok(handle)
}

// ----------------------------------------------------------------------------
Expand Down
Loading