Robo-Tank Web App - Development

[Rob F]

Well I thought it was time to start a thread showing off what I've been working on. I actually started this over a year ago, my original plan was to have it working with my old controller. Overall I've only put a few solid months of work into it though and much of the time spent figuring out a structure I could work with. I started with python but dropped that as I have no previous experience and was having troubles figuring some things out, being a fairly complex system I thought in the end it was best to go with what I know.

You can view the system as two programs, one is the backend which runs all operations for the controller, the other is the frontend which is the webpage used to interact with the controller. 

The backend runs on an Apache server, MySQL is used for the database and PHP is used to update the database from the frontend. I'm using the wiringPi library for the Raspberry Pi pins but managing my own I2C.

https://www.apache.org/
https://www.mysql.com/
https://www.php.net/
http://wiringpi.com/

The frontend is JavaScript, JQuery and CSS. 

https://www.javascript.com/
https://jquery.com/
https://www.w3.org/Style/CSS/Overview.en.html

Running on a Raspberry Pi 3 the CPU runs at about 3-4% and memory is between 150-200mb so there's plenty of resources still available. MySQL is the biggest memory hog and Apache next. I really like MySQL so I think it's worth the extra memory.

The backend is a c++ program, everything is done within. For Arduino folks you can imagine the c++ program is an Arduino sketch and runs in a loop forever however because the Pi has 4 cores the program is running 3 threads, might add a 4th later, which you can think of as 3 Arduinos programs running at once. I went this route because reading DS18B20's causes a 750ms delay in the program every read and unlike an Arduino there's no getting around it, at least I couldn't. I like to read temp sensors every second so one thread handles these and other probes like pH. The 2nd thread is strictly used to communicate from frontend to backed and the 3rd is for the rest of the program.

I'm using a server socket to communicate with backend and frontend. When you press a button on the website it instantly sends the command to the c++ program so it can take action, everything is done in near real time. For some reason communicating to the frontend is more difficult that front to back so I still need to work on this but it works no problems, I just know I'm not doing things right here so that's for another day. For the last 6 months or so I've been running it full time and it's never crashed so feeling pretty good about it. With that said it's not 6 months straight, I think the longest period was about 3-4 weeks.

I haven't set a release date just yet but it shouldn't be much longer, there's a few things I want to add first.

Ok, now for the fun stuff and remember this is just version 1, so much more to come...

Dashboard

This is the dashboard for now, I have other ideas but started with widgets. Once I get the controller fully functioning I can spend more time on UI. As you can see things are sorted into widgets, you can drag and drop the location of the widgets and resize them. Location and size are saved to database so they remain as set. The system is setup for profiles later so you could set a dashboard for desktop and one for mobile etc... The gear in top right corner is for quick access to settings related to what's in widget and some you can sort.

In a later image you can see a side menu, currently it shifts widgets to the right but I'll be overlapping it as it's only a temporary menu to toggle widgets on/off. The top bar will be quick access buttons and system info.




DS18B20 Temperature Sensors

So I had fun with these and spent a lot of time. My goal with the program is to be the easiest to use (yet packed with features) so I've added an auto detect system. If you plug in a DS18B20 sensor the system will see a new sensor and check if it's already in the database, if it is the sensor will magically appear in the widget within a few seconds of being plugged in and it will have the last known min/max and custom name. If the sensor isn't in the database it will automatically be added and the backend will immediately start logging chart data on the 15 minute interval. If you have the webpage open when you add the new sensor a popup will appear in a few seconds like image below. It's asking for a custom name. After you enter that the sensor will appear in the widget. If you don't have the webpage open when you plug in a new sensor the popup will appear when you open the webpage. If you plugged in say 3 sensors without the webpage open it will cycle through the 3 sensors for a custom name. Obviously that's not recommended unless you know the sensor ID it display but odds of that are very low, I think I memorized mine by now. :) So in the end you wouldn't know what sensor is what. 

When you unplug a sensor it will simply disappear from the widget and the backend will stop writing chart data. Plug back in and it continues like it was never missing. 

On the gauge the min/max is show, that's updated every second with the new incoming temperature and the gauge slowly moves up/down as temperature changes. You can click on the min or max temperature and it'll popup a box like below to verify a reset of the min or max. If you increase the widget size the gauges get bigger, you can see image below of example. 

Note: Background should be greyed out like next image and will be.




If you no longer use a sensor and don't need the chart data you can go in the settings and delete a sensor from the database which will wipe out all data. Eventually you'll also be able to remove select data out of charts easily. 

The table below is a JQuery library, DataTables. I used it to get started quick and it has some nice features. You can sort by clicking any column header and the search is instant with the table updating. 

https://datatables.net/




Light Modes

You can run up to 50 light modes, can be more though. When you add a mode it appears in the widget list where you can set the slider values. The sliders automatically show based on number of ports you have assigned. As you move the slider the light will respond instantly, once you release it the value will be saved. You can also type in a value from 0 - 4095, later will be an option to show 0-100% instead. When you hover an icon a text appears telling you what the button is.

The checkmarks are obvious, they indicate the days the mode is set for, the checkbox with an orange icon is the next schedule and the green checkbox is the current light mode. 

The green toggle switch allows you to disable the light mode. If you disable "morn" based on image below the orange checkbox will move to "test" mode as that's now the next schedule.

The pencil is to edit the light mode, it pops up the same screen used to add the mode.

The X deletes the light mode.

