Track_Train_ESP_WiFi

Summary

Abstract: This project enhances the projects Track_Train_ESP_Class and WiFi_123 to develop a WiFi access point that reads the status of a model train and generates a HTML page that can display the train status on a Smartphone.

Possible Audience: Model railway enthusiasts who wish to track the position of a model train using in track sensors and WiFi

Keywords: C++ header files, C++ lambda function, WiFi, HTML displays, Placeholders, tagging, processor( ) method.

Required Hardware: The project will use the hardware of the project Track_Train_ESP_Class plus a Smartphone etc for monitoring the WiFi

Required Software: Track_Train_ESP_Class and WiFi_123 Libraries. The project will be developed using the Arduino IDE

----------------------------------------------

Introduction

This project is concerned with developing a WiFi access point that will read the status of a model train over 4 sensors and generating a HTML page to display the train status on a Smartphone. There will be 4 states corresponding to a train over a sensor, 3 additional states for a train between the sensors plus an 8th state when there are no trains present.

This project known as Track_Train_ESP_WiFI will merge/build on two previous projects: Track_Train_ESP_Class and WiFi_123

------------------------

Track_Train_ESP_Class

The project will inherit the Track_Train_ESP_Class that in turn inherits

1. LDR_Serial_Sensor_Class that read the status of 8 track sensors (This project will only use the results from 4)

2.Signals3_Serial_Class that will control 4 sets of 3 aspect signals (RED, AMBER, GREEN)

The basic application/test/client code to use Track_Train_ESP_Class is

#include <Track_Train_ESP_Class.h>
//ser_in, load, clk_in, ser_out, clk_out //how the pins are wiredTrack_Train_ESP_Class train_obj(D0,D5,D6,D2,D1); //a new instance/object
enum where_is_train train_loc; //
void setup() {train_obj.begin( ); // public method begin( )}
void loop() {train_loc = train_obj.monitor_train( ); //public method monitor_train( )}

This code will be used as the starting point. The steps are to insert the HTML-WiFi operations into the code and to give different messages depending upon the enum variable train_loc (ie state of train). The given states are:

enum where_is_train {waiting,coming0,approaching0,arriving0,station0,departing0,leaving0,going0,coming1,approaching1,arriving1,station1,departing1,leaving1,going1}**;

**The design allows for trains coming in either direction - hence coming0, coming1 etc

-----------------------------------------------

WiFi_123

The WiFi section of the project will build on program 2 from the WiFi_123 project:

//Program WiFi_123.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 is 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>)";

**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 or data memory) at run time. PROGRAM tells the compiler not to make an image of WiFi_Mess (basically all of the index.h). The program will then use the original in program memory or flash rather than a copy in RAM..

-----------------------------

Track_Train_ESP_Class.ino: First Pass

Combining the *.ino files obtain**:

//Track_Train_ESP_Class.ino#include <Track_Train_ESP_Class.h>
//ser_in, load, clk_in, ser_out, clk_outTrack_Train_ESP_Class train_obj(D0,D5,D6,D2,D1);
//Program WiFi_123.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);
enum where_is_train train_loc;
void setup() {train_obj.begin( );
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() {train_loc = train_obj.monitor_train(1); //parameter = 1 for testing without LDR//use jumper to touch I/P to ground to simulate train over sensor }

Compiling and running should give WiFi_Mess as an available network:

When requested enter the pass word 12345678.

In a browser select address 192.168.4.1++ The following message should be obtained

** The only change was to modify the quotes to brackets around the header file Track_Train_ESP_Class.h. That is #include <Track_Train_ESP_Class.h> the < > giving that the header file is now part of the Arduino Library.

++ 192.168.4.1 is the default address

-------------------------------

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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>Where's Thomas</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 directive will centre the display so the tags <CENTER>...</CENTER> then become redundant.

Once the program was verified the opportunity was taken to change the project to "Where's Thomas?" This required three changes:

const char* ssid = "WheresThomas";

<TITLE>Where's Thomas</TITLE>

<H2>Where's Thomas</H2>

---------------------

Different Messages: Placeholders

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

In the long term I will use this project to display the location of a model train or as implied in the previous section the location of Thomas the Tank Engine. The display might be "Thomas approaching" or "Thomas departing".

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

<BODY><H2>Where's Thomas</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 main 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("Nowhere to be seen!");}
//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 second parameter is the message to be sent, effectively the index.h file. 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 "Nowhere to be seen!" 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 a later section where the message is tagged. (Shown underlined)

----------------------

Multiple States

The project requirements are to display the status, That is one of 8 states that is defined by the variable train_loc. The code will be:

String processor(const String& var){if(var == "PLACEHOLDER"){if (train_loc == waiting) return String("Nowhere to be seen!");if (train_loc == coming0) return String("Coming from North");if (train_loc == coming1) return String("Coming from South");if (train_loc == approaching0) return String("Approaching from North");if (train_loc == approaching1) return String("Approaching from South");if (train_loc == arriving0) return String("Arriving from North");if (train_loc == arriving1) return String("Arriving from South");if (train_loc == station0) return String("In Station heading South.");if (train_loc == station1) return String("In Station heading North.");if (train_loc == departing0) return String("Departing to South");if (train_loc == departing1) return String("Departing to North");if (train_loc == leaving0) return String("Leaving to South");if (train_loc == leaving1) return String("Leaving to North");if (train_loc == going0) return String("Gone South");if (train_loc == going1) return String("Gone North");return String("Unknown state");}return String("Placeholder Error");}

----------------------------------------------

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 previous display.

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 the message "Nowhere to be Seen!" 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 application. For a temperature display the actual temperature will change. In the monitor a model train example the train will have moved so the response will be a different message.

---------------------------------

Conclusion

This design was tested on a small layout where exactly where Thomas the Tank Engine was could be readily seen so the WiFi only added a "whow!" factor. However ever if Thomas moved relatively slowly through the monitored section of track by the time one requested an update and the response was received and displayed Thomas had moved on. In practice a solution that updated the display everytime the train entered a new state was required. This is another project.

Alternatively the dispaly could be updated every 3 seconds via the meta instruction between the <HEAD> </HEAD> tags in the index,h file.

-----------------------

Page updated

Google Sites

Report abuse