IoT Dashboard Webserver with Gauges and Actuators

The story behind my project started when, oddly enough, one of my kitchen appliances failed and I had to change it's main motherboard.

I noticed that many of the wires connecting to it where from sensors, heating elements and pumps. Upon doing a little research, I realized that this motherboard was actually a microcontroller which was orchestrating the automation of my appliance. This is when I had my first Aha moment and decided that I simply had to learn more about these microcontrollers which seemed to be installed into almost anything of importance I use daily.

So, I started searching the internet, learning about different projects (many from this site) and although I was learning things, I wanted to learn more then just how to blink a couple of LED's on a breadboard. This is when I had my second Aha moment and stumbled onto this project/course. Upon enrolling, the project intro stated that I would be able to use the Arduino Uno as a Webserver, which would serve a fully interactive webpage, showing sensor values on gauges and offer the possibility to manually control switches from anywhere in the world, or even have them automated based on sensor values. Sounds to good to be true right? Well after having completed the project all I can say is that I had no idea I could do so much with a $28 Arduino microcontroller. During this project, I learned not only a ton of things about the Arduino, but also about HTML, CSS, JavaScript and Ajax (or Asynchronous JavaScript and XML). I also learned the basics on how to use various Sensors (temp, ultrasonic, voltage dividers, InfraRed), an Ethernet Shield and a relay board as well as whole host of other subjects.

Here is a picture of the completed and functional project board which then allws for various test and simulations:

Once I completed the project, I decided to modify it so that I can now monitor the water level and my backyard pond and have a water pump either remove water or a solenoid valve add water to keep the level within certain limits. I can also view the sensor gauges on the dashboard for the water temperature as well as the water level and manually actuate the pumps or valve from my dashboard.

The gauges on the webpage are rendered using canvas-gauges created by a developer named Mykhailo Stadnyk of Ukraine. The CSS code that renders these gauges is hosted on the JsDelivra CDN and is governed by an MIT permissive open source software license. I’ve tried to include as much info on the project as I could, but if anyone wants to take a deeper dive, I highly recommend going to the following link for more details on doing this project: https://aiotconsulting.com/services/#iot

Here is a video from the project simulating when for example the water level would reach a certain level (by moving a hand in front of an ultrasonic sensor), the water pump starts on its own without having to click the toggle switch on the Dashboard.