Table of Contents

Background

The iSpindel has a number of ways to transmit it’s data out. Service Types are built into the software to allow data to be retrieved. The most common one is HTTP (or HTTPS), used to send data to platforms like Brewfather, BrewSpy, Brewer's Friend, or Monitor.Beer.

1. How Sockets Actually Work - From Your Browser to the Backend - by ByteMonk.
2. Sockets and Client/Server Communication - by Jeff Chase (Duke University)
3. TCP/IP Client Sockets - by Sujith’s Library
4. Put Your iSpindel Into "Config Mode" - by Assetsolution.co.uk
5. Installing ESP8266 Boards - by Welcome to ESP8266 Arduino Core's documentation
6. ESP8266 ESP-12E NodeMCU - Hello world and blink function tests - by Jamesits
7. A NTP Request on the ESP8266 including Daylight Saving Time - by Werner Rothschopf
8. DateTime to string - by Arduino Stackexchange
9. ConfigTime(MY_TZ, MY_NTP_SERVER); fails with WiFi.config(local_IP, gateway, subnet) - by AI Overview
10. WifiManager a popular Arduino library for the ESP8266. - Google Search
11. wifimanager for esp8266 what is it? - Google Search
12. WiFiManager with ESP8266 - Autoconnect - Random Nerd Tutorials
13. LittleFS.h what is it used for? - Google Search
14. ESP8266 NodeMCU: Write Data to a File (LittleFS) - Random Nerd Tutorials
15. Double Reset Detector - Stephen Denne
16. Interface Multiple DS18B20s with ESP32 & Display Values Using Web Server - Shreepad Prabhu
17. ESP8266 (ajax) update part of web page without refreshing - Manoj R Thakur
18. Esp8266 stream data to xml page - Google Search
19. What is JavaScript - OVHcloud

When the iSpindel is set to TCP it becomes a Socket Server sending out data packages at regular update intervals of 900 seconds (15 mins).

In this series of projects I will show how to be program a NodeMCU ESP8266 Development Board as a Socket Client to receive, process and display the Tilt, Temperature, Battery and Gravity data.

Then I’ll show how to stream the live data to a web page over your home network.

