Ajout Converter
This commit is contained in:
Serge NOEL
@@ -0,0 +1,76 @@
|
||||
/*
|
||||
***************************************************************************
|
||||
** Program : FSexplorer.html, part of ESP_ticker
|
||||
** Version : v1.3.1
|
||||
** For more information visit: https://fipsok.de
|
||||
***************************************************************************
|
||||
*/
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
//background-color: #a9a9a9;
|
||||
background-color: lightblue;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: left;
|
||||
}
|
||||
h1,h2 {
|
||||
color: #e1e1e1;
|
||||
text-shadow: 2px 2px 2px black;
|
||||
}
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
input {
|
||||
height: 35px;
|
||||
font-size: 13px;
|
||||
}
|
||||
h1+main {
|
||||
display: flex;
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.2em;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
clear:both;
|
||||
display:block;
|
||||
width: 99%;
|
||||
background-color:darkblue;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#left {
|
||||
align-items: flex-end;
|
||||
text-shadow: 1px 1px 2px #757474;
|
||||
}
|
||||
.note {
|
||||
background-color: salmon;
|
||||
padding: 0.5em;
|
||||
margin-top: 1em;
|
||||
text-align: center;
|
||||
max-width: 320px;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.button {
|
||||
width: 150px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
margin-top: 1em;
|
||||
cursor: pointer;
|
||||
background-color: lightgray;
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
[type=submit] {
|
||||
height: 40px;
|
||||
min-width: 70px;
|
||||
}
|
||||
[value^=Format] {
|
||||
background-color: #ddd;
|
||||
}
|
||||
[title] {
|
||||
background-color: silver;
|
||||
font-size: 16px;
|
||||
width: 125px;
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
<!--
|
||||
***************************************************************************
|
||||
** Program : FSexplorer.html, part of ESP_ticker
|
||||
** Version : v1.4.0 (02-01-2021)
|
||||
**
|
||||
** Copyright (c) 2021 Willem Aandewiel
|
||||
**
|
||||
** TERMS OF USE: MIT License. See bottom of file.
|
||||
***************************************************************************
|
||||
-->
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="FSexplorer.css">
|
||||
<title>FSexplorer ESP</title>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
let span = document.querySelector('span');
|
||||
let main = document.querySelector('main');
|
||||
let fileSize = document.querySelector('fileSize');
|
||||
let elem = document.querySelectorAll('input');
|
||||
//fetch('json').then(function (response) {
|
||||
fetch('api/listfiles').then(function (response) {
|
||||
return response.json();
|
||||
}).then(function (json) {
|
||||
let dir = '<table width=90%>';
|
||||
for (var i = 0; i < json.length - 1; i++) {
|
||||
dir += "<tr>";
|
||||
if (json[i].name.indexOf("More files not") > -1)
|
||||
{
|
||||
dir += `<td width=20% nowrap>${json[i].name}</td>`;
|
||||
dir += `<td width=10% nowrap></td>`;
|
||||
dir += `<td width=10% nowrap></td>`;
|
||||
}
|
||||
else
|
||||
{
|
||||
dir += `<td width=20% nowrap><a href ="${json[i].name}" target="_blank">${json[i].name}</a></td>`;
|
||||
dir += `<td width=10% nowrap><small>${json[i].size}</small></td>`;
|
||||
dir += `<td width=10% nowrap><a href ="${json[i].name}"download="${json[i].name}"> Download </a></td>`;
|
||||
if ( json[i].name != 'FSexplorer.html' && json[i].name != 'FSexplorer.css' && json[i].name != 'FSexplorer.png'
|
||||
&& json[i].name != 'index.html' && json[i].name != 'index.js' && json[i].name != 'index.css'
|
||||
&& json[i].name != 'settings.png'
|
||||
)
|
||||
{
|
||||
dir += `<td width=10% nowrap><a href ="${json[i].name}?delete=/${json[i].name}"> Delete </a></td>`;
|
||||
if (json[i].name == '!format')
|
||||
{
|
||||
document.getElementById('FormatLittleFS').disabled = false;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
dir += `<td width=10% nowrap> </td>`;
|
||||
}
|
||||
}
|
||||
dir += "<td width=50%> </td></tr>";
|
||||
} // for ..
|
||||
main.insertAdjacentHTML('beforeend', dir);
|
||||
document.querySelectorAll('[href*=delete]').forEach((node) => {
|
||||
node.addEventListener('click', () => {
|
||||
if (!confirm('Weet je zeker dat je dit bestand wilt verwijderen?!')) event.preventDefault();
|
||||
});
|
||||
});
|
||||
main.insertAdjacentHTML('beforeend', '</table>');
|
||||
main.insertAdjacentHTML('beforeend', `<p><b>LittleFS</b> gebruikt ${json[i].usedBytes} van ${json[i].totalBytes}`);
|
||||
free = json[i].freeBytes;
|
||||
fileSize.innerHTML = "<b> </b><p>"; // spacer
|
||||
|
||||
}); // function(json)
|
||||
elem[0].addEventListener('change', () => {
|
||||
let nBytes = elem[0].files[0].size, output = `${nBytes} Byte`;
|
||||
for (var aMultiples = [
|
||||
' KB',
|
||||
' MB'
|
||||
], i = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, i++) {
|
||||
output = nApprox.toFixed(2) + aMultiples[i];
|
||||
}
|
||||
if (nBytes > free) {
|
||||
fileSize.innerHTML = `<p><small> Bestand Grootte: ${output}</small><strong style="color: red;"> niet genoeg ruimte! </strong><p>`;
|
||||
elem[1].setAttribute('disabled', 'disabled');
|
||||
}
|
||||
else {
|
||||
fileSize.innerHTML = `<b>Bestand grootte:</b> ${output}<p>`;
|
||||
elem[1].removeAttribute('disabled');
|
||||
}
|
||||
});
|
||||
//elem[6].addEventListener('click', () => {
|
||||
document.getElementById('FormatLittleFS').addEventListener('click', () => {
|
||||
if (!confirm(`Weet je zeker dat je deze functie wilt uitvoeren?\nAls je doorgaat moet je zelf FSexplorer.html en álle andere systeem bestanden weer uploaden!!.`)) event.preventDefault();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>FSexplorer ESP</h2>
|
||||
<div>
|
||||
<main></main>
|
||||
</div>
|
||||
<form action="/upload" method="POST" enctype="multipart/form-data"><input type="file" name="upload">
|
||||
<input type="submit" value="Upload" disabled>
|
||||
</form>
|
||||
<span></span>
|
||||
<fileSize></fileSize>
|
||||
<hr>
|
||||
<div style='width: 40%'>
|
||||
<span>
|
||||
<form style='float: left;' action='/update' method='GET'>
|
||||
<input type='submit' class='button' name='SUBMIT' value='Update Firmware' ENABLED/>
|
||||
</form>
|
||||
<form style='float: right;' action='/'>
|
||||
<input type='submit' class='button' name='SUBMIT' value='Exit FSexplorer'>
|
||||
</form>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div style='width: 40%'>
|
||||
<span>
|
||||
<form style='float: left;' action='/ReBoot'>
|
||||
<input type='submit' class='button' name='SUBMIT' value='ReBoot'>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div style='width: 40%'>
|
||||
<span>
|
||||
<form style='float right;' action="/LittleFSformat" method="POST">
|
||||
<input id='FormatLittleFS' type='submit' class='button' name='SUBMIT' value='Format LittleFS' DISABLED/>
|
||||
</form>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,273 @@
|
||||
/*
|
||||
***************************************************************************
|
||||
** Program : index.css, part of ESP_ticker
|
||||
** Version : v1.3.1
|
||||
**
|
||||
** Copyright (c) 2020 Willem Aandewiel
|
||||
**
|
||||
** TERMS OF USE: MIT License. See bottom of file.
|
||||
***************************************************************************
|
||||
*/
|
||||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: black;
|
||||
background: #e6ffff;
|
||||
}
|
||||
|
||||
table {
|
||||
color: black;
|
||||
border-collapse: collapse;
|
||||
width: 90%;
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
th {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
white-space: nowrap;
|
||||
border-right: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
font-size: 12px;
|
||||
color: darkblue;
|
||||
}
|
||||
|
||||
input {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 2px;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.settingDiv {
|
||||
background: lightblue;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.outer-div {
|
||||
/*width: 90%; */
|
||||
text-align: center;
|
||||
background-color: #e6ffff
|
||||
}
|
||||
.inner-div {
|
||||
display: inline-block;
|
||||
/*
|
||||
margin: 0 auto;
|
||||
padding: 3px;
|
||||
background-color: lightblue
|
||||
*/
|
||||
}
|
||||
|
||||
.container-card {
|
||||
padding: 50;
|
||||
margin: 50;
|
||||
list-style: none;
|
||||
flex-direction: row; /*row | row-reverse | column | column-reverse*/
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-flex-flow: row wrap;
|
||||
justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
|
||||
|
||||
}
|
||||
|
||||
.container-box {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
flex-direction: column; /*row | row-reverse | column | column-reverse*/
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
-webkit-flex-flow: column wrap;
|
||||
justify-content: flex-start;
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
/*--------------------- N A V - B A R -----------------*/
|
||||
.nav-container {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
background: #00bffe;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex-start;
|
||||
-webkit-flex-flow: row wrap;
|
||||
min-height: 24px;
|
||||
|
||||
}
|
||||
|
||||
.nav-img {
|
||||
top: 1px;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
height: 20px;
|
||||
width: 110px;
|
||||
border: none;
|
||||
color: white;
|
||||
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
flex: 2 1 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
flex: 1 1 0;
|
||||
text-align: right;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.nav-container a:hover {
|
||||
color: black;
|
||||
background: skyblue; /* only for FSexplorer - Rest does not work */
|
||||
}
|
||||
|
||||
.nav-clock {
|
||||
//top: 1px;
|
||||
color: black;
|
||||
float: right;
|
||||
font-size: small;
|
||||
font-weight:bold;
|
||||
text-align: right;
|
||||
background: white;
|
||||
width: 200px;
|
||||
padding-right: 10px;
|
||||
background: #e6ffff;
|
||||
}
|
||||
|
||||
/*-------------------------*/
|
||||
/***
|
||||
@media all and (max-width: 600px) {
|
||||
.nav-container {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px) {
|
||||
.nav-container {
|
||||
-webkit-flex-flow: column wrap;
|
||||
flex-flow: column wrap;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
***/
|
||||
|
||||
.tabButton {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.tabButton a:hover {
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
|
||||
.header h1 span {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
font-size: small;
|
||||
color: gray;
|
||||
bottom:0;
|
||||
}
|
||||
.right-0 {right: 0; padding-right: 10px; }
|
||||
.left-0 {left: 0; padding-left: 10px; }
|
||||
|
||||
//--- next 4 are for the API doc page --------
|
||||
.div1 {
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.div1 a:link, a:visited {
|
||||
background-color: deepSkyBlue;
|
||||
color: white;
|
||||
padding: 5px 15px;
|
||||
width: 210px;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.div1 a:hover, a:active {
|
||||
background-color: deepSkyBlue;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.div2 {
|
||||
margin-left: 280px;
|
||||
margin-top: -52px;
|
||||
}
|
||||
|
||||
|
||||
/* define tag selectors () -------------------------------------------------- */
|
||||
|
||||
button { width: 100px; }
|
||||
|
||||
/*
|
||||
***************************************************************************
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a
|
||||
* copy of this software and associated documentation files (the
|
||||
* "Software"), to deal in the Software without restriction, including
|
||||
* without limitation the rights to use, copy, modify, merge, publish,
|
||||
* distribute, sublicense, and/or sell copies of the Software, and to permit
|
||||
* persons to whom the Software is furnished to do so, subject to the
|
||||
* following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included
|
||||
* in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||||
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
|
||||
* OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR
|
||||
* THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
***************************************************************************
|
||||
*/
|
||||
@@ -0,0 +1,533 @@
|
||||
/*
|
||||
***************************************************************************
|
||||
** Program : index.js, part of ESP_ticker
|
||||
** Version : v1.6.0 (02-01-2021)
|
||||
**
|
||||
** Copyright (c) 2021 Willem Aandewiel
|
||||
**
|
||||
** TERMS OF USE: MIT License. See bottom of file.
|
||||
***************************************************************************
|
||||
*/
|
||||
const APIGW='http://'+window.location.host+'/api/';
|
||||
|
||||
"use strict";
|
||||
|
||||
let needReload = true;
|
||||
|
||||
window.onload=bootsTrapMain;
|
||||
window.onfocus = function() {
|
||||
if (needReload) {
|
||||
window.location.reload(true);
|
||||
}
|
||||
};
|
||||
|
||||
//============================================================================
|
||||
function bootsTrapMain() {
|
||||
console.log("bootsTrapMain()");
|
||||
document.getElementById('saveMsg').addEventListener('click',function()
|
||||
{saveMessages();});
|
||||
document.getElementById('M_FSexplorer').addEventListener('click',function()
|
||||
{ console.log("newTab: goFSexplorer");
|
||||
location.href = "/FSexplorer";
|
||||
});
|
||||
document.getElementById('S_FSexplorer').addEventListener('click',function()
|
||||
{ console.log("newTab: goFSexplorer");
|
||||
location.href = "/FSexplorer";
|
||||
});
|
||||
document.getElementById('back').addEventListener('click',function()
|
||||
{ console.log("newTab: goBack");
|
||||
location.href = "/";
|
||||
});
|
||||
document.getElementById('Settings').addEventListener('click',function()
|
||||
{settingsPage();});
|
||||
document.getElementById('saveSettings').addEventListener('click',function()
|
||||
{saveSettings();});
|
||||
needReload = false;
|
||||
refreshDevTime();
|
||||
refreshDevInfo();
|
||||
refreshMessages();
|
||||
|
||||
document.getElementById("displayMainPage").style.display = "block";
|
||||
document.getElementById("displaySettingsPage").style.display = "none";
|
||||
|
||||
} // bootsTrapMain()
|
||||
|
||||
function settingsPage()
|
||||
{
|
||||
document.getElementById("displayMainPage").style.display = "none";
|
||||
|
||||
var settingsPage = document.getElementById("settingsPage");
|
||||
refreshSettings();
|
||||
document.getElementById("displaySettingsPage").style.display = "block";
|
||||
|
||||
} // settingsPage()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function refreshDevTime()
|
||||
{
|
||||
//console.log("Refresh api/v0/devtime ..");
|
||||
fetch(APIGW+"v0/devtime")
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
console.log("parsed .., data is ["+ JSON.stringify(json)+"]");
|
||||
for( let i in json.devtime ){
|
||||
if (json.devtime[i].name == "dateTime")
|
||||
{
|
||||
//console.log("Got new time ["+json.devtime[i].value+"]");
|
||||
document.getElementById('theTime').innerHTML = json.devtime[i].value;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function(error) {
|
||||
var p = document.createElement('p');
|
||||
p.appendChild(
|
||||
document.createTextNode('Error: ' + error.message)
|
||||
);
|
||||
});
|
||||
|
||||
} // refreshDevTime()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function refreshDevInfo()
|
||||
{
|
||||
document.getElementById('devName').innerHTML = "";
|
||||
fetch(APIGW+"v0/devinfo")
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
//console.log("parsed .., data is ["+ JSON.stringify(json)+"]");
|
||||
data = json.devinfo;
|
||||
for( let i in data )
|
||||
{
|
||||
if (data[i].name == "fwversion")
|
||||
{
|
||||
document.getElementById('devVersion').innerHTML = json.devinfo[i].value;
|
||||
|
||||
} else if (data[i].name == 'hostname')
|
||||
{
|
||||
document.getElementById('devName').innerHTML += data[i].value+" ";
|
||||
|
||||
} else if (data[i].name == 'ipaddress')
|
||||
{
|
||||
document.getElementById('devName').innerHTML += " ("+data[i].value+") ";
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function(error) {
|
||||
var p = document.createElement('p');
|
||||
p.appendChild(
|
||||
document.createTextNode('Error: ' + error.message)
|
||||
);
|
||||
});
|
||||
} // refreshDevInfo()
|
||||
|
||||
//============================================================================
|
||||
function refreshMessages()
|
||||
{
|
||||
console.log("refreshMessages() ..");
|
||||
data = {};
|
||||
fetch(APIGW+"v0/messages")
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
console.log("then(json => ..)");
|
||||
msg = json.messages;
|
||||
for( let i in msg )
|
||||
{
|
||||
msg[i].value = msg[i].value.replaceAll("@1@", ":");
|
||||
msg[i].value = msg[i].value.replaceAll("@2@", "{");
|
||||
msg[i].value = msg[i].value.replaceAll("@3@", "}");
|
||||
msg[i].value = msg[i].value.replaceAll("@4@", ",");
|
||||
msg[i].value = msg[i].value.replaceAll("@5@", "\\");
|
||||
msg[i].value = msg[i].value.replaceAll("@6@", "\%");
|
||||
|
||||
console.log("["+msg[i].name+"]=>["+msg[i].value+"]");
|
||||
var messages = document.getElementById('mainPage');
|
||||
if( ( document.getElementById("msgR_"+msg[i].name)) == null )
|
||||
{
|
||||
var rowDiv = document.createElement("div");
|
||||
rowDiv.setAttribute("class", "msgDiv");
|
||||
rowDiv.setAttribute("id", "msgR_"+msg[i].name);
|
||||
rowDiv.setAttribute("style", "text-align: right;");
|
||||
rowDiv.style.marginLeft = "10px";
|
||||
rowDiv.style.marginRight = "10px";
|
||||
rowDiv.style.width = "850px";
|
||||
rowDiv.style.border = "thick solid lightblue";
|
||||
rowDiv.style.background = "lightblue";
|
||||
//--- field Name ---
|
||||
var fldDiv = document.createElement("div");
|
||||
fldDiv.setAttribute("style", "margin-right: 10px;");
|
||||
fldDiv.style.width = "30px";
|
||||
fldDiv.style.float = 'left';
|
||||
fldDiv.textContent = msg[i].name;
|
||||
rowDiv.appendChild(fldDiv);
|
||||
//--- input ---
|
||||
var inputDiv = document.createElement("div");
|
||||
inputDiv.setAttribute("style", "text-align: left;");
|
||||
|
||||
var sInput = document.createElement("INPUT");
|
||||
sInput.setAttribute("id", "M_"+msg[i].name);
|
||||
sInput.setAttribute("style", "background: white");
|
||||
|
||||
if (msg[i].type == "s")
|
||||
{
|
||||
sInput.setAttribute("type", "text");
|
||||
sInput.setAttribute("maxlength", msg[i].maxlen);
|
||||
sInput.setAttribute("size", 100);
|
||||
|
||||
sInput.setAttribute("value", msg[i].value);
|
||||
//console.log("addEventListener(M_"+msg[i].name+")");
|
||||
sInput.addEventListener('change',
|
||||
function() { setBackGround("M_"+msg[i].name, "lightgray"); },
|
||||
false
|
||||
);
|
||||
}
|
||||
inputDiv.appendChild(sInput);
|
||||
|
||||
rowDiv.appendChild(inputDiv);
|
||||
messages.appendChild(rowDiv);
|
||||
}
|
||||
else
|
||||
{
|
||||
document.getElementById("M_"+msg[i].name).style.background = "white";
|
||||
document.getElementById("M_"+msg[i].name).value = data[i].value;
|
||||
}
|
||||
}
|
||||
document.getElementById("waiting").innerHTML = "";
|
||||
})
|
||||
.catch(function(error) {
|
||||
var p = document.createElement('p');
|
||||
p.appendChild(
|
||||
document.createTextNode('Error: ' + error.message)
|
||||
);
|
||||
});
|
||||
|
||||
} // refreshMessages()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function refreshSettings()
|
||||
{
|
||||
console.log("refreshSettings() ..");
|
||||
data = {};
|
||||
fetch(APIGW+"v0/settings")
|
||||
.then(response => response.json())
|
||||
.then(json => {
|
||||
console.log("then(json => ..)");
|
||||
data = json.settings;
|
||||
for( let i in data )
|
||||
{
|
||||
console.log("["+data[i].name+"]=>["+data[i].value+"]");
|
||||
var settings = document.getElementById('settingsPage');
|
||||
if( ( document.getElementById("D_"+data[i].name)) == null )
|
||||
{
|
||||
var rowDiv = document.createElement("div");
|
||||
rowDiv.setAttribute("class", "settingDiv");
|
||||
//----rowDiv.setAttribute("id", "settingR_"+data[i].name);
|
||||
rowDiv.setAttribute("id", "D_"+data[i].name);
|
||||
rowDiv.setAttribute("style", "text-align: right;");
|
||||
rowDiv.style.marginLeft = "10px";
|
||||
rowDiv.style.marginRight = "10px";
|
||||
rowDiv.style.width = "800px";
|
||||
rowDiv.style.border = "thick solid lightblue";
|
||||
rowDiv.style.background = "lightblue";
|
||||
//--- field Name ---
|
||||
var fldDiv = document.createElement("div");
|
||||
fldDiv.setAttribute("style", "margin-right: 10px;");
|
||||
fldDiv.style.width = "270px";
|
||||
fldDiv.style.float = 'left';
|
||||
fldDiv.textContent = translateToHuman(data[i].name);
|
||||
rowDiv.appendChild(fldDiv);
|
||||
//--- input ---
|
||||
var inputDiv = document.createElement("div");
|
||||
inputDiv.setAttribute("style", "text-align: left;");
|
||||
|
||||
var sInput = document.createElement("INPUT");
|
||||
//----sInput.setAttribute("id", "setFld_"+data[i].name);
|
||||
sInput.setAttribute("id", data[i].name);
|
||||
|
||||
if (data[i].type == "s")
|
||||
{
|
||||
sInput.setAttribute("type", "text");
|
||||
sInput.setAttribute("maxlength", data[i].maxlen);
|
||||
sInput.setAttribute("size", 50);
|
||||
}
|
||||
else if (data[i].type == "f")
|
||||
{
|
||||
sInput.setAttribute("type", "number");
|
||||
sInput.max = data[i].max;
|
||||
sInput.min = data[i].min;
|
||||
sInput.step = (data[i].min + data[i].max) / 1000;
|
||||
}
|
||||
else if (data[i].type == "i")
|
||||
{
|
||||
sInput.setAttribute("type", "number");
|
||||
sInput.setAttribute("size", 10);
|
||||
sInput.max = data[i].max;
|
||||
sInput.min = data[i].min;
|
||||
//sInput.step = (data[i].min + data[i].max) / 1000;
|
||||
sInput.step = 1;
|
||||
}
|
||||
sInput.setAttribute("value", data[i].value);
|
||||
sInput.addEventListener('change',
|
||||
function() { setBackGround(data[i].name, "lightgray"); },
|
||||
false
|
||||
);
|
||||
inputDiv.appendChild(sInput);
|
||||
|
||||
rowDiv.appendChild(inputDiv);
|
||||
settings.appendChild(rowDiv);
|
||||
}
|
||||
else
|
||||
{
|
||||
//----document.getElementById("setFld_"+data[i].name).style.background = "white";
|
||||
document.getElementById(data[i].name).style.background = "white";
|
||||
//----document.getElementById("setFld_"+data[i].name).value = data[i].value;
|
||||
document.getElementById(data[i].name).value = data[i].value;
|
||||
}
|
||||
}
|
||||
//console.log("-->done..");
|
||||
})
|
||||
.catch(function(error) {
|
||||
var p = document.createElement('p');
|
||||
p.appendChild(
|
||||
document.createTextNode('Error: ' + error.message)
|
||||
);
|
||||
});
|
||||
|
||||
} // refreshSettings()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function saveMessages()
|
||||
{
|
||||
console.log("Saving messages ..");
|
||||
let changes = false;
|
||||
|
||||
//--- has anything changed?
|
||||
var page = document.getElementById("mainPage");
|
||||
var mRow = page.getElementsByTagName("input");
|
||||
//var mRow = document.getElementById("mainPage").getElementsByTagName('div');
|
||||
for(var i = 0; i < mRow.length; i++)
|
||||
{
|
||||
//do something to each div like
|
||||
var msgId = mRow[i].getAttribute("id");
|
||||
var field = msgId.substr(2);
|
||||
//console.log("msgId["+msgId+", msgNr["+field+"]");
|
||||
value = document.getElementById(msgId).value;
|
||||
//console.log("==> name["+field+"], value["+value+"]");
|
||||
|
||||
changes = false;
|
||||
|
||||
if (getBackGround("M_"+field) == "lightgray")
|
||||
{
|
||||
setBackGround("M_"+field, "white");
|
||||
changes = true;
|
||||
}
|
||||
if (changes) {
|
||||
console.log("Changes where made in ["+field+"]["+value+"]");
|
||||
//processWithTimeout([(data.length -1), 0], 2, data, sendPostReading);
|
||||
sendPostMessages(field, value);
|
||||
}
|
||||
}
|
||||
|
||||
} // saveMessages()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function saveSettings()
|
||||
{
|
||||
console.log("saveSettings() ...");
|
||||
let changes = false;
|
||||
|
||||
//--- has anything changed?
|
||||
var page = document.getElementById("settingsPage");
|
||||
var mRow = page.getElementsByTagName("input");
|
||||
//var mRow = document.getElementById("mainPage").getElementsByTagName('div');
|
||||
for(var i = 0; i < mRow.length; i++)
|
||||
{
|
||||
//do something to each div like
|
||||
var msgId = mRow[i].getAttribute("id");
|
||||
var field = msgId;
|
||||
//console.log("msgId["+msgId+", msgNr["+field+"]");
|
||||
value = document.getElementById(msgId).value;
|
||||
//console.log("==> name["+field+"], value["+value+"]");
|
||||
|
||||
changes = false;
|
||||
|
||||
if (getBackGround(field) == "lightgray")
|
||||
{
|
||||
setBackGround(field, "white");
|
||||
changes = true;
|
||||
}
|
||||
if (changes) {
|
||||
console.log("Changes where made in ["+field+"]["+value+"]");
|
||||
var value = value.replace(/,/g, " ");
|
||||
value = value.replace(/ /g, " ");
|
||||
value = value.replace(/ /g, " ");
|
||||
value = value.replace(/ /g, " ");
|
||||
//processWithTimeout([(data.length -1), 0], 2, data, sendPostReading);
|
||||
sendPostSetting(field, value);
|
||||
}
|
||||
}
|
||||
|
||||
} // saveSettings()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function sendPostMessages(field, value)
|
||||
{
|
||||
//console.log("sendPostMessages(value): "+value+"]");
|
||||
value = value.replaceAll("\"", "'");
|
||||
value = value.replaceAll(":", "@1@");
|
||||
value = value.replaceAll("{", "@2@");
|
||||
value = value.replaceAll("}", "@3@");
|
||||
value = value.replaceAll(",", "@4@");
|
||||
value = value.replaceAll("\\", "@5@");
|
||||
value = value.replaceAll("\%", "@6@");
|
||||
console.log("sendPostMessages(value): "+value+"]");
|
||||
|
||||
const jsonString = {"name" : field, "value" : value};
|
||||
console.log("sendPostMessages(): "+JSON.stringify(jsonString));
|
||||
const other_params = {
|
||||
headers : { "content-type" : "application/json; charset=UTF-8"},
|
||||
body : JSON.stringify(jsonString),
|
||||
method : "POST",
|
||||
mode : "cors"
|
||||
};
|
||||
|
||||
fetch(APIGW+"v0/messages", other_params)
|
||||
.then(function(response) {
|
||||
}, function(error) {
|
||||
console.log("Error["+error.message+"]"); //=> String
|
||||
});
|
||||
|
||||
} // sendPostMessages()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function sendPostSetting(field, value)
|
||||
{
|
||||
const jsonString = {"name" : field, "value" : value};
|
||||
console.log("sending: "+JSON.stringify(jsonString));
|
||||
const other_params = {
|
||||
headers : { "content-type" : "application/json; charset=UTF-8"},
|
||||
body : JSON.stringify(jsonString),
|
||||
method : "POST",
|
||||
mode : "cors"
|
||||
};
|
||||
|
||||
fetch(APIGW+"v0/settings", other_params)
|
||||
.then(function(response) {
|
||||
//console.log(response.status ); //=> number 100–599
|
||||
//console.log(response.statusText); //=> String
|
||||
//console.log(response.headers); //=> Headers
|
||||
//console.log(response.url); //=> String
|
||||
//console.log(response.text());
|
||||
//return response.text()
|
||||
}, function(error) {
|
||||
console.log("Error["+error.message+"]"); //=> String
|
||||
});
|
||||
|
||||
} // sendPostSetting()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function translateToHuman(longName) {
|
||||
//for(var index = 0; index < (translateFields.length -1); index++)
|
||||
for(var index = 0; index < translateFields.length; index++)
|
||||
{
|
||||
if (translateFields[index][0] == longName)
|
||||
{
|
||||
return translateFields[index][1];
|
||||
}
|
||||
};
|
||||
return longName;
|
||||
|
||||
} // translateToHuman()
|
||||
|
||||
|
||||
|
||||
//============================================================================
|
||||
function setBackGround(field, newColor) {
|
||||
//console.log("setBackground("+field+", "+newColor+")");
|
||||
document.getElementById(field).style.background = newColor;
|
||||
|
||||
} // setBackGround()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function getBackGround(field) {
|
||||
//console.log("getBackground("+field+")");
|
||||
return document.getElementById(field).style.background;
|
||||
|
||||
} // getBackGround()
|
||||
|
||||
|
||||
//============================================================================
|
||||
function round(value, precision) {
|
||||
var multiplier = Math.pow(10, precision || 0);
|
||||
return Math.round(value * multiplier) / multiplier;
|
||||
}
|
||||
|
||||
|
||||
//============================================================================
|
||||
function printAllVals(obj) {
|
||||
for (let k in obj) {
|
||||
if (typeof obj[k] === "object") {
|
||||
printAllVals(obj[k])
|
||||
} else {
|
||||
// base case, stop recurring
|
||||
console.log(obj[k]);
|
||||
}
|
||||
}
|
||||
} // printAllVals()
|
||||
|
||||
|
||||
var translateFields = [
|
||||
[ "author", "Auteur" ]
|
||||
,[ "localMaxMsg", "max. aantal boodschappen" ]
|
||||
,[ "textSpeed", "scroll snelheid" ]
|
||||
,[ "maxIntensity", "max. Intensiteit leds" ]
|
||||
,[ "LDRlowOffset", "LDR min. waarde" ]
|
||||
,[ "LDRhighOffset", "LDR max. waarde" ]
|
||||
,[ "weerliveAUTH", "weerlive.nl auth. token" ]
|
||||
,[ "weerliveLocation", "weerlive.nl locatie" ]
|
||||
,[ "weerliveInterval", "weerlive.nl refresh interval in minuten" ]
|
||||
,[ "newsapiAUTH", "newsapi.org auth. token" ]
|
||||
,[ "newsapiMaxMsg", "newsapi.nl max. items" ]
|
||||
,[ "newsapiInterval", "newapi.nl refresh interval in minuten" ]
|
||||
,[ "newsNoWords", "skip items met deze woorden" ]
|
||||
];
|
||||
|
||||
//============================================================================
|
||||
String.prototype.replaceAll = function(str1, str2, ignore)
|
||||
{
|
||||
return this.replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g,"\\$&"),(ignore?"gi":"g")),(typeof(str2)=="string")?str2.replace(/\$/g,"$$$$"):str2);
|
||||
//return this.replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\[\]\(\)\.\*\+\?\|\<\>\-\&])/g,"\\$&"),(ignore?"gi":"g")),(typeof(str2)=="string")?str2.replace(/\$/g,"$$$$"):str2);
|
||||
}
|
||||
|
||||
/*
|
||||
***************************************************************************
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a
|
||||
* copy of this software and associated documentation files (the
|
||||
* "Software"), to deal in the Software without restriction, including
|
||||
* without limitation the rights to use, copy, modify, merge, publish,
|
||||
* distribute, sublicense, and/or sell copies of the Software, and to permit
|
||||
* persons to whom the Software is furnished to do so, subject to the
|
||||
* following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included
|
||||
* in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||||
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
|
||||
* OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR
|
||||
* THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
***************************************************************************
|
||||
*/
|
||||
@@ -0,0 +1 @@
|
||||
Dit is een dummy local news file!
|
||||
@@ -0,0 +1 @@
|
||||
Dit is een dummy news file!
|
||||
@@ -0,0 +1,13 @@
|
||||
Hostname = ESPticker
|
||||
localMaxMsg = 5
|
||||
textSpeed = 25
|
||||
maxIntensity = 6
|
||||
LDRlowOffset = 70
|
||||
LDRhighOffset = 700
|
||||
weerLiveAUTH =
|
||||
weerLiveLocatie = Amsterdam
|
||||
weerLiveInterval = 15
|
||||
newsAUTH =
|
||||
newsNoWords = Voetbal show UEFA KNVB vannederland boulevard voetbalzone
|
||||
newsMaxMsg = 4
|
||||
newsInterval = 15
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Reference in New Issue
Block a user