Skip to content

Commit

Permalink
More color settings on a separated html page, WiFi settings in client…
Browse files Browse the repository at this point in the history 
… mode, bug fix webPageRealm realm
  • Loading branch information
@christianjebauer
christianjebauer committed Feb 6, 2024
1 parent efbad6b commit 872210a
Show file tree
Hide file tree
Showing 10 changed files with 573 additions and 199 deletions.
294 changes: 294 additions & 0 deletions data/colorSettings.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,294 @@
<!DOCTYPE html>
<html>
<head>
<!-- created with https://bootstrapformbuilder.com/ -->
<title>FingerprintDoorbell</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="icon" href="data:,">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.alert-custom{
background-color:#cecece;
color:rgb(0, 0, 0);
}
.form-horizontal{
margin-left: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<script>
if (!!window.EventSource) {
var source = new EventSource('/events');

source.addEventListener('open', function(e) {
console.log("Events Connected");
}, false);

source.addEventListener('error', function(e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Events Disconnected");
}
}, false);

// event is fired when a new message from server was received
source.addEventListener('message', function(e) {
console.log("message", e.data);
document.getElementById('logMessages').innerHTML = event.data;
}, false);

}
</script>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">%HOSTNAME%</a>
</div>
<ul class="nav navbar-nav">
<li><a href="/">Fingerprints</a></li>
<li><a href="colorSettings">Colors</a></li>
<li><a href="wifiSettings">WiFi</a></li>
<li><a href="settings">MQTT & Admin</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="logout">Log out</a></li>
</ul>
</div>
</nav>

<div class="alert alert-custom" id="logMessages" role="alert">%LOGMESSAGES%</div>

<form class="form-horizontal" action="/colorSettings">
<fieldset>

<fieldset>

<!-- Form Name -->
<legend>LED ring color and sequence settings</legend>
<small class="text-muted">Not all versions of the R503 sensor support all colors. The older ones support only red, blue and purple!</small>

