this repo has no description
✨ Web: multiple keys at once, sustain pedal resets
authored by
Gwenn Le Bihan
and committed by
Ewen Le Bihan
5fc79877
a0bb8514
+18
-5
+2
src/web.rs
+2
src/web.rs
···
38
38
let body = document.body().expect("document should have a body");
39
39
40
40
let output = document.create_element("div")?;
41
+
output.set_class_name("frame");
42
+
output.set_attribute("data-color", color)?;
41
43
output.set_inner_html(&canvas.render(&vec!["*"], false));
42
44
body.append_child(&output)?;
43
45
Ok(())
+16
-5
web/index.html
+16
-5
web/index.html
···
12
12
await init()
13
13
window.render_image = (vel, col) => {
14
14
console.log([...arguments])
15
-
document.querySelector("body > div").remove()
15
+
document.querySelector(`.frame[data-color=${col}]`)?.remove()
16
16
render_image(vel, col)
17
17
}
18
18
}
···
26
26
input[1].onmidimessage = (msg) => {
27
27
const [cmd, ...args] = [...msg.data]
28
28
if (cmd === 248) return
29
-
if (cmd === 176) {
30
-
window.pedal_held = args[1] > 0
29
+
console.log(cmd, args)
30
+
if (cmd === 176 && args[0] === 64) {
31
+
const [_, intensity] = args
32
+
if (intensity === 0) {
33
+
document
34
+
.querySelectorAll(".frame")
35
+
?.forEach((frame) => frame.remove())
36
+
}
31
37
return
32
38
}
33
39
if (cmd !== 144) return
···
40
46
"red",
41
47
"orange",
42
48
"yellow",
49
+
"green",
50
+
"cyan",
43
51
"white",
44
52
]
45
53
// get color uniformly in this range from 28 (lowest pitch) to 103 (highest pitch)
···
53
61
})
54
62
</script>
55
63
<style>
56
-
body > div {
64
+
body {
65
+
background: #000;
66
+
}
67
+
68
+
.frame {
57
69
position: fixed;
58
70
top: 0;
59
71
left: 0;
60
72
right: 0;
61
73
bottom: 0;
62
-
background: black;
63
74
display: flex;
64
75
justify-content: center;
65
76
align-items: center;