Web UI (Beta)
A WebUI is available. To install it run HASViolet websox install. A web SSL daemon listening on port 8000 is installed under systemd. HASviolet websox stop, HASviolet websox start, HASviolet websox remove can be used to stop/start/remove the server respectively.
When a new client connects the following occur in order;
- Client is served HASviolet_LOGIN.html made pretty with HASviolet_LOGIN.css
- Client is required to authenticate using ID/password in HASviolet.pwf file
- Once authenticated, the client is redirected to the Dashboard HASviolet_INDEX.html made pretty with HASviolet_INDEX.css.
- After the page is made pretty, HASviolet_INDEX.html tells the browser to load javascript from HASviolet.js
- Javascript instructs the client to the server and load HASviolet.json
The server runs two async processes;
- Tornado Web Framework providing web and websocket services
- LoRa Transceiver function (HASviolet)
When HASviolet sees a LoRa packet, it captures the message and sends a WebSocket client broadcast. When a TX request comes from the browser (client) via WebSockets, HASit.transmit function is called, transmits the LoRa packet and then trips a conditional inner-loop to restart recieving. We also use this trick if we want to change channels from the client which includes frequency, spreadfactor, coding, and bandwidth.
The framework uses SSLv3/TLS only. A untrusted self-signed certificate and server key are provided HASviolet.crt and HASviolet.key, respectively. But it is HIGHLY RECOMMENDED these be replaced with your own trusted credentials. Know until you have done that you will see (harmless) iostream errors from the websocket server like the following.
[SSL: SSLV3_ALERT_CERTIFICATE_UNKNOWN] sslv3 alert certificate unknown (_ssl.c:852)
HASviolet.pwf is a password file that stores ID and password pairs. An account management program is included called HASviolet_account.py to generate your own ID and password pairs into the password file. Passwords are stored as hashes to protect them. The password file is pre-populated with three ID:Password pairs provided as examples only and should be immediately replaced using the account program.
While initial login screen directed to HASviolet_LOGIN.htm` uses minimal glitz with HASviolet_LOGIN.css once logged into HASviolet_INDEX.html the corresponding HASviolet_INDEX.css makes the WebUI shine. The CSS file is commented into sections that reference the grid containers they serve. The Tuner-Container CSS is the most complex out of all the sections. To best grasp CSS use start with reviewing the Button and Controls CSS sections. They serve the radio-controls, cmd-controls, and msg-control containers.
Once logged in, Javascript code HASviolet_INDEX.jsis loaded and run by the browser. To see it in action on the browser, after loading the web page (in Chrome) right click on empty page space and select Inspect then click on the Console tab The code generates alot of console.log info here.
An annoying thing all browsers do is look for a favicon.ico file. The file is a small image icon that some sites host and is displayed in your browser tab with the title of the web page. I created one cause I go tired of seeing an error in the Browser inspect console while I was building the app. If you want to create your own FAVICON.ICO, easiest way is from the following website that generates them.