diff options
| author | Josh Rahm <joshuarahm@gmail.com> | 2025-12-07 13:06:59 -0700 |
|---|---|---|
| committer | Josh Rahm <joshuarahm@gmail.com> | 2025-12-07 13:06:59 -0700 |
| commit | 194763e82347be1112d1572f86aa8c8fcf7c54c1 (patch) | |
| tree | d34df028832cd2ed2828cb218b56b87c73dae240 /controller_webpage | |
| parent | 42f4c42676d42619d530db27e7a2a0b76fbf9253 (diff) | |
| download | esp32-ws2812b-194763e82347be1112d1572f86aa8c8fcf7c54c1.tar.gz esp32-ws2812b-194763e82347be1112d1572f86aa8c8fcf7c54c1.tar.bz2 esp32-ws2812b-194763e82347be1112d1572f86aa8c8fcf7c54c1.zip | |
Add the controller webpage.
Diffstat (limited to 'controller_webpage')
| -rw-r--r-- | controller_webpage/index.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/controller_webpage/index.html b/controller_webpage/index.html new file mode 100644 index 0000000..1400956 --- /dev/null +++ b/controller_webpage/index.html @@ -0,0 +1,171 @@ + <head> + <style> + .controls div { + display: block; + } + + .right { + float: right; + } + .left { + float: left; + } + + .control-panel div { + display: inline-block; + } + + .label .pad { + min-width: 10em; + } + + </style> + <script> + var getJSON = function(url, callback) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', url, true); + xhr.responseType = 'json'; + xhr.onload = function() { + var status = xhr.status; + if (status === 200) { + callback(null, xhr.response); + } else { + callback(status, xhr.response); + } + }; + xhr.send(); + }; + + var create_int_controls = function(attr, value) { + var templ = ` + <div id="${attr}-ctrl" class="control-panel"> + <div class="label"> + <div class="pad"> + <a>${value.disp}</a> + </div> + </div> + <div class="controls"> + <input type="text" id="${attr}" value="${value.value}"></input> + <button onclick="send_request_from_element('${attr}', 'set', '${attr}')">Set</button> + <button onclick="send_request('${attr}', 'add', '1')">+</button> + <button onclick="send_request('${attr}', 'sub', '1')">-</button> + </div> + </div> + ` + return templ; + } + + var create_color_controls = function(attr, value) { + var templ = ` + <div id="${attr}-ctrl" class="control-panel"> + <div class="label"> + <div class="pad"> + <a>${value.disp}</a> + </div> + </div> + <div class="controls"> + <input type="text" id="${attr}" value="${value.value}"></input> + <button onclick="send_request_from_element('${attr}', 'set', '${attr}')">Set</button> + </div> + </div> + ` + return templ; + } + + var create_bool_controls = function(attr, value) { + var templ = ` + <div id="${attr}-ctrl" class="control-panel"> + <div class="label"> + <div class="pad"> + <a>${value.disp}</a> + </div> + </div> + <div class="controls"> + <input type="checkbox" id="${attr}" ${value.value === 'on' ? 'checked' : ''} onclick="send_request('${attr}', 'set', this.checked ? 'on' : 'off')"></input> + </div> + </div> + ` + + return templ; + } + + var parse_data = function(data) { + var inner_html = ''; + for (const attr in data) { + var value = data[attr]; + console.log("data: " + data); + console.log("data['" + attr + "']: " + value.value); + + if (value.type === 'uint8_t') { + inner_html += create_int_controls(attr, value); + } + + if (value.type === 'uint32_t') { + inner_html += create_int_controls(attr, value); + } + + if (value.type === 'color') { + inner_html += create_color_controls(attr, value); + } + + if (value.type === 'int') { + inner_html += create_int_controls(attr, value); + } + + if (value.type === 'bool') { + inner_html += create_bool_controls(attr, value); + } + } + + document.getElementById('controls').innerHTML = inner_html; + } + + var refresh_values = function() { + getJSON("http://192.168.86.249/params", + function (err, data) { + parse_data(data); + }); + } + + var update_values = function() { + getJSON("http://192.168.86.249/params", + function (err, data) { + for (const attr in data) { + var value = data[attr]; + if (value.type === 'bool') { + document.getElementById(attr).checked = value.value === 'on'; + } else { + document.getElementById(attr).value = value.value; + } + } + }); + } + + function send_request_from_element(attr, param, id) { + var value = document.getElementById(id).value; + send_request(attr, param, value); + } + + function send_request(attr, param, value) { + var xhr = new XMLHttpRequest(); + xhr.open("POST", "http://192.168.86.249/" + attr + "?" + param + "=" + + value); + xhr.onload = function() { + update_values(); + }; + xhr.send(); + } + </script> + </head> + + <body onload="refresh_values()"> + + <h1>Control Josh's Christmas Tree!</h1> + + <div id="controls"> + </div> + + </body> + +</html> + |