egui/docs/index.html

<!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">

<!-- TODO: read https://www.html5rocks.com/en/mobile/mobifying/#toc-meta-viewport -->

<head>
    <title>Emigui – A experiment in an Immediate Mode GUI written in Rust</title>
    <style>
    html {
        /* Remove touch delay: */
        touch-action: manipulation;
    }

    body {
        background: #000000;
    }

    html,
    body {
        overflow: hidden;
    }
    </style>
</head>

<body>
    <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="example_wasm.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
    wasm_bindgen("./example_wasm_bg.wasm")
        .then(on_wasm_loaded)["catch"](console.error);
    // ----------------------------------------------------------------------------
    var g_wasm_app = null;

    function paint_gui(canvas, input) {
        if (g_wasm_app === null) {
            g_wasm_app = wasm_bindgen.new_webgl_gui("canvas", pixels_per_point());
        }
        wasm_bindgen.run_gui(g_wasm_app, JSON.stringify(input));
    }
    // ----------------------------------------------------------------------------
    var g_mouse_pos = null;
    var g_mouse_down = false;
    var g_is_touch = false;

    function pixels_per_point() {
        // return 1.0;
        return window.devicePixelRatio || 1.0;
    }

    function auto_resize_canvas(canvas) {
        canvas.style.width = window.innerWidth + "px";
        canvas.style.height = window.innerHeight + "px";
        canvas.width = window.innerWidth * pixels_per_point();
        canvas.height = window.innerHeight * pixels_per_point();
    }

    function get_input(canvas) {
        return {
            mouse_down: g_mouse_down,
            mouse_pos: g_mouse_pos,
            screen_size: { x: window.innerWidth, y: window.innerHeight },
            pixels_per_point: pixels_per_point(),
        };
    }

    function mouse_pos_from_event(canvas, event) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }

    const ANIMATION_FRAME = true;

    function paint() {
        var canvas = document.getElementById("canvas");
        auto_resize_canvas(canvas);
        paint_gui(canvas, get_input(canvas));
    }

    function paint_and_schedule() {
        paint();
        if (ANIMATION_FRAME) {
            window.requestAnimationFrame(paint_and_schedule);
        }
    }

    function on_wasm_loaded() {
        var canvas = document.getElementById("canvas");
        var invalidate = function() {
            if (!ANIMATION_FRAME) {
                paint();
            }
        };

        canvas.addEventListener("mousedown", function(event) {
            if (g_is_touch) { return; }
            g_mouse_pos = mouse_pos_from_event(canvas, event);
            g_mouse_down = true;
            invalidate();
            event.stopPropagation();
            event.preventDefault();
        });
        canvas.addEventListener("mousemove", function(event) {
            if (g_is_touch) { return; }
            g_mouse_pos = mouse_pos_from_event(canvas, event);
            invalidate();
            event.stopPropagation();
            event.preventDefault();
        });
        canvas.addEventListener("mouseup", function(event) {
            if (g_is_touch) { return; }
            g_mouse_pos = mouse_pos_from_event(canvas, event);
            g_mouse_down = false;
            invalidate();
            event.stopPropagation();
            event.preventDefault();
        });
        canvas.addEventListener("mouseleave", function(event) {
            if (g_is_touch) { return; }
            g_mouse_pos = null;
            invalidate();
            event.stopPropagation();
            event.preventDefault();
        });

        canvas.addEventListener("touchstart", function(event) {
            g_is_touch = true;
            g_mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
            g_mouse_down = true;
            invalidate();
            event.stopPropagation();
            event.preventDefault();
        });
        canvas.addEventListener("touchmove", function(event) {
            g_is_touch = true;
            g_mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
            invalidate();
            event.stopPropagation();
            event.preventDefault();
        });
        canvas.addEventListener("touchend", function(event) {
            g_is_touch = true;
            g_mouse_down = false; // First release mouse to click...
            update_gui()();
            g_mouse_pos = null; // ...remove hover effect
            update_gui()();
            event.stopPropagation();
            event.preventDefault();
        });

        if (!ANIMATION_FRAME) {
            window.addEventListener("load", invalidate);
            window.addEventListener("pagehide", invalidate);
            window.addEventListener("pageshow", invalidate);
            window.addEventListener("resize", invalidate);
        }

        paint_and_schedule();
    }
    </script>
    <!-- TODO: make this cover the entire screen, with resize and all -->
    <canvas id="canvas" width="1024" height="1024"></canvas>
</body>

</html>
-												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 to Emigui

											
										
										
											2019-01-12 22:07:30 +00:00
+								    <title>Emigui – A experiment in an Immediate Mode GUI written in Rust</title>
-												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
+								    html {
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								        /* Remove touch delay: */
 								        touch-action: manipulation;
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    }
 								    body {
-												Nicer rust code

											
										
										
											2018-12-23 23:15:18 +00:00
+								        background: #000000;
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    }
 								    html,
 								    body {
 								        overflow: hidden;
 								    }
-												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>
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								    <script>
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +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>
 								    // 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
-												Rename example app to example_wasm

											
										
										
											2019-03-16 11:55:42 +00:00
+								    wasm_bindgen("./example_wasm_bg.wasm")
-												Split example app from emigui_wasm

											
										
										
											2019-02-09 22:00:07 +00:00
+								        .then(on_wasm_loaded)["catch"](console.error);
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    // ----------------------------------------------------------------------------
-												Split example app from emigui_wasm

											
										
										
											2019-02-09 22:00:07 +00:00