In the next project (Rushtp #7.2) project will show how to chart the data in Excel on any PC or Laptop on your local network.

Finally I’ll connect a 2.4" LCD Screen and show how to box the components in a cheap enclosure.

Table of Contents:

Table of Contents

1. iSpindel - WiFi Hydrometer - Calibrated, Built & Balanced
2. ESP8266 - NodeMCU ESP8266 ESP-12F I2C Development Board
3. USB Cable - Micro USB lead with data sync
4. Arduino IDE - Download

Table of Contents

Connecting to your Local Network and set the iSpindel Service Type to TCP:

Access the iSpindel Config Mode:

1. Power On: Ensure the iSpindel is switched on.
2. Trigger Config Mode: short out the two reset pins on the pcb board 3–4 times rapidly.
3. Confirm Activation: The LED on the board will start blinking continuously (roughly 1-second intervals), indicating the configuration portal is active.
4. Connect via Wi-Fi: On your smartphone or computer, search for available Wi-Fi networks and connect to the network named “iSpindel_5D83DA” or someting like that.
5. Open Configuration Page: Once connected, open a web browser and enter the address: http://192.168.4.1. If the browser does not automatically load the page, manual enter 192.168.4.1.



Important Notes Timeout: The config mode only stays active for about 5 minutes to save battery. LED Indicator: A solid blink sequence means it is in configuration mode; if it is just doing a single quick flash, it is in normal operation mode. Access Point: The config portal is not active during normal operation, as the device is designed to sleep to preserve battery life. Wifi Frequency: The iSpindel requires a 2.4GHz network, it will not connect to 5GHz.



6. Select your local network for the SSID and set the password
7. Name your iSpindel. I have called mine “iSpindel”
8. For our project testing set the Update interval to “3” seconds
9. Select "TCP" in Service Type
10. For the Token/ API key I put “Red”. You can put any short single word
11. Server Address put “192.168.1.97”, This is the IP address we will be listening to with a NodeMCU ESP8266 Development Board programmed as a TCP Socket Client to receive and process the Tilt, Temperature, Battery and Gravity data, etc.
12. in Server Port put “9503”.

Data Format: The iSpindel will send a JSON string directly to the defined IP address over a TCP socket.

Table of Contents

Download the latest Arduino IDE if required, Connect the ESP8266 NodeMCU Development Board with a Micro USB lead with data sync.

Installing ESP8266 Boards https://arduino-esp8266.readthedocs.io/en/latest/installing.html

Now open a new sketch in the Arduino IDE (File, New Sketch…) then save it as “Rushtp_7_1_Step2_Testing_It_Works” in your project directory. Note: the “_” linking all the text. The IDE will create a new folder with that name and add a file called Rushtp_7_1_Step2_Testing_It_Works.ino.

To test everything works I will be using this ESP8266 ESP-12E NodeMCU - Hello world and blink function tests - by Jamesits.
Note: I have added a header to acknowledge where it came from.

Copy and paste the following script to replace the default script. Then save the file again.

 
/*
  Board: NodeMCU 1.0 (ESP-12E Module)
  Ref: https://gist.github.com/Jamesits/a3c128d050e6d3a16e9a
*/
 
// See the comment for flashing instruction.
#include <ESP8266WiFi.h>
 
#define ONBOARD_LED 16
#define ESP8266_LED 2
 
// ADC_MODE(ADC_VCC); will result in compile error. use this instead.
int __get_adc_mode(void) { return (int) (ADC_VCC); }
 
void setup() 
{
  pinMode(ONBOARD_LED, OUTPUT);
  pinMode(ESP8266_LED, OUTPUT);
  Serial.begin(115200);
 
  // Print Wi-Fi Information
  WiFi.printDiag(Serial);
 
  // Print VCC intervalage
  Serial.print("Current VCC: ");
  Serial.println(ESP.getVcc());
}
 
void loop() 
{
  digitalWrite(ONBOARD_LED, HIGH);
  digitalWrite(ESP8266_LED, HIGH);
  Serial.println("LED on");
  delay(500);
  digitalWrite(ONBOARD_LED, LOW);
  digitalWrite(ESP8266_LED, LOW);
  Serial.println("LED off");
  delay(500);
}
 
 

Set the baud rate in the top right of the Serial Monitor to figue set in the script by Serial.begin(115200);.

Use  ✔  Verify or  ➔ Upload to check for errors in the script. If any are found the Serial Monitor will indicate what is wrong.

In the example below I left the “;” off the end of row 18.

Note: The Arduino IDE Serial Monitor does not wrap the text.

If there are no errors use  ➔ Upload and the Serial Monitor should display something like this…

Now select the Serial Monitor to display the ESP8266 output (LED on / LED off, etc…) along with the two blinking blue LEDs.

If you press the Reset (RST) button on the ESP8266 a line of gobbledygook will be desplayed along with other information lines before the output (LED on / LED off, etc…).

Once you are happy the ESP8266 NodeMCU Development Board is working go on to the next step.

Table of Contents

TCP/IP Client Sockets

The internet operates on a client-server model, where remote computers (servers) running listening software wait for incoming requests initiated by other devices (clients) on the network. When a listening server receives a request it establishes the connection and delivers data to the client. Then closes the connection.

To set up an ESP8266 Client to request connection to the iSpindel we have to repeatedly request for data using the iSpindel TCP Server address and Port to catch data made available at the update intervals.

For our test we have set the iSpindel Update Interval to “3” seconds

ESP8266 NodeMCU code to listen on a specific IP address 192.168.1.97 on Port 9503

Ref: Make an ESP8266 listen for incoming network traffic on a specific IP and port - by Google AI

Global Initialisation

- Include the ESP8266WiFi.h library

- Replace the network credentials with your ones

- Set up a static IP address (a typical Static IP Configuration for home networks):

Static IP Address: 192.168.1.97

Default Gateway: 192.168.1.1 (Router's IP to route traffic between local devices)

Subnet Mask: 255.255.255.0 (Standard subnet allows up to 254 connection devices)

DNS 8.8.8.8 (For converting domain names into IP addresses)

- Create a server object for Port 9503

setup()

- Start a Serial connection

- Apply static IP configuration 192.168.1.97, 192.168.1.1, 255.255.255.0

- Connect and set up a server TCP to listen for incoming connections (. . . …)

- Begin the connect to your local WiFi (with your ssid, password)

- Start the server and listen to Port 9503

loop() (Repeat this over and over)

- Check for connected clients to see if the iSpindel is sending out data

- If it is available open the connection and get the data string

- Print the data string to the Serial Monitor

- I have also incorporated the blink LED code on pin 2 to indicate when the connected/disconnected is made.

- Close the connection

Open a new sketch in the Arduino IDE (File, New Sketch…) then save it as “Rushtp_7_1_Step3_Listening_For_The_iSpindel_Data” in your project directory. Note: the “_” linking all the text. The IDE will create a new folder with that name and add a file called Rushtp_7_1_Step3_Listening_For_The_iSpindel_Data.ino.

Copy and paste the following script to replace the default script. Then save the file again.

Change the settings in const char* ssid = "vodafoneCF3EC4"; and const char* password = "***************"; to match your local Wifi Network.

 
/*
  Board: NodeMCU 1.0 (ESP-12E Module)
 
  Code for an ESP8266 NodeMCU to listen on a specific IP address (192.168.1.97) and port (9503) and
  configure it with a static IP address and set up a server TCP to listen for incoming connections. 
 
  Ref: Google search “ESP8266 listen to ip address 192, 168, 1, 97:9503”
 
  Blink ESP8266_LED pin 2 On/Off when connected/disconnected
 
  192.168.1.97
  9503
*/
 
#include <ESP8266WiFi.h>
 
// Replace with your network credentials
const char* ssid = "vodafoneCF3EC4";
const char* password = "***************";
 
// Static IP configuration
IPAddress local_IP(192, 168, 1, 97);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress dns(8, 8, 8, 8);
 
// Create a server object on port 9503
WiFiServer server(9503);

 
//----------------------------------------------------------------------------//
void setup() 
{
  pinMode(2, OUTPUT); //ESP8266_LED
  digitalWrite(2, HIGH);   //ESP8266_LED Off
  
  Serial.begin(115200);
 
  // Apply static IP configuration
  if (!WiFi.config(local_IP, gateway, subnet, dns)) 
  {
    Serial.println("Static IP configuration failed!");
  }
 
  // Connect to WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(1000);
    Serial.print(".");
  }
 
  // Start the server to listen on port 9503
  server.begin();
  Serial.println("\nServer started at 192.168.1.97:9503");
  Serial.println("---------------------------------------------------------------------");
  Serial.println();
 
}
 
 
 
//----------------------------------------------------------------------------//
void loop() 
{
  // Check for connected clients
  WiFiClient client = server.available();
  if (client) 
  {
    while (client.connected()) 
    {
      if (client.available()) 
      {
        digitalWrite(2, LOW);  //ESP8266_LED On
        //readStringUntil('\n') used instead of '\r' to stop blank lines in the serial monitor
        String request = client.readStringUntil('\n'); 
          Serial.println(request);
      }
    }
    client.stop();
    digitalWrite(2, HIGH);   //ESP8266_LED Off
    //Serial.println("Disconnected");
  }
}
 
 

Assuming your iSindel set to stream it’s output on TCP 192.168.1.97:9503 every 3 seconds switch it on.

Then, if there are no errors, use  ➔ Upload and the Serial Monitor should display something like this…

Note: The Arduino IDE Serial Monitor does not wrap the text.

Well, now we can see the iSpindel data stream. It is in JSON format. So in the next step we will extract the fields we want to use.

Table of Contents

In Step 3 we proved we could get a data stream from the iSpindel and sent to TCP at address 192.168.1.97:9503. It is in a Json format - a collection of name/value pairs enclosed in curly braces { }…

{"name":"iSpindel","ID":6128618,"token":"Red","angle":88.44329834,"temperature":19.875,"temp_units":"C","battery":4.098018646,"gravity":32.78403091,"interval":3,"RSSI":-47}

Our next Step is to use AeduinoJson deserializeJson() to extract some of the name/value pairs and assign them to variables so we can print the values to the Serial Monitor e.g. Serial.println("angle = " + String(angle));.

Open a new sketch in the Arduino IDE (File, New Sketch…) then save it as “Rushtp_7_1_Step4_Extracting_Data_Values_With_JSON” in your project directory. Note: the “_” linking all the text It has to be one long string of text, no spaces.. The IDE will create a new folder with that name and add a file called Rushtp_7_1_Step4_Extracting_Data_Values_With_JSON.ino.

Copy and paste the following script to replace the default script. Then save the file again.

Change the settings in const char* ssid = "vodafoneCF3EC4"; and const char* password = "***************"; to match your local Wifi Network.

In The Arduino IDE Library Manager search for ArduinoJson.h and look for “Arduinojson by Benoit Blanchon”. Then install or update it.

Key feature…

 
 /*
   Board: NodeMCU 0.9 (ESP-12 Module)
Code for an ESP8266 NodeMCU to listen on a specific IP address (192.168.1.97) and port (9503) and
   configure it with a static IP address and set up a server TCP to listen for incoming connections.
 
  Using Arduino JSON 7 deserializeJson to extract selected fields from the iSpindel output;
  Ref: Google search “ArduinoJSON 7 Examples”
        Ref: https://arduinojson.org/v7/
 
Define and Serial.println) IDE Filename
Ref: https://forum.arduino.cc/t/send-sketch-filename-to-serial-monitor/1174427
 
Blink ESP8266_LED pin 2 On/Off when connected/disconnected
 
   "192.168.1.97";
   9503;
*/ 
 
  
#include <ESP8266WiFi.h>
#include <ArduinoJson.h> 
 
  
// Replace with your network credentials
const char* ssid = "vodafoneCF3EC4";
const char* password = "**************";
 
// Static IP configuration
IPAddress local_IP(192, 168, 1, 97);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress dns(8, 8, 8, 8);
 
// Create a server object on port 9503
WiFiServer server(9503);
 
//define IDE sketch filename
#define __FILENAME__ (strrchr(__FILE__, '\\') ? strrchr(__FILE__, '\\') + 1 : __FILE__) 
 

  
//----------------------------------------------------------------------------//
void setup() 
{
  pinMode(2, OUTPUT); //ESP8266_LED
  digitalWrite(2, HIGH);   //ESP8266_LED Off
 
  Serial.begin(115200);
 
   // Apply static IP configuration
  if (!WiFi.config(local_IP, gateway, subnet, dns)) 
  {
    Serial.println("Static IP configuration failed!");
  }
 
   // Connect to WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(1000);
    Serial.print(".");
  }
 
   // Start the server to listen on port 9503
  server.begin();
  Serial.println("\nServer started at 192.168.1.97:9503");
 
  //IDE sketch filename
  Serial.println(__FILENAME__);
  Serial.println("---------------------------------");
  Serial.println();
 
} 
 
  
//----------------------------------------------------------------------------//
void loop() 
{
  // Create a JsonDocument, it is initially empty
  JsonDocument doc;
 
   // Check for connected clients
  WiFiClient client = server.available();
  if (client) 
  {
    while (client.connected()) 
    {
      if (client.available()) 
      {
        digitalWrite(2, LOW);  //ESP8266_LED On
         //readStringUntil('\n') used instead of '\r' to stop blank lines in the serial monitor
        String request = client.readStringUntil('\n'); 
          Serial.println(request);
              
        // Deserialize the JSON document
        DeserializationError error = deserializeJson(doc, request);
            
          // Test if parsing succeeds.
          if (error)
          {
            //Serial.print(F("deserializeJson() failed: "));
            //Serial.println(error.f_str());
            return;
          }
 
          // Fetch values
          // {"name":"iSpindel","ID":6128618,"token":"Red","angle":88.49937439,
          //  "temperature":22.8125,"temp_units":"C","battery":3.910323143,
          //  "gravity":32.81218719,"interval":3,"RSSI":-45}
          
          //Data: Angle Temp°C  Battery Interval Gravity Interval Secs RSSI  Name  PSI
          double angle   = doc["angle"];
          String temp    = doc["temperature"];
          String units   = doc["temp_units"];
          double battery = doc["battery"];
          double interval   = doc["interval"];
          double gravity = doc["gravity"];
          int rssi       = doc["RSSI"];
          String name    = doc["name"]; 
          
          // Print values.
          Serial.println("angle   = " + String(angle));
          Serial.println("temp    = " + temp + units);
          Serial.println("battery = " + String(battery));
          Serial.println("interval   = " + String(interval));
          Serial.println("gravity = " + String(gravity));
          Serial.println("rssi    = " + String(rssi));
          Serial.println("name    = " + name);
          Serial.println();
      }
    }
    client.stop();
    doc.clear();  //Empties the Json document and clears the memory making it ready for reuse.
    digitalWrite(2, HIGH);   //ESP8266_LED Off
     //Serial.println("Disconnected");
  }
} 
 
  
 
   
 

