323 lines
11 KiB
HTML
323 lines
11 KiB
HTML
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"; |