pixel/pixelserver2
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor

Browse Source
This commit is contained in:
T
2024-11-10 02:27:36 +01:00
parent 313d3aa471
commit acafc0fc87
3 changed files with 347 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

402
html/index.html
View File

@ -1,222 +1,266 @@
<html>
<head>
<meta charset="utf-8">
<title>Pixelserver Interface</title>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Pixelserver Interface</title>
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, viewport-fit=auto"/>
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<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>
<style>
.main {
display: grid;
grid-gap: 1rem;
align-items: stretch;
}
<div>
@media only screen {
.main {
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (min-width: 800px) {
.main {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 1111px) {
.main {
grid-template-columns: repeat(3, 1fr);
}
}
.col {
min-width: 300px;
/*max-width: 350px;*/
}
.just, .just-col {
display: flex;
}
.just > * {
flex: 1;
margin: 0 1rem;
}
.just-col {
flex-direction: column;
}
.just-col > * {
flex: 1;
margin: 2px 1rem;
}
#gammaform span {
display: inline-block;
width: 4rem;
}
.logging {
max-width: 500px;
}
.options {
max-width: 350px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Andreas <i>production-ready</i> Interface</h1>
<div class="main">
<div class="col">
<h2>Kommando:</h2>
<form id='in' onSubmit="return request()">
<form id="in" class="just" onSubmit="return request()">
<select id="list"></select>
<input id="args" />
<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/>
<form id="brightnessform" class="just" 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;">
<div class="options col">
<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/>
<form id="gammaform" class="just-col" onSubmit="return setgamma()">
<label><span>Rot: </span><input id="gammar" value="2.8"/></label><br/>
<label><span>Grün: </span><input id="gammag" value="2.65"/></label><br/>
<label><span>Blau: </span><input id="gammab" value="2.65"/></label><br/>
<label><span>Weiß: </span><input id="gammaw" value="2.65"/></label><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/>
<form id="flipform" class="just" onSubmit="return setFlip()">
<label><input id="flipx" type="checkbox"/> Flip X</label>
<label><input id="flipy" type="checkbox"/> Flip Y</label>
<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 id="filterform" class="just" onSubmit="return setFilter()">
<input id="filtername" value="test">
<button id="filterflip">Setzen</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 id="filterexprform" class="just" onSubmit="return setFilterExpr()">
<input id="filterexpr" value="0.5+0.25*sin(x/3+t)">
<button>Setzen</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>
<div class="logging col">
<h2>Crash Log:
<button id="crashlogbtn" type="button" onclick="return enableCrashLog()">start</button>
</h2>
<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>
<h2>Log:
<button id="logbtn" type="button" onclick="return enableLog()">start</button>
</h2>
<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();
<script>
function getRaw(url, callback) {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200)
if (callback) callback(xhttp.responseText);
};
xhttp.open("GET", url, true);
xhttp.send();
}
function getJSON(url, callback) {
getRaw(url, function (text) {
callback(JSON.parse(text));
});
}
function post(url, data) {
const formdata = new FormData();
for (const key in data)
formdata.append(key, data[key]);
const xhttp = new XMLHttpRequest();
// xhttp.onreadystatechange = function () {
// if (this.readyState === 4 && this.status === 200) {}
// };
xhttp.open("POST", url, true);
xhttp.send(formdata);
}
function populateForm(parameters) {
const list = document.getElementById("list");
for (const i in parameters) {
const app = parameters[i];
const name = app["name"];
const guiname = app["guiname"];
const persistent = app["persistent"];
const element = document.createElement("option");
element.value = name;
element.innerHTML = guiname;
element.dataset.persistent = persistent;
list.appendChild(element);
}
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]);
list.onchange = function () {
const app = document.getElementById('list');
const persistent = app.options[app.selectedIndex].dataset.persistent;
if (persistent == "true") {
document.getElementById("args").style.display = "none";
} else {
document.getElementById("args").style.display = "inline";
}
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xhttp.open("POST", from, true);
xhttp.send(formdata);
}
};
list.onchange();
document.getElementById("container").style.display = "block";
}
function populateForm(parameters){
let list = document.getElementById("list");
function request() {
let app = document.getElementById('list');
let val = app.options[app.selectedIndex].value;
let parameter = document.getElementById('args').value;
post("/apps/start/" + val, {"param": parameter});
return false;
}
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);
}
function setgamma() {
const r = document.getElementById('gammar').value;
const g = document.getElementById('gammag').value;
const b = document.getElementById('gammab').value;
const w = document.getElementById('gammaw').value;
getRaw(`/setgamma/${r}/${g}/${b}/${w}`);
return false;
}
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 setbrightness() {
const i = document.getElementById('brightness').value;
getRaw("/setbrightness/" + i);
return false;
}
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 setFlip() {
const x = document.getElementById('flipx').checked;
const y = document.getElementById('flipy').checked;
getRaw("/filter/flipx/" + x);
getRaw("/filter/flipy/" + y);
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 setFilter() {
const i = document.getElementById('filtername').value;
getRaw("/filter/img/" + i);
return false;
}
function setbrightness(){
let i = document.getElementById('brightness').value;
let url = "/setbrightness/" + i;
getRaw(url, function test(){});
return false;
}
function setFilterExpr() {
const expr = document.getElementById('filterexpr').value;
post("/filter/expr/", {"expr": expr});
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 updateLog() {
getRaw("/apps/log", function (text) {
document.getElementById('logs').value = text;
});
}
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>
function updateCrashLog() {
getRaw("/apps/crashlog", function (text) {
document.getElementById('crashlogs').value = text;
});
}
function enableCrashLog() {
document.getElementById("crashlogbtn").remove();
document.getElementById("crashlogs").style.display = "block";
updateCrashLog();
setInterval(updateCrashLog, 1000);
return false;
}
function enableLog() {
document.getElementById("logbtn").remove();
document.getElementById("logs").style.display = "block";
updateLog();
setInterval(updateLog, 1000);
return false;
}
getJSON("/apps/list", populateForm);
</script>
</div>
</body>
</html>