Assuming your iSindel set to stream it’s output on TCP 192.168.1.97:9503 every 3 seconds switch it on.

Then, if there are no errors, use  ➔ Upload and the Serial Monitor should display something like this…

Note: The Arduino IDE Serial Monitor does not wrap the text.

Now that we have the iSpindel fields and values in Step 5 we will add a variable to hold the date and time the iSpindel data stream was received Daylight Saving Time (dd-mm-yyyy hh:mm:ss).

Table of Contents

Let's create a String variable dateTime to hold the date and time the iSpindel data stream was received GMT/BST (dd-mm-yyyy hh:mm:ss). It will be used in a later project to chart the ispindel output in an MS Excel chart.

DST - I am in the UK so use Summer time / Winter time. If you want to use other time zones Search to the appropriate coding for Network Time Protocol (NTP).

Open a new sketch in the Arduino IDE (File, New Sketch…) then save it as “Rushtp_7_1_Step5_Adding_A_Timestamp” in your project directory. Note: the “_” linking all the text It has to be one long string of text, no spaces.. The IDE will create a new folder with that name and add a file called Rushtp_7_1_Step5_Adding_A_Timestamp.ino.

Copy and paste the following script to replace the default script. Then save the file again.

Change the settings in const char* ssid = "vodafoneCF3EC4"; and const char* password = "***************"; to match your local Wifi Network.

Key feature…

 
/*
Board: NodeMCU 0.9 (ESP-12 Module)
 
Ref: Search - A NTP Request on the ESP8266 including Daylight Saving Time”
Ref: Search - Arduino Stackexchange “DateTime to string”
Ref: Search - “configTime(MY_TZ, MY_NTP_SERVER); fails withWiFi.config(local_IP,   gateway, subnet)”
*/
 
/*
  Code for an ESP8266 NodeMCU to listen on IP address (192.168.1.97) and port
  (9503).
 
 Using NetWork Time Protocol - NTP TZ GMT0BST - to create a Timestamp.
*/
 
#include<ESP8266WiFi.h>
#include <time.h>
#include<ArduinoJson.h>
 
// Replace with your network credentials
const char* ssid = "vodafoneCF3EC4";
const char* password = "**************";
 
// Globals 
time_t now;   // these are the seconds since Epoch (1970) - UTC
tm tm;        // the structure tm holds time in a more convenient way
String dateTime;
 
// Static IP configuration
IPAddress local_IP(192, 168, 1, 97);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress dns(8, 8, 8, 8);
 
// Create a server object on port 9503
WiFiServer server(9503);
 
//define IDE sketch filename
#define __FILENAME__ (strrchr(__FILE__, '\\') ? strrchr(__FILE__, '\\') + 1 : __FILE__)
 
// Configuration of NTP
#define MY_NTP_SERVER "at.pool.ntp.org"     
#define MY_TZ "GMT0BST,M3.5.0/1,M10.5.0/2"
 
//----------------------------------------------------------------------------//
void setup()
{
 pinMode(2, OUTPUT); //ESP8266_LED
 digitalWrite(2, HIGH);  //ESP8266_LED Off
 
 Serial.begin(115200);
 
 // Initializes NTP time synchronization on ESP8266, setting the timezone and time server.
 configTime(MY_TZ, MY_NTP_SERVER);
 
  // Apply static IP configuration
 if(!WiFi.config(local_IP, gateway, subnet, dns))
 {
  Serial.println("Static IP configuration failed!");
 }
 
  // Connect to WiFi
 WiFi.begin(ssid, password);
 while(WiFi.status() != WL_CONNECTED)
 {
  delay(1000);
  Serial.print(".");
 }
 
  // Start the server to listen on port 9503
 server.begin();
 Serial.println("\nServer started at 192.168.1.97:9503");
 
  //IDE sketch filename
 Serial.println(__FILENAME__);
 Serial.println("---------------------------------");
 Serial.println();
 
}
 
//----------------------------------------------------------------------------//
void loop()
{
  // Read Current Time and format as "dd-mm-yyy hh:mm:ss"
  time(&now);                       // read the current time
  localtime_r(&now, &tm);           // update tm with the current time
  char dateTime[20];
  sprintf(dateTime, "%02d-%02d-%02d %02d:%02d:%02d",  tm.tm_mday, tm.tm_mon + 1, tm.tm_year + 1900, tm.tm_hour, tm.tm_min, tm.tm_sec);
  //Serial.println(dateTime);
 
  // Create a JsonDocument, it is initially empty
  JsonDocument doc;
 
  // Check for connected clients
  WiFiClient client = server.available();
  if(client)
  {
   while(client.connected())
  {
   if(client.available())
   {
    digitalWrite(2, LOW); //ESP8266_LED On
     //readStringUntil('\n') used instead of '\r' to stop blank lines in the serial monitor
     String request = client.readStringUntil('\n'); 
     Serial.println(request);
       
     // Deserialize the JSON document
     DeserializationError error = deserializeJson(doc, request);
      
      // Test if parsing succeeds.
     if(error)
     {
       //Serial.print(F("deserializeJson() failed: "));
       //Serial.println(error.f_str());
      return;
     }
 
     Serial.println();
     Serial.println("dateTime = " + String(dateTime));
 
      // Fetch values
      // {"name":"iSpindel","ID":6128618,"token":"Red","angle":88.49937439,
      //  "temperature":22.8125,"temp_units":"C","battery":3.910323143,
      //  "gravity":32.81218719,"interval":3,"RSSI":-45}
     
      double angle   = doc["angle"];
      String temp    = doc["temperature"];
      String units   = doc["temp_units"];
      double battery = doc["battery"];
      double interval= doc["interval"];
      double gravity = doc["gravity"];
      int  rssi      = doc["RSSI"];
      String name    = doc["name"]; 
     
      // Print values.
     
     Serial.println();
     Serial.println("angle    = " + String(angle));
     Serial.println("temp     = " + temp + units);
     Serial.println("battery  = " + String(battery));
     Serial.println("interval = " + String(interval));
     Serial.println("gravity  = "  + String(gravity));
     Serial.println("rssi     = " + String(rssi));
     Serial.println("name     = " + name);
     Serial.println();
   }
  }
  client.stop();
  doc.clear(); //Empties the Json document and clears the memory making it ready for reuse.
  digitalWrite(2, HIGH);  //ESP8266_LED Off
   //Serial.println("Disconnected");
 }
}
 
 
 

