218 lines
7.9 KiB
HTML
218 lines
7.9 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Pixelserver Interface</title>
|
|
</head>
|
|
|
|
<body style="display: grid; grid-template-columns: auto auto auto;">
|
|
<h1 style="grid-column: 1 / 4; text-align: center;">Andreas <i>production-ready</i> Interface</h1>
|
|
|
|
<div>
|
|
<h2>Kommando:</h2>
|
|
<form id='in' onSubmit="return request()">
|
|
<select id="list"></select>
|
|
<input id="args" />
|
|
<button id="execute">Ausführen</button>
|
|
</form>
|
|
|
|
<h2>Intensität:</h2>
|
|
<form id='brightnessform' onSubmit="return setbrightness()">
|
|
<input id="brightness" value=1.0 /><br/>
|
|
<button id="sendbrightness">Setzen</button>
|
|
</form>
|
|
</div>
|
|
<div style="border-left: solid 1px; padding-left: 10px;">
|
|
<h2>Gamma:</h2>
|
|
<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/>
|
|
Weiß: <input id="gammaw" value=2.65 /><br/>
|
|
<button id="sendgamma">Setzen</button>
|
|
</form>
|
|
|
|
<h2>Flip:</h2>
|
|
<form id="flipform" onSubmit="return setFlip()">
|
|
<input id="flipx" type="checkbox" /> Flip X <br/>
|
|
<input id="flipy" type="checkbox" /> Flip Y <br/>
|
|
<button id="sendflip">Setzen</button>
|
|
</form>
|
|
|
|
<h2>Filterimage:</h2>
|
|
<form id="filteform" onSubmit="return setFilter()">
|
|
<input id="filtername" value="test"></intput><br/>
|
|
<button id="filterflip">Setzten</button>
|
|
</form>
|
|
|
|
<h2>Filter expression:</h2>
|
|
<form id="filterexprform" onSubmit="return setFilterExpr()">
|
|
<input id="filterexpr" value="0.5+0.25*sin(x/3+t)"></intput><br/>
|
|
<button>Setzten</button>
|
|
</form>
|
|
</div>
|
|
<div style="border-left: solid 1px; padding-left: 10px; width: 600px;">
|
|
<h2>Crash Log:</h2>
|
|
<form id="crashlogform" onSubmit="return enableCrashLog()">
|
|
<button>start</button>
|
|
</form>
|
|
<textarea readonly id='crashlogs' style="width: 500px; height: 300px; display: none;"></textarea>
|
|
|
|
<h2>Log:</h2>
|
|
<form id="logform" onSubmit="return enableLog()">
|
|
<button>start</button>
|
|
</form>
|
|
<textarea readonly id='logs' style="width: 500px; height: 300px; display: none;"></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 w = document.getElementById('gammaw').value;
|
|
let url = "/setgamma/" + r+"/"+g+"/"+b+"/"+w;
|
|
getRaw(url, function test(){});
|
|
return false;
|
|
}
|
|
|
|
function setbrightness(){
|
|
let i = document.getElementById('brightness').value;
|
|
let url = "/setbrightness/" + i;
|
|
getRaw(url, function test(){});
|
|
return false;
|
|
}
|
|
|
|
function setFlip(){
|
|
let x = document.getElementById('flipx').checked;
|
|
let y = document.getElementById('flipy').checked;
|
|
console.log(x);
|
|
console.log(y);
|
|
getRaw("/filter/flipx/" + x, function test(){});
|
|
getRaw("/filter/flipy/" + y, function test(){});
|
|
return false;
|
|
}
|
|
|
|
function setFilter(){
|
|
let i = document.getElementById('filtername').value;
|
|
let url = "/filter/img/" + i;
|
|
getRaw(url, function test(){});
|
|
return false;
|
|
}
|
|
|
|
|
|
|
|
function setFilterExpr(){
|
|
let expr = document.getElementById('filterexpr').value;
|
|
let url = "/filter/expr/";
|
|
post(url, {"expr": expr});
|
|
return false;
|
|
}
|
|
|
|
function updateLog(){
|
|
getRaw("/apps/log", function(text){
|
|
document.getElementById('logs').value = text;
|
|
});
|
|
}
|
|
|
|
function updateCrashLog(){
|
|
getRaw("/apps/crashlog", function(text){
|
|
document.getElementById('crashlogs').value = text;
|
|
});
|
|
}
|
|
|
|
function enableCrashLog(){
|
|
document.getElementById("crashlogform").style.display = "none";
|
|
document.getElementById("crashlogs").style.display = "block";
|
|
|
|
updateCrashLog();
|
|
setInterval(updateCrashLog, 1000);
|
|
return false;
|
|
}
|
|
|
|
function enableLog(){
|
|
document.getElementById("logform").style.display = "none";
|
|
document.getElementById("logs").style.display = "block";
|
|
updateLog();
|
|
setInterval(updateLog, 1000);
|
|
return false;
|
|
}
|
|
|
|
|
|
getJSON("/apps/list", populateForm);
|
|
|
|
</script>
|
|
</body>
|
|
|
|
|
|
|
|
</html>
|