djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
egui/docs/index.html

284 lines
11 KiB
HTML
Raw Normal View History

Initial commit: Closed loop of TS->Rust->TS
2018-12-23 18:42:30 +00:00
<!DOCTYPE html>
<html>
No typescript. Just one index.html + wasm.
2019-01-05 21:55:09 +00:00
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Initial commit: Closed loop of TS->Rust->TS
2018-12-23 18:42:30 +00:00
Mobile fixes
2019-01-17 23:34:01 +00:00
<!-- Disable zooming: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- TODO: read https://www.html5rocks.com/en/mobile/mobifying/#toc-meta-viewport -->
No typescript. Just one index.html + wasm.
2019-01-05 21:55:09 +00:00
<head>
Rename from "Emigui" to "Egui" Shorter to type (especially in code).
2020-05-30 08:22:35 +00:00
<title>Egui – An experimental immediate mode GUI written in Rust</title>
Initial commit: Closed loop of TS->Rust->TS
2018-12-23 18:42:30 +00:00
<style>
Refactor example code
2020-04-12 10:07:51 +00:00
html {
/* Remove touch delay: */
touch-action: manipulation;
}
body {
Make emigui fill entire web page
2020-04-23 20:08:42 +00:00
background: #101010;
Refactor example code
2020-04-12 10:07:51 +00:00
}
Make emigui fill entire web page
2020-04-23 20:08:42 +00:00
/* Allow canvas to fill entire web page: */
Refactor example code
2020-04-12 10:07:51 +00:00
html,
body {
overflow: hidden;
Make emigui fill entire web page
2020-04-23 20:08:42 +00:00
margin: 0 !important;
padding: 0 !important;
Refactor example code
2020-04-12 10:07:51 +00:00
}
Initial commit: Closed loop of TS->Rust->TS
2018-12-23 18:42:30 +00:00
</style>
No typescript. Just one index.html + wasm.
2019-01-05 21:55:09 +00:00
</head>
<body>
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
<!-- We later make this cover the entire screen even when resized -->
<canvas id="canvas" width="1024" height="1024"></canvas>
Initial commit: Closed loop of TS->Rust->TS
2018-12-23 18:42:30 +00:00
<script>
Refactor example code
2020-04-12 10:07:51 +00:00
// 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;
Initial commit: Closed loop of TS->Rust->TS
2018-12-23 18:42:30 +00:00
</script>
Split example app from emigui_wasm
2019-02-09 22:00:07 +00:00
Initial commit: Closed loop of TS->Rust->TS
2018-12-23 18:42:30 +00:00
<!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
Rename example app to example_wasm
2019-03-16 11:55:42 +00:00
<script src="example_wasm.js"></script>
Split example app from emigui_wasm
2019-02-09 22:00:07 +00:00
No typescript. Just one index.html + wasm.
2019-01-05 21:55:09 +00:00
<script>
Refactor example code
2020-04-12 10:07:51 +00:00
// 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
wasm_bindgen("./example_wasm_bg.wasm")
.then(on_wasm_loaded)["catch"](console.error);
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
// ----------------------------------------------------------------------------
Remove 'Web' from GuiInput
2020-05-21 10:04:14 +00:00
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
var g_wasm_app = null;
Add support for hyperlinks
2020-04-23 17:15:17 +00:00
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
function egui_state() {
window.g_egui_state = window.g_egui_state || {
mouse_pos: null,
mouse_down: false,
is_touch: false, // we don't know yet
scroll_delta_x: 0,
scroll_delta_y: 0,
events: [],
};
return window.g_egui_state;
};
Add support for hyperlinks
2020-04-23 17:15:17 +00:00
Refactor example code
2020-04-12 10:07:51 +00:00
// ----------------------------------------------------------------------------
function pixels_per_point() {
return window.devicePixelRatio || 1.0;
Run on requestAnimationFrame by default
2019-03-12 09:00:41 +00:00
}
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
function get_egui_input() {
let state = egui_state();
Refactor example code
2020-04-12 10:07:51 +00:00
Update wasm/web example
2020-04-23 07:50:03 +00:00
var input = {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
mouse_down: state.mouse_down,
mouse_pos: state.mouse_pos,
scroll_delta: { x: -state.scroll_delta_x, y: -state.scroll_delta_y }, // TODO: standardize scroll direction
Refactor example code
2020-04-12 10:07:51 +00:00
screen_size: { x: window.innerWidth, y: window.innerHeight },
pixels_per_point: pixels_per_point(),
Add time as input to emigui to enable animations
2020-04-21 12:46:42 +00:00
time: window.performance.now() / 1000.0,
Add a fractal clock example to showcase painting performance
2020-05-11 18:21:24 +00:00
seconds_since_midnight: seconds_since_midnight(),
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
events: state.events,
Refactor example code
2020-04-12 10:07:51 +00:00
};
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
state.scroll_delta_x = 0;
state.scroll_delta_y = 0;
state.events = [];
Update wasm/web example
2020-04-23 07:50:03 +00:00
return input;
Refactor example code
2020-04-12 10:07:51 +00:00
}
Add a fractal clock example to showcase painting performance
2020-05-11 18:21:24 +00:00
function seconds_since_midnight() {
var d = new Date();
return (d.getHours() * 60.0 + d.getMinutes()) * 60.0 + d.getSeconds() + 1e-3 * d.getMilliseconds();
}
Refactor example code
2020-04-12 10:07:51 +00:00
function mouse_pos_from_event(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY - rect.top
};
}
Update wasm/web example
2020-04-23 07:50:03 +00:00
// If true, paint at full framerate always.
// If false, only paint on input.
// TODO: if this is turned off we must turn off animations too (which hasn't been implemented yet).
Refactor example code
2020-04-12 10:07:51 +00:00
const ANIMATION_FRAME = true;
function paint() {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
wasm_bindgen.resize_to_screen_size("canvas");
if (g_wasm_app === null) {
g_wasm_app = wasm_bindgen.new_webgl_gui("canvas");
}
let input = get_egui_input();
wasm_bindgen.run_gui(g_wasm_app, JSON.stringify(input));
Refactor example code
2020-04-12 10:07:51 +00:00
}
function paint_and_schedule() {
paint();
if (ANIMATION_FRAME) {
window.requestAnimationFrame(paint_and_schedule);
Run on requestAnimationFrame by default
2019-03-12 09:00:41 +00:00
}
Fix touch interaction
2019-03-16 13:12:40 +00:00
}
Run on requestAnimationFrame by default
2019-03-12 09:00:41 +00:00
Refactor example code
2020-04-12 10:07:51 +00:00
function on_wasm_loaded() {
var canvas = document.getElementById("canvas");
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
console.assert(canvas);
install_canvas_events(canvas, paint);
install_document_events(paint);
paint_and_schedule();
}
function install_document_events(paint) {
Refactor example code
2020-04-12 10:07:51 +00:00
var invalidate = function () {
if (!ANIMATION_FRAME) {
paint();
}
};
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
document.addEventListener("keydown", function (event) {
var key = translate_key(event.key);
if (key) {
egui_state().events.push({ "key": { "key": key, 'pressed': true } });
} else {
egui_state().events.push({ "text": event.key });
}
invalidate();
// event.stopPropagation();
// event.preventDefault();
});
// document.addEventListener("keypress", (event)=>{
// console.log(`keypress: ${event.key} ${JSON.stringify(event)}`);
// invalidate();
// event.stopPropagation();
// event.preventDefault();
// });
document.addEventListener("keyup", function (event) {
// console.log(`keyup: ${event.key} ${JSON.stringify(event)}`);
var key = translate_key(event.key);
if (key) {
egui_state().events.push({ "key": { "key": key, 'pressed': false } });
}
invalidate();
// event.stopPropagation();
// event.preventDefault();
});
if (!ANIMATION_FRAME) {
window.addEventListener("load", invalidate);
window.addEventListener("pagehide", invalidate);
window.addEventListener("pageshow", invalidate);
window.addEventListener("resize", invalidate);
}
}
function install_canvas_events(canvas, paint) {
var invalidate = function () {
if (!ANIMATION_FRAME) {
paint();
}
};
Refactor example code
2020-04-12 10:07:51 +00:00
canvas.addEventListener("mousedown", function (event) {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
if (egui_state().is_touch) { return; }
egui_state().mouse_pos = mouse_pos_from_event(canvas, event);
egui_state().mouse_down = true;
Refactor example code
2020-04-12 10:07:51 +00:00
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("mousemove", function (event) {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
if (egui_state().is_touch) { return; }
egui_state().mouse_pos = mouse_pos_from_event(canvas, event);
Refactor example code
2020-04-12 10:07:51 +00:00
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("mouseup", function (event) {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
if (egui_state().is_touch) { return; }
egui_state().mouse_pos = mouse_pos_from_event(canvas, event);
egui_state().mouse_down = false;
Refactor example code
2020-04-12 10:07:51 +00:00
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("mouseleave", function (event) {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
if (egui_state().is_touch) { return; }
egui_state().mouse_pos = null;
Refactor example code
2020-04-12 10:07:51 +00:00
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("touchstart", function (event) {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
egui_state().is_touch = true;
egui_state().mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
egui_state().mouse_down = true;
Refactor example code
2020-04-12 10:07:51 +00:00
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("touchmove", function (event) {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
egui_state().is_touch = true;
egui_state().mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
Refactor example code
2020-04-12 10:07:51 +00:00
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("touchend", function (event) {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
egui_state().is_touch = true;
egui_state().mouse_down = false; // First release mouse to click...
paint(); // ...do the clicking...
egui_state().mouse_pos = null; // ...remove hover effect
Fix touch screen interactions
2020-04-23 19:27:05 +00:00
invalidate();
Refactor example code
2020-04-12 10:07:51 +00:00
event.stopPropagation();
event.preventDefault();
});
Update wasm/web example
2020-04-23 07:50:03 +00:00
canvas.addEventListener("wheel", function (event) {
[web] port JS code to Rust
2020-07-18 08:54:31 +00:00
egui_state().scroll_delta_x += event.deltaX;
egui_state().scroll_delta_y += event.deltaY;
Update wasm/web example
2020-04-23 07:50:03 +00:00
invalidate();
event.stopPropagation();
event.preventDefault();
});
Refactor example code
2020-04-12 10:07:51 +00:00
}
Basic text input support
2020-04-29 19:25:49 +00:00
function translate_key(key) {
if (key == "Alt") { return "alt"; }
if (key == "Backspace") { return "backspace"; }
if (key == "Control") { return "control"; }
if (key == "Delete") { return "delete"; }
if (key == "ArrowDown") { return "down"; }
if (key == "End") { return "end"; }
if (key == "Escape") { return "escape"; }
if (key == "Home") { return "home"; }
if (key == "Help") { return "insert"; }
if (key == "ArrowLeft") { return "left"; }
if (key == "Meta") { return "logo"; }
if (key == "PageDown") { return "page_down"; }
if (key == "PageUp") { return "page_up"; }
if (key == "Enter") { return "return"; }
if (key == "ArrowRight") { return "right"; }
if (key == "Shift") { return "shift"; }
// if (key == " ") { return "space"; }
if (key == "Tab") { return "tab"; }
if (key == "ArrowUp") { return "up"; }
return null;
}
No typescript. Just one index.html + wasm.
2019-01-05 21:55:09 +00:00
</script>
</body>
Initial commit: Closed loop of TS->Rust->TS
2018-12-23 18:42:30 +00:00
</html>
Reference in a new issue Copy permalink