mirror of
https://github.com/emilk/egui.git
synced 2026-08-30 05:10:03 -04:00
No typescript. Just one index.html + wasm.
This commit is contained in:
Emil Ernerfeldt
Binary file not shown.
@@ -1,86 +0,0 @@
|
||||
// we'll defer our execution until the wasm is ready to go
|
||||
function wasm_loaded() {
|
||||
console.log("wasm loaded");
|
||||
initialize();
|
||||
}
|
||||
// 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("./emgui_wasm_bg.wasm")
|
||||
.then(wasm_loaded)["catch"](console.error);
|
||||
// ----------------------------------------------------------------------------
|
||||
var g_webgl_painter = null;
|
||||
function paint_gui(canvas, input) {
|
||||
if (g_webgl_painter === null) {
|
||||
g_webgl_painter = wasm_bindgen.new_webgl_painter("canvas");
|
||||
}
|
||||
wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
|
||||
}
|
||||
// ----------------------------------------------------------------------------
|
||||
var g_mouse_pos = { x: -1000.0, y: -1000.0 };
|
||||
var g_mouse_down = false;
|
||||
function auto_resize_canvas(canvas) {
|
||||
if (true) {
|
||||
canvas.setAttribute("width", window.innerWidth);
|
||||
canvas.setAttribute("height", window.innerHeight);
|
||||
}
|
||||
else {
|
||||
// TODO: this stuff
|
||||
var pixels_per_point = window.devicePixelRatio || 1;
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.scale(pixels_per_point, pixels_per_point);
|
||||
canvas.setAttribute("width", window.innerWidth * pixels_per_point);
|
||||
canvas.setAttribute("height", window.innerHeight * pixels_per_point);
|
||||
}
|
||||
}
|
||||
function get_input(canvas) {
|
||||
return {
|
||||
mouse_down: g_mouse_down,
|
||||
mouse_pos: g_mouse_pos,
|
||||
screen_size: { x: canvas.width, y: canvas.height }
|
||||
};
|
||||
}
|
||||
function mouse_pos_from_event(canvas, event) {
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top
|
||||
};
|
||||
}
|
||||
function initialize() {
|
||||
console.log("window.devicePixelRatio: " + window.devicePixelRatio);
|
||||
var canvas = document.getElementById("canvas");
|
||||
auto_resize_canvas(canvas);
|
||||
var repaint = function () { return paint_gui(canvas, get_input(canvas)); };
|
||||
canvas.addEventListener("mousemove", function (event) {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
canvas.addEventListener("mouseleave", function (event) {
|
||||
g_mouse_pos = { x: -1000.0, y: -1000.0 };
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
canvas.addEventListener("mousedown", function (event) {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
g_mouse_down = true;
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
canvas.addEventListener("mouseup", function (event) {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
g_mouse_down = false;
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
window.addEventListener("load", repaint);
|
||||
window.addEventListener("pagehide", repaint);
|
||||
window.addEventListener("pageshow", repaint);
|
||||
window.addEventListener("resize", repaint);
|
||||
// setInterval(repaint, 16);
|
||||
repaint();
|
||||
}
|
||||
128
docs/frontend.ts
128
docs/frontend.ts
@@ -1,128 +0,0 @@
|
||||
interface Vec2 {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
/// What the integration gives to the gui.
|
||||
interface RawInput {
|
||||
/// Is the button currently down?
|
||||
mouse_down: boolean;
|
||||
|
||||
/// Current position of the mouse in points.
|
||||
mouse_pos: Vec2;
|
||||
|
||||
/// Size of the screen in points.
|
||||
screen_size: Vec2;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// the `wasm_bindgen` global is set to the exports of the Rust module. Override with wasm-bindgen --no-modules-global
|
||||
declare var wasm_bindgen: any;
|
||||
|
||||
// we'll defer our execution until the wasm is ready to go
|
||||
function wasm_loaded() {
|
||||
console.log(`wasm loaded`);
|
||||
initialize();
|
||||
}
|
||||
|
||||
// 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("./emgui_wasm_bg.wasm")
|
||||
.then(wasm_loaded)
|
||||
.catch(console.error);
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
let g_webgl_painter = null;
|
||||
|
||||
function paint_gui(canvas, input: RawInput) {
|
||||
if (g_webgl_painter === null) {
|
||||
g_webgl_painter = wasm_bindgen.new_webgl_painter("canvas");
|
||||
}
|
||||
wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
let g_mouse_pos = { x: -1000.0, y: -1000.0 };
|
||||
let g_mouse_down = false;
|
||||
|
||||
function auto_resize_canvas(canvas) {
|
||||
if (true) {
|
||||
canvas.setAttribute("width", window.innerWidth);
|
||||
canvas.setAttribute("height", window.innerHeight);
|
||||
} else {
|
||||
// TODO: this stuff
|
||||
const pixels_per_point = window.devicePixelRatio || 1;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.scale(pixels_per_point, pixels_per_point);
|
||||
|
||||
canvas.setAttribute("width", window.innerWidth * pixels_per_point);
|
||||
canvas.setAttribute("height", window.innerHeight * pixels_per_point);
|
||||
}
|
||||
}
|
||||
|
||||
function get_input(canvas): RawInput {
|
||||
return {
|
||||
mouse_down: g_mouse_down,
|
||||
mouse_pos: g_mouse_pos,
|
||||
screen_size: { x: canvas.width, y: canvas.height },
|
||||
};
|
||||
}
|
||||
|
||||
function mouse_pos_from_event(canvas, event): Vec2 {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top,
|
||||
};
|
||||
}
|
||||
|
||||
function initialize() {
|
||||
console.log(`window.devicePixelRatio: ${window.devicePixelRatio}`);
|
||||
|
||||
const canvas = document.getElementById("canvas");
|
||||
auto_resize_canvas(canvas);
|
||||
const repaint = () => paint_gui(canvas, get_input(canvas));
|
||||
|
||||
canvas.addEventListener("mousemove", event => {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
canvas.addEventListener("mouseleave", event => {
|
||||
g_mouse_pos = { x: -1000.0, y: -1000.0 };
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
canvas.addEventListener("mousedown", event => {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
g_mouse_down = true;
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
canvas.addEventListener("mouseup", event => {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
g_mouse_down = false;
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
window.addEventListener("load", repaint);
|
||||
window.addEventListener("pagehide", repaint);
|
||||
window.addEventListener("pageshow", repaint);
|
||||
window.addEventListener("resize", repaint);
|
||||
|
||||
// setInterval(repaint, 16);
|
||||
|
||||
repaint();
|
||||
}
|
||||
150
docs/index.html
150
docs/index.html
@@ -1,42 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<head>
|
||||
<title>Emgui – A experiment in an Immediate Mode GUI written in Rust</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<head>
|
||||
<title>Emgui – A experiment in an Immediate Mode GUI written in Rust</title>
|
||||
<style>
|
||||
html {
|
||||
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>
|
||||
}
|
||||
|
||||
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="emgui_wasm.js"></script>
|
||||
<script>
|
||||
// we'll defer our execution until the wasm is ready to go
|
||||
function wasm_loaded() {
|
||||
console.log("wasm loaded");
|
||||
initialize();
|
||||
}
|
||||
// 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("./emgui_wasm_bg.wasm")
|
||||
.then(wasm_loaded)["catch"](console.error);
|
||||
// ----------------------------------------------------------------------------
|
||||
var g_webgl_painter = null;
|
||||
|
||||
<script src="frontend.js" type="module"></script>
|
||||
function paint_gui(canvas, input) {
|
||||
if (g_webgl_painter === null) {
|
||||
g_webgl_painter = wasm_bindgen.new_webgl_painter("canvas");
|
||||
}
|
||||
wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
|
||||
}
|
||||
// ----------------------------------------------------------------------------
|
||||
var g_mouse_pos = { x: -1000.0, y: -1000.0 };
|
||||
var g_mouse_down = false;
|
||||
|
||||
function auto_resize_canvas(canvas) {
|
||||
// TODO: figure out why this isn't quite working.
|
||||
if (true) {
|
||||
canvas.setAttribute("width", window.innerWidth);
|
||||
canvas.setAttribute("height", window.innerHeight);
|
||||
} else {
|
||||
// TODO: this stuff
|
||||
var pixels_per_point = window.devicePixelRatio || 1;
|
||||
canvas.setAttribute("width", window.innerWidth * pixels_per_point);
|
||||
canvas.setAttribute("height", window.innerHeight * pixels_per_point);
|
||||
}
|
||||
}
|
||||
|
||||
function get_input(canvas) {
|
||||
return {
|
||||
mouse_down: g_mouse_down,
|
||||
mouse_pos: g_mouse_pos,
|
||||
screen_size: { x: canvas.width, y: canvas.height }
|
||||
};
|
||||
}
|
||||
|
||||
function mouse_pos_from_event(canvas, event) {
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: event.clientX - rect.left,
|
||||
y: event.clientY - rect.top
|
||||
};
|
||||
}
|
||||
|
||||
function initialize() {
|
||||
console.log("window.devicePixelRatio: " + window.devicePixelRatio);
|
||||
var canvas = document.getElementById("canvas");
|
||||
var repaint = function() {
|
||||
auto_resize_canvas(canvas);
|
||||
paint_gui(canvas, get_input(canvas));
|
||||
};
|
||||
canvas.addEventListener("mousemove", function(event) {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
canvas.addEventListener("mouseleave", function(event) {
|
||||
g_mouse_pos = { x: -1000.0, y: -1000.0 };
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
canvas.addEventListener("mousedown", function(event) {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
g_mouse_down = true;
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
canvas.addEventListener("mouseup", function(event) {
|
||||
g_mouse_pos = mouse_pos_from_event(canvas, event);
|
||||
g_mouse_down = false;
|
||||
repaint();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
window.addEventListener("load", repaint);
|
||||
window.addEventListener("pagehide", repaint);
|
||||
window.addEventListener("pageshow", repaint);
|
||||
window.addEventListener("resize", repaint);
|
||||
// setInterval(repaint, 16);
|
||||
repaint();
|
||||
}
|
||||
</script>
|
||||
<!-- TODO: make this cover the entire screen, with resize and all -->
|
||||
<canvas id="canvas" width="1024" height="1024"></canvas>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user