JavaScript-SDK/demo.html at senpai · AnalogSense/JavaScript-SDK · 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
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
    <title>AnalogSense.js Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="container pt-2">
        <div id="nodev">
            <h2>No analog keyboard connected</h2>
            <button class="btn btn-primary" onclick="doConnect();">Connect</button>
        </div>
        <div id="nohid" style="display:none">
            <h2>Your browser does not support WebHID</h2>
            <p>If you want to use this page, you will need to be on a desktop and using Chrome, Edge, Safari, or an alternative Chromium-based browser.</p>
        </div>
        <div id="demo" style="display:none">
            <h2 id="devname"></h2>
            <button class="btn btn-secondary" onclick="doDisconnect();">Disconnect</button>
            <div id="active-keys" class="mt-3"></div>
        </div>
    </div>
    <script src="AnalogSense.js"></script>
    <script>
        async function doConnect()
        {
            const dev = await analogsense.requestDevice();
            if (dev)
            {
                initDemo(dev);
            }
        }

        function initDemo(dev)
        {
            window.dev = dev;
            document.getElementById("nodev").style.display = "none";
            document.getElementById("demo").style.display = "block";
            document.getElementById("devname").textContent = dev.getProductName();
            dev.startListening(function(active_keys)
            {
                document.getElementById("active-keys").innerHTML = "";
                for (const key of active_keys)
                {
                    const div = document.createElement("div");
                    div.className = "progress";
                    {
                        const bar = document.createElement("div");
                        bar.className = "progress-bar";
                        bar.style.width = (key.value * 100) + "%";
                        bar.textContent = analogsense.scancodeToString(key.scancode);
                        div.appendChild(bar);
                    }
                    document.getElementById("active-keys").appendChild(div);
                }
            });
        }

        function softDisconnect()
        {
            document.getElementById("demo").style.display = "none";
            document.getElementById("nodev").style.display = "block";
            document.getElementById("active-keys").innerHTML = "";
            window.dev = undefined;
        }

        function doDisconnect()
        {
            window.dev.forget();
            softDisconnect();
        }

        async function checkPairedDevices()
        {
            const devices = await analogsense.getDevices();
            if (devices.length != 0)
            {
                initDemo(devices[0]);
            }
        }

        if ("hid" in navigator)
        {
            checkPairedDevices();

            navigator.hid.onconnect = function(event)
            {
                if (!window.dev)
                {
                    checkPairedDevices();
                }
            };

            navigator.hid.ondisconnect = function(event)
            {
                if (window.dev && event.device == window.dev.dev)
                {
                    softDisconnect();
                }
            };
        }
        else
        {
            document.getElementById("nodev").style.display = "none";
            document.getElementById("nohid").style.display = "block";
        }
    </script>
</body>
</html>