Public/esp32-sk6812
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

htdocs: change animation from the index page

Browse source
This commit is contained in:
Thomas Kolb 2019-12-16 22:12:09 +01:00
parent aa56e36f3f
commit 9d60afe1fb
2 changed files with 63 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
data/htdocs/anim.js Normal file
View file

@ -0,0 +1,30 @@
function callURL(url)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function getjson(url, handler_func)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
handler_func(data);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function getAnimList(handler_func)
{
return getjson("/api/listanim", handler_func);
}
function setAnim(id)
{
callURL("/api/setanim?anim=" + id);
}

32
data/htdocs/index.html
View file

@ -1,10 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lampensteuerung</title>
<script type="text/javascript" src="anim.js"></script>
<script type="text/javascript">
function fillAnimElement(animList)
{
elem = document.getElementById("anim");
animList.forEach(function(item, index) {
opt = new Option(item.name, item.id);
//opt.value = item.id;
//opt.text = item.name;
elem.add(opt);
})
}
function setup()
{
animList = getAnimList(fillAnimElement);
}
</script>
</head>
<body>
<body onLoad="setup()">
<h1>Lampensteuerung</h1>
<p>It works!</p>
<form action="#">
<p>
<label for="anim">Choose animation:</label>
<select id="anim">
</select>
<button onClick="setAnim(document.getElementById('anim').value)">Set</button>
</p>
</form>
</body>
</html>