alexey.zholtikov/ESP-NOW-Window-Door-Sensor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

Version 1.0

Browse Source 
Initial version.
This commit is contained in:
Alexey Zholtikov
2023-01-06 12:51:12 +03:00
parent 7b35f43107
commit 25e154368d
24 changed files with 587 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
data/function.js Executable file
View File

@ -0,0 +1,74 @@
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');
setGpioValue('deviceSensorClassSelect', 'deviceSensorClass');
handleServerResponse();
}
function getValue(id) {
var value = document.getElementById(id).value;
return value;
}
function getSelectValue(id) {
var select = document.getElementById(id);
var value = select.value;
return value;
}
function sendRequest(submit, server) {
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send();
}
function saveSetting(submit) {
server = "/setting?deviceSensorName=" + getValue('deviceSensorName')
+ "&deviceBatteryName=" + getValue('deviceBatteryName')
+ "&espnowNetName=" + getValue('espnowNetName')
+ "&deviceSensorClass=" + getSelectValue('deviceSensorClassSelect');
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;
}
function setGpioValue(id, value) {
var select = document.getElementById(id);
select.value = document.getElementById(value).value;
}

54
data/index.htm Normal file
View File

@ -0,0 +1,54 @@
<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 Window/Door Sensor</title>
</head>
<body onload="load();">
<form class="box">
<h1>ESP-NOW Window/Door Sensor </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">Sensor name:</p>
<input id="deviceSensorName" value="{{deviceSensorName}}" placeholder="Name" autocomplete="off" label
title="ESP-NOW device name (up to 150 characters)" />
</div>
<div class="wrapper">
<p class="text">Battery name:</p>
<input id="deviceBatteryName" value="{{deviceBatteryName}}" 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>
<div class="wrapper">
<p class="text-select">Sensor type:</p>
<input id="deviceSensorClass" value="{{deviceSensorClass}}" hidden />
<p><select id="deviceSensorClassSelect">
<option value="28">WINDOW</option>
<option value="6">DOOR</option>
</select></p>
</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>

95
data/style.css Normal file
View File

@ -0,0 +1,95 @@
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;
}
.text-select {
width: 35%;
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;
}
select {
width: 110px;
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;
}
select: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);
}
#deviceSensorName,
#deviceBatteryName,
#espnowNetName {
width: 73%;
}
.wrapper.wrapper--end {
align-items: baseline;
}