<html>
<head>
<meta charset="utf-8">
<title>Pixelserver Interface</title>
</head>
<body>
<h1>Andreas <i>DEBUG</i> Interface</h1>
<h2>Kommando:</h2>
<div id='container' style="display: none;">
<form id='in' onSubmit="return request()">
<select id="list"></select>
<input id="args" />
<button id="execute">Ausführen</button>
</form>
</div>
<h2>Gamma:</h2>
<div id='container'>
<form id='gammeform' onSubmit="return setgamma()">
Rot: <input id="gammar" value=2.8 /><br/>
Grün: <input id="gammag" value=2.65 /><br/>
Blau: <input id="gammab" value=2.65 /><br/>
<button id="sendgamma">Setzen</button>
</form>
</div>
<h2>Log:</h2>
<div id='log'>
<textarea readonly id='logs' style="width: 500px; height: 500px;"></textarea>
</div>
<script>
function getRaw(from, callback){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
callback(xhttp.responseText);
}
};
xhttp.open("GET", from, true);
xhttp.send();
}
function getJSON(from, callback){
getRaw(from, function(text){
callback(JSON.parse(text));
});
}
function post(from, data){
var formdata = new FormData();
for (var key in data) {
formdata.append(key, data[key]);
}
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xhttp.open("POST", from, true);
xhttp.send(formdata);
}
function populateForm(parameters){
let list = document.getElementById("list");
parameters.map ( e => {
})
for (var i in parameters) {
let app = parameters[i];
let name = app["name"];
let guiname = app["guiname"];
let persistent = app["persistent"];
let element = document.createElement("option");
element.value = name;
element.innerHTML = guiname;
element.dataset.persistent = persistent;
list.appendChild(element);
}
list.onchange = function(){
let app = document.getElementById('list');
let persistent = app.options[app.selectedIndex].dataset.persistent;
if (persistent == "true"){
document.getElementById("args").style.display = "none";
}else{
document.getElementById("args").style.display = "inline";
}
}
list.onchange();
document.getElementById("container").style.display = "block";
}
function request(){
let app = document.getElementById('list');
let val = app.options[app.selectedIndex].value;
let parameter = document.getElementById('args').value;
let url = "/apps/start/" + val;
post(url, {"param": parameter});
return false;
}
function setgamma(){
let r = document.getElementById('gammar').value;
let g = document.getElementById('gammag').value;
let b = document.getElementById('gammab').value;
let url = "/setgamma/" + r+"/"+g+"/"+b;
getRaw(url, function test(){});
return false;
}
function updateLog(){
getRaw("/apps/log", function(text){
document.getElementById('logs').innerText = text;
});
}
updateLog();
setInterval(updateLog, 1000);
getJSON("/apps/list", populateForm);
</script>
</body>
</html>