v0.0.3

See changelog.

CHANGELOG.md

@@ -1,10 +1,34 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+
+## [0.0.3] - 2017-06-12
+
+### Added
+- RFID Hardware Pin and Gain settings via Web
+- New WebSocket commands and better command scheme
+
+### Fixed
+- can not fallback to AP Mode if configuration file is missing/corrupt
+
+### Changed
+- Seperate Javascript file
+- Refactor settings page
+- Refactor Fall Back to AP Mode behaviour
+- Rafactor configuration file structure
+- Web page files now have support for mobile devices and as well as PCs
+
+### Removed
+- Jumbotron CSS
+
+
 ## [0.0.2] - 2017-06-10
+### Added
+- 'Settings' Menu - (and some snippets)
 - Wi-Fi Client Settings can now be configured via Web
+
+### Changed
 - STA - AP Mode behaviour is improved
-- Initial 'Settings' Menu - (and some snippets)
 - Minor changes
 
 ## [0.0.1] - 2017-05-10

README.md

@@ -9,7 +9,7 @@ Access Control demonstration using a cheap RC522 RFID Hardware and Espressif's E
 * Using WebSocket protocol to exchange data between Hardware and Web Browser
 * Data is encoded as JSON object
 * Records are Timestamped (Time synced from a NTP Server)
-* Bootstrap for beautiful Web Pages
+* Bootstrap for beautiful Web Pages for both Mobile and Desktop Screens
 * Built-in HTML Editor
 * Thanks to ESPAsyncWebServer Library communication is Asyncronous
 
@@ -51,7 +51,9 @@ The following table shows the typical pin layout used:
 
 * Built-in HTML Editor has hard-coded JavaScript that loads from CDN Internet
 * AP mode is being tested, connect to Internet where available, Text Editor won't work if there is no Internet connection
-* Currently only Git version of ESP8266 Core is supported. (WiFi.scanNetworksAsync())
+* Currently only Git version (2.4.0rc) of ESP8266 Core is supported, due to new function is introduced (WiFi.scanNetworksAsync())
+* Currently we are serving all SPIFFS Files on webserver, exposing config.txt confidential data.
+* Chrome complains about password on URL
 
 
 ## TODO
@@ -62,5 +64,8 @@ The following table shows the typical pin layout used:
 - [ ] Schedule User Access
 - [ ] Polished web pages
 - [ ] Sync Time from Browser if there is no internet connection
+- [ ] Sanity check where needed
 
-- [ ] Use Sming Framework for Development
+- [ ] Use Sming Framework for Development
+- [ ] Abandon "String" usage
+- [ ] Close security holes

data/auth/config.json

@@ -0,0 +1,7 @@
+{
+ "ssid":"SMC",
+ "pswd":"333555555",
+ "sspin":15,
+ "rstpin":0,
+ "rfidgain":32
+}

data/auth/rfid.js