Assuming your iSindel set to stream it’s output on TCP 192.168.1.97:9503 every 3 seconds switch it on.

Then, if there are no errors, use  ➔ Upload and the Serial Monitor should display something like this…

Note: The Arduino IDE Serial Monitor does not wrap the text.

Good!

We now have programmed a NodeMCU ESP8266 Development Board as a Socket Client to receive, process and display the Tilt, Temperature, Battery and Gravity data from an iSpindel using the TCP settings.

Table of Contents

In this step I want to use WifiManager to create access to a configuration page on a web browser in a similar way to the one iSpindel uses.

We will add two Custom Parameters so we can match those set in the iSpindel TCP Configuration for Static Ip Address (192.168.1.97) and Socket Port (9503). Their values will be saved to and retreaved from the ESP8266 onboard flash memory and will not be lost during Reset or when the power is disconnected.

In addition we will be using Double Reset Detector by Stephen Denne to trigger the WifiManager Configutation Mode and trigger a reset and load the iSpindelink Wifi Configuration page at IP Address 192.168.4.1.

Flowchart…

Open a new sketch in the Arduino IDE (File, New Sketch…) then save it as “Rushtp_7_1_Step6_Customising_WifiManager” in your project directory. Note: the “_” linking all the text It has to be one long string of text, no spaces.. The IDE will create a new folder with that name and add a file called Rushtp_7_1_Step6_Customising_WifiManager.ino.

Copy and paste the following script to replace the default script. Then save the file again.

 
/*
Board: NodeMCU 0.9 (ESP-12 Module)

Ref: “wifimanager for esp8266 what is it?” - Google Search
*/

/*
  Use wifimanager to auto connect to Wifi Networks and store Login and Passwords
    in the ESP8266 Flash memory without hard-coding.  
  
  Customising wifimanager for an ESP8266 NodeMCU to allow 
    Static IP Address and Socket Port values to be changes 
    and reloaded after Esp8266 reset.

  Create Custom Parameters to Display, Amend, and Set:
    Static IP Address (WiFiManagerParameter custom_ip)
    Socket Port (WiFiManagerParameter custom_pt)
  
  Double Reset Detector by Stephen Denne is used to erase and reset
    the ESP8266 (iSpingelink) configuration. 
*/
 
#include <ESP8266WiFi.h>
#include <WiFiManager.h>
#include <LittleFS.h>
#include <DoubleResetDetector.h>

#define DRD_TIMEOUT 10
#define DRD_ADDRESS 0

DoubleResetDetector drd(DRD_TIMEOUT, DRD_ADDRESS);

WiFiManager wm;

char staticIP[16] = "192.168.1.97";
char soc_port[5] = "9503";

WiFiManagerParameter custom_ip("staticip", "Static IP", staticIP, 16);
WiFiManagerParameter custom_pt("Soc_port", "Socket Port", soc_port, 5);

bool shouldSaveConfig = false;

// ===========================================
// Save callback
// ===========================================
void saveConfigCallback() {

  strcpy(staticIP, custom_ip.getValue());
  strcpy(soc_port, custom_pt.getValue());

  File f = LittleFS.open("/ip.txt", "w");
  if (f) {
    f.println(staticIP);
    f.close();

    Serial.println("Configuration saved");
    Serial.print("Saved IP: ");
    Serial.println(staticIP);
  }

  File g = LittleFS.open("/pt.txt", "w");
  if (g) {
    g.println(soc_port);
    g.close();

    Serial.println("Configuration saved");
    Serial.print("Saved Port: ");
    Serial.println(soc_port);
  }

  shouldSaveConfig = true;
}

// ===========================================
// Load configuration
// ===========================================
void loadConfig() {

  if (!LittleFS.begin()) {
    Serial.println("LittleFS mount failed");
    return;
  }

  if (!LittleFS.exists("/ip.txt")) {
    Serial.println("No saved IP file found");
    return;
  }
  File f = LittleFS.open("/ip.txt", "r");
  if (!f) {
    Serial.println("Failed to open config file");
    return;
  }
  String ip = f.readStringUntil('\n');
  ip.trim();
  if (ip.length() > 0) {
    ip.toCharArray(staticIP, sizeof(staticIP));
  }
  f.close();

  if (!LittleFS.exists("/pt.txt")) {
    Serial.println("No saved IP file found");
    return;
  }
  File g = LittleFS.open("/pt.txt", "r");
  if (!g) {
    Serial.println("Failed to open config file");
    return;
  }
  String pt = g.readStringUntil('\n');
  ip.trim();
  if (pt.length() > 0) {
    pt.toCharArray(soc_port, sizeof(soc_port));
  }
  g.close();
 
  Serial.print("Loaded Static IP: ");
  Serial.println(staticIP);
  Serial.println(soc_port);
}

// ===========================================
// Apply static IP
// ===========================================
void applyStaticIP() {

  IPAddress ip;

  if (!ip.fromString(staticIP)) {
    Serial.println("Invalid static IP");
    return;
  }

  IPAddress gateway(192, 168, 1, 1);
  IPAddress subnet(255, 255, 255, 0);
  IPAddress dns1(8, 8, 8, 8);

  WiFi.config(ip, gateway, subnet, dns1);

  Serial.print("Configured static IP: ");
  Serial.println(staticIP);
 
}

// ===========================================
// Setup
// ===========================================
void setup() {

  Serial.begin(115200);
  delay(1000);

  Serial.println();
  Serial.println("Booting...");

  loadConfig();

  custom_ip.setValue(staticIP, sizeof(staticIP));
  wm.addParameter(&custom_ip);

  custom_pt.setValue(soc_port, sizeof(soc_port));
  wm.addParameter(&custom_pt);

  wm.setSaveConfigCallback(saveConfigCallback);

  bool forcePortal = drd.detectDoubleReset();

  if (forcePortal) {
    Serial.println("Double Reset Detected");
    wm.startConfigPortal("iSpindelink");
  }
  else {

    applyStaticIP();

    if (!wm.autoConnect("iSpindelink")) {

      Serial.println("Failed to connect");
      ESP.restart();
    }
  }

  // Retrieve latest value entered in portal
  strcpy(staticIP, custom_ip.getValue());

  Serial.println();
  Serial.println("WiFi Connected");
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  Serial.print("Port: ");
  Serial.println(soc_port);
 
  Serial.print("ESP IP: ");
  Serial.println(WiFi.localIP());

  Serial.print("Stored Static IP: ");
  Serial.println(staticIP);
}

// ===========================================
// Loop
// ===========================================
void loop() {

  drd.loop();

  Serial.println();
  Serial.println("---------------------------------------------");
  Serial.println("WiFi Connected");
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

  Serial.print("ESP IP: ");
  Serial.println(WiFi.localIP());

  Serial.print("Stored Static IP: ");
  Serial.println(staticIP);

  Serial.print("Port: ");
  Serial.println(soc_port);
  delay(3000);
} 

