Skip to content

Commit

Permalink
revamped webui & added neopixel rgb fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@rednblkx
rednblkx committed Aug 23, 2024
1 parent ba9de49 commit f34b3e2
Show file tree
Hide file tree
Showing 8 changed files with 697 additions and 353 deletions.
180 changes: 180 additions & 0 deletions data/actions.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<form id="actions-config" action="actions-config" method="post"
style="display: inline-flex; flex-direction: column;margin-bottom: 0rem;">

<h2 style="text-align: center;">Hardware Actions</h2>

<div
style="display: flex;flex-direction: column;border: 1px #8e8271 solid;border-radius: 8px;padding: 1rem;box-shadow: 0px 1px 1px 0px;margin-bottom: 1rem;background-color: #2d1d1d;">
<h3 style="margin-top: 0;text-align: center;">HomeKey/NFC Triggers</h3>
<h4 style="margin-top: 0;">Executed on successful/failed HomeKey Authentication or NFC Tag detection(marked as successful event)</h4>
<h4 style="margin-top: 0;">Intended only to provide a feedback hence both the Neopixel and Simple GPIO have a momentary state</h4>
<div style="display:flex;flex-direction: column;border: 2px #8e8271 dashed;padding: 1rem;margin-bottom: 1rem;">
<h3 style="margin: 0 0 1rem;">Neopixel</h3>
<div style="display: flex; flex-direction: column;">
<label for="nfc-s-pin">Auth Success/Failure GPIO Pin</label>
<input type="number" name="nfc-neopixel-pin" id="nfc-neopixel-pin" placeholder="8" required value="%NFCNEOPIXELPIN%" min="0" max="255">
</div>
<div style="display: flex;flex-direction: column;margin-top: .7rem;">
<label for="neopixel-s-time">Timeout(ms) - Auth Success</label>
<input type="number" name="neopixel-s-time" id="neopixel-s-time" placeholder="1000" required value="%NEOSTIME%">
</div>
<div style="display: flex;flex-direction: column;margin-top: .7rem;">
<label for="neopixel-f-time">Timeout(ms) - Auth Failed</label>
<input type="number" name="neopixel-f-time" id="neopixel-f-time" placeholder="1000" required value="%NEOFTIME%">
</div>
<div
style="display: flex;gap: 8px;border: 1px #8e8271 solid;padding: .5rem;margin-top: 1rem;justify-content: space-around;">
<div id="nfc-s-color" style="display: flex;flex-direction: column;">
<div style="display: flex;">
<h4 style="margin: .1rem 0 0;text-align: center;">Auth Success Color</h4>
</div>
<div id="nfc-s-vals" style="display: flex;gap:8px;flex-wrap: wrap;justify-content: center;">
<div style="display: flex; flex-direction: column;">
<label for="nfc-s-red-pixel">R</label>
<input type="number" style="max-width: 3.5rem" name="nfc-s-red-pixel" id="nfc-s-red-pixel" min="0" max="255" placeholder="255" required value="%SREDPIXELVAL%">
</div>
<div style="display: flex; flex-direction: column;">
<label for="nfc-s-green-pixel">G</label>
<input type="number" style="max-width: 3.5rem" name="nfc-s-green-pixel" id="nfc-s-green-pixel" min="0" max="255" placeholder="255" required value="%SGREENPIXELVAL%">
</div>
<div style="display: flex; flex-direction: column;">
<label for="nfc-s-blue-pixel">B</label>
<input type="number" style="max-width: 3.5rem" name="nfc-s-blue-pixel" id="nfc-s-blue-pixel" min="0" max="255" placeholder="255" required value="%SBLUEPIXELVAL%">
</div>
</div>
</div>
<span style="border: 1px #8e8271 solid; margin: 1rem;"></span>
<div id="nfc-f-color" style="display: flex;flex-direction: column;">
<div style="display: flex;">
<h4 style="margin: .1rem 0 0;text-align: center;">Auth Failure Color</h4>
</div>
<div id="nfc-f-vals" style="display: flex;gap:8px;flex-wrap: wrap;justify-content: center;">
<div style="display: flex; flex-direction: column;">
<label for="nfc-f-red-pixel">R</label>
<input type="number" style="max-width: 3.5rem" name="nfc-f-red-pixel" id="nfc-f-red-pixel" min="0" max="255" placeholder="255" required value="%FREDPIXELVAL%">
</div>
<div style="display: flex; flex-direction: column;">
<label for="nfc-f-green-pixel">G</label>
<input type="number" style="max-width: 3.5rem" name="nfc-f-green-pixel" id="nfc-f-green-pixel" min="0" max="255" placeholder="255" required value="%FGREENPIXELVAL%">
</div>
<div style="display: flex; flex-direction: column;">
<label for="nfc-f-blue-pixel">B</label>
<input type="number" style="max-width: 3.5rem" name="nfc-f-blue-pixel" id="nfc-f-blue-pixel" min="0" max="255" placeholder="255" required value="%FBLUEPIXELVAL%">
</div>
</div>
</div>
</div>
</div>

