Enhancing the Website
We are now ready to implement the final webpage.
We are now ready to implement the final webpage.
Let’s start putting everything together.
In part 8 we set up a self refreshing webpage that displayed the temperature and humidity from a DHT11. In part 9 we took a first look at websockets. In part 10 we combine the two and add a few embellishments.
Websockets can be fast, very fast, and since the webpage will not be updating very often this is not one of the best examples of websockets, it does continue the gentle introduction started last time though.
For a while now I have been wanting to create IOT/web widgets such as graphs and gauges. I wanted widgets similar to the things Blynk offers but I didn’t want the back end server. I wanted every thing self contained on the ESP8266. This project is the start of that.
As always I will do this is steps so that each part is clear.
A short while ago I was contacted by Seeed Studios to see if I was interested in receiving some of their product for review. They would give me US $50 to spend in their shop on anything I wanted and in return I would review and write about the items I received. I have been offered stuff before and generally don’t accept. Many of the things offered are not really relevant to this site or the things I play with. I also get guilty because few things I did receive I never got time to actually write about. A few years ago I received some of the very first ESP32 development boards and they are still in the box they came in. Ironically I have bought many more ESP32 modules since and haven’t used those either (I’m still learning ESP8266). Any way, after some back and forth with Seeed by email I agreed and started looking at the items in the Seeed shop.
A very short post I made sometime ago has been more popular that it should have been. It wasn’t particularly detailed and it was in desperate need of an update. So here is the update, this time giving more details and adding mosfets.
In part 3 we sent and received single characters to control LEDs using a fairly simple technique. If all you need is to remotely turn a few things on and off then this method is probably the best. It is simple, easy to program, and reliable. Sometimes though single characters are not enough and we need to use more complex commands or we may want to send sensor data that comprises more than one character.
In this post I look at a few different techniques for sending complex data and commands; starting with functions that are built in the Arduino language and moving to our own functions that, IMHO, perform better and allow for better code.
In the last post I briefly talked about different data formats and how I recommend keeping things as simple as possible. With this is mind for a first project let’s create a simple blinking LED. We will have one Arduino controlling an LED on a second Arduino. Controls to turn the LED on or off will be sent via serial from the first Arduino to the second Arduino. This is as basic as it gets. Arduino Blink by remote control. The LED has only two states so simple control codes can be used and to start I am using 1 of on and 0 for off.
In these examples I am using Arduino Nanos but any kind of Arduino can be used and for this series I am using Arduino to Arduino communication. The techniques are exactly the same for any UART to UART device. For example, in Arduino to Arduino by Bluetooth I use exactly the same serial communication techniques wirelessly over Bluetooth.
In the previous post I went through the basics of using serial on an Arduino and ran through the different commands. In this post I want to talk about different types of serial data and some of the things you should consider before starting to create code. The type of communication you use or can use will depend largely on the project but there are things that can be considered before starting.
Here we look at using serial communication on the Arduino. Serial UART is one of the various ways an Arduino can communicate with other devices. This includes a host PC and using the Arduino serial monitor is communicating with the PC using serial UART.
Arduino Serial Monitor
End Of Line Characters
Formatting output using the tab command
How fast is serial
Different Arduino Serials
Using a software UART and usb adapter to talk to a PC
So far I have gone through controlling LEDs from a simple web app where all control is done via buttons in the app. This works well but you need to click a button in the app to make things happen, some kind of user action is required to update the webpage. Here we start to look at getting a webpage to update itself.
We have seen how to control one LED, here we add two more.
The RN4870/1 is a small (only 12mm wide) BLE module from Microchip. What makes this a little bit special (when compared to modules like the HM-10) are the advanced features that allow you to create your own services and characteristics. This opens up true BLE functionality. It has been available for a while now and I am surprised it is not more popular in the hobby area.
The RN4870 is very different to common hobbyist modules like the HM-10, AT-09, and BT05 and if this is all you have used you may need a refresher on BLE. Especially if you want to use your own services and characteristics.
This is a first look / getting started guide that I will add to as I get time.
Latest update: May 27, 2018
In the previous guides we connected the ESP8266 to a local network using hard coded credentials. It is fine for messing around with examples and when developing sketches but not very convenient or practicle for final projects.
What happens if you want to move the ESP8266 to another network or if you buy a new router? You need to change the sketch and re-upload. It would be better if we could pick the network to use at run time. This is exactly what WifiManager allows.
This post continues the Arduino, HM-10 and App Inventor 2 guide. A few people asked about adding a slider so here it is. Please beware; this is not a basic guide for using a slider in App Inventor 2. I am adding a slider to an existing app and have certain things (semi advanced) that I want to achieve.
In the previous guide we created a basic Android app to control 3 LEDs. The app was developed in such a way to make adapting it as easy as possible. So let’s see if that is true and add a slider to control the brightness of one of the LEDs. We start with extending the app and then update the Arduino sketch.
Using the same command method as before, we will create an ascii command and send it to the Arduino. The command will be in the form “[Snnn]”. Where S is used to denote slider and nnn is a value from 0 to 255, or more specifically “000” to “255”. The Arduino will read the command and set the LED brightness accordingly. Using ascii for this keeps things fairly simply but it is not the fastest way to do it. The slider value will be from 0 to 255, this is actually the same value range as an 8bit byte. Using the ascii command we need 6 characters (including the square brackets). To send the actual value only would require 1 character (2 with a label/marker character). If all you are using is a single slider then there is no reason to use ascii.