You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
7.1 KiB
156 lines
7.1 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ESP32 Microdot Pixel Lights</title>
|
|
<meta charset="UTF-8">
|
|
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<script type="text/javascript">
|
|
var base_url = window.location.href.split("index.html")[0];
|
|
|
|
function http_get(url, callback) {
|
|
console.log("URL: " + url);
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.addEventListener("load", function() {
|
|
callback(JSON.parse(xhr.response));
|
|
}, false);
|
|
xhr.open("GET", url);
|
|
xhr.send();
|
|
}
|
|
|
|
function show_alert(message) {
|
|
document.getElementById("alert").innerHTML = message;
|
|
document.getElementById("alert").style.display = "block";
|
|
}
|
|
|
|
function get_status() {
|
|
http_get(base_url + "status", function(response) {
|
|
document.getElementById("memory_total").innerHTML = response["memory"]["total"] + " B";
|
|
document.getElementById("memory_used").innerHTML = response["memory"]["alloc"] + " B";
|
|
document.getElementById("memory_free").innerHTML = response["memory"]["free"] + " B";
|
|
|
|
document.getElementById("network_ip").innerHTML = response["network"]["wifi"]["ip"];
|
|
document.getElementById("network_netmask").innerHTML = response["network"]["wifi"]["netmask"];
|
|
document.getElementById("network_gateway").innerHTML = response["network"]["wifi"]["gateway"];
|
|
document.getElementById("network_dns").innerHTML = response["network"]["wifi"]["dns"];
|
|
});
|
|
}
|
|
|
|
function run_light_preset(mode) {
|
|
http_get(base_url + "lights/preset/" + mode, function(response) {
|
|
show_alert(response["message"]);
|
|
});
|
|
}
|
|
|
|
function set_color() {
|
|
var r = document.getElementById("r").value;
|
|
var g = document.getElementById("g").value;
|
|
var b = document.getElementById("b").value;
|
|
var url = base_url + "lights/" + mode + "?r= " + r + "&g=" + g + "&b=" + b
|
|
http_get(url , function(response) {
|
|
show_alert(response["message"]);
|
|
});
|
|
}
|
|
|
|
function shutdown() {
|
|
show_alert("Server is shutting down");
|
|
http_get(base_url + "shutdown");
|
|
}
|
|
|
|
function toggle_lights(mode) {
|
|
http_get(base_url + "lights/" + mode, function(response) {
|
|
show_alert(response["message"]);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#status, #lights, #rgb { margin-bottom: 10px; }
|
|
</style>
|
|
</head>
|
|
<body onload="get_status();">
|
|
<div class="container-fluid">
|
|
<h1>ESP32 Microdot Pixel Lights</h1>
|
|
|
|
<div id="alert" class="alert alert-primary" role="alert" style="display: none;"></div>
|
|
|
|
<div id="status" class="row">
|
|
<div class="col">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr><th colspan="100%" style="text-align: center;">Network Settings</th></tr>
|
|
<tr><th>IP</th><th>Netmask</th><th>Gateway</th><th>DNS</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td id="network_ip"></td>
|
|
<td id="network_netmask"></td>
|
|
<td id="network_gateway"></td>
|
|
<td id="network_dns"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr><th colspan="100%" style="text-align: center;">Controller Memory</th></tr>
|
|
<tr><th>Total</th><th>Used</th><th>Free</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td id="memory_total"></td>
|
|
<td id="memory_used"></td>
|
|
<td id="memory_free"></td>
|
|
</tr>
|
|
</body>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="lights">
|
|
<p>
|
|
<h2>Pixel Lights</h2>
|
|
<button type="button" class="btn btn-lg btn-block btn-outline-success" onclick="toggle_lights('on');">💡 Light On</button>
|
|
<button type="button" class="btn btn-lg btn-block btn-outline-secondary" onclick="toggle_lights('off');">💡 Light Off</button>
|
|
<button type="button" class="btn btn-lg btn-block btn-outline-primary" onclick="set_color();">🟠 Set Color</button>
|
|
</p>
|
|
|
|
|
|
<p>
|
|
<h2>Preset Presets</h2>
|
|
<button type="button" class="btn btn-lg btn-block btn-outline-info" onclick="run_light_preset('bounce');">🏀 Bounce</button>
|
|
<button type="button" class="btn btn-lg btn-block btn-outline-info" onclick="run_light_preset('cycle');">🌀 Cycle</button>
|
|
<button type="button" class="btn btn-lg btn-block btn-outline-info" onclick="run_light_preset('niagra');">🌊 Niagra</button>
|
|
<button type="button" class="btn btn-lg btn-block btn-outline-info" onclick="run_light_preset('rainbow');">🌈 Rainbow</button>
|
|
</p>
|
|
</div>
|
|
|
|
<div id="rgb" class="form-row form-group">
|
|
<label class="col-form-label" for="r">R</label>
|
|
<div class="form-group col-sm-1">
|
|
<input name="r" id="r" class="form-control" type="text" placeholder="0" value="0" />
|
|
</div>
|
|
|
|
<label class="col-form-label" for="g">G</label>
|
|
<div class="form-group col-sm-1">
|
|
<input name="g" id="g" class="form-control" type="text" placeholder="0" value="0" />
|
|
</div>
|
|
|
|
<label class="col-form-label" for="b">B</label>
|
|
<div class="form-group col-sm-1">
|
|
<input name="b" id="b" class="form-control" type="text" placeholder="255" value="255" />
|
|
</div>
|
|
|
|
<small id="rgb_help" class="form-text text-muted">Used for a few presets or set color</small>
|
|
</div>
|
|
|
|
<hr>
|
|
<div id="shutdown" style="margin-top: 10px;">
|
|
<button type="button" class="btn btn-outline-danger btn-lg btn-block" onclick="shutdown();">🚫 Shutdown App</button>
|
|
|
|
<p style="margin: 10px;">Please Note: Shutting down the server will require restart of the microcontroller</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|