<!-- Text input-->
<div class="form-group">
<label for="activeColor" class="col-md-4 control-label">Touch ring active</label>
<div class="col-md-5">
<select id="activeColor" name="activeColor" class="select form-control">
<option value="1" %ACTIVE_COLOR_1%>Red</option>
<option value="2" %ACTIVE_COLOR_2%>Blue</option>
<option value="3" %ACTIVE_COLOR_3%>Purple</option>
<option value="4" %ACTIVE_COLOR_4%>Green</option>
<option value="5" %ACTIVE_COLOR_5%>Yellow</option>
<option value="6" %ACTIVE_COLOR_6%>Cyan</option>
<option value="7" %ACTIVE_COLOR_7%>White</option>
</select>
</div>
<label for="activeSequence" class="col-md-4 control-label"></label>
<div class="col-md-5">
<label class="radio-inline">
<input type="radio" name="activeSequence" value="4" %ACTIVE_SEQUENCE_4%>
Off
</label>
<label class="radio-inline">
<input type="radio" name="activeSequence" value="3" %ACTIVE_SEQUENCE_3%>
On
</label>
<label class="radio-inline">
<input type="radio" name="activeSequence" value="1" %ACTIVE_SEQUENCE_1%>
Breath
</label>
<label class="radio-inline">
<input type="radio" name="activeSequence" value="2" %ACTIVE_SEQUENCE_2%>
Blink
</label>
</div>
</div>
<div class="form-group">
<label for="scanColor" class="col-md-4 control-label">Scan fingerprint</label>
<div class="col-md-5">
<select id="scanColor" name="scanColor" class="select form-control">
<option value="1" %SCAN_COLOR_1%>Red</option>
<option value="2" %SCAN_COLOR_2%>Blue</option>
<option value="3" %SCAN_COLOR_3%>Purple</option>
<option value="4" %SCAN_COLOR_4%>Green</option>
<option value="5" %SCAN_COLOR_5%>Yellow</option>
<option value="6" %SCAN_COLOR_6%>Cyan</option>
<option value="7" %SCAN_COLOR_7%>White</option>
</select>
</div>
<label for="scanSequence" class="col-md-4 control-label"></label>
<div class="col-md-5">
<label class="radio-inline">
<input type="radio" name="scanSequence" value="4" %SCAN_SEQUENCE_4%>
Off
</label>
<label class="radio-inline">
<input type="radio" name="scanSequence" value="3" %SCAN_SEQUENCE_3%>
On
</label>
<label class="radio-inline">
<input type="radio" name="scanSequence" value="1" %SCAN_SEQUENCE_1%>
Breath
</label>
<label class="radio-inline">
<input type="radio" name="scanSequence" value="2" %SCAN_SEQUENCE_2%>
Blink
</label>
</div>
</div>
<div class="form-group">
<label for="matchColor" class="col-md-4 control-label">Matching fingerprint</label>
<div class="col-md-5">
<select id="matchColor" name="matchColor" class="select form-control">
<option value="1" %MATCH_COLOR_1%>Red</option>
<option value="2" %MATCH_COLOR_2%>Blue</option>
<option value="3" %MATCH_COLOR_3%>Purple</option>
<option value="4" %MATCH_COLOR_4%>Green</option>
<option value="5" %MATCH_COLOR_5%>Yellow</option>
<option value="6" %MATCH_COLOR_6%>Cyan</option>
<option value="7" %MATCH_COLOR_7%>White</option>
</select>
</div>
<label for="matchSequence" class="col-md-4 control-label"></label>
<div class="col-md-5">
<label class="radio-inline">
<input type="radio" name="matchSequence" value="4" %MATCH_SEQUENCE_4%>
Off
</label>
<label class="radio-inline">
<input type="radio" name="matchSequence" value="3" %MATCH_SEQUENCE_3%>
On
</label>
<label class="radio-inline">
<input type="radio" name="matchSequence" value="1" %MATCH_SEQUENCE_1%>
Breath
</label>
<label class="radio-inline">
<input type="radio" name="matchSequence" value="2" %MATCH_SEQUENCE_2%>
Blink
</label>
</div>
</div>
<div class="form-group">
<label for="enrollColor" class="col-md-4 control-label">Enroll fingerprint</label>
<div class="col-md-5">
<select id="enrollColor" name="enrollColor" class="select form-control">
<option value="1" %ENROLL_COLOR_1%>Red</option>
<option value="2" %ENROLL_COLOR_2%>Blue</option>
<option value="3" %ENROLL_COLOR_3%>Purple</option>
<option value="4" %ENROLL_COLOR_4%>Green</option>
<option value="5" %ENROLL_COLOR_5%>Yellow</option>
<option value="6" %ENROLL_COLOR_6%>Cyan</option>
<option value="7" %ENROLL_COLOR_7%>White</option>
</select>
</div>
<label for="enrollSequence" class="col-md-4 control-label"></label>
<div class="col-md-5">
<label class="radio-inline">
<input type="radio" name="enrollSequence" value="4" %ENROLL_SEQUENCE_4%>
Off
</label>
<label class="radio-inline">
<input type="radio" name="enrollSequence" value="3" %ENROLL_SEQUENCE_3%>
On
</label>
<label class="radio-inline">
<input type="radio" name="enrollSequence" value="1" %ENROLL_SEQUENCE_1%>
Breath
</label>
<label class="radio-inline">
<input type="radio" name="enrollSequence" value="2" %ENROLL_SEQUENCE_2%>
Blink
</label>
</div>
</div>
<div class="form-group">
<label for="wifiColor" class="col-md-4 control-label">WiFi Access Point mode</label>
<div class="col-md-5">
<select id="wifiColor" name="wifiColor" class="select form-control">
<option value="1" %WIFI_COLOR_1%>Red</option>
<option value="2" %WIFI_COLOR_2%>Blue</option>
<option value="3" %WIFI_COLOR_3%>Purple</option>
<option value="4" %WIFI_COLOR_4%>Green</option>
<option value="5" %WIFI_COLOR_5%>Yellow</option>
<option value="6" %WIFI_COLOR_6%>Cyan</option>
<option value="7" %WIFI_COLOR_7%>White</option>
</select>
</div>
<label for="wifiSequence" class="col-md-4 control-label"></label>
<div class="col-md-5">
<label class="radio-inline">
<input type="radio" name="wifiSequence" value="4" %WIFI_SEQUENCE_4%>
Off
</label>
<label class="radio-inline">
<input type="radio" name="wifiSequence" value="3" %WIFI_SEQUENCE_3%>
On
</label>
<label class="radio-inline">
<input type="radio" name="wifiSequence" value="1" %WIFI_SEQUENCE_1%>
Breath
</label>
<label class="radio-inline">
<input type="radio" name="wifiSequence" value="2" %WIFI_SEQUENCE_2%>
Blink
</label>
</div>
</div>
<div class="form-group">
<label for="errorColor" class="col-md-4 control-label">Error</label>
<div class="col-md-5">
<select id="errorColor" name="errorColor" class="select form-control">
<option value="1" %ERROR_COLOR_1%>Red</option>
<option value="2" %ERROR_COLOR_2%>Blue</option>
<option value="3" %ERROR_COLOR_3%>Purple</option>
<option value="4" %ERROR_COLOR_4%>Green</option>
<option value="5" %ERROR_COLOR_5%>Yellow</option>
<option value="6" %ERROR_COLOR_6%>Cyan</option>
<option value="7" %ERROR_COLOR_7%>White</option>
</select>
</div>
<label for="errorSequence" class="col-md-4 control-label"></label>
<div class="col-md-5">
<label class="radio-inline">
<input type="radio" name="errorSequence" value="4" %ERROR_SEQUENCE_4%>
Off
</label>
<label class="radio-inline">
<input type="radio" name="errorSequence" value="3" %ERROR_SEQUENCE_3%>
On
</label>
<label class="radio-inline">
<input type="radio" name="errorSequence" value="1" %ERROR_SEQUENCE_1%>
Breath
</label>
<label class="radio-inline">
<input type="radio" name="errorSequence" value="2" %ERROR_SEQUENCE_2%>
Blink
</label>
</div>
</div>

