LedDisplay/vscode/OmobiLEDdisplay/src/index.html

323 lines
11 KiB
HTML
Raw Normal View History

2020-10-03 16:06:25 +02:00
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 2.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
.h2{
border: 0px solid black;
}
.settings{
border: 1px solid black;
}
.settings tr:nth-child(even) {
background-color: #eee
}
.settings tr:nth-child(odd) {
background-color: #fff;
}
.settings th {
color: white;
background-color: black;
padding: 4px 4px 2px 4px;
}
.settings td {
border: 1px solid black;
padding: 2px;
}
.settings tr:last-of-type td {
background-color: fffb99;
text-align: center;
}
</style>
<script type="text/javascript">
var Url = "/";
var maxSettings = 5;
window.onload = start;
function addListener(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
}
else if (element.attachEvent) {
element.attachEvent('on' + eventName, handler);
}
else {
element['on' + eventName] = handler;
}
}
function start()
{
tableCreate(maxSettings);
omobiAjx = new XMLHttpRequest();
omobiAjx.onreadystatechange= readResp;
httpGet ();
}
function httpGet ()
{
var querystr = "";
omobiAjx.open ( "GET", Url + "loadcurrent", true ) ;
omobiAjx.send() ;
}
function httpSet ()
{
var querystr = "?";
for(var set = 0; set < maxSettings; set++)
{
querystr = querystr.concat("&text_"+set, "=",encodeURIComponent(document.getElementById("text_"+set).value));
querystr = querystr.concat("&time_"+set, "=",encodeURIComponent(document.getElementById("time_"+set).value));
querystr = querystr.concat("&scroll_runs_"+set, "=",encodeURIComponent(document.getElementById("scroll_runs_"+set).value));
querystr = querystr.concat("&color_"+set, "=",encodeURIComponent(document.getElementById("color_"+set).value));
querystr = querystr.concat("&align_"+set, "=",encodeURIComponent(document.getElementById("align_"+set).value));
querystr = querystr.concat("&scroll_"+set, "=",encodeURIComponent(document.getElementById("scroll_"+set).checked));
querystr = querystr.concat("&active_"+set, "=",encodeURIComponent(document.getElementById("active_"+set).checked));
}
console.log("Send to Display:",querystr);
omobiAjx.open ( "GET", Url + "setcurrent" + querystr, true ) ;
omobiAjx.send() ;
}
function readResp()
{
if (omobiAjx.readyState==4 && omobiAjx.status==200)
{
var datenstr=omobiAjx.responseText;
console.log(datenstr);
var params = new URLSearchParams(datenstr)
for(var [key, value] of params.entries()) {
if(key.includes("text_") || key.includes("time_") || key.includes("scroll_runs_") || key.includes("color_") || key.includes("align_"))
{
document.getElementById(key).value = value;
}
else
{
if(key.includes("scroll_") || key.includes("active_"))
{
if(value == 1)
{
document.getElementById(key).checked = true;
}
else
{
document.getElementById(key).checked = false;
}
}
}
}
}
}
function clear_list()
{
console.log("reset");
for(var set = 0; set < maxSettings; set++)
{
document.getElementById("text_"+set).value = "";
document.getElementById("time_"+set).value = "";
document.getElementById("scroll_runs_"+set).value = "";
document.getElementById("color_"+set).value = "0";
document.getElementById("align_"+set).value = "0";
document.getElementById("scroll_"+set).checked = false;
document.getElementById("active_"+set).checked = false;
}
}
function tableCreate(nrsets) {
console.log("create table");
var body = document.body;
var toptbl = document.createElement("table");
toptbl.setAttribute("class", "h2");
var toptr = document.createElement('tr');
var toptd = document.createElement("td");
var h2 = document.createElement("h2");
h2.appendChild(document.createTextNode("Omobi LED Display Server"));
toptd.appendChild(h2);
toptr.appendChild(toptd);
toptbl.appendChild(toptr);
toptr = document.createElement('tr');
toptd = document.createElement("td");
var tbl = document.createElement("table");
tbl.setAttribute("class", "settings");
var nrheads = ["ACTIVE", "TEXT (max 256)", "RUNTIME (in s)", "COLOR", "ALIGN", "SCROLL", "# SCROLLS"];
var header= document.createElement('thead');
tr = document.createElement('tr');
for(var nrhead = 0; nrhead < nrheads.length; nrhead++)
{
var th = document.createElement('th');
console.log((nrheads[nrhead]));
th.appendChild(document.createTextNode(nrheads[nrhead]));
tr.appendChild(th);
}
header.appendChild(tr);
tbl.appendChild(header);
for (var nrset = 0; nrset < nrsets; nrset++) {
tr = document.createElement("tr");
td = document.createElement("td");
elem = document.createElement("input");
elem.type = "checkbox";
elem.min = 0;
elem.id = "active_" + (nrset);
elem.value = "0";
elem.checked = false;
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
td = document.createElement("td");
var elem = document.createElement("input");
elem.type = "text";
elem.id = "text_" + (nrset);
elem.placeholder = "Text (max 256)";
elem.value = "";
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("input");
elem.type = "number";
elem.min = 0;
elem.id = "time_" + (nrset);
elem.placeholder = "[sec]";
elem.value = "";
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("select");
elem.id = "color_" + (nrset);
elem.size = "1";
elem.name = "color";
elem.value = "-1";
elem.required;
var subelem = document.createElement("option");
subelem.value = "0";
subelem.appendChild(document.createTextNode("red"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "1";
subelem.appendChild(document.createTextNode("green"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "2";
subelem.appendChild(document.createTextNode("blue"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "3";
subelem.appendChild(document.createTextNode("white"));
elem.appendChild(subelem);
td.appendChild(elem);
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("select");
elem.id = "align_" + (nrset);
elem.size = "1";
elem.name = "align";
elem.value = "-1";
elem.required;
var subelem = document.createElement("option");
subelem.value = "0";
subelem.appendChild(document.createTextNode("left"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "1";
subelem.appendChild(document.createTextNode("center"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "2";
subelem.appendChild(document.createTextNode("right"));
elem.appendChild(subelem);
td.appendChild(elem);
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("input");
elem.type = "checkbox";
elem.min = 0;
elem.id = "scroll_" + (nrset);
elem.value = "0";
elem.checked = false;
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("input");
elem.type = "number";
elem.min = 0;
elem.id = "scroll_runs_" + (nrset);
elem.placeholder = "#";
elem.value = "0";
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
//row added to end of table body
tbl.appendChild(tr);
}
toptd.appendChild(tbl);
toptr.appendChild(toptd);
toptbl.appendChild(toptr);
toptr = document.createElement("tr");
toptd = document.createElement("td");
toptd.colSpan = 6;
elem = document.createElement("input");
elem.type = "button";
elem.value = "Load current values from display";
addListener(elem, 'click', httpGet);
toptd.appendChild(elem);
elem = document.createElement("input");
elem.type = "button";
elem.value = "Write values to display";
addListener(elem, 'click', httpSet);
toptd.appendChild(elem);
elem = document.createElement("input");
elem.type = "button";
elem.value = "Reset table (not display)";
addListener(elem, 'click', clear_list);
toptd.appendChild(elem);
toptr.appendChild(toptd);
toptbl.appendChild(toptr);
body.appendChild(toptbl);
}
</script>
</head>
<body>
</body>
</html>
)rawliteral";