@@ -0,0 +1,164 @@
+var websock;
+
+function start() {
+ websock = new WebSocket('ws:https://' + window.location.hostname + '/ws');
+ websock.onopen = function(evt) {
+ console.log('ESP WebSock Open');
+ websock.send('{"command":"getconf"}');
+ websock.send('{"command":"picclist"}');
+ };
+ websock.onclose = function(evt) {
+ console.log('ESP WebSock Close');
+ };
+ websock.onerror = function(evt) {
+ console.log(evt);
+ };
+ websock.onmessage = function(evt) {
+ console.log(evt.data);
+ obj = JSON.parse(evt.data);
+ if (obj.command == "ssidlist") {
+ listSSID(obj);
+ } else if (obj.command == "configfile") {
+ listCONF(obj);
+ } else if (obj.command == "piccscan") {
+ listSCAN(obj);
+ } else if (obj.command == "picclist") {
+ listknownPICC(obj);
+ }
+ };
+}
+
+function listCONF(obj) {
+ console.log(obj);
+ document.getElementById('inputtohide').value = obj.ssid;
+ document.getElementById('wifipass').value = obj.pswd;
+ document.getElementById('gpioss').value = obj.sspin;
+ document.getElementById('gpiorst').value = obj.rstpin;
+ document.getElementById('gain').value = obj.rfidgain;
+}
+
+function listSSID(obj) {
+ var select = document.getElementById('ssid');
+ for (var i = 0; i < obj.ssid.length; i++) {
+ var x = obj.ssid[i];
+ var opt = document.createElement('option');
+ opt.value = x;
+ opt.innerHTML = x;
+ select.appendChild(opt);
+ }
+ document.getElementById('scanb').innerHTML = 'Re-Scan';
+}
+
+function scanWifi() {
+ websock.send('{"command":"scan"}');
+ document.getElementById('scanb').innerHTML = '...';
+ document.getElementById('inputtohide').style.display = 'none';
+ var node = document.getElementById('ssid');
+ node.style.display = 'inline';
+ while (node.hasChildNodes()) {
+ node.removeChild(node.lastChild);
+ }
+}
+
+function saveConf() {
+ var ssid;
+ if (document.getElementById('inputtohide').style.display == 'none') {
+ var b = document.getElementById('ssid');
+ ssid = b.options[b.selectedIndex].value;
+ } else {
+ ssid = document.getElementById('inputtohide').value;
+ }
+ var datatosend = {};
+ datatosend.command = "configfile";
+ datatosend.ssid = ssid;
+ datatosend.pswd = document.getElementById('wifipass').value;
+ datatosend.sspin = document.getElementById('gpioss').value;
+ datatosend.rstpin = document.getElementById('gpiorst').value;
+ datatosend.rfidgain = document.getElementById('gain').value;
+ console.log(JSON.stringify(datatosend));
+ websock.send(JSON.stringify(datatosend));
+}
+
+function listSCAN(obj) {
+ var epochTime = obj.epoch;
+ var isKnown = obj.known;
+ var uid = obj.uid;
+ var uidUP = obj.uid.toUpperCase();
+ var type = obj.type.toUpperCase();
+ var ref = document.getElementById('picctype');
+
+ ref.innerHTML = "UID: " + uidUP + " Type: " + type + " ";
+
+ var btn = document.createElement('button');
+
+ if (isKnown == 1) {
+
+ btn.id = uid;
+ btn.classList.add("btn", "btn-danger", "btn-xs");
+ btn.onclick = function() {
+ del(this);
+ };
+ btn.textContent = "Remove";
+ ref.appendChild(btn);
+
+ } else {
+
+ btn.id = uid;
+ btn.classList.add("btn", "btn-success", "btn-xs");
+ btn.onclick = function() {
+ add(this);
+ };
+ btn.textContent = "Add";
+
+ ref.appendChild(btn);
+ }
+}
+
+function add(e) {
+ var x = confirm('This will add ' + e.id + ' to database. Are you sure?');
+ if (x) {
+ var jsontosend = '{"uid":"' + e.id + '","command":"add"}';
+ websock.send(jsontosend);
+ }
+ }
+
+function del(e) {
+ var x = confirm('This will remove ' + e.id + ' from database. Are you sure?');
+ if (x) {
+ var jsontosend = '{"uid":"' + e.id + '","command":"remove"}';
+ websock.send(jsontosend);
+ }
+
+}
+
+
+
+function listknownPICC(obj) {
+ var table = document.getElementById("knowntable").getElementsByTagName('tbody')[0];
+
+ for (var i = 0; i < obj.piccs.length; i++) {
+ var x = obj.piccs[i];
+ x = x.substring(3);
+ var upper = x.toUpperCase();
+ var row = table.insertRow(table.rows[0]);
+ row.className = 'success';
+ var cell1 = row.insertCell(0);
+ cell1.value = upper;
+ cell1.innerHTML = upper;
+ var cell2 = row.insertCell(1);
+ var inp = document.createElement('input');
+ inp.classList.add("input-sm");
+ cell2.appendChild(inp);
+ var cell3 = row.insertCell(2);
+ var btn = document.createElement('button');
+ btn.onclick = function() {del(this);};
+ btn.id = x;
+ btn.classList.add("btn", "btn-danger", "btn-xs");
+ btn.textContent = "X";
+ cell3.appendChild(btn);
+
+
+
+ }
+ console.log(obj);
+}

