Skip to content

Commit 705fc03

Browse files
TatriXTatriX
committed
Refactor wasm-demo to better support mobiles
1 parent 0d6b8a4 commit 705fc03

File tree

4 files changed

+102
-74
lines changed

4 files changed

+102
-74
lines changed

‎examples/wasm-demo/README.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
# The Minimal Demo for Plotters + WASM
22

3-
Run the demo locally with the following command under this directory.
3+
You can run the demo locally using `npm`:
4+
```bash
5+
cd www
6+
npm install
7+
npm start
8+
```
9+
10+
or with the following command under this directory (Python required).
411

512
```
613
./start-server.sh
714
```
815

9-
For Windows user doesn't have Bash, `start-server.bat` can be used to launch the server.
16+
For Windows users without Bash, `start-server.bat` can be used to launch the server.
1017

1118
```
1219
start-server.bat

‎examples/wasm-demo/www/index.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,21 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>Plotters WebAssembly Demo</title>
67
<link rel="stylesheet" href="./style.css">
78
</head>
89
<body>
910
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
1011
<script src="./bootstrap.js"></script>
11-
<div>
12-
<h1 class="centered">Plotters WebAssembly Demo {TODO}</h1>
13-
<div id="coord" class="centered"></div>
14-
<canvas id="canvas" class="centered" height=400 width=600></canvas>
15-
<div id="status" class="centered">Loading WebAssembly...</div>
12+
<main>
13+
<h1>Plotters WebAssembly Demo</h1>
14+
<div id="coord"></div>
15+
<canvas id="canvas" width="600" height="400"></canvas>
16+
<div id="status">Loading WebAssembly...</div>
1617
<div id="control">
17-
<label for="pow">Demo: </label>
18-
<select id="pow">
18+
<label for="plot-type">Demo: </label>
19+
<select id="plot-type">
1920
<option value="0">Graph of y=1</option>
2021
<option value="1">Graph of y=x</option>
2122
<option value="2">Graph of y=x^2</option>
@@ -25,12 +26,12 @@ <h1 class="centered">Plotters WebAssembly Demo {TODO}</h1>
2526
<option value="mandelbrot">Mandelbrot Set</option>
2627
</select>
2728
</div>
28-
</div>
29-
<div id="links" class="centered">
29+
</main>
30+
<footer>
3031
<a href="https://github.com/38/plotters/blob/master/examples/wasm-demo" target="a">Source</a> |
3132
<a href="https://github.com/38/plotters" target="a">Repo</a> |
3233
<a href="https://crates.io/crates/plotters" target="a">Crates</a> |
3334
<a href="https://docs.rs/plotters" target="a">Docs</a>
34-
</div>
35+
</footer>
3536
</body>
3637
</html>

‎examples/wasm-demo/www/index.js

Lines changed: 50 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,58 @@ import { Chart, drawPower } from "wasm-demo";
22

33
const canvas = document.getElementById("canvas");
44
const ctx = canvas.getContext("2d");
5-
6-
// Setup canvas to properly handle high DPI.
7-
canvas.style.width = canvas.width + "px";
8-
canvas.style.height = canvas.height + "px";
9-
const dpr = window.devicePixelRatio || 1;
10-
const rect = canvas.getBoundingClientRect();
11-
canvas.width *= dpr;
12-
canvas.height *= dpr;
13-
ctx.scale(dpr, dpr);
14-
155
const coord = document.getElementById("coord");
16-
6+
const plotType = document.getElementById("plot-type");
7+
const status = document.getElementById("status");
178
let chart = undefined;
18-
window.addEventListener("mousemove", (event) => {
19-
if (chart === undefined) {
20-
return;
21-
}
22-
23-
const point = chart.coord(event.offsetX, event.offsetY);
249

25-
coord.innerText = (point)
26-
? `(${point.x.toFixed(3)}, ${point.y.toFixed(3)})`
27-
: "Mouse pointer is out of range";
28-
});
29-
30-
const select = document.getElementById("pow");
31-
const status = document.getElementById("status");
10+
main();
11+
12+
function main() {
13+
setupUI();
14+
setupCanvas();
15+
}
16+
17+
/** Add event listeners */
18+
function setupUI() {
19+
status.innerText = "WebAssembly loaded!";
20+
plotType.addEventListener("change", updatePlot);
21+
window.addEventListener("resize", setupCanvas);
22+
window.addEventListener("mousemove", onMouseMove);
23+
}
24+
25+
/** Setup canvas to properly handle high DPI and redraw current plot. */
26+
function setupCanvas() {
27+
const dpr = window.devicePixelRatio || 1;
28+
const aspectRatio = canvas.width / canvas.height;
29+
const size = Math.min(canvas.width, canvas.parentNode.offsetWidth);
30+
canvas.style.width = size + "px";
31+
canvas.style.height = size / aspectRatio + "px";
32+
canvas.width = size * dpr;
33+
canvas.height = size / aspectRatio * dpr;
34+
ctx.scale(dpr, dpr);
35+
updatePlot();
36+
}
37+
38+
/** Update displayed coordinates */
39+
function onMouseMove(event) {
40+
if (chart) {
41+
const point = chart.coord(event.offsetX, event.offsetY);
42+
coord.innerText = (point)
43+
? `(${point.x.toFixed(3)}, ${point.y.toFixed(3)})`
44+
: "Mouse pointer is out of range";
45+
}
46+
}
3247

33-
const updatePlot = () => {
34-
const selected = select.selectedOptions[0];
48+
/** Redraw currently selected plot */
49+
function updatePlot() {
50+
const selected = plotType.selectedOptions[0];
3551
status.innerText = `Rendering ${selected.innerText}...`;
36-
setTimeout(() => {
37-
chart = undefined;
38-
const start = performance.now();
39-
chart = (selected.value == "mandelbrot")
40-
? Chart.mandelbrot(canvas)
41-
: Chart.power("canvas", Number(selected.value));
42-
const end = performance.now();
43-
status.innerText = `Rendered ${selected.innerText} in ${end - start}ms`;
44-
}, 5);
45-
};
46-
47-
status.innerText = "WebAssembly loaded!";
48-
49-
updatePlot();
50-
51-
select.addEventListener("change", updatePlot);
52+
chart = undefined;
53+
const start = performance.now();
54+
chart = (selected.value == "mandelbrot")
55+
? Chart.mandelbrot(canvas)
56+
: Chart.power("canvas", Number(selected.value));
57+
const end = performance.now();
58+
status.innerText = `Rendered ${selected.innerText} in ${Math.ceil(end - start)}ms`;
59+
}

‎examples/wasm-demo/www/style.css

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,50 @@
1-
.centered {
2-
margin-left: auto;
3-
margin-right: auto;
4-
display: block;
5-
width: max-content;
1+
html, body, main {
2+
width: 100%;
3+
margin: 0;
4+
padding: 0;
65
}
76

8-
#coord {
9-
color: grey;
10-
font-size: 10px;
11-
height: 15px
7+
body {
8+
margin: auto;
9+
max-width: 800px;
10+
display: flex;
11+
flex-direction: column;
12+
}
13+
14+
@media (max-width: 800px) {
15+
body {
16+
padding: 10px;
17+
box-sizing: border-box;
18+
}
1219
}
1320

14-
#status {
21+
main {
22+
display: flex;
23+
flex-direction: column;
24+
align-items: center;
25+
}
26+
27+
#coord, #status {
1528
color: grey;
16-
font-size: 10px
29+
font-size: 10px;
30+
height: 15px
1731
}
1832

1933
#control {
20-
margin-top: 20px;
21-
margin-left: auto;
22-
margin-right: auto;
23-
width: 400px
34+
margin-top: 1em;
2435
}
2536

2637
#control label {
2738
font-weight: bold;
39+
margin-right: 1em;
2840
}
2941

30-
#pow {
31-
width: 300px;
32-
float: right;
42+
#control select {
43+
padding: 0.25em 0.5em;
3344
}
3445

35-
#links {
36-
margin-top: 50px;
46+
footer {
47+
margin-top: 2em;
3748
font-size: 12px;
49+
text-align: center;
3850
}

0 commit comments

Comments
 (0)