WiFi Messages

WiFi_Mess :Enhancing the WiFi_123 Program..

Click here for source code.

Summary: The WiFi_123 project reviewed 3 different designs for a basic WiFi server project that communicated directly with a browser (ie No router involved). This project will enhance the design to allow multiple messages and browser update requests.

Audience: Programmers who wish to implement add multiple messages and update requests to a WiFi server or access point. The project will utilise advanced programming features of the C++ language.

Keywords: WiFi, Server, Access Point, Client, Browser, asynchronous communication, HTML,

Hardware: The design uses an ESP8266 Mini Board.

Libraries Required: All libraries are part of the Arduino IDE or the Arduino ESP8266 Add-on

Introduction/Background

I have a model train layout. In the medium term I wish to set up a WiFi network that will allow me to display on a smartphone the position of trains in the layout and to use the smartphone to control points/turnouts. In the long term I might wish to provide autonomous control of the trains.

An earlier project, WiFi_123 developed code to program the ESP8266 as an Access Point or Server. The client/browser (PC/Tablet/Smartphone) communicated directly. There was no router involved. This project will enhance the design to allow multiple messages and browser update requests.

The Target Hardware.

The hardware used is an ESP8266 Mini board illustrated below:

The board shown is for an earlier project that receives serial data from Light Detecting Resistors and controls 4 sets of 3-aspect signals (RED-AMBER-GREEN) . Shown is the ESP8266 Mini board and two glue chips that transform serial information from the ESP8266 to drive the signals. This project is concerned with the ESP8266 Mini board only.

The Software Development Environment.

This project will use the ESP8266 in the Arduino IDE. To set up the ESP8266 see the Appendix.

Basic Working Program

To start create a new file called WiFi_Mess. This will use program 2 from the WiFi_123 project:**

//Program WiFi_Mess.ino #include "index.h" //HTML webpage contents
const char* ssid = "WiFi_Mess"; //ssid & passwordconst char* password = "12345678"; //password >= 8 char
#include <ESPAsyncWebServer.h>
// Create AsyncWebServer object on port 80AsyncWebServer server(80);void setup() {
WiFi.mode(WIFI_AP); //Only Access pointWiFi.softAP(ssid, password); server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){request->send(200, "text/html", WiFi_Mess); });// Start serverserver.begin();}void loop() {}

The HTML code was contained in a separate file index.h.

const char WiFi_Mess [] PROGMEM = R"(<!DOCTYPE html><HTML><HEAD><TITLE>WiFi_Mess_page</TITLE><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:,"></HEAD><BODY><CENTER><H2>WiFi Message</H2></CENTER></BODY></HTML>)";

Notes:

1. The label WiFi_123 has been changed to WiFi_Mess to match the name of this project.

2. The directive PROGMEM has been added to the character string WiFi_Mess. Normally the compiler will make an image of all variables to be loaded into RAM (dynamic of data memory) at run time. PROGRAM tells the compiler not to make an image of WiFi_Mess. The program will then use the copy in program memory or flash.

** The code can be created opening WiFi_123 and save as WiFi_Mess then replace WiFi_123 with WiFI_Mess (all). Also change send to send_P

Changing the HTML Appearance: Metadata

One part of this project will be concerned with changing the HTML appearance. Metadata is not directly visible to the end user but adds functionality to the web page. It is inserted between the <HEAD> and </HEAD> tags. The <TITLE></TITLE> tags give the message that shows up in the web browser’s title bar.

To allow browsing on a range of devices the meta tag

that will automatically adjust for different screen sizes and viewports is included..

To change the style the following metadata directive could be added:

<HEAD><TITLE>WiFi_Mess_page</TITLE> <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="data:,"><style>html {font-family: Arial;text-align: center;}body {max-width: 400px;margin:0px auto;}</style></HEAD>

With the text_align: center will centre the display so the tags <CENTER>...</CENTER> end become redundant.

Different Messages: Placeholders

Placeholders allow the HTML to be changed. A common example is physical parameters such as temperature where the value changes.

Long term I will use this project to display the location of a model train. The display might be "Train approaching" or "Train departing".

A placeholder is added to the body portion of the HTML code (the index.h) file.

