Sensors / Actuators & IoT Dashboard with Arduino

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.