alexey.zholtikov/ESP-NOW-Light-Led-Strip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 9 Wiki Activity

Version 1.0

Browse Source 
Initial version.
This commit is contained in:
Alexey Zholtikov
2023-01-04 13:47:14 +03:00
parent df4259b248
commit 61354c7606
7 changed files with 912 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
data/function.js Executable file
View File

@ -0,0 +1,83 @@
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('ledTypeSelect', 'ledType');
setGpioValue('coldWhitePinSelect', 'coldWhitePin');
setGpioValue('warmWhitePinSelect', 'warmWhitePin');
setGpioValue('redPinSelect', 'redPin');
setGpioValue('greenPinSelect', 'greenPin');
setGpioValue('bluePinSelect', 'bluePin');
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?deviceName=" + getValue('deviceName')
+ "&espnowNetName=" + getValue('espnowNetName')
+ "&ledType=" + getSelectValue('ledTypeSelect')
+ "&coldWhitePin=" + getSelectValue('coldWhitePinSelect')
+ "&warmWhitePin=" + getSelectValue('warmWhitePinSelect')
+ "&redPin=" + getSelectValue('redPinSelect')
+ "&greenPin=" + getSelectValue('greenPinSelect')
+ "&bluePin=" + getSelectValue('bluePinSelect');
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;
}

172
data/index.htm Normal file
View File

@ -0,0 +1,172 @@
<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 Led/Light Strip</title>
</head>
<body onload="load();">
<form class="box">
<h1>ESP-NOW Led/Light Strip </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>
<div class="wrapper">
<p class="text-select">Device type:</p>
<input id="ledType" value="{{ledType}}" hidden />
<p><select id="ledTypeSelect">
<option value="0">NONE</option>
<option value="1">W</option>
<option value="2">WW</option>
<option value="3">RGB</option>
<option value="4">RGBW</option>
<option value="5">RGBWW</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Cold white GPIO:</p>
<input id="coldWhitePin" value="{{coldWhitePin}}" hidden />
<p><select id="coldWhitePinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Warm white GPIO:</p>
<input id="warmWhitePin" value="{{warmWhitePin}}" hidden />
<p><select id="warmWhitePinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Red GPIO:</p>
<input id="redPin" value="{{redPin}}" hidden />
<p><select id="redPinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Green GPIO:</p>
<input id="greenPin" value="{{greenPin}}" hidden />
<p><select id="greenPinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</option>
</select></p>
</div>
<div class="wrapper">
<p class="text-select">Blue GPIO:</p>
<input id="bluePin" value="{{bluePin}}" hidden />
<p><select id="bluePinSelect">
<option value="0">NONE</option>
<option value="1">GPIO01</option>
<option value="2">GPIO02</option>
<option value="3">GPIO03</option>
<option value="4">GPIO04</option>
<option value="5">GPIO05</option>
<option value="6">GPIO06</option>
<option value="7">GPIO07</option>
<option value="8">GPIO08</option>
<option value="9">GPIO09</option>
<option value="10">GPIO10</option>
<option value="11">GPIO11</option>
<option value="12">GPIO12</option>
<option value="13">GPIO13</option>
<option value="14">GPIO14</option>
<option value="15">GPIO15</option>
<option value="16">GPIO16</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>

94
data/style.css Normal file
View File

@ -0,0 +1,94 @@
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);
}
#deviceName,
#espnowNetName {
width: 100%;
}
.wrapper.wrapper--end {
align-items: baseline;
}