The up and down icons move the position of the light mode. Note the backend doesn't care what order you put these in, it takes all modes and sorts them based on time / day so you can have day before morn and it wouldn't make a difference. It's only so you can view order you prefer.

You expand a light mode by clicking on it, the sliders will appear for that mode and the lights will automatically switch to those settings. When you toggle the mode closed the light will resume back to the current light mode settings. 

There are no temporary modes yet but technically you can create a light mode with no days selected so it never runs and when you want to view just toggle open and lights will change. When finished close mode and it'll go back to schedule.

The current mode is just something I was getting carried away with, in the end I want visual effects for everything, the beams on the tank will grow/shrink based on light and tank grows based on channels assigned in system. I would love to have an automated tank running with the lights filling it. Also have plans to have a sun moving across the sky, user can switch view they like. So much fun to be had but I need to stay focused. :)

Later I plan for more flexibility with the scheduling but this is a good start.








pH and other I2C devices

Like the temperature sensors the I2C also has an auto detect system however it only runs every 10 seconds. Currently I have it working for pH circuits and PCA9685 chips. When a new device is detect on the BUS a popup will appear showing the address and asking what you plugged in. If you select pH it simply asks for a custom name like the temp sensors. Everything else about the system is the same.

If you select the PCA9685 driver it'll ask for a custom name and then allow you to define what the ports will be, 2nd image under construction but works. For function you can select AC Outlet, DC Port, Dosing Pump or Light. When done the widgets will update based on what you do there. If you set 2 pins to "Light" for example two more light sliders would appear on the image above. There's another screen where you can manage all ports and change assignments but overtime it'll all be Q&A type wizards.




If you mouser hover the small icon in table it will enlarge so you can actually see it. ;) The screen to select icon is below.




Charting and Logs

The charts are being handled by dygraphs, I considered writing my own but hard to match what this does. It's disappointing it's not setup to read from MySQL, instead it uses .csv files so later I'll be working on a solution there. Currently sensor data is being written to both a csv and the database every 15 minutes. I filled up a CSV file with 3 years of data and it only took a few seconds to load so it performs well. 

At the top of widget all sensors found in the database will appear as a checkbox and the user can choose which to view in the widget. Under the chart is a scroll bar, some is shaded, only the non-shaded is being viewed. I have it set to 7 days but a user will be able to change that. You can increase the view by moving one slider or you can move scroller across the whole data set in a 7 days view or whatever you choose. And of course when you hover over line in graph it shows value and timestamp.

One nice feature is you can overlay sensor data on a single chart to compare data sets however a single CSV file needs to be used so it's not useable at this point as there would be a 100 csv file combinations needed. The plan is later I will make a custom chart creator, this is why data is being saved to database as well. A user will be able to choose any chart sets they want to view, a start timeline and the option to keep chart updating or one time view. Then in the background a CSV file will be created that dygraphs accepts and if the user selects to update the system will then continue to save data to the csv file so it stays updated. On the top of the chart will be checkboxes for all data sets you assigned to chart so you can toggle on/off as you like. I've already tested most of this but still to many other things to do.

There are no logs yet but everything will be logged. Using DataTables it won't be too hard to get added and the logs can be sorted and searched efficiently. Later I will add ability to change chart colors etc... 

https://dygraphs.com/




AC Outlets / DC Ports

These will basically have the same feature set, currently you can only turn on/off manually so not much use but schedules and water sensors are a coming. 

I'm using the same outlet icons I used for the old controller, an Aussie friend, Iain, made the images for me so I'm very thankful for them, there are 60 in total. As you can see the corners are black as that was needed for the old controller so yeah I have a lot of images to reassemble. :( Thankfully they can be transparent now.




Manual Port Management

This table shows all available pins or ports you have to work with. With the Robo-Tank controller you would have 39 available. You can assign them as the following to start. Not all ports will be available for all types but only what can be assigned will appear so there's no confusion. At the top of the picture is a dropdown box saying "Raspberry Pi" so only Pi pins are being shown, I'm changing that so all pins are in same table. With the search if you type "Pi" you'll only get Pi pins. This is only temporary anyways, at least it won't be needed later.

• AC Outlet
  
• DC Port
  
• pH Probe
  
• DHT22 Temperature / Humidity
  
• DS18B20 Temperature
  
• Non-Contact Sensor
  
• Optical Sensor
  
• Float Switch
  
• Other Water Sensor
  
• Flow Meter
  
• Light
  
• Dosing Pump
  

When you press "edit" button you get this screen.





Step by Step Wizards

The UI will be full of wizards and illustrations guiding users through different tasks. You can see an example, I put this together for visual purposes a few months ago, "Add a probe" will be gone as that's automated now. But this is the idea.

Illustrations will be controller and different sensors / equipment showing users how to connect, like they say a picture is worth a 1000's words, for me 5000's words. I'm hoping this can eliminate user manuals as those are no fun for anyone, you get lost in pages of irrelevant info and I always have to update.




First Run Setup Wizard

To keep things simple I added a setup wizard that runs once. This will go through all the basic setup parameters required in a friendly manner. I still have illustrations to add but this is the current guide. As you can see in the first image the dashboard is hidden and only the popup visible. When setup is finished it will appear.

















Here it will scan for I2C devices and popup the wizard shown earlier. There will be a question before this one I forgot, it will ask if you use Robo-Tank controller (highly recommend) :) or other. If Robo-Tank is selected the pH and PCA9685 will be added behind the scenes, it'll only scan for extras that might be plugged in.







That's it for now, here's a few more images of different dashboard layouts.