Then, if there are no errors, use  ➔ Upload and the Serial Monitor should display something like this…

After “Click, Click, Clicking…” the ESP8266 Reset button...

Connect to wifi iSpindelink. Goto internet address 192.168.4.1 in your web browser. Then Configure Wifi and select your SSID and set the Password (it must be selected even though it appears in grey text). Amend the Static IP address and Port to to say 192.168.1.96 and 9502. then Save. the ESP8266 should reset and display the following in the Serial monitor …

Try a single click of the Esp8266 reset button and confirm the new settings have been retained.

Finally unplug the ESP8266, then reconnect it. the new setting should still be set.

Great!

We now have the NodeMCU ESP8266 Development Board programmed with WifiManager and custom parameters to allow the local network to be connected and the iSpindelink Static IP address and listening Port to be set without hard coding the changes.

In the next Step we will merge the iSpindel Socket Client listening code with this WifiManager code.

Table of Contents

In this step I have used Chat GPT, an online AI agent, to merge our iSpindelink socket client listening code with the WifiManager functionality to enable the Wifi to be set up in a similar way the iSpindel is configured.

- Made “char dateTime[25];” a global variable to allow it to be used in the handelTCP() function.
- Replaced the blocking “delay(3000);” in the Loop function with “if (currentMillis - previousMillis >= 3000)”.

Flowchart…

Open a new sketch in the Arduino IDE (File, New Sketch…) then save it as “Rushtp_7_1_Step7_Merge_With_WifiManage” in your project directory. Note: the “_” linking all the text It has to be one long string of text, no spaces.. The IDE will create a new folder with that name and add a file called Rushtp_7_1_Step7_Merge_With_WifiManage.ino.

Copy and paste the following script to replace the default script. Then save the file again.

 /* 
Board: NodeMCU 0.9 (ESP-12 Module) 
  
Ref: Merged two scripts using initially with ChatGPT - Then Amended the combined script: 
  Rushtp_7_11_Step5_Adding_A_Timestamp_v1.1 (iSpindelink) 
  Rushtp_7_1_Step6_Customising_WifiManager (Wifi Manager) 
*/ 
  
/* 
   ESP8266 iSpindel Listener 
   - WiFiManager 
   - Static IP configuration 
   - Configurable Socket Port 
   - LittleFS storage 
   - Double Reset Detector 
   - NTP Timestamp 
   - JSON TCP Listener 
*/ 
  
#include <ESP8266WiFi.h> 
#include <WiFiManager.h> 
#include <LittleFS.h> 
#include <DoubleResetDetector.h> 
#include <ArduinoJson.h> 
#include <time.h> 
  
// ----------------------------------------------------- 
// Network Time 
// ----------------------------------------------------- 
#define MY_NTP_SERVER "at.pool.ntp.org" 
#define MY_TZ "GMT0BST,M3.5.0/1,M10.5.0/2" 
  
time_t now; 
tm tm_info; 
char dateTime[25];  //Format for dd-mm-yyyy hh:mm:ss 
    
// ----------------------------------------------------- 
// Double Reset Detector 
// ----------------------------------------------------- 
#define DRD_TIMEOUT  10 
#define DRD_ADDRESS 0 
DoubleResetDetector drd(DRD_TIMEOUT, DRD_ADDRESS); 
  
// ----------------------------------------------------- 
// TCP Server 
// ----------------------------------------------------- 
WiFiServer*tcpServer = nullptr; 
  
// ----------------------------------------------------- 
// Hold a value for non blocking delay 
// ----------------------------------------------------- 
unsigned long previousMillis = 0; 
  
// ----------------------------------------------------- 
// Wifi Manager 
// ----------------------------------------------------- 
WiFiManager wm; 
  
char staticIP[16] = "192.168.1.97"; 
char soc_port[6]  = "9503"; 
  
WiFiManagerParameter custom_ip("staticip", "Static IP", staticIP, sizeof(staticIP)); 
WiFiManagerParameter custom_pt("Soc_port", "Socket Port", soc_port, sizeof(soc_port)); 
  
bool shouldSaveConfig = false; 
  
// ----------------------------------------------------- 
// Wifi Manager - Save Config 
// ----------------------------------------------------- 
void saveConfigCallback() 
{ 
  strcpy(staticIP, custom_ip.getValue()); 
  strcpy(soc_port, custom_pt.getValue()); 
  
  File f = LittleFS.open("/ip.txt", "w"); 
  
  if (f) 
  { 
    f.println(staticIP); 
    f.close(); 
  } 
  
  File g = LittleFS.open("/pt.txt", "w"); 
  
  if (g) 
  { 
    g.println(soc_port); 
    g.close(); 
  } 
  
  shouldSaveConfig = true; 
  
  Serial.println("Configuration Saved"); 
} 
  
// ----------------------------------------------------- 
// Wifi Manager - Load Config 
// ----------------------------------------------------- 
void loadConfig() 
{ 
  if (!LittleFS.begin()) 
  { 
    Serial.println("LittleFS Mount Failed"); 
    return; 
  } 
  
  if (LittleFS.exists("/ip.txt")) 
  { 
    File f = LittleFS.open("/ip.txt", "r"); 
  
    if (f) 
    { 
      String ip = f.readStringUntil('\n'); 
      ip.trim(); 
  
      if (ip.length()) 
      { 
        ip.toCharArray(staticIP, sizeof(staticIP)); 
      } 
  
      f.close(); 
    } 
  } 
  
  if (LittleFS.exists("/pt.txt")) 
  { 
    File g = LittleFS.open("/pt.txt", "r"); 
  
    if (g) 
    { 
      String pt = g.readStringUntil('\n'); 
      pt.trim(); 
  
      if (pt.length()) 
      { 
        pt.toCharArray(soc_port, sizeof(soc_port)); 
      } 
  
      g.close(); 
    } 
  } 
  
  Serial.print("Loaded Static IP: "); Serial.println(staticIP); 
  Serial.print("Loaded Port: "); Serial.println(soc_port); 
} 
  
// ----------------------------------------------------- 
// Set Static IP - using variable staticIP from Flash drive 
// ----------------------------------------------------- 
void applyStaticIP() 
{ 
  IPAddress ip; 
  
  if (!ip.fromString(staticIP)) 
  { 
    Serial.println("Invalid Static IP"); 
    return; 
  } 
  
  IPAddress gateway(192, 168, 1, 1); 
  IPAddress subnet(255, 255, 255, 0); 
  IPAddress dns(8, 8, 8, 8); 
  
  WiFi.config(ip, gateway, subnet, dns); 
  
  Serial.print("Configured Static IP: "); Serial.println(staticIP); 
} 
  