<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="btnSaveColorSettings"></label>
<div class="col-md-5">
<button id="btnSaveColorSettings" name="btnSaveColorSettings" class="btn btn-success">Save and restart</button>
</div>
</div>

</fieldset>
</form>

<form class="form-horizontal">
<fieldset>

<p></p>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<p class="navbar-text">FingerprintDoorbell, Version %VERSIONINFO%</p>
</div>
</nav>

</body>
</html>
14 changes: 8 additions & 6 deletions data/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,9 @@
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Fingerprints</a></li>
<li><a href="settings">Settings</a></li>
<li><a href="colorSettings">Colors</a></li>
<li><a href="wifiSettings">WiFi</a></li>
<li><a href="settings">MQTT & Admin</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="logout">Log out</a></li>
Expand All @@ -86,7 +88,7 @@
<!-- Select Multiple -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectedFingerprint">Fingerprints in DB</label>
<div class="col-md-4">
<div class="col-md-5">
<select id="selectedFingerprint" name="selectedFingerprint" class="form-control" size="10">
<!--option value="1">1 - Option one</option-->
%FINGERLIST%
Expand All @@ -98,7 +100,7 @@
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="btnRename"></label>
<div class="col-md-8">
<div class="col-md-5">
<button id="btnRename" name="btnRename" class="btn btn-info" onclick="askForNewName(event)">Rename</button>
<button id="btnDelete" name="btnDelete" class="btn btn-danger">Delete</button>
</div>
Expand All @@ -116,7 +118,7 @@
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="newFingerprintId">Memory slot (1-200)</label>
<div class="col-md-4">
<div class="col-md-5">
<input id="newFingerprintId" name="newFingerprintId" type="text" placeholder="1-200" class="form-control input-md" required="">
<small class="text-muted">The sensor has 200 memory slots available for storing fingerprints. The choosen slot number will also be used as an ID when matches are published by MQTT.</small>
</div>
Expand All @@ -125,7 +127,7 @@
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="newFingerprintName">Name</label>
<div class="col-md-4">
<div class="col-md-5">
<input id="newFingerprintName" name="newFingerprintName" type="text" placeholder="(optional)" class="form-control input-md">
<small class="text-muted">Just for human readability you can additionally assign an name to your slot number. The name will also been published by MQTT.</small>
</div>
Expand All @@ -134,7 +136,7 @@
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="startEnrollment"></label>
<div class="col-md-4">
<div class="col-md-5">
<button id="startEnrollment" name="startEnrollment" class="btn btn-success">Start enrollment</button>
</div>
</div>
Expand Down
Loading

0 comments on commit 872210a

Please sign in to comment.