Skip to content

Commit

Permalink
v 0️⃣ 4️⃣ 🅰️
Browse files Browse the repository at this point in the history 
This is a initial first step to build more responsive, polished, feature rich web UI.
Bootstrap, jQuery, and FooTable frameworks are all in together.

See [ChangeLog](https://github.com/omersiar/esp-rfid/blob/master/CHANGELOG.md)
  • Loading branch information
@omersiar
omersiar committed Aug 18, 2017
1 parent 0b740b7 commit 009ff67
Show file tree
Hide file tree
Showing 16 changed files with 6,829 additions and 354 deletions.
18 changes: 18 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,24 @@
# Change Log
All notable changes to this project will be documented in this file.

## [0.3alpha] - 2017-08-18
#### Added
- Support for jQuery v1.12.4
- Support for Bootstrap Javascript v3.3.7
- Support for Bootstrap Glyphicons
- Support for FooTable v3.1.6

#### Changed
- Refactored picclist command (JSON Array is now more human readable, can be queried page by page, initially 15 records per page due to Mobile Devices limiting maximum WebSocket message lenght, I do not know if this a feature or a bug)
- Restoring User Data improved (restoring is now done one by one only when the ESP is ready to digest another userfile)
- Backup User Data is improved (thanks to newly optimized userlist command we are getting all the data from ESP page by page)
- Refactored User List (thanks to FooTable user list is now fully searchable, sortable, filterable, editable)
- Refactored framework's required Javascript and CSS (All files minified and gzipped together, this will reduce requests made to ESP)
- While restoring user data now we are showing a pop-up.

#### Misc
- Run a test where 1000! users can be handled (see https://github.com/omersiar/esp-rfid#tests)

## [0.2] - 2017-08-09 We hit the V0.2 thanks to rneurink
#### Added
- BSSID Setting (This will allow to connect specific Access Point if there are more than one AP with the same SSID)
Expand Down
74 changes: 42 additions & 32 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ You can connect to Web UI anytime to give users access or take it back. Web UI a

Use case scenarios can be expanded. There are several things I want to implement. (such as limited time access, logging, record user's enter exit time, etc.)

![IP](https://github.com/omersiar/esp-rfid/blob/master/demo/index.png?raw=true)
![SP](https://github.com/omersiar/esp-rfid/blob/master/demo/settings.png?raw=true)
![UP](https://github.com/omersiar/esp-rfid/blob/master/demo/users.png?raw=true)
![IP](https://github.com/omersiar/esp-rfid/raw/master/demo/index.png)
![SP](https://github.com/omersiar/esp-rfid/raw/master/demo/settings.png)
![UP](https://github.com/omersiar/esp-rfid/raw/master/demo/users.png)

## Features
* Using WebSocket protocol to exchange data between Hardware and Web Browser
Expand All @@ -22,35 +22,24 @@ Use case scenarios can be expanded. There are several things I want to implement

## Getting Started
This project still in its development phase. New features (and also bugs) are introduced often and some functions may become deprecated. Please feel free to comment or give feedback.
* Latest version is v0.2
* Latest development version is v0.3alpha
* Latest released compiled binaries are from v0.2 and can be found in directory "/compiledbin"
* See [Known Issues](https://github.com/omersiar/esp-rfid#known-issues) before starting right away.
* See [ChangeLog](https://github.com/omersiar/esp-rfid/blob/master/CHANGELOG.md)
* See [To Do](https://github.com/omersiar/esp-rfid#to-do) for what to expect in future.

### Steps
* First, flash firmware to your ESP either using Arduino IDE or with your favourite flash tool
* Flash webfiles data to SPIFFS either using ESP8266FS Uploader tool or with your favourite flash tool
* (optional) Fire up your serial monitor to get informed
* Power on your ESP
* Search for Wireless Network "esp-rfid" and connect to it (It should be an open network and does not reqiure password)
* Open your browser and type either "http:https://192.168.4.1" or "http:https://esp-rfid.local" (.local needs Bonjour installed on your computer) on address bar.
* Log on to ESP, password is "admin" (for now, you can only change it from source)
* Go to "Settings" page
* Configure your amazing access control device. Push "Scan" button to join your wireless network, configure RFID hardware, Relay Module.
* Save settings, when rebooted your ESP will try to join your wireless network.
* Check your new IP address from serial monitor and connect to your ESP again. (You can also connect to "http:https://esp-rfid.local")
* Go to "Users" page
* Scan a PICC (RFID Tag) then it should glimpse on your Browser's screen.
* Type "User Name" or "Label" for the PICC you scanned.
* Choose "Allow Access" if you want to
* Click "Add"
* Congratulations, everything went well, if you encounter any issue feel free to ask help on GitHub.
### What You Will Need
### Hardware
* An ESP8266 module or development board like WeMos or NodeMcu with at least 32Mbit Flash (equals to 4MBytes)(ESP32 may work too, testing needed)
* A MFRC522 RFID PCD Module
* A Relay Module (or you can build your own circuit)

### Using Compiled Binaries
Compiled binaries are available in directory /compiledbin. You can use any flashing tool and do the flashing manually. The flashing process itself has been described at numerous places on Internet.
### Software

#### Using Compiled Binaries
Compiled binaries are available in directory /compiledbin. You can use any flashing tool and do the flashing manually. The flashing process itself has been described at numerous places on Internet.

### Building from Source
#### Building From Source
Please install Arduino IDE if you didn't already, then add ESP8266 Core (Beware! Install Git Version) on top of it. Additional Library download links are listed below:

* [Arduino IDE](http:https://www.arduino.cc) - The development IDE
Expand All @@ -60,6 +49,7 @@ Please install Arduino IDE if you didn't already, then add ESP8266 Core (Beware!
* [MFRC522](https://github.com/miguelbalboa/rfid) - MFRC522 RFID Hardware Library for Arduino IDE
* [ArduinoJson](https://github.com/bblanchon/ArduinoJson) - JSON Library for Arduino IDE
* [NTPClientLib](https://github.com/gmag11/NtpClient/) - NTP Client Library for Arduino IDE
* [TimeLib](https://github.com/PaulStoffregen/Time) - Mandatory for NTP Client Library

You also need to upload web files to your ESP with ESP8266FS Uploader.

Expand All @@ -82,13 +72,32 @@ The following table shows the typical pin layout used for connecting MFRC522 har
2. Configurable via settings page.
3. The SDA pin might be labeled SS on some/older MFRC522 boards.

### Steps
* First, flash firmware to your ESP either using Arduino IDE or with your favourite flash tool
* Flash webfiles data to SPIFFS either using ESP8266FS Uploader tool or with your favourite flash tool
* (optional) Fire up your serial monitor to get informed
* Power on your ESP
* Search for Wireless Network "esp-rfid" and connect to it (It should be an open network and does not reqiure password)
* Open your browser and type either "http:https://192.168.4.1" or "http:https://esp-rfid.local" (.local needs Bonjour installed on your computer) on address bar.
* Log on to ESP, password is "admin" (for now, you can only change it from source)
* Go to "Settings" page
* Configure your amazing access control device. Push "Scan" button to join your wireless network, configure RFID hardware, Relay Module.
* Save settings, when rebooted your ESP will try to join your wireless network.
* Check your new IP address from serial monitor and connect to your ESP again. (You can also connect to "http:https://esp-rfid.local")
* Go to "Users" page
* Scan a PICC (RFID Tag) then it should glimpse on your Browser's screen.
* Type "User Name" or "Label" for the PICC you scanned.
* Choose "Allow Access" if you want to
* Click "Add"
* Congratulations, everything went well, if you encounter any issue feel free to ask help on GitHub.

### Known Issues
* Built-in HTML Editor has hard-coded JavaScript that loads from CDN Internet. Text Editor won't work if there is no Internet connection.
* Currently only Git version (2.4.0rc) of ESP8266 Core is supported, due to new function is introduced (WiFi.scanNetworksAsync()).
* Firmware update does not authenticated (until we find a solution).
* When you connect to ESP via mDNS url Browsers make a DNS Query for WebSocket link, it takes long time to resolve.

### Time
#### Time
We are syncing time from a NTP Server (in Client -aka infrastructure- Mode). This will require ESP to have an Internet connection. Additionaly your ESP can also work without Internet connection too (Access Point -aka Ad-Hoc- Mode), without giving up functionality.
This will require you to do syncing manually. ESP can store and hold time for you approximately 51 days without a major issue, device time can drift from actual time depending on usage, temprature, etc.
So you have to login to settings page and sync it in a timely fashion.
Expand All @@ -99,16 +108,17 @@ Since we are limited on both flash and ram size things may get ugly at some poin
### Tests

#### How many RFID Tag can be handled?
Write some user data on File System worth:
Restore some [random generated](https://github.com/omersiar/esp-rfid/raw/master/demo/demo-users-data.json) user data on File System worth:

* 100 seperate "userfile"
* 1000 seperate "userfile"
* random 4 Bytes long UID and
* "Test Name Test Surname Label" as User Name and
* each have access status integer "1" or "0".
* random User Names and
* 4 bytes random Unix Time Stamp
* each have "access type" 1 byte integer "1" or "0".

Total 4,284 Bytes
Total 122,880 Bytes

At least 100 unique User (RFID Tag) can be handled, the test were performed on WeMos D1 mini.
At least 1000 unique User (RFID Tag) can be handled, the test were performed on WeMos D1 mini.

#### Additional testing is needed:

Expand Down
135 changes: 88 additions & 47 deletions data/auth/set.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
var websock;
var utcSeconds;
var recordstorestore = 0;
var slot = 0;
var userdata;
var page = 1;
var haspages;
var file = {};
var userdata = [];
var completed = false;

function listCONF(obj) {
document.getElementById("inputtohide").value = obj.ssid;
Expand All @@ -15,8 +23,7 @@ function listCONF(obj) {
document.getElementById("hostname").value = obj.hostnm;
if (obj.wmode === "1") {
document.getElementById("wmodeap").checked = true;
}
else {
} else {
document.getElementById("wifibssid").value = obj.bssid;
document.getElementById("hideBSSID").style.display = "block";
}
Expand All @@ -27,14 +34,14 @@ function listCONF(obj) {
}

function browserTime() {
var today = new Date();
document.getElementById("rtc").innerHTML = today;
var today = new Date();
document.getElementById("rtc").innerHTML = today;
}

function deviceTime() {
var t = new Date(0); // The 0 there is the key, which sets the date to the epoch
t.setUTCSeconds(utcSeconds);
var d = t.toUTCString();
var t = new Date(0); // The 0 there is the key, which sets the date to the epoch
t.setUTCSeconds(utcSeconds);
var d = t.toUTCString();
document.getElementById("utc").innerHTML = d;
utcSeconds = utcSeconds + 1;
}
Expand Down Expand Up @@ -107,9 +114,8 @@ function saveConf() {
if (document.getElementById("wmodeap").checked) {
wmode = "1";
datatosend.bssid = document.getElementById("wifibssid").value = 0;
}
else {
datatosend.bssid= document.getElementById("wifibssid").value;
} else {
datatosend.bssid = document.getElementById("wifibssid").value;
}
datatosend.ssid = ssid;
datatosend.wmode = wmode;
Expand All @@ -118,7 +124,7 @@ function saveConf() {
datatosend.rfidgain = document.getElementById("gain").value;
datatosend.rpin = document.getElementById("gpiorly").value;
datatosend.rtime = document.getElementById("delay").value;
datatosend.ntpserver =document.getElementById("ntpserver").value;
datatosend.ntpserver = document.getElementById("ntpserver").value;
datatosend.ntpinterval = document.getElementById("intervals").value;
datatosend.timezone = document.getElementById("DropDownTimezone").value;
datatosend.hostnm = document.getElementById("hostname").value;
Expand All @@ -132,7 +138,10 @@ function testRelay() {
}

function backupuser() {
websock.send("{\"command\":\"picclist\"}");
var commandtosend = {};
commandtosend.command = "userlist";
commandtosend.page = page;
websock.send(JSON.stringify(commandtosend));
}

function backupset() {
Expand Down Expand Up @@ -177,21 +186,29 @@ function restoreSet() {
}
}

function restore1by1(n, uid, user, acc, len) {
setTimeout(function() {
var datatosend = {};
datatosend.command = "userfile";
datatosend.uid = uid;
datatosend.user = user;
datatosend.acctype = acc;
websock.send(JSON.stringify(datatosend));
var elem = document.getElementById("dynamic");
var part = 100 / len;
elem.style.width = part * n + "%";
if (n === len) {
document.getElementById("dynamic").innerHTML = "Completed";
}
}, 200 * n);
function restore1by1(i, len, data) {
var part = 100 / len;
var uid, user, acc, valid;
document.getElementById("dynamic").style.width = part * (i + 1) + "%";
var datatosend = {};
uid = data[i].uid;
user = data[i].username;
acc = data[i].acctype;
valid = data[i].validuntil;
datatosend.command = "userfile";
datatosend.uid = uid;
datatosend.user = user;
datatosend.acctype = acc;
datatosend.validuntil = valid;
websock.send(JSON.stringify(datatosend));
slot++;
if (slot === len) {
document.getElementById("dynamic").className = "progress-bar progress-bar-success";
document.getElementById("dynamic").innerHTML = "Completed";
document.getElementById("dynamic").style.width = "100%";
completed = true;
document.getElementById("restoreclose").style.display = "block";
}
}

function restoreUser() {
Expand All @@ -209,17 +226,13 @@ function restoreUser() {
alert("Not a valid backup file");
return;
}
if (json.command === "picclist") {
if (json.type === "esp-rfid-userbackup") {
var x = confirm("File seems to be valid, do you wish to continue?");
if (x) {
document.getElementById("pbar").style.display = "block";
var len = json.piccs.length;
for (var i = 1; i <= len; i++) {
var uid = json.piccs[i - 1].slice(3);
var user = json.users[i - 1];
var acc = json.acctype[i - 1];
restore1by1(i, uid, user, acc, len);
}
recordstorestore = json.list.length;
userdata = json.list;
$("#restoremodal").modal();
restore1by1(slot, recordstorestore, userdata);
}
}
};
Expand All @@ -229,10 +242,10 @@ function restoreUser() {
}

function colorStatusbar(ref) {
var percentage = ref.style.width.slice(0,-1);
if (percentage > 50) ref.className = "progress-bar progress-bar-success";
else if (percentage > 25) ref.className = "progress-bar progress-bar-warning";
else ref.class="progress-bar progress-bar-danger";
var percentage = ref.style.width.slice(0, -1);
if (percentage > 50) ref.className = "progress-bar progress-bar-success";
else if (percentage > 25) ref.className = "progress-bar progress-bar-warning";
else ref.class = "progress-bar progress-bar-danger";
}

function refreshStats() {
Expand All @@ -241,8 +254,6 @@ function refreshStats() {
document.getElementById("refstat").innerHTML = "Refresh";
}



function listStats(obj) {
document.getElementById("chip").innerHTML = obj.chipid;
document.getElementById("cpu").innerHTML = obj.cpu + " Mhz";
Expand All @@ -253,8 +264,8 @@ function listStats(obj) {
document.getElementById("flash").style.width = (obj.availsize * 100) / 1044464 + "%";
colorStatusbar(document.getElementById("flash"));
document.getElementById("spiffs").innerHTML = obj.availspiffs + " Bytes";
document.getElementById("spiffs").style.width = (obj.availspiffs *100) / obj.spiffssize + "%";
colorStatusbar(document.getElementById("spiffs"));
document.getElementById("spiffs").style.width = (obj.availspiffs * 100) / obj.spiffssize + "%";
colorStatusbar(document.getElementById("spiffs"));
document.getElementById("ssidstat").innerHTML = obj.ssid;
document.getElementById("ip").innerHTML = obj.ip;
document.getElementById("gate").innerHTML = obj.gateway;
Expand All @@ -263,8 +274,19 @@ function listStats(obj) {
document.getElementById("mac").innerHTML = obj.mac;
}

function getnextpage() {
if (page < haspages) {
page = page + 1;
var commandtosend = {};
commandtosend.command = "userlist";
commandtosend.page = page;
websock.send(JSON.stringify(commandtosend));
}
}


function builduserdata(obj) {
userdata = userdata.concat(obj.list);
}

function start() {
websock = new WebSocket("ws:https://" + window.location.hostname + "/ws");
Expand All @@ -285,10 +307,29 @@ function start() {
listCONF(obj);
} else if (obj.command === "gettime") {
utcSeconds = obj.epoch;
} else if (obj.command === "picclist") {
piccBackup(obj);
} else if (obj.command === "userlist") {
haspages = obj.haspages;
builduserdata(obj);
} else if (obj.command === "status") {
listStats(obj);
} else if (obj.command === "result") {
if (obj.resultof === "userfile") {
if (!completed && obj.result === true) {
restore1by1(slot, recordstorestore, userdata);
}
}
else if (obj.resultof === "userlist") {
if (page < haspages && obj.result === true) {
getnextpage(page);
}
else if (page === haspages) {

file.type = "esp-rfid-userbackup";
file.version = "v0.4";
file.list = userdata;
piccBackup(file);
}
}
}
};
}
Loading

0 comments on commit 009ff67

Please sign in to comment.