ESP8266 and the Arduino IDE Part 10b: IOT Website. Enhancing the Website

 

Enhancing the Website

We are now ready to implement the final webpage.

The hard part is the html and javascript for the widgets. The code for the sketch is pretty much the same as in the previous example.

In the last post we ended with a working but very basic website. Now it’s time to make the webpage look nicer. Be aware that I am not a graphic artist and use the work nicer very loosely.

Continue reading

ESP8266 and the Arduino IDE Part 10a: IOT Website. Temperature and Humidity Monitor

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.

The goal of this guide is to create a environment monitor station that has a LCD display and also a webpage using an ESP8266, a DHT11, a LDR, javascript, and websockets.

As always I will do this is steps so that each part is clear.

Continue reading

Seeed Studio: W600 Module, Wio Lite W600, and Wio Lite MG126

Seeed_01_580

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.

Continue reading

Arduino Serial Part 4: ASCII data and using markers to separate data

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.

Continue reading

Arduino Serial Part 3: Getting started with serial communication

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.

Continue reading

Arduino Serial Part 2: Serial Data

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.

  • Type of communication? 1-way or 2-way
  • Type of data? Values or strings? Simple or complex?
  • How much data and how frequent? A couple of values every few seconds or a high rate continuous stream.
  • Is the data critical? Must you be sure you receive all the data or can you afford to lose some of it.

Continue reading

Arduino Serial Part 1

Updated 26.01.2019

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
   Hardware Serial/Serial
   SoftwareSerial
   AltSoftSerial
   NeoSWSerial
Using a software UART and usb adapter to talk to a PC
Buffer Size
Serial Commands

Continue reading

ESP8266 and the Arduino IDE Part 9: Websockets

In the previous post I looked at how webpages could be made to auto reload and auto update and by using Javascript how specific parts could be updated without the need to load the whole page.

Although the Javascript makes the webpage appear slicker the website still uses the client request method as before (the webpage still had to request new data). The Javascript just made the experience nicer. This post starts to look at true asynchronous or two-way communication where either side can send data without being asked for it. This is achieved by using websockets.

Continue reading

Arduino with RN4870/1

RN4870_01_800The 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

Continue reading

ESP8266 and the Arduino IDE Part 6: JavaScript and AJAX

ESP8266_6_01_360If you have followed the previous posts you will have a working, fairly robust, LED control. If you haven’t gone through the previous posts you can find links just below.

The webpage works well but the whole page reloads to update the button and controlling a single LED is not ground breaking. In this post I address the page reload by adding AJAX/JavaScript and in the next post I will add more controls.

Continue reading

ESP8266 and the Arduino IDE Part 5: adding wifiManager

ESP8266_Part_3_08A_1200

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.

Continue reading

Arduino, HM-10 and App Inventor 2: Adding a slider

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.

Arduino_HM-10_AI2_Adding_Slider_33 - updateApp_04

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.

Continue reading