LED_Program/test.html at master · richy-liu/LED_Program · 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
<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">

    <head>
        <title>LED Controller</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
        <style>
            .presetButtons {
                width: 150px;
            }
        </style>
    </head>

    <body>
        <h1 class="text-muted">LED Strip Controller</h1>

        <div>
            <button class="presetButtons" onclick="sendPreset(0)">Rainbow</button><br><br>
            <button class="presetButtons" onclick="sendPreset(1)">Red-Green-Blue</button><br><br>
            <button class="presetButtons" onclick="sendPreset(2)">Aqua Wave</button><br><br>
            <button class="presetButtons" onclick="sendPreset(3)">Inferno Wave</button><br><br>
            <button class="presetButtons" onclick="sendPreset(4)">Off</button><br><br>
            <button class="presetButtons" onclick="sendPreset(5)">Luxembourg :)</button><br><br>
        </div>

        <br>

        <input type="text" id="setColour" />

        <br><br>

        <div class="slidecontainer">
            <p>Speed: <span id="speedValue"></span></p>
            <input type="range" min="0" max="100" value="23" class="slider" id="speedSlider">
            <p>Brightness: <span id="brightnessValue"></span></p>
            <input type="range" min="0" max="100" value="15" class="slider" id="brightnessSlider">
        </div>
        <br>

        Forward: <input type="checkbox" id="forwardCheckbox" onclick="sendMessage('reverse')" checked="true">

        <script>
            function sendPreset(presetNumber) {
                document.getElementById("forwardCheckbox").checked = true;
                sendMessage("preset?preset=" + presetNumber);
            }
            $(document).ready(function() {
                $("#setColour").spectrum( {
                    color: "#f00",
                    showInput: true,
                    showButtons: false
                });
                $("#setColour").on("move.spectrum", setColourFunction);
                $("#setColour").on("change.spectrum", setColourFunction);
            });
            function setColourFunction() {
                o = $("#setColour").spectrum("get");
                h = parseFloat(o._originalInput.h);
                s = parseFloat(o._originalInput.s);
                v = parseFloat(o._originalInput.v);
                sendMessageThrottled("hsv?h=" + Math.round(h) + "&s=" + Math.round(s) + "&v=" + Math.round(v));
            }

            var speedValue = document.getElementById("speedValue");
            var speedSlider = document.getElementById("speedSlider");
            var brightnessValue = document.getElementById("brightnessValue");
            var brightnessSlider = document.getElementById("brightnessSlider");

            speedValue.innerHTML = speedSlider.value;
            speedSlider.oninput = function() {
                speedValue.innerHTML = this.value;
                sendMessageThrottled("speed?speed=" + parseFloat(this.value));
            }

            brightnessValue.innerHTML = brightnessSlider.value;
            brightnessSlider.oninput = function() {
                brightnessValue.innerHTML = this.value;
                sendMessageThrottled("brightness?brightness=" + parseFloat(this.value));
            }

            var sendMessageThrottled = _.throttle(sendMessage, 50, { "trailing": true });
            function sendMessage(message) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        if (this.responseText) {
                            var result = this.responseText.split("_");
                            speedValue.innerHTML = result[0];
                            speedSlider.value = result[0];
                            brightnessValue.innerHTML = result[1];
                            brightnessSlider.value = result[1];
                        }
                    }
                }
                xhttp.open("GET", message, true);
                xhttp.send();
            }
        </script>
    </body>
</html>