Web interfaces

Why

Some of the electronic devices I build require some sort of display and buttons for user interaction. This usually leads to a lot of work to design and build a front panel which ends up having a tiny character of graphic display. While in some cases it would be mandatory to have the interface on the device itself, this is not always the case. The simplest alternative is to have the device controlled through the serial port via console and growing more advanced means designing some sort of GUI for your pc. The next step is to have your device be a web server as well and provide control through a web page which in todays world means access is opened to anything that can browse the internet, the PC, tablet, phone. So far, my chioce of HW interface was Ethernet through the ENC28J60. Lately I decided to give something else a chance: routers.

Why routers

Simply because, depending on the goal, a router is able to provide with the following: a power supply with something left for the project, a case for the project, wireless and wired network connectivity, web server and interface, USB port, ample processing power and memory(vs a micro), huge list of bash commands, rather low power consumption etc. Many low cost models ca go below 20 euros and quite a lot of routers have been used for internet connectivity in projects. The down side is that they cannot replace the micro in the project due to limited amount of pins available and lack of ADC. It is worth noting that the price of a low cost version is comparable to purchasing Ethernet PHY, power supply and case, if the project can use those of the router. Alternatives of course exist, there are different tiny boards, my favorite would be the carambola 2 and there are new low power WiFi modules that could serve more power constrained devices like TI’s CC3300 but they are quite needy, requiring a lot around them.

My first experience was with an Asus 500gP which brought remote control to a few things around. Today I am looking at 4 other models. The TL-WR741N(D)  is available as low as 15 Euro, though it will probably be replaced soon. I have successfully used it as IP to serial bridge to replace a “normal” IP-serial bridge. But for more compact designs I would prefer the WR710N European version which I will use in this test. It’s a more compact version of the very popular 703N which has a separate supply and takes a while to be delivered. Have a look at some great pictures of the 710 here. The third option is DIR505 which has a great advantage of splitting in two giving you a nice and compact wireless board and a few extra GPIOs used for the switch. Now if only router manufacturers would do something nice for the hackers out there and bring out some of the unused GPIOs on a header….

A test

I decided to give it a try and found a candidate project: the heatsink tester. I am testing it with a TL-WR710N router, European version which comes with 32MB RAM and 8MB flash (3.5MB available after openwrt install). I took some shortcuts: I used a USB-serial adapter instead of the built in serial port to allow me to work with the console while developing the project, and try to modify the original heatsink tester as little as possible. This is not needed in a final design. Of course, the micro I used has USB port and could be loaded with usb-serial software, leaving the console free. If I am satisfied with the overall feeling I will buy a dedicated router for my heatsink tester and give it a proper „house”.

The web interface

I created a web page for the heatsink tester with the help of jqwidgets which are free for personal non commercial use. It took a while because I have no experience with javascript or html, but as I will be able to reuse parts of it for next projects it should go a lot faster next time.

The webpage has three parts: creating the widgets which includes all their designs, putting them on the page and the scripts for the data. The data flow is insured through two functions: one fetches the data from the router, the other sends data to it, both are called periodically.

Here’s a quick look. 

Router software

The router stands between the microcontroller and the web browsers. The microcontroller sends all parameters required on the web interface through the serial port. A script on the router saves the last entry in a file in RAM. When the web page is opened it calls a cgi script which fetches the data in that file. Any interaction on a web page calls another script which sends some data to the serial port, to the microcontroller. The „middleware” on the router is meant to be universal, independent of the project. This will allow me to create a single image for all routers and use that one for an instant functioning router. For the moment the „history” is implemented on the webpage, not the router.

Results

Response of the router seems to be very pleasant. The browsers show around 25ms response time, with both devices connected over WiFi. I tried opening the page from 3 devices and set the data refresh rate to 10/second and the router had no trouble handling it, there is plenty of power to spare. It is definitely faster than what you get from microcontroller based web servers, while the page is more complex.

While the design of the control panel and display may not be very artistic, it totally achieves the functionality I desired. I have displayed the important status parameters with gauges and text, which gives the user both precise and a fast display of status. A plot shows the evolution of parameters over time, providing a nice history.

Heatsink tester 2.0

My intention was to modify the original project as little as possible, jut to test the overhead of making such a web interface once the console is done.

I have changed the way data is send through the serial port to be comma separated, as this makes it very easy to parse. I have added some other status parameters, like if the heater is on, what is the maximum set power etc. I made minor improvements to the functionality as well: I added temperature limiting, if the temperature threshold is crossed, the available power will be limited. The loop is implemented in a simple way and is not very stable, but I don’t intend to spend time fixing it as it is meant only as a simple safety measure.

The second thing to add was a safety measure: periodically(every 5 seconds) the webpage pings the microcontroller. If no ping is received, after 12 seconds the microcontroller will stop the test and stop heating the heatsink. This means that the heater cannot remain on if there isn’t at least one web page open.

Here’s a quick measurement of a heatsink

Future plans

For the moment the plot is made by every webpage, so a device connecting later does not have access to the history. I will expand the script on the router to achieve this.

As it seems that one single router can handle lots of things, for some projects it might make sense to use a router as a gateway for multiple projects. Data can be sent to the router with simple radio modules, like RFM12 or NRF24L01. This will make each project smaller and possibly battery operated.

Disclaimer and thoughts

This is not meant to be a complete project, just a test of feasibility. So there are no files available or detailed instructions how to achieve this. I will post all details with the first complete project that will have a web interface. I have had troubles getting stable results over the serial port. After many tries I decided to re-install openwrt after which everything worked fine. The webserver on the router comes by default with a very low number of maximum connections which causes frustration and failure to load pages, slow interface etc. So I increased it.

I have been unsuccessful at making it visible as network devices through network discovery, it would work out great if its properties could point to its webpage. Drop me a comment if you know how to.

The power supply should be able to provide the full current of a single USB port, 500mA but I suspect the total available to be more like 0.8A. My sensitive power meter shows the router draws about 1.2W from the mains while connected to the WiFI, while also powering the microcontroller and the CP2102 USB-serial adapter. The router itself needs only 1W of power.