IoT Dashboard Webserver with Gauges and Actuators

12v to 5v DC Converter

L12 Volts LED Strip (4 pack)

Solderless Breadboard Half Size

Through Hole Resistor, 22 kohm

Arduino IDE

1N4733 Zener Diode

Visual Studio 2015

Ultrasonic Sensor - HC-SR04 (Generic)

AC to DC Converter 12 Volt 10 Amp 120W DC Power Supply

Through Hole Resistor, 10 kohm

Flash Memory Card, SD Card

Temperature Sensor

Axial Fan, Brushless Motor

Assorted Jumper Wires

Mastech MS8217 Autorange Digital Multimeter

Arduino UNO

Arduino Ethernet Shield 2

4 Channel 5V Relay Module Board 

IR Infrared Module Sensor

<p >The story behind my project started when, oddly enough, one of my kitchen appliances failed and I had to change it's main motherboard. </p><p >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.</p><p >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. </p><p >Here is a picture of the completed and functional project board which then allws for various test and simulations:</p><figure><img src=https://projects.arduinocontent.cc/1bb7a04e-426a-457f-ba5c-29fdb74a38fc.png /><figcaption>Completed Project Board </figcaption></figure><p >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.</p><p ><span >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:  </span><a href="https://aiotconsulting.com/services/#iot">https://aiotconsulting.com/services/#iot</a></p><p >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. </p><div class="se-component se-video-container __se__float-none" contenteditable="false" style="width: 100%;"><figure style="width: 100%; height: 56.25%; padding-bottom: 56.25%; margin: 0px;"><iframe frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/pke3zS5o5CQ" data-proportion="true" data-percentage="100%,56.25%" data-size="100%,56.25%" data-align="none" style="width: 100%; height: 100%;" data-index="0" data-file-size="0" data-origin="100%,56.25%"></iframe><figcaption contenteditable="true"><div>Project Demo</div></figcaption></figure></div><p ></p>

Parts List

Wiring Diagram

Arduino IoT Dashboard Webpage

IoT Dashboard Webserver with Gauges and Actuators

Create a fully interactive dashboard with animated gauges to display sensor data and remotely control actuators with an Arduino Uno.