+								    var g_wasm_app = null;
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
 								    function paint_gui(canvas, input) {
-												Split example app from emigui_wasm

											
										
										
											2019-02-09 22:00:07 +00:00
+								        if (g_wasm_app === null) {
 								            g_wasm_app = wasm_bindgen.new_webgl_gui("canvas", pixels_per_point());
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								        }
-												Split example app from emigui_wasm

											
										
										
											2019-02-09 22:00:07 +00:00
+								        wasm_bindgen.run_gui(g_wasm_app, JSON.stringify(input));
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    }
 								    // ----------------------------------------------------------------------------
-												Code cleanup: allow None mouse_pos + clippy fixes

											
										
										
											2019-02-10 14:30:48 +00:00
+								    var g_mouse_pos = null;
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    var g_mouse_down = false;
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								    var g_is_touch = false;
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
-												Pixel-perfect fonts

											
										
										
											2019-01-19 16:10:28 +00:00
+								    function pixels_per_point() {
 								        // return 1.0;
 								        return window.devicePixelRatio || 1.0;
 								    }
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    function auto_resize_canvas(canvas) {
-												Pixel-perfect fonts

											
										
										
											2019-01-19 16:10:28 +00:00
+								        canvas.style.width = window.innerWidth + "px";
 								        canvas.style.height = window.innerHeight + "px";
 								        canvas.width = window.innerWidth * pixels_per_point();
 								        canvas.height = window.innerHeight * pixels_per_point();
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    }
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    function get_input(canvas) {
 								        return {
 								            mouse_down: g_mouse_down,
 								            mouse_pos: g_mouse_pos,
-												Pixel-perfect fonts

											
										
										
											2019-01-19 16:10:28 +00:00
+								            screen_size: { x: window.innerWidth, y: window.innerHeight },
 								            pixels_per_point: pixels_per_point(),
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								        };
 								    }
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    function mouse_pos_from_event(canvas, event) {
 								        var rect = canvas.getBoundingClientRect();
 								        return {
 								            x: event.clientX - rect.left,
 								            y: event.clientY - rect.top
 								        };
 								    }
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
+								    const ANIMATION_FRAME = true;
 								    function paint() {
 								        var canvas = document.getElementById("canvas");
 								        auto_resize_canvas(canvas);
 								        paint_gui(canvas, get_input(canvas));
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								    }
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								    function paint_and_schedule() {
 								        paint();
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
+								        if (ANIMATION_FRAME) {
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            window.requestAnimationFrame(paint_and_schedule);
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
+								        }
 								    }
-												Split example app from emigui_wasm

											
										
										
											2019-02-09 22:00:07 +00:00
+								    function on_wasm_loaded() {
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								        var canvas = document.getElementById("canvas");
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								        var invalidate = function() {
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
+								            if (!ANIMATION_FRAME) {
 								                paint();
 								            }
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								        };
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
 								        canvas.addEventListener("mousedown", function(event) {
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								            if (g_is_touch) { return; }
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								            g_mouse_pos = mouse_pos_from_event(canvas, event);
 								            g_mouse_down = true;
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            invalidate();
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								            event.stopPropagation();
 								            event.preventDefault();
 								        });
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								        canvas.addEventListener("mousemove", function(event) {
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								            if (g_is_touch) { return; }
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								            g_mouse_pos = mouse_pos_from_event(canvas, event);
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            invalidate();
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								            event.stopPropagation();
 								            event.preventDefault();
 								        });
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								        canvas.addEventListener("mouseup", function(event) {
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								            if (g_is_touch) { return; }
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								            g_mouse_pos = mouse_pos_from_event(canvas, event);
 								            g_mouse_down = false;
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            invalidate();
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								            event.stopPropagation();
 								            event.preventDefault();
 								        });
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								        canvas.addEventListener("mouseleave", function(event) {
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								            if (g_is_touch) { return; }
-												Code cleanup: allow None mouse_pos + clippy fixes

											
										
										
											2019-02-10 14:30:48 +00:00
+								            g_mouse_pos = null;
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            invalidate();
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								            event.stopPropagation();
 								            event.preventDefault();
 								        });
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
 								        canvas.addEventListener("touchstart", function(event) {
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								            g_is_touch = true;
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								            g_mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								            g_mouse_down = true;
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            invalidate();
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								            event.stopPropagation();
 								            event.preventDefault();
 								        });
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								        canvas.addEventListener("touchmove", function(event) {
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								            g_is_touch = true;
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								            g_mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            invalidate();
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								            event.stopPropagation();
 								            event.preventDefault();
 								        });
 								        canvas.addEventListener("touchend", function(event) {
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								            g_is_touch = true;
 								            g_mouse_down = false; // First release mouse to click...
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            update_gui()();
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								            g_mouse_pos = null; // ...remove hover effect
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            update_gui()();
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								            event.stopPropagation();
 								            event.preventDefault();
 								        });
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								        if (!ANIMATION_FRAME) {
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								            window.addEventListener("load", invalidate);
 								            window.addEventListener("pagehide", invalidate);
 								            window.addEventListener("pageshow", invalidate);
 								            window.addEventListener("resize", invalidate);
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								        }
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
-												Fix performance issue on touch devices

											
										
										
											2019-03-16 14:49:41 +00:00
+								        paint_and_schedule();
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    }
 								    </script>
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								    <!-- TODO: make this cover the entire screen, with resize and all -->
-												Full screen canvas

											
										
										
											2018-12-27 23:51:40 +00:00
+								    <canvas id="canvas" width="1024" height="1024"></canvas>
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								</body>
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								</html>