<div style="display:flex;flex-direction: column;border: 2px #8e8271 dashed;padding: 1rem;align-items: center;">
<h3 style="margin: 0 0 1rem;align-self: flex-start;">Simple GPIO</h3>
<div style="display: flex;gap: 8px;flex-wrap: wrap;justify-content: center;">
<div style="display: flex;">
<fieldset>
<legend>Auth Success</legend>
<div style="display: flex;flex-direction: column;">
<label for="nfc-s-pin">GPIO Pin</label>
<input type="number" name="nfc-s-pin" id="nfc-s-pin" placeholder="2" required value="%NFC1PIN%" min="0" max="255">
</div>
<div style="display: flex;flex-direction: column;margin-top: .7rem;">
<label for="nfc-s-time">GPIO Time (ms)</label>
<input type="number" name="nfc-s-time" id="nfc-s-time" placeholder="1000" required value="%NFC1TIME%">
</div>
<div style="display: flex;margin-top: .7rem;gap: 8px;">
<label for="nfc-s-hl">GPIO State</label>
<select name="nfc-s-hl" id="nfc-s-hl">
<option value="1">HIGH</option>
<option value="0">LOW</option>
</select>
</div>
</fieldset>
</div>
<div style="display: flex;">
<fieldset>
<legend>Auth Failure</legend>
<div style="display: flex;flex-direction: column;">
<label for="nfc-f-pin">GPIO Pin</label>
<input type="number" name="nfc-f-pin" id="nfc-f-pin" placeholder="2" required value="%NFC2PIN%" min="0" max="255">
</div>
<div style="display: flex;flex-direction: column;margin-top: .7rem;">
<label for="nfc-f-time">GPIO Time (ms)</label>
<input type="number" name="nfc-f-time" id="nfc-f-time" placeholder="1000" required value="%NFC2TIME%">
</div>
<div style="display: flex;margin-top: .7rem;gap: 8px;">
<label for="nfc-f-hl">GPIO State</label>
<select name="nfc-f-hl" id="nfc-f-hl">
<option value="1">HIGH</option>
<option value="0">LOW</option>
</select>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<div style="display: flex;flex-direction: column;border: 1px #8e8271 solid;border-radius: 8px;padding: 1rem;box-shadow: 0px 1px 1px 0px;background-color: #2d1d1d;">
<h3 style="margin-top: 0;text-align: center;">HomeKit/HomeKey Triggers</h3>
<h4 style="margin-top: 0;margin-bottom: .5rem;">Executed upon interaction in the Home app or on successful HomeKey Authentication</h4>
<h4 style="margin-top: 0;">Follows "Always Lock/Unlock on HomeKey" option</h4>
<div style="display:flex;flex-direction: column;border: 2px #8e8271 dashed;padding: 1rem;">
<h3 style="margin: 0 0 1rem;align-self: flex-start;">Simple GPIO</h3>
<div style="display: flex;gap: 8px;">
<label for="gpio-a-pin">GPIO Pin</label>
<input type="number" name="gpio-a-pin" id="gpio-a-pin" placeholder="2" required value="%GPIOAPIN%" style="width: 4rem;" min="0" max="255">
</div>
<div style="display: flex;margin-top: .7rem;gap: 8px;">
<label for="gpio-a-lock">GPIO State - Locked</label>
<select name="gpio-a-lock" id="gpio-a-lock">
<option value="0">LOW</option>
<option value="1">HIGH</option>
</select>
</div>
<div style="display: flex;margin-top: .7rem;gap: 8px;">
<label for="gpio-a-unlock">GPIO State - Unlocked</label>
<select name="gpio-a-unlock" id="gpio-a-unlock" value="0">
<option value="1">HIGH</option>
<option value="0">LOW</option>
</select>
</div>
</div>
</div>
<div style="display: flex;justify-content: space-around;margin-top: 2rem;">
<button type="submit" style="cursor: pointer;">Submit</button>
<button type="reset" style="cursor: pointer;" class="destructive-btn">Reset</button>
</div>
</form>
<script>
let nfcshl = document.querySelector("#nfc-s-hl");
let nfcfhl = document.querySelector("#nfc-f-hl");
let actionunlock = document.querySelector("#gpio-a-unlock");
let actionlock = document.querySelector("#gpio-a-lock");
nfcshl.selectedIndex = "%NFC1HL%";
nfcfhl.selectedIndex = "%NFC2HL%";
actionlock.selectedIndex = "%GPIOALOCK%";
actionunlock.selectedIndex = "%GPIOALOCK%";
let form = document.getElementById("actions-config");
async function handleForm(event) {
event.preventDefault();
let response = await fetch("actions-config", {
body: new FormData(form),
method: "post",
});
let string = await response.text();
let element = document.querySelector("#status-text");
if (element) {
element.remove();
}
let component = document.getElementById("component");
let elStatus = document.createElement("p");
elStatus.id = "status-text";
elStatus.style = "color: red;";
elStatus.innerText = string;
document
.querySelector("#component > h2")
.insertAdjacentElement("afterend", elStatus);
setTimeout(() => {
document.querySelector("#status-text").remove();
}, 5000);
}
form.addEventListener("submit", handleForm);
</script>
56 changes: 25 additions & 31 deletions data/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,58 +2,52 @@

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="misc.css"/>
<title>HK Configuration</title>
<style>
label {
font-size: 16px;
}
</style>
<script>
async function addComponent(name) {
async function addComponent(name, button) {
let element = document.querySelector("#component");
if(element){
element.remove();
}
let sel = document.querySelector(".selected-btn");
if(sel){
sel.classList.remove("selected-btn");
}
let main = document.querySelector("#main");
let el = document.createElement("div");
el.id = "component";
el.style = "display: flex;flex-direction: column;";
switch (name) {
case "mqtt":
let data = await fetch("mqtt");
let string = await data.text();
el.innerHTML = string;
main.appendChild(el);
eval(document.querySelector("#component").querySelector("script").innerText);
break;
case "info":
let data1 = await fetch("info");
let string1 = await data1.text();
el.innerHTML = string1;
main.appendChild(el);
break;
case "misc":
let data2 = await fetch("misc");
let string2 = await data2.text();
el.innerHTML = string2;
main.appendChild(el);
eval(document.querySelector("#component").querySelector("script").innerText);
break;
el.style = "display: flex;flex-direction: column;max-width: 32rem;margin-bottom: 1rem;";
let data = await fetch(name);
let string = await data.text();
el.innerHTML = string;
main.appendChild(el);
button.classList.add("selected-btn");
let sc = document.querySelector("#component").querySelector("script");
if(sc){
eval(sc.innerText);
}
}
</script>
</head>

<body style="display: flex; flex-direction: column; align-items: center;">
<h1>HomeKey-ESP32</h1>
<div id="main" style="border: 2px groove;padding: 1rem">
<body style="display: flex; flex-direction: column;align-items: center;">
<h1 style="text-align: center;margin-bottom: 0;">HomeKey-ESP32</h1>
<h4 style="text-align: center;margin-top: 0;">version: %VERSION%</h4>
<div id="main" style="border: 2px groove #8e8271;padding: 1rem;background-color: #003232;margin-bottom: 1rem;">
<div style="gap: 1rem; display: flex;justify-content: center;">
<button onclick='addComponent("info")' style="border: 2px;padding: .6rem;border-style: groove;cursor: pointer;" rel="noopener noreferrer">HK Info</a>
<button onclick='addComponent("mqtt")' style="border: 2px;padding: .6rem;border-style: groove;cursor: pointer;" rel="noopener noreferrer">MQTT Config</a>
<button onclick='addComponent("misc")' style="border: 2px;padding: .6rem;border-style: groove;cursor: pointer;" rel="noopener noreferrer">Misc</a>
<button onclick='addComponent("info", this)' style="padding: .6rem;cursor: pointer;" rel="noopener noreferrer">HK Info</a>
<button onclick='addComponent("mqtt", this)' style="padding: .6rem;cursor: pointer;" rel="noopener noreferrer">MQTT</a>
<button onclick='addComponent("actions", this)' style="padding: .6rem;cursor: pointer;" rel="noopener noreferrer">Actions</a>
<button onclick='addComponent("misc", this)' style="padding: .6rem;cursor: pointer;" rel="noopener noreferrer">Misc</a>
</div>
<span style="margin-top: 1rem;border: 1px dashed black;box-sizing: border-box;width: 100%;height: 1px;display: inline-block;"></span>
<span style="margin-top: 1rem;border: 1px dashed #8e8271;box-sizing: border-box;width: 100%;height: 1px;display: inline-block;"></span>
</div>
</body>

</html>
</html>
2 changes: 1 addition & 1 deletion data/info.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h2 style="text-align: center;">HK Info</h2>
<h2 style="text-align: center;">HomeKey Info</h2>
<ul>
<li>Reader GID: %READERGID%</li>
<li>Reader ID: %READERID%</li>
Expand Down
63 changes: 63 additions & 0 deletions data/misc.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
:root {
background-color: #353030;
background-image: radial-gradient(rgba(255, 255, 255, 0.2) 0.05rem, transparent 8%);
background-size: 2vh 2.2vh;
}

fieldset {
border-color: black;
}

h2 {
background: repeating-linear-gradient( 135deg, transparent, transparent 9px, #8e8271 10px, #8e8271 10px );
margin: 0!important;
padding: 1rem!important;
margin-bottom: 1rem!important;
margin-top: 1rem!important;
}

p,
h3,
h4,
h2,
h1,
label,
li,
ul,
legend {
color: white;
}

* {
border-color: #8e8271;
}

.destructive-btn {
background-color: hsl(0 62.8% 30.6%/1);
color: white;
}

.selected-btn {
opacity: .5;
}

button {
padding: .5rem .8rem .5rem .8rem;
box-sizing: border-box;
border: 0 solid #e5e7eb;
color: hsl(240 5.9% 10%);
background-color: hsl(0 0% 98%);
border-radius: calc(0.5rem - 2px);
white-space: nowrap;
font-weight: 500;
font-size: .875rem;
line-height: 1.25rem;
display: inline-flex;
background-image: none;
text-transform: none;
border-color: hsl(240 3.7% 15.9%) !important;
}

button:hover {
opacity: .9;
}
Loading

0 comments on commit f34b3e2

Please sign in to comment.