This tutorial will take approximately 30-60 mins.
Why a web interface?
A web interface on the ESP32 allows values to be easily changed through a web interface. It means the player name and the team colours can be changed. Now there is a LED strip, the strip colour should change as the team colour changes.
Feature Cycle
We will continue to follow the feature cycle:
Before creating these new features, save your project as “LaserTag_C05_Web_Interface”.
Libraries, Variables and Setup() loop
- Add variables fro the webserver and the additional gamve variables.
- Call a new function called setupWebActions() in the Setup() subroutine
- Add the “debugInfo” variable to store comments that can be displayed by accessing a particular website
New Tab (File), functions and code
- Index_html is a variable that will hold the default web page.
- Processor allows wildcards to be used on the web page, which means variable values can be displayed
- The /debug page will serve debug information
- A function called “notFound” to return a 404 error
- A function called “processor” that will replace placeholders in the index_html file with variables.
Remove duplicate code
The code server.on(“/”, … is in the OTA tab and the WebActions tab. This means that only one of these lines of code will work when the web server is called. Remove the code from the OTA tab.
Header File – indexPage.h
Header files allow for the declaration of functions, macros, constants, and variables. In this case, they are used to consolidate all HTML documents into a single file for easier editing.
#ifndef means “if not defined” and functions similarly to an if statement, concluding with #endif. This means that if INDEXPAGE_H is not defined, the code will execute. This ensures that the variable is defined only once, preventing potential issues.
#define INDEXPAGE_H defines INDEXPAGE_H, and in conjunction with the previous if statement, ensures that the contents of the header file are included only once.
HTML files require a specific method of storage on the ESP32, as they tend to be larger than a standard variable. For this project, we will use the code const char index_html[] PROGMEM = R”rawliteral(…)rawliteral”, where the ellipsis represents the contents of the HTML file.
const char index_html[] declares a constant character array named index_html.
PROGMEM instructs the compiler to store the array in flash memory, which has a greater capacity than the default memory.
R”rawliteral(…)rawliteral” enables the inclusion of multi-line strings, which is particularly useful for formatting the HTML with spaces, tabs, and line breaks.
Test your code
The website should now look like:
When you change the Team ID, the lights on the gun should change colour to match the team colour.
The player number and team ID will change, but will not be saved to the gun. The gun will return to its original state. NodeMCU has the ability to save data so that it is retained between reboots and when upgrading your firmware.
Debug Log website
In the web browser add “/debug” to the ip address to access the debug log website
Christian Content
At present, we can change the player ID and Team ID of the taggers. However, when the taggers are reset or turned off, they forget their identities, the instructions we have given them, and revert to their original state.
This original state is not ideal, as the taggers become nearly indistinguishable clones of one another and do not function effectively.
It would be increasingly frustrating to have to constantly remind your device of its player ID and team ID.
The Bible addresses the issue of forgetfulness among people, and it is not seen as a positive trait.
Isaiah, speaking on behalf of God, said this to the people of Israel:
Isaiah 1:2-3 (HCSB)
Listen, heavens, and pay attention, earth, for the Lord has spoken:
“I have raised children and brought them up,
but they have rebelled against Me.
3 The ox knows its owner,
and the donkey its master’s feeding trough,
but Israel does not know;
My people do not understand.”
Being compared to a donkey and found lacking is certainly not flattering.
While God’s message to Israel over 2500 years ago may seem distant, the same criticism can apply to us today; we may have forgotten our master.
In the book of James, it is written:
James 1:22-25 (HCSB)
But be doers of the word and not hearers only, deceiving yourselves. 23 Because if anyone is a hearer of the word and not a doer, he is like a man looking at his own face c in a mirror. 24 For he looks at himself, goes away, and immediately forgets what kind of man he was. 25 But the one who looks intently into the perfect law of freedom and perseveres in it, and is not a forgetful hearer but one who does good works—this person will be blessed in what he does.
When we engage with the word, which refers to the Bible, we should not simply listen and allow it to go in one ear and out the other. There is an expectation that it will lead to lasting action.
You may attend church or read your Bible, but if it does not result in action, it holds no value. It is akin to looking in a mirror and instantly forgetting your own reflection.
When you read or hear the Bible, it should inspire action and obedience to the master.
So, remember who your master is and keep His words close to your heart.
I would like to conclude this devotion by reflecting on the following verses:
2 Peter 1: 3-11 (HCSB) His divine power has given us everything required for life and godliness through the knowledge of Him who called us by l His own glory and goodness. 4 By these He has given us very great and precious promises, so that through them you may share in the divine nature, escaping the corruption that is in the world because of evil desires. 5 For this very reason, make every effort to supplement your faith with goodness, goodness with knowledge, 6 knowledge with self-control, self-control with endurance, endurance with godliness, 7 godliness with brotherly affection, and brotherly affection with love. 8 For if these qualities are yours and are increasing, they will keep you from being useless or unfruitful in the knowledge of our Lord Jesus Christ. 9 The person who lacks these things is blind and shortsighted and has forgotten the cleansing from his past sins. 10 Therefore, brothers, make every effort to confirm your calling and election, because if you do these things you will never stumble. 11 For in this way, entry into the eternal kingdom of our Lord and Savior Jesus Christ will be richly supplied to you.