libmapper.js/index.html at main · libmapper/libmapper.js · GitHub

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
<!DOCTYPE html>
<html>
  <head>
    <title>Experiment with libmapper on the web</title>
  </head>
  <body>
    <h1>libmapper on the web</h1>
    <p>Try adjusting the slider below</p>
    <hr />
    <div>
      <p>Outgoing Signal Value:</p>
      <input id="libmapperSlider" type="range" min="0" , max="100" />
    </div>
    <hr />
    <p>Input Signal Value: <span id="inputSigVal">0</span></p>
    <hr />

    <input id="libmapperSliderAutoDetected" type="range" min="0" max="100" mpr-signal-name="CoolSlider" mpr-signal-unit="Blorbs" />


    <script type="module">
      import { LibmapperDevice, LibmapperSignal } from "./libmapper.js";

      // HTML Element that we will bind a libmapper signal to
      let mySlider = document.getElementById("libmapperSlider");

      // Init an outgoing signal
      let libmapperDev = await LibmapperDevice.create("browserDev", true);
      let mySig = await libmapperDev.addSignal(mySlider, "OUTGOING");

      // Init an incoming signal
      let span = document.getElementById("inputSigVal");
      let myIncomingSig = await libmapperDev.addSignal(span, "INCOMING");
    </script>
  </body>
</html>