data/auth/settings.htm

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta name="description" content="">
+ <meta name="author" content="">
+ <link rel="icon" href="/favicon.ico">
+ <title>ESP RFID Websocket Demo</title>
+ <!-- Bootstrap core CSS -->
+ <link href="/bootstrap.css" rel="stylesheet">
+ <script src="/auth/rfid.js" type="text/javascript" charset="utf-8"></script>
+ </head>
+ <body onload="javascript:start();">
+ <div class="container">
+ <div class="header clearfix">
+ <nav>
+ <ul class="nav nav-pills pull-right">
+ <li role="presentation"><a href="#">Logs</a> </li>
+ <li role="presentation" class="active"><a href="/auth/settings.htm">Settings</a> </li>
+ </ul>
+ </nav>
+ <h3 class="text-muted">ESP RFID</h3>
+ </div>
+ <div class="jumbotron">
+ <div class="alert alert-warning"> <strong>Warning!</strong> Saving settings will cause your ESP to reboot. </div>
+ <div class="row">
+ <div class="col-sm-6 col-sm-push-6">
+ <fieldset>
+ <legend>Wi-Fi Client Settings</legend>
+ <p style="font-size:12px;" class="text-muted">Type your Wi-Fi Network's SSID or Scan for nerby Wireless Networks to join.</p>
+ <div class="row form-group">
+ <label class="col-xs-3">SSID</label> 
+ <span class="col-xs-9">
+ <input class="form-control input-sm" style="display:inline;max-width:150px" id="inputtohide" type="text" name="ap_ssid"/>
+ <select class="form-control input-sm" style="display:none;max-width:150px" id="ssid"></select>
+ <button id="scanb" type="button" class="btn btn-info btn-xs" onclick="scanWifi()">Scan</button>
+ </span>
+ </div>
+ <div class="row form-group">
+ <label class="col-xs-3">Password</label> 
+ <span class="col-xs-9">
+ <input id="wifipass" style="max-width:150px" class="form-control input-sm" type="text" name="ap_passwd">
+ </span> 
+ </div>
+ </fieldset>
+ <br>
+ </div>
+ <div class="col-sm-6 col-sm-pull-6">
+ <fieldset>
+ <legend>MFRC522 Hardware Settings</legend>
+ <p style="font-size:12px;" class="text-muted">Please refer the <a href="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/omersiar/esp-rfid">documentation</a> for pin configuration.</p>
+ <div class="row form-group">
+ <label class="col-xs-3">RST/Reset</label> 
+ <span class="col-xs-9">
+ <select class="form-control input-sm" style="max-width:185px" id="gpiorst">
+ <option selected="selected" value="0">GPIO-0</option>
+ <option value="2">GPIO-2</option>
+ <option value="4">GPIO-4</option>
+ <option value="5">GPIO-5</option>
+ <option value="15">GPIO-15</option>
+ <option value="16">GPIO-16</option>
+ </select>
+ </span>
+ </div>
+ <div class="row form-group">
+ <label class="col-xs-3">SPI SS</label> 
+ <span class="col-xs-9">
+ <select class="form-control input-sm" style="max-width:185px" id="gpioss">
+ <option value="0">GPIO-0</option>
+ <option value="2">GPIO-2</option>
+ <option value="4">GPIO-4</option>
+ <option value="5">GPIO-5</option>
+ <option selected="selected" value="15">GPIO-15</option>
+ <option value="16">GPIO-16</option>
+ </select>
+ </span>
+ </div>
+ <div class="row form-group">
+ <label class="col-xs-3">Antenna Gain</label> 
+ <span class="col-xs-9">
+ <select class="form-control input-sm" style="max-width:185px" id="gain">
+ <option value="112">Max (48 db)</option>
+ <option value="96">43 db</option>
+ <option value="48">38 db</option>
+ <option selected="selected" value="32">Avg (33 db)</option>
+ <option value="16">23 db</option>
+ <option value="0">Min (18 db)</option>
+ </select>
+ </span>
+ </div>
+ </fieldset>
+ </div>
+ </div>
+ <div><button onclick="saveConf()" class="btn btn-success btn-md pull-right">Save & Reboot</button> 
+ </div>
+ <br>
+ </div>
+ <div class="jumbotron">
+ <div class="row">
+ <div class="col-sm-6 col-sm-push-6"><legend>Scan a PICC for details.</legend>
+ <div id="picctype" class="well well-lg" style="width:100%;">
+
+
+ </div>
+ </div>
+ <div class="col-sm-6 col-sm-pull-6">
+ <legend>Known PICCs</legend>
+ <div class="panel panel-default table-responsive">
+ <table id="knowntable" class="table table-hover table-striped">
+ <thead class="thead-default">
+ <tr>
+ <th>UID</th>
+ <th>User</th>
+ <th>Remove</th>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <br><br>
+ </div>
+ </div>
+ <hr>
+ <footer>
+ <p>&copy; 2017 OSB Inc.</p>
+ </footer>
+ </div>
+ </body>
+</html>