<BODY><H2>WiFi Message</H2>%PLACEHOLDER%</BODY>

The placeholder is surrounded by the percentage symbols and in this example it is given the label PLACEHOLDER. For more complex examples PLACEHOLDER_1 etc might be used.

The actual program now needs to replace %PLACEHOLDER% with the desired message. This is done with the processor method.

The processor( ) method.

The processor method will have the placeholder label as a parameter and return the replacement string. That is String processor(const String& var).

The full code will be:

String processor(const String& var){if (var == "PLACEHOLDER"){return String("Message 1");}
//other testsreturn String("No Message");}

In the above code if there is no test for the given placeholder there is a default message.

To execute the above code it must be called from the request->send function.

request->send_P( );

A request from the client browser is handled with the server.on method.

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
{request->send_P(200, "text/html", WiFi_Mess, processor); });

The server.on method specifies or configures the route where server will be listening for incoming. In this example it is looking for the "/" hello route and type. The third argument is the handling function that will be executed when the request is received**.

The request method will respond with

i.The HTTP response code: 200 is the HTTP response code for “OK”.

ii.The content type: “text/html for a HTML message.

iii.The actual content. In this example the constant WiFi_Mess

iv. The replacement string (ie the method processor)

Note with the extra argument the send is replaced with send_P.

The resultant display is shown below where "Message 1" replaces the placeholder.^^

** To keep the syntax compact the handling function uses a C++ lambda function. ie [captures](params){body}

^^ The actual display is for the next section where the message is tagged.

Updating the display: Adding tags

As given the code will only execute once. In a practical situation it will be desirable to have the capability to update the display when required. This may be done using the href tag. The HTML code will be of the form:

<a href="update">Click here to update.</a>

After this message is seen a few times it becomes redundant. A possible technique is to place the tag around the message. That is:

<a href="update">%PLACEHOLDER%</a>

This results in the display shown above.

Clicking on Message 1 the browser will send the request 192.168.4.1/update.

There is now another option that must be implemented in the program code.

server.on("/update", HTTP_GET, [](AsyncWebServerRequest *request){request->send_P(200, "text/html", WiFi_Mess, processor); });server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){request->send_P(200, "text/html", WiFi_Mess, processor);});

Clicking on Message 1 the browser will send the request 192.168.4.1/update and in this example the display will be refreshed.**

** In a practical situation the display will be updated depending upon the processor function. For a temperature display the actual temperature will change. In the monitor a model train example the train will have moved so the re will be a different message.

Conclusion

This page has briefly introduced placeholders and tag messages.

Future pages will use these capabilities to send different messages and perform some control functions.

Appendix: Adding the ESP8266 to the Development Environment

This project will use the Arduino IDE with the ESP8266 Add-ons.

This will allow the Arduino IDE editor to be used but the results are then compiled for the ESP8266. The advantage is that applications can be developed for the ESP8266 without the developer having to learn more complex and/or different tools. The disadvantage is that some of the features/attributes of theESP8266 may be hidden in the simplification. It may also lead to the impression that the ESP8266 is similar to the ATMega828 in the Arduino when it is not.

If required Install the drivers: (I was using a WiFi Mini product code XC3802 from Jaycar) and found my PC recognized the XC3802 I was using so this step was not necessary)

If the library is not found the WiFi Mini uses a CH340G USB-Serial IC. The drivers for this can be downloaded from the IC manufacturer’s website: http://www.wch.cn/download/CH341SER_ZIP.html

To add board support for tjhe ESP8266 it is recommended to use Arduino IDE version 1.6.4 or later so that the Boards Manager can handle the installation.

1. To install board support for ESP8266, in File>Preferences>Additional Board Manager URLS add: http://arduino.esp8266.com/stable/package_esp8266com_index.json separating from existing entries with a comma.

2: Go to Tools>Boards>Boards Manager and type 'esp' in the search box

3. Install ESP8266 by ESP8266 Community. (Button on lower right) This is about 150MB download and can take a while.

4. Select the desired ESP6266 board. My board was identical to the 'WeMos D1 Mini Lite’

The Arduino IDE will now start creating, compiling and running programs with the ESP8266.

Page updated

Google Sites

Report abuse