// ----------------------------------------------------- 
// TCP SERVER - listen for iSpindel socket data and extract fields and values  
// ----------------------------------------------------- 
void handelTCP() 
{ 
  WiFiClient client =tcpServer->available(); 
  
  if (!client) 
  { 
    //Serial.println("iSpindel NOT connected!"); 
    return; 
  } 
  
  Serial.println("Client Connected"); 
  
  JsonDocument doc; 
  
  while (client.connected()) 
  { 
    if (client.available()) 
    { 
      digitalWrite(2, LOW);  //Blue LED Off 
  
      String request = client.readStringUntil('\n'); 
  
      Serial.println("--------------------------------"); 
      Serial.println(request); 
  
      DeserializationError error = deserializeJson(doc, request); 
      if (error) 
      { 
        Serial.println("JSON Parse Failed"); 
        continue; 
      } 
      
      double angle   = doc["angle"] | 0.0; 
      double temp    = doc["temperature"] | 0.0; 
      String units   = doc["temp_units"] | ""; 
      double battery = doc["battery"] | 0.0; 
      double interval   = doc["interval"] | 0.0; 
      double gravity = doc["gravity"] | 0.0; 
      int rssi       = doc["RSSI"] | 0; 
      String name    = doc["name"] | ""; 
  
      Serial.print("Timestamp: "); Serial.println(dateTime); 
      Serial.print("Name     : "); Serial.println(name); 
      Serial.print("Angle    : "); Serial.println(angle); 
      Serial.print("Temp     : "); Serial.print(temp); Serial.println(units); 
      Serial.print("Battery  : "); Serial.println(battery); Serial.println("v"); 
      Serial.print("Interval  : "); Serial.println(interval); Serial.println("secs"); 
      Serial.print("Gravity  : "); Serial.println(gravity); 
      Serial.print("RSSI     : "); Serial.println(rssi); 
  
      doc.clear(); 
    } 
  
    yield(); 
  } 
  
  client.stop(); 
  
  digitalWrite(2, HIGH);  //Blue LED Off 
  
  Serial.println("--------------------------------"); 
  Serial.println("Client Disconnected"); 
  Serial.println(); 
} 
  
// ----------------------------------------------------- 
// Setup 
// ----------------------------------------------------- 
void setup() 
{ 
  pinMode(2, OUTPUT); 
  digitalWrite(2, HIGH);  //Blue LED Off 
  
  Serial.begin(115200); 
  delay(1000); 
  
  Serial.println(); 
  Serial.println("Booting..."); 
  
  loadConfig();   //Wifi Manager - Load Config 
  
  custom_ip.setValue(staticIP, sizeof(staticIP)); 
    wm.addParameter(&custom_ip); 
  custom_pt.setValue(soc_port, sizeof(soc_port)); 
    wm.addParameter(&custom_pt); 
  
  wm.setSaveConfigCallback(saveConfigCallback); //Save custon variables to flash drive 
  
  
bool forcePortal = drd.detectDoubleReset(); 
  if (forcePortal) 
  { 
    Serial.println("Double Reset Detected"); 
    //wm.resetSettings();  //This clears the SSID and Password boxes else current SSID greyed out. 
    wm.startConfigPortal("iSpindelink"); 
    delay(200); 
    ESP.restart(); 
  } 
  else 
  { 
    applyStaticIP();  //using variable staticIP from Flash drive 
  
    if (!wm.autoConnect("iSpindelink")) 
    { 
      Serial.println("WiFi Failed"); 
      ESP.restart(); 
    } 
  } 
  
  strcpy(staticIP, custom_ip.getValue()); 
  strcpy(soc_port, custom_pt.getValue()); 
  
  Serial.println(); 
  Serial.println("WiFi Connected"); 
  
  Serial.print("SSID: "); Serial.println(WiFi.SSID()); 
  Serial.print("IP Address: "); Serial.println(WiFi.localIP()); 
  Serial.print("Port: "); Serial.println(soc_port); 
  
  // NTP 
  configTime(MY_TZ, MY_NTP_SERVER); 
  
  // Create tcpServer using custom port value from flash drive 
  
uint16_t port = atoi(soc_port); 
  
  tcpServer = new WiFiServer(port); 
  tcpServer->begin(); 
  
  Serial.print("Server started on port "); Serial.println(port); 
} 
  
  
// ----------------------------------------------------- 
// Loop 
// ----------------------------------------------------- 
void loop() 
{ 
  // Current time 
  time(&now); 
  localtime_r(&now, &tm_info); 
  
  /* Get inbound data from iSpindel and uses deserializeJson(doc, inbound) 
      and extract keys and key values into global variables*/ 
  handelTCP(); 
  
  //Check for Double Reset 
  drd.loop(); 
  
  unsigned long currentMillis = millis(); 
  
  if (currentMillis - previousMillis >= 3000)     //Do every 3 seconds  
  { 
    sprintf( 
      dateTime, 
      "%02d-%02d-%04d %02d:%02d:%02d", 
      tm_info.tm_mday, 
      tm_info.tm_mon + 1, 
      tm_info.tm_year + 1900, 
      tm_info.tm_hour, 
      tm_info.tm_min, 
      tm_info.tm_sec 
    ); 
    delay(100); 
    // Serial Print these variables even if socket client is not connected. 
    Serial.print("TCP Static IP: "); Serial.println(staticIP); 
    Serial.print("TCP Port: "); Serial.println(soc_port); 
    Serial.print("Timestamp: "); Serial.println(dateTime); 
    Serial.print("ESP RSSI: "); Serial.println(String(WiFi.RSSI()) + "dBm"); 
    Serial.println(); 
  
    previousMillis = currentMillis; 
  } 
  
} 

Then, if there are no errors, use  ➔ Upload and the Serial Monitor should display something like this…

Now we are getting there!

We now have the NodeMCU ESP8266 Development Board programmed with WifiManager and custom parameters to allow the local network to be connected and the iSpindelink Static IP address and listening Port to be set without hard coding the changes.

Table of Contents

So have sucessfully got the iSpindelink listening for the iSpindel TCP data and streaming it to the Arduino IDE Serial Monitor. Now let’s give the ESP8266 NodeMCU it’s independence and stream the live data to a web page…

The objective now is to stream iSpindel data to a web page in XML format. The ESP8266 will act as a web server, and send data to http://192.168.1.97/XML so that it can be parsed by JavaScript into a dashboard web page at our static IP address 192.168.1.97.

Let’s walk through the new code we will be using. In the full working Arduino IDE sketch I have defined functions() to hold the HTML and XML code to make the sketch easier to read and debug. the function is called by server.on("/", handleRoot); where handelRoot is the function containing the HTML for the home page.

Example

Note the used of R"rawliteral(…)rawliteral"; to tell the compiler to treat everything between the brackets not as IDE code but to load it exactly as it is typed. That allows us to insert the HTML, JavaScript and XML code for sent by the ESP8266 webserver using server.send(200, "text/html", htmlRootSite);. The 200 tells the browser that it can use the HTML we sent.

HTML (Hypertext Markup Language) is a simple markup coding language used to layout content on a webpage. HTML programming language to tell web browsers how to display the page contents.

Here we set up our iSpindelink Live Data dashboard. The <script> …</script> tags are used to embed executable Javascript code as detailed below.

JavaScript is a browser-based programming language that brings interactivity to static web pages, applications and more.

In our case the Javascript function load() is triggered every 2 seconds by setInterval(load,2000); and gets the iSpindel data values from the XML page and inserts it into the HTML tabs with the ids with the associated field name (e.g. <span Class="data" id="gravity"></span>)

XML (eXtensible Markup Language). Unlike HTML, which is designed specifically to display data visually in a web browser, XML is strictly focused on defining and carrying the data itself.

Here a string variable “XML” is built to include the iSpindel data fields and values.

Flowchart…

Open a new sketch in the Arduino IDE (File, New Sketch…) then save it as “Rushtp_7_1_Step8_Streaming_Live_Readings_On_Web_Page” in your project directory. Note: the “_” linking all the text It has to be one long string of text, no spaces.. The IDE will create a new folder with that name and add a file called Rushtp_7_1_Step8_Streaming_Live_Readings_On_Web_Page.ino.

