Sensors / Actuators & IoT Dashboard with Arduino

In this detailed lecture, we will review all of the hardware required for the completion of this course. We will offer you some examples of where to obtain the parts as well as review each of them one-by-one. At the end of the review, we will show what the finished project will  looks like. (Note: The links associated to each part listed in the parts list is only an example, its not an endorsement of the supplier, therefore, AIoT Consulting cannot be responsible for any quality or fulfillment issues.)

In this lecture, we review the software needed to successfully complete our project. Specifically, we will go over a high-level overview of the Arduino IDE, then show you how to install it and confirm that it is operational by loading and compiling a simple program. We will also install a popular text editor. Make sure to check the “Resources Link” offered in this section which will direct you to the webpages to access these programs. Note that both software packages are free of charge.

Let's make sure we get things off to a great start by ensuring that all requirements are clear.

In this short lecture, we’ll focus on reviewing some of the general specifications of the Arduino Uno board as well as its pins and power requirements.

In this lecture, our focus will turn to the Ethernet Shield which we will be attaching to the Arduino Uno, providing both Network communication and storage capabilities to host our mini WebServer's webpage.

In this lecture, we’ll offer a basic explanation of what HTML is and what its used for. We’ll also review a simple html file as an example of what will eventually live on the SD card of our Arduino MiniWeb server. Finally, we’ll offer a simple explanation how HTML/CSS & JavaScript form what is called the 3 foundational code languages of Front End Web Development.

In this lecture, we’ll offer a basic explanation of what CSS is and what its used for. We’ll also continue to develop our html page by adding some of what we learn in this lecture into our html sample file. We will also cover the different ways to include CSS in your webpage, namely inline CSS, internal CSS and external CSS.

In this lecture, we’ll do a quick overview of what JavaScript is and what it’s used for. We’ll also include a practical example by adding some basic JavaScript into our html sample file.

In this lecture, we’ll do a quick overview of what C++ is as it’s the programming language of our Arduino’s IDE or Integrated Development Environment. We’ll look at some code which we’ll upload to our Arduino to help us identify what IP address is being assigned to our Ethernet Shield by the router it’s connected to. This will be useful information to have as we move forward in our project.

In this short lecture, we’ll explain in general terms what a web server is and what it does, at least at a very high level.

In this lecture, our focus will turn to enabling our Arduino Uno to act as a mini web server to directly send a webpage response to a browser which attempts to communicated with the Arduino when typing it's IP address.

In this lecture, we will build on the previous lecture by having the Arduino send a much more complex webpage, but rather then sending it directly using  the println() function, we will send it from our SD card.

In this lecture, we’ll build on the previous version of our index.htm file by adding all the necessary CSS code between its “style” tags. This additional styling will allow us to have much better looking and animated toggle switches.

In this lecture ,we’ll add the JavaScript to our HTML file so that the state of the toggle switches is updated on our dashboard when a user clicks on it as well as communicate its state to the microcontroller.

In the previous lecture we completed the newest version of our webpage to included toggle switches, so now we need to update our micro controller’s software so that it can properly interact and communicate with our webpage to both retrieve as well as update the state of our switches.

In the previous three lectures, we added our CSS toggle switches and updated the code on both our webpage as well as our micro controller, enabling them to interact with each other. In this lecture, we will physically add the 4-channel relay board and its power supply to our project board and install the required wiring.

In this last lecture of section 4, we’ll be adding our four actuators to the project board and powering them through our 4-channel relay.

In this lecture, we’ll give you a short history and introduction of what Canvas-Gauges are and how easily then can be configured to create a great looking Dashboard.

In this lecture, we’ll add the first gauge to our webpage Dashboard, a voltmeter gauge. We’ll first update our index.htm by adding the gauge in the appropriate location in the page, make a few changes to our JavaScript as well as add a new function which will update our gauge every second.

In this lecture, we’ll complete the last step in adding our first Dashboard gauge by building our voltage divider sensor and installing it on our project board.

In this lecture, we’ll be adding our next gauge, a temperature gauge, along with its sensor a TMP36 temperature sensor. As with the previous gauge we installed, we’ll start by first offering a brief overview of the sensor, add the new temperature canvas-gauge to our webpage, update our C++ sketch for the temperature values to be included in our XML file, and finally add and connect the TMP36 sensor to our project board.

In this lecture, we’ll be adding an IR sensor to read the speed of our fan and have the value displayed on an RPM gauge. As with the previous gauge we installed, we’ll start by first offering a brief overview of the sensor, add the new RPM canvas-gauge to our webpage, update our C++ sketch for the RPM values to be included in our XML file, and finally add and connect our IR sensor to our project board.

In this lecture, we’ll be adding the final sensors and gauges to our project board. We’ll add an ultrasonic sensor which will measure the distance of an object in front of the sensor, and have the value displayed, in centimeters, on our dashboard distance gauge. We’ll also add two auxiliary gauges to our dashboard which we’ll simply control using a trim potentiometer on our breadboard connected to analog pin A2 of our microcontroller.

In this bonus lecture, we’ll show you how to configure your router in order to allow web clients outside your local area network access your mini web server. In fact, once this configuration has been completed, you can control and monitor your sensors from literally anywhere in the world.