make the fingerprint work
This commit is contained in:
+6
File diff suppressed because one or more lines are too long
@@ -0,0 +1,150 @@
|
||||
<!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);
|
||||
|
||||
// event is fired when server side fingerlist was changed (e.g. enrollment of new finger)
|
||||
source.addEventListener('fingerlist', function(e) {
|
||||
console.log("fingerlist", e.data);
|
||||
document.getElementById('selectedFingerprint').innerHTML = event.data;
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
function askForNewName(e)
|
||||
{
|
||||
var list = document.getElementById("selectedFingerprint");
|
||||
var strOldName = list.options[list.selectedIndex].text;
|
||||
strOldName = strOldName.substr(strOldName.indexOf('-') + 2);
|
||||
newname = prompt('New Name?',strOldName);
|
||||
if (newname === null)
|
||||
document.getElementById('renameNewName').value = strOldName;
|
||||
else
|
||||
document.getElementById('renameNewName').value = newname;
|
||||
}
|
||||
</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 class="active"><a href="#">Fingerprints</a></li>
|
||||
<li><a href="settings">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<p></p>
|
||||
<div class="alert alert-custom" id="logMessages" role="alert">%LOGMESSAGES%</div>
|
||||
|
||||
<form class="form-horizontal" action="/editFingerprints">
|
||||
<fieldset>
|
||||
|
||||
<!-- Form Name -->
|
||||
<legend>Manage fingerprints</legend>
|
||||
|
||||
<!-- Select Multiple -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="selectedFingerprint">Fingerprints in DB</label>
|
||||
<div class="col-md-4">
|
||||
<select id="selectedFingerprint" name="selectedFingerprint" class="form-control" size="10">
|
||||
<!--option value="1">1 - Option one</option-->
|
||||
%FINGERLIST%
|
||||
</select>
|
||||
<input type="hidden" id="renameNewName" name="renameNewName" type="text" class="form-control input-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button (Double) -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="btnRename"></label>
|
||||
<div class="col-md-8">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<form class="form-horizontal" action="/enroll">
|
||||
<fieldset>
|
||||
|
||||
<!-- Form Name -->
|
||||
<legend>Add/Replace fingerprint</legend>
|
||||
|
||||
<!-- 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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Text input-->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="newFingerprintName">Name</label>
|
||||
<div class="col-md-4">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="startEnrollment"></label>
|
||||
<div class="col-md-4">
|
||||
<button id="startEnrollment" name="startEnrollment" class="btn btn-success">Start enrollment</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<p></p>
|
||||
<nav class="navbar navbar-default ">
|
||||
<div class="container-fluid">
|
||||
<p class="navbar-text">FingerprintDoorbell, Version %VERSIONINFO%</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,151 @@
|
||||
<!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 class="active"><a href="#">Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="alert alert-custom" id="logMessages" role="alert">%LOGMESSAGES%</div>
|
||||
|
||||
<form class="form-horizontal" action="/settings">
|
||||
<fieldset>
|
||||
|
||||
<!-- Form Name -->
|
||||
<legend>Settings</legend>
|
||||
|
||||
<!-- Text input-->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="mqtt_server">MQTT Server (Broker)</label>
|
||||
<div class="col-md-4">
|
||||
<input id="mqtt_server" name="mqtt_server" type="text" placeholder="Address of your MQTT Broker" class="form-control input-md" value="%MQTT_SERVER%" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="mqtt_username">MQTT Username</label>
|
||||
<div class="col-md-4">
|
||||
<input id="mqtt_username" name="mqtt_username" type="text" placeholder="Username for connecting to your MQTT Broker" class="form-control input-md" value="%MQTT_USERNAME%">
|
||||
<small class="text-muted">Leave empty if your broker is not requiring authentication.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="mqtt_password">MQTT Password</label>
|
||||
<div class="col-md-4">
|
||||
<input id="mqtt_password" name="mqtt_password" type="text" placeholder="Password for connecting to your MQTT Broker" class="form-control input-md" value="%MQTT_PASSWORD%">
|
||||
<small class="text-muted">Leave empty if your broker is not requiring authentication.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="mqtt_rootTopic">MQTT Root Topic</label>
|
||||
<div class="col-md-4">
|
||||
<input id="mqtt_rootTopic" name="mqtt_rootTopic" type="text" placeholder="Root topic where FingerprintDoorbell publishes its messages" class="form-control input-md" value="%MQTT_ROOTTOPIC%" required>
|
||||
<small class="text-muted">Published Topics (=write)<br>
|
||||
- "%MQTT_ROOTTOPIC%/ring"<br>
|
||||
- "%MQTT_ROOTTOPIC%/matchId"<br>
|
||||
- "%MQTT_ROOTTOPIC%/matchName"<br>
|
||||
- "%MQTT_ROOTTOPIC%/matchConfidence"<br>
|
||||
- "%MQTT_ROOTTOPIC%/lastLogMessage"<br>
|
||||
Subscribed Topics (=read)<br>
|
||||
- "%MQTT_ROOTTOPIC%/ignoreTouchRing"
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="ntpServer">NTP Server</label>
|
||||
<div class="col-md-4">
|
||||
<input id="ntpServer" name="ntpServer" type="text" placeholder="URL to NTP server" class="form-control input-md" value="%NTP_SERVER%">
|
||||
<small class="text-muted">Used for timestamps in log panel. If you don't specify any, time will be always null.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="btnSaveSettings"></label>
|
||||
<div class="col-md-4">
|
||||
<button id="btnSaveSettings" name="btnSaveSettings" class="btn btn-success">Save and Restart</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<form class="form-horizontal">
|
||||
<fieldset>
|
||||
|
||||
<!-- Form Name -->
|
||||
<legend>Advanced Actions</legend>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="btnFirmwareUpdate"></label>
|
||||
<div class="col-md-4">
|
||||
<button id="btnFirmwareUpdate" name="btnFirmwareUpdate" class="btn btn-info" type="submit" formaction="update">Firmware-Update </button>
|
||||
<button id="btnDoPairing" name="btnDoPairing" class="btn btn-warning" type="submit" formaction="pairing">Pairing a new sensor </button>
|
||||
<button id="btnDeleteAllFingerprints" name="btnDeleteAllFingerprints" class="btn btn-danger" type="submit" formaction="deleteAllFingerprints" onclick="return confirm('This will delete all fingerprints. Are you sure you wanna do that?')">Delete all Fingerprints</button>
|
||||
<button id="btnFactoryReset" name="btnFactoryReset" class="btn btn-danger" type="submit" formaction="factoryReset" onclick="return confirm('This will delete all fingerprints, your settings and your WiFi configuration. Are you sure you wanna do that?')">Factory-Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<p></p>
|
||||
<nav class="navbar navbar-default ">
|
||||
<div class="container-fluid">
|
||||
<p class="navbar-text">FingerprintDoorbell, Version %VERSIONINFO%</p>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WiFi Configuration</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" href="data:,">
|
||||
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
|
||||
<style>
|
||||
.form-horizontal{
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
h1{
|
||||
margin-left: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>%HOSTNAME%</h1>
|
||||
<div class="alert alert-danger" role="alert"><b>You are currently in WiFi configuration mode!</b></br></br>In this mode the device acts as a WiFi access point to which you can temporarily connect to with your smartphone/pc
|
||||
for configuring the access to your regular WiFi network. <br><br>
|
||||
After saving the new WiFi configuration the device will restart and try to connect to your network. If this fails the device will not go back to WiFi config mode automatically. You have to put the device manually in WiFi config mode by press and hold the sensor surface for 10 s while powering up the device.
|
||||
</div>
|
||||
|
||||
<form class="form-horizontal" action="/save">
|
||||
<fieldset>
|
||||
|
||||
<!-- Form Name -->
|
||||
<legend>WiFi Configuration</legend>
|
||||
|
||||
<!-- Text input-->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="ssid">SSID</label>
|
||||
<div class="col-md-6">
|
||||
<input id="ssid" name="ssid" type="text" placeholder="SSID of your WiFi network" class="form-control input-md" value="%WIFI_SSID%" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text input-->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="password">WiFi Password</label>
|
||||
<div class="col-md-8">
|
||||
<input id="password" name="password" type="text" placeholder="Password of your WiFi network" class="form-control input-md" value="%WIFI_PASSWORD%" required>
|
||||
<small class="text-muted">For security reason the current password is not displayed here, but you can set a new one.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text input-->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="hostname">Hostname</label>
|
||||
<div class="col-md-8">
|
||||
<input id="hostname" name="hostname" type="text" placeholder="Hostname of your FingerprintDoorbell" class="form-control input-md" value="%HOSTNAME%" required>
|
||||
<small class="text-muted">The name under which this device will be available in your network. Also used in the title of the web frontend. <br>Hint: just leave it "FingerprintDoorbell" unless you have multiple devices and want to differentiate between them.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button (Double) -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-4 control-label" for="save"></label>
|
||||
<div class="col-md-8">
|
||||
<button id="save" name="save" class="btn btn-success">Save and restart</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user