-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
92 lines (75 loc) · 1.99 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<title>Pikchr WASM example</title>
<style>
body {
margin: 50px;
}
#output {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<script src="pikchr.js"></script>
<script>
let pikchr;
function update() {
const svgClass = "pikchr";
const pnWidthPtr = pikchr._malloc(4);
const pnHeightPtr = pikchr._malloc(4);
const inpEl = document.getElementById("input");
const source = inpEl.value;
const svg = pikchr.ccall(
"pikchr",
"string",
["string", "string", "number", "number", "number"],
[source, svgClass, 0, pnWidthPtr, pnHeightPtr],
);
// Retrieve values from C
const pnWidth = pikchr.getValue(pnWidthPtr, "i32");
const pnHeight = pikchr.getValue(pnHeightPtr, "i32");
pikchr._free(pnWidthPtr);
pikchr._free(pnHeightPtr);
pikchr._free(svg);
const div = document.getElementById("output");
div.innerHTML = svg;
div.style = `width: ${pnWidth}px; height: ${pnHeight}px`;
document.body.append(div);
}
PikchrModule().then((m) => {
pikchr = m;
update();
const textarea = document.getElementById("input");
textarea.addEventListener("keydown", (event) => {
if (event.ctrlKey && event.key === "Enter") {
// Handle <Ctrl-Enter> event here
update();
}
});
});
</script>
<p>
<kbd>Ctrl+Enter</kbd> to update the output.
</p>
<textarea id="input" rows="20" cols="100">
MK: box "Makefile" ht .3 rad 0.2
down
A: arrow; "downloads" at last.e + (.3, 0) color 0xaaaaaa;
move to A.s
"pikchr.c"; right; arrow;
CC: box "emcc" fill AliceBlue ht .3; arrow; "pikchr.js"
down;
A: arrow <- dashed;
"loads" at last.e + (.2, 0) color 0xaaaaaa;
move to A.s; down
ellipse "example.html" fill whitesmoke;
arrow from MK.e then right until even with CC then to CC.n rad 0.5
"runs" at last.ne + (.2,.1) color 0xaaaaaa;
</textarea>
<p>Output:</p>
<div id="output"></div>
</body>
</html>