Version 1.0
Initial version.
This commit is contained in:
64
data/function.js
Executable file
64
data/function.js
Executable file
@ -0,0 +1,64 @@
|
||||
var xmlHttp = createXmlHttpObject();
|
||||
function createXmlHttpObject() {
|
||||
if (window.XMLHttpRequest) {
|
||||
xmlHttp = new XMLHttpRequest();
|
||||
} else {
|
||||
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
|
||||
}
|
||||
return xmlHttp;
|
||||
}
|
||||
|
||||
function load() {
|
||||
if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
|
||||
xmlHttp.open('PUT', '/config.json', true);
|
||||
xmlHttp.send(null);
|
||||
xmlHttp.onload = function () {
|
||||
jsonResponse = JSON.parse(xmlHttp.responseText);
|
||||
loadBlock();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadBlock() {
|
||||
newData = JSON.parse(xmlHttp.responseText);
|
||||
data = document.getElementsByTagName('body')[0].innerHTML;
|
||||
var newString;
|
||||
for (var key in newData) {
|
||||
newString = data.replace(new RegExp('{{' + key + '}}', 'g'), newData[key]);
|
||||
data = newString;
|
||||
}
|
||||
document.getElementsByTagName('body')[0].innerHTML = newString;
|
||||
setFirmvareValue('version', 'firmware');
|
||||
handleServerResponse();
|
||||
}
|
||||
|
||||
function getValue(id) {
|
||||
var value = document.getElementById(id).value;
|
||||
return value;
|
||||
}
|
||||
|
||||
function sendRequest(submit, server) {
|
||||
request = new XMLHttpRequest();
|
||||
request.open("GET", server, true);
|
||||
request.send();
|
||||
}
|
||||
|
||||
function saveSetting(submit) {
|
||||
server = "/setting?ssid=" + getValue('ssid') + "&password=" + encodeURIComponent(getValue('password'))
|
||||
+ "&host=" + getValue('mqttHostName') + "&port=" + getValue('mqttHostPort')
|
||||
+ "&login=" + getValue('mqttUserLogin') + "&pass=" + encodeURIComponent(getValue('mqttUserPassword'))
|
||||
+ "&prefix=" + getValue('topicPrefix')
|
||||
+ "&name=" + getValue('deviceName')
|
||||
+ "&net=" + getValue('espnowNetName');
|
||||
sendRequest(submit, server);
|
||||
alert("Please restart device for changes apply.");
|
||||
}
|
||||
|
||||
function restart(submit) {
|
||||
server = "/restart";
|
||||
sendRequest(submit, server);
|
||||
}
|
||||
|
||||
function setFirmvareValue(id, value) {
|
||||
document.getElementById(id).innerHTML = document.getElementById(value).value;
|
||||
}
|
||||
66
data/index.htm
Normal file
66
data/index.htm
Normal file
@ -0,0 +1,66 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.9">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="text/javascript" src="function.js"></script>
|
||||
<title>ESP-NOW Gateway</title>
|
||||
</head>
|
||||
|
||||
<body onload="load();">
|
||||
<form class="box">
|
||||
<h1>ESP-NOW Gateway </h1>
|
||||
<div class="wrapper">
|
||||
<p class="text">Firmware:</p>
|
||||
<p class="text" id="version"></p>
|
||||
<input id="firmware" value="{{firmware}}" hidden />
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<p class="text">Device name:</p>
|
||||
<input id="deviceName" value="{{deviceName}}" placeholder="Name" autocomplete="off" label
|
||||
title="ESP-NOW device name (up to 150 characters)" />
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<p class="text">ESP-NOW network name:</p>
|
||||
<input id="espnowNetName" value="{{espnowNetName}}" placeholder="Name" autocomplete="off" label
|
||||
title="ESP-NOW network name (1 to 20 characters)" />
|
||||
</div>
|
||||
|
||||
<p class="text">WiFi settings</p>
|
||||
<div class="wrapper">
|
||||
<input id="ssid" value="{{ssid}}" placeholder="SSID" label title="WiFi network name" />
|
||||
<input id="password" value="{{password}}" onfocus="this.type='text'" type="password" placeholder="Password"
|
||||
autocomplete="off" label title="WiFi password" />
|
||||
</div>
|
||||
|
||||
<p class="text">MQTT settings</p>
|
||||
<div class="wrapper">
|
||||
<input id="mqttHostName" value="{{mqttHostName}}" placeholder="URL or IP" label
|
||||
title="MQTT server URL or IP" />
|
||||
<input id="mqttHostPort" value="{{mqttHostPort}}" placeholder="Port" label title="MQTT server port" />
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<input id="mqttUserLogin" value="{{mqttUserLogin}}" placeholder="Login" label
|
||||
title="MQTT server user login" />
|
||||
<input id="mqttUserPassword" value="{{mqttUserPassword}}" onfocus="this.type='text'" type="password"
|
||||
placeholder="Password" autocomplete="off" label title="MQTT server user password" />
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<p class="text">MQTT topic prefix:</p>
|
||||
<input id="topicPrefix" value="{{topicPrefix}}" placeholder="Prefix" label
|
||||
title="MQTT messages topic prefix" />
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<input class="btn" type="submit" value="Save" onclick="saveSetting(this);">
|
||||
<input class="btn" type="submit" value="Restart" onclick="restart(this);">
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
70
data/style.css
Normal file
70
data/style.css
Normal file
@ -0,0 +1,70 @@
|
||||
body {
|
||||
font-family: "Gill Sans", sans-serif;
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 400px;
|
||||
padding: 20px 20px;
|
||||
margin: 20px auto;
|
||||
background: #e0f5fb;
|
||||
box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: rgb(65, 125, 238);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 48%;
|
||||
min-height: 30px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 10px;
|
||||
color: rgb(0, 0, 0);
|
||||
background: #a3e0f1;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
input:hover {
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 48%;
|
||||
background: rgb(65, 125, 238);
|
||||
color: white;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: rgb(65, 125, 238);
|
||||
opacity: 0.5;
|
||||
transform: translatey(-3px);
|
||||
}
|
||||
|
||||
#deviceName,
|
||||
#espnowNetName,
|
||||
#topicPrefix {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrapper.wrapper--end {
|
||||
align-items: baseline;
|
||||
}
|
||||
Reference in New Issue
Block a user