Copy and paste the following script to replace the default script. Then save the file again.

 /* 
  Board: NodeMCU 0.9 (ESP-12 Module) 
  
  iSpindelink listens for, and processes the iSpindel TCP data stream 
  then broardcasts the live data on a local network stativ IP address Web Page. 
  The TCP static IP address and port can be set in WifiManager 
  and saved along with your network ID and Password.  
*/ 
  
/* 
   ESP8266 iSpindel Listener 
   - WiFiManager 
   - Static IP configuration 
   - Configurable Socket Port 
   - LittleFS storage 
   - Double Reset Detector 
   - NTP Timestamp 
   - JSON TCP Listener 
   - Arduino IDE aketch file name 
   - Web Page at 192.168.1.97 
*/ 
  
#include <ESP8266WiFi.h> 
#include <ESP8266WebServer.h> 
#include <WiFiManager.h> 
#include <LittleFS.h> 
#include <DoubleResetDetector.h> 
#include <ArduinoJson.h> 
#include <time.h> 
  
// ----------------------------------------------------- 
// Network Time 
// ----------------------------------------------------- 
#define MY_NTP_SERVER "at.pool.ntp.org" 
#define MY_TZ "GMT0BST,M3.5.0/1,M10.5.0/2" 
time_t now; 
tm tm_info; 
char dateTime[25];  //Format for dd-mm-yyyy hh:mm:ss 
    
// ----------------------------------------------------- 
// Double Reset Detector 
// ----------------------------------------------------- 
#define DRD_TIMEOUT 10 
#define DRD_ADDRESS 0 
DoubleResetDetector drd(DRD_TIMEOUT, DRD_ADDRESS); 
  
// ----------------------------------------------------- 
// Web server 
// ----------------------------------------------------- 
ESP8266WebServer server(80); 
  
// ----------------------------------------------------- 
// TCP Server 
// ----------------------------------------------------- 
WiFiServer*tcpServer = nullptr; 
  
// ----------------------------------------------------- 
// iSpindel DATA  
// ----------------------------------------------------- 
double angle      = 0; 
double temp       = 0; 
double battery    = 0; 
double gravity    = 0; 
int interval      = 0; 
const char* units = "-"; 
String name  = "-"; 
int rssi          = 0; 
String sTemp      = "-"; //String(temp, 2)+String("°")+String(units); 
String sAngle     = "-";  //String(Angle, 2)+String("°") 
const char* psi   = "N/A";   //PSI to be used later  
  
// ----------------------------------------------------- 
// Arduino IDE sketch filename 
// ----------------------------------------------------- 
#define __FILENAME__ (strrchr(__FILE__, '\\') ? strrchr(__FILE__, '\\') + 1 : __FILE__) 
  
// ----------------------------------------------------- 
// Hold a value for non blocking delay 
// ----------------------------------------------------- 
unsigned long previousMillis = 0; 
  
// ----------------------------------------------------- 
// Wifi Manager 
// ----------------------------------------------------- 
WiFiManager wm; 
  
char staticIP[16] = "192.168.1.97"; 
char soc_port[6]  = "9503"; 
  
WiFiManagerParameter custom_ip("staticip", "Static IP", staticIP, sizeof(staticIP)); 
WiFiManagerParameter custom_pt("Soc_port", "Socket Port", soc_port, sizeof(soc_port)); 
  
bool shouldSaveConfig = false; 
  
// ----------------------------------------------------- 
// Wifi Manager - Save Config 
// ----------------------------------------------------- 
void saveConfigCallback() 
{ 
  strcpy(staticIP, custom_ip.getValue()); 
  strcpy(soc_port, custom_pt.getValue()); 
  
  File f = LittleFS.open("/ip.txt", "w"); 
  
  if (f) 
  { 
    f.println(staticIP); 
    f.close(); 
  } 
  
  File g = LittleFS.open("/pt.txt", "w"); 
  
  if (g) 
  { 
    g.println(soc_port); 
    g.close(); 
  } 
  
  shouldSaveConfig = true; 
  
  Serial.println("Configuration Saved"); 
} 
  
// ----------------------------------------------------- 
// Wifi Manager - Load Config 
// ----------------------------------------------------- 
void loadConfig() 
{ 
  if (!LittleFS.begin()) 
  { 
    Serial.println("LittleFS Mount Failed"); 
    return; 
  } 
  
  if (LittleFS.exists("/ip.txt")) 
  { 
    File f = LittleFS.open("/ip.txt", "r"); 
  
    if (f) 
    { 
      String ip = f.readStringUntil('\n'); 
      ip.trim(); 
  
      if (ip.length()) 
      { 
        ip.toCharArray(staticIP, sizeof(staticIP)); 
      } 
  
      f.close(); 
    } 
  } 
  
  if (LittleFS.exists("/pt.txt")) 
  { 
    File g = LittleFS.open("/pt.txt", "r"); 
  
    if (g) 
    { 
      String pt = g.readStringUntil('\n'); 
      pt.trim(); 
  
      if (pt.length()) 
      { 
        pt.toCharArray(soc_port, sizeof(soc_port)); 
      } 
  
      g.close(); 
    } 
  } 
  
  Serial.print("Loaded Static IP: "); Serial.println(staticIP); 
  Serial.print("Loaded Port: "); Serial.println(soc_port); 
} 
  
// ----------------------------------------------------- 
// Set Static IP - using variable staticIP from Flash drive 
// ----------------------------------------------------- 
void applyStaticIP() 
{ 
  IPAddress ip; 
  
  if (!ip.fromString(staticIP)) 
  { 
    Serial.println("Invalid Static IP"); 
    return; 
  } 
  
  IPAddress gateway(192, 168, 1, 1); 
  IPAddress subnet(255, 255, 255, 0); 
  IPAddress dns(8, 8, 8, 8); 
  
  WiFi.config(ip, gateway, subnet, dns); 
  
  Serial.print("Configured Static IP: "); Serial.println(staticIP); 
} 
  
// ----------------------------------------------------- 
// TCP SERVER - listen for iSpindel socket data and extract fields and values  
// ----------------------------------------------------- 
void handelTCP() 
{ 
  WiFiClient client =tcpServer->available(); 
  
  if (!client) 
  { 
    //Serial.println("iSpindel NOT connected!"); 
    return; 
  } 
  
  Serial.println("Client Connected"); 
  
  JsonDocument doc; 
  
  while (client.connected()) 
  { 
    if (client.available()) 
    { 
      digitalWrite(2, LOW);  //Blue LED Off 
  
      String request = client.readStringUntil('\n'); 
  
      Serial.println("--------------------------------"); 
      Serial.println(request); 
  
      DeserializationError error = deserializeJson(doc, request); 
      if (error) 
      { 
        Serial.println("JSON Parse Failed"); 
        continue; 
      } 
  
      angle      = doc["angle"].as<double>(); 
      temp       = doc["temperature"].as<double>(); 
      battery    = doc["battery"].as<double>(); 
      gravity    = doc["gravity"].as<double>(); 
      interval   = doc["interval"] | 0; 
      units      = doc["temp_units"] | "?"; 
      name       = doc["name"] | "unknown"; 
      rssi       = doc["RSSI"] | 0; 
      sTemp      = String(doc["temperature"].as<double>()) + "°" + String(doc["temp_units"]); 
      sAngle     = String(doc["angle"].as<double>()) + "°"; 
  
      Serial.print("name    = "); Serial.println(name); 
      Serial.print("sTemp   = "); Serial.println(sTemp); 
      Serial.print("sAngle  = "); Serial.println(sAngle); 
      Serial.print("gravity = "); Serial.println(gravity, 4); 
      Serial.print("battery = "); Serial.println(battery); 
      Serial.print("interval= "); Serial.println(interval); 
      Serial.print("rssi    = "); Serial.println(rssi); 
      Serial.print("psi     = "); Serial.println(psi); 
  
      doc.clear(); 
    } 
  } 
  
  client.stop(); 
  
  digitalWrite(2, HIGH);  //Blue LED Off 
  
  Serial.println("--------------------------------"); 
  Serial.println("Client Disconnected"); 
  Serial.println(); 
} 
  
