dnrops
/
egui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update wasm/web example

This commit is contained in:
Emil Ernerfeldt 2020-04-23 09:50:03 +02:00
parent 723c3ca908
commit 25b06a6ff0
8 changed files with 47 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build_wasm.sh
View File

@ -23,3 +23,5 @@ FOLDER_NAME=${PWD##*/}
TARGET_NAME="example_wasm.wasm"
wasm-bindgen "target/wasm32-unknown-unknown/$BUILD/$TARGET_NAME" \
--out-dir docs --no-modules --no-typescript
open http://localhost:8888

3
docs/example_wasm.js
View File

@ -419,6 +419,9 @@ async function init(input) {
imports.wbg.__wbg_uniform2f_c1a2fa4599b15748 = function(arg0, arg1, arg2, arg3) {
getObject(arg0).uniform2f(getObject(arg1), arg2, arg3);
};
imports.wbg.__wbg_uniform4f_6e9aa69017843be0 = function(arg0, arg1, arg2, arg3, arg4, arg5) {
getObject(arg0).uniform4f(getObject(arg1), arg2, arg3, arg4, arg5);
};
imports.wbg.__wbg_useProgram_324a22a196d1f113 = function(arg0, arg1) {
getObject(arg0).useProgram(getObject(arg1));
};

BIN
docs/example_wasm_bg.wasm
View File

Binary file not shown.

20
docs/index.html
View File

@ -62,6 +62,8 @@
var g_mouse_pos = null;
var g_mouse_down = false;
var g_is_touch = false;
var g_scroll_delta_x = 0;
var g_scroll_delta_y = 0;
function pixels_per_point() {
// return 1.0;
@ -76,14 +78,17 @@
}
function get_input(canvas) {
return {
var input = {
mouse_down: g_mouse_down,
mouse_pos: g_mouse_pos,
// TODO: scroll_delta
scroll_delta: { x: -g_scroll_delta_x, y: -g_scroll_delta_y }, // TODO: standardize scroll direction
screen_size: { x: window.innerWidth, y: window.innerHeight },
pixels_per_point: pixels_per_point(),
time: window.performance.now() / 1000.0,
};
g_scroll_delta_x = 0;
g_scroll_delta_y = 0;
return input;
}
function mouse_pos_from_event(canvas, event) {
@ -94,6 +99,9 @@
};
}
// 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).
const ANIMATION_FRAME = true;
function paint() {
@ -173,6 +181,14 @@
event.preventDefault();
});
canvas.addEventListener("wheel", function (event) {
g_scroll_delta_x += event.deltaX;
g_scroll_delta_y += event.deltaY;
invalidate();
event.stopPropagation();
event.preventDefault();
});
if (!ANIMATION_FRAME) {
window.addEventListener("load", invalidate);
window.addEventListener("pagehide", invalidate);

7
emigui/README.md
View File

@ -17,7 +17,6 @@ This is the core library crate Emigui. It is fully platform independent without
* [x] Vertical scrolling
* [ ] Horizontal scrolling
* [x] Scroll-wheel input
* [ ] Scroll-wheel input in web verions
* [x] Drag background to scroll
* [ ] Kinetic scrolling
* [ ] Menu bar (File, Edit, etc)
@ -25,6 +24,12 @@ This is the core library crate Emigui. It is fully platform independent without
* [ ] Clipboard copy/paste
* [ ] Color picker
* [ ] Style editor
* [ ] Table with resizable columns
### Web version:
* [x] Scroll input
* [ ] Add support for clicking links
* [ ] Change to resize cursor on hover
### Animations
Add extremely quick animations for some things, maybe 2-3 frames. For instance:

6
emigui/src/example_app.rs
View File

@ -45,7 +45,9 @@ impl ExampleApp {
));
});
region.collapsing("Widgets", |region| {
CollapsingHeader::new("Widgets")
.default_open()
.show(region, |region| {
region.horizontal(Align::Min, |region| {
region.add(label!("Text can have").text_color(srgba(110, 255, 110, 255)));
region.add(label!("color").text_color(srgba(128, 140, 255, 255)));
@ -133,7 +135,7 @@ impl ExampleApp {
});
CollapsingHeader::new("Scroll area")
.default_open()
// .default_open()
.show(region, |region| {
ScrollArea::default().show(region, |region| {
region.add_label(LOREM_IPSUM);

24
example_wasm/src/lib.rs
View File

@ -51,11 +51,9 @@ impl State {
region.add_label(
"Everything you see is rendered as textured triangles. There is no DOM. There are no HTML elements."
);
region.add_label("This not JavaScript. This is Rust code, running at 60 Hz. This is the web page, reinvented with game tech.");
region.add_label("This is not JavaScript. This is Rust, running at 60 FPS. This is the web page, reinvented with game tech.");
region.add_label("This is also work in progress, and not ready for production... yet :)");
region.add(Separator::new());
self.example_app.ui(&mut region);
self.emigui.ui(&mut region);
region.set_align(Align::Min);
region.add_label("WebGl painter info:");
@ -75,16 +73,18 @@ impl State {
// TODO: Make it even simpler to show a window
Window::new("Test window").show(region.ctx(), |region| {
region.add_label("Grab the window and move it around!");
region.add_label("This window can be reisized, but not smaller than the contents.");
});
Window::new("Another test window")
.default_pos(pos2(400.0, 100.0))
Window::new("Examples")
.default_pos(pos2(32.0, 300.0))
.default_size(vec2(300.0, 400.0))
.show(region.ctx(), |region| {
region.add_label("This might be on top of the other window?");
region.add_label("Second line of text");
self.example_app.ui(region);
});
Window::new("Emigui settings")
.default_pos(pos2(400.0, 300.0))
.default_size(vec2(400.0, 400.0))
.show(region.ctx(), |region| {
self.emigui.ui(region);
});
let bg_color = srgba(16, 16, 16, 255);

4
start_server.sh
View File

@ -2,5 +2,5 @@
set -eu
cd docs
echo "open localhost:8000"
python3 -m http.server 8000 --bind 127.0.0.1
echo "open http://localhost:8888"
python3 -m http.server 8888 --bind 127.0.0.1