// ----------------------------------------------------- 
// Web XML 
// ----------------------------------------------------- 
void handleXML() 
{ 
  String xml = "<?xml version='1.0'?><data>"; 
         xml += "<name>"     + String(name) + "</name>"; 
         xml += "<sTemp>"    + String(sTemp) + "</sTemp>"; 
         xml += "<sAngle>"  + String(sAngle) + "</sAngle>"; 
         xml += "<gravity>"  + String(gravity, 4) + "</gravity>"; 
         xml += "<battery>"  + String(battery, 2) + "</battery>"; 
         xml += "<rssi>"     + String(String(WiFi.RSSI()) + "dBm") + "</rssi>"; 
         xml += "<psi>"      + String(psi) + "</psi>"; 
         xml += "<datetime>" + String(dateTime) + "</datetime>"; 
         xml += "<ip>" + WiFi.localIP().toString() + "</ip>"; 
         xml += "<soc_port>" + String(soc_port) + "</soc_port>"; 
         xml += "<firmware>" + String(__FILENAME__) + "</firmware>"; 
         xml += "</data>"; 
  
  server.send(200, "text/xml", xml); 
} 
  
// ----------------------------------------------------- 
// Web page 
// ----------------------------------------------------- 
void handleRoot() 
{ 
  String htmlRootSite =  
    R"rawliteral( 
      <!DOCTYPE html> 
      <html> 
        <head> 
          <title>iSpindelink Dashboard</title> 
          <style> 
          body { font-family: Arial; background:black; color:#0f0; text-align:center; } 
          .data{ color:white; } 
          </style> 
        </head> 
  
        <body> 
          <h1><font color:#0f0; size=8>iSpindelink Live Data</font></h1> 
  
          <table align='center' width='520' border='1px' cellpadding='0' cellspacing='0' style='border-color:#0f0; 
          background-color:black'> 
            <tr> 
              <td> 
                <font size=5> 
                  <p>Name:      <span Class="data" id="name"></span></p> 
                  <p>Temp:      <span Class="data" id="sTemp"></span></p> 
                  <p>Angle:     <span Class="data" id="sAngle"></span></p> 
                  <p>Gravity:   <span Class="data" id="gravity"></span></p> 
                  <p>Battery:   <span Class="data" id="battery"></span></p> 
                  <p>RSSI:      <span Class="data" id="rssi"></span></p> 
                  <p>PSI:       <span Class="data" id="psi"></span></p> 
                  <p>Date Time: <span Class="data" id="datetime"></span></p> 
                </font> 
              </td > 
            </tr> 
          </table   
          
          <p><span Class="data" id="ip"></span> : <span Class="data" id="soc_port"></span> 
          <br>Firmware: <em><font style="color: lightblue;"><span id="firmware"></span></font></em></p> 
  
          <script> 
            function load(){ 
            fetch('/xml') 
            .then(r=>r.text()) 
            .then(str=>(new DOMParser()).parseFromString(str,"text/xml")) 
            .then(d=>{ 
              ["sTemp","gravity","battery","sAngle","rssi","name","psi","datetime","ip","soc_port","firmware"].forEach(k=>{ 
              document.getElementById(k).innerText = 
              d.getElementsByTagName(k)[0].textContent; 
              }); 
            }); 
            } 
            setInterval(load,2000); 
            load(); 
          </script> 
          
        </body> 
      </html> 
    )rawliteral"; 
  
  server.send(200, "text/html", htmlRootSite); 
} 

  
// ----------------------------------------------------- 
// Setup 
// ----------------------------------------------------- 
void setup() 
{ 
  pinMode(2, OUTPUT); 
  digitalWrite(2, HIGH);  //Blue LED Off 
  
  Serial.begin(115200); 
  delay(1000); 
  
  Serial.println(); 
  Serial.println("Booting..."); 
  
  loadConfig();   //Wifi Manager - Load Config 
  
  custom_ip.setValue(staticIP, sizeof(staticIP)); 
    wm.addParameter(&custom_ip); 
  custom_pt.setValue(soc_port, sizeof(soc_port)); 
    wm.addParameter(&custom_pt); 
  
  wm.setSaveConfigCallback(saveConfigCallback); //Save custon variables to flash drive 
  
  
  bool forcePortal = drd.detectDoubleReset(); 
  if (forcePortal) 
  { 
    Serial.println("Double Reset Detected"); 
    //wm.resetSettings();  //This clears the SSID and Password boxes else current SSID greyed out. 
    wm.startConfigPortal("iSpindelink"); 
    delay(200); 
    ESP.restart(); 
  } 
  else 
  { 
    applyStaticIP();  //using variable staticIP from Flash drive 
  
    if (!wm.autoConnect("iSpindelink")) 
    { 
      Serial.println("WiFi Failed"); 
      ESP.restart(); 
    } 
  } 
  
  strcpy(staticIP, custom_ip.getValue()); 
  strcpy(soc_port, custom_pt.getValue()); 
  
  Serial.println(); 
  Serial.println("WiFi Connected"); 
  
  Serial.print("SSID: "); Serial.println(WiFi.SSID()); 
  Serial.print("IP Address: "); Serial.println(WiFi.localIP()); 
  Serial.print("Port: "); Serial.println(soc_port); 
  
  // NTP 
  configTime(MY_TZ, MY_NTP_SERVER); 
  
  // Create tcpServer using custom port value from flash drive 
  uint16_t port = atoi(soc_port); 
  
  tcpServer = new WiFiServer(port); 
  tcpServer->begin(); 
  Serial.print("Server started on port "); Serial.println(port); 
  
  // Web server routes 
  server.on("/", handleRoot); 
  server.on("/xml", handleXML); 
  server.begin(); 
  //Serial.println("Web server started"); 
} 
  
  
// ----------------------------------------------------- 
// Loop 
// ----------------------------------------------------- 
void loop() 
{ 
  // Current time 
  time(&now); 
  localtime_r(&now, &tm_info); 
  
  /* Get inbound data from iSpindel and uses deserializeJson(doc, inbound) 
     and extract keys and key values into global variables*/ 
  handelTCP(); 
  
  //Manage the incoming network communications  
  server.handleClient(); 
  
  //Check for Double Reset 
  drd.loop(); 
  
  unsigned long currentMillis = millis(); 
  if (currentMillis - previousMillis >= 3000)     //Do every 3 seconds  
  { 
    sprintf( 
      dateTime, 
      "%02d-%02d-%04d %02d:%02d:%02d", 
      tm_info.tm_mday, 
      tm_info.tm_mon + 1, 
      tm_info.tm_year + 1900, 
      tm_info.tm_hour, 
      tm_info.tm_min, 
      tm_info.tm_sec 
    ); 
    //delay(100); 
    // Serial Print these variables even if socket client is not connected. 
    Serial.print("TCP Static IP: "); Serial.println(staticIP); 
    Serial.print("TCP Port: "); Serial.println(soc_port); 
    Serial.print("Timestamp: "); Serial.println(dateTime); 
    Serial.print("ESP RSSI: "); Serial.println(String(WiFi.RSSI()) + "dBm"); 
    Serial.println(); 
    previousMillis = currentMillis; 
  } 
  
}