ESP32 Using placeholders in HTML on SD Card

I have a working ESP32 WiFi sketch with index on SD card.
The WiFi operates in areas where there is no internet.
Now I need to place real time readings in the HTML.
I have spent extensive research trying to using place_holder to transfer temperature readings into the HTML to display the readings.

Extract of my HTML code is :
Ambient %PLACEHOLDER_TEMPERATURE1%
However this is the same that it displays the web page.

The answer might be in ESP32 Arduino HTTP Server: Template processing with multiple placeholders - techtutorialsx
but much of it is too advanced for me.

Here is my sketch as far as I can get based on the above Techtutorialsx page with a random string for test purposes.

I have a working ESP32 WiFi sketch with index on SD card.
Now I need to place real time readings in the HTML.
I have spent extensive research trying to using place_holder to transfer temperature readings into the HTML to display the readings.

Extract of my HTML code is :
li> Ambient %PLACEHOLDER_TEMPERATURE1%
However this is the same that it displays the web page.

The answer might be in ESP32 Arduino HTTP Server: Template processing with multiple placeholders - techtutorialsx
but much of it is too advanced for me.

Here is my sketch as far as I can get based on the above Techtutorialsx page with a random string for test purposes.

#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "FS.h"
#include "SD.h"
#include "SPI.h"

// network credentials
const char* ssid = "xxxxxxx";
const char* password = "13565564";
const char * html = "

Temperature: %PLACEHOLDER_TEMPERATURE1% ºC

";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
String processor(const String& var)
{

Serial.println(var);

var == "PLACEHOLDER_TEMPERATURE1") {
return String(random(10, 20));
}

return String();
}
void initSDCard() {
if (!SD.begin()) {
Serial.println("Card Mount Failed");
return;
}
uint8_t cardType = SD.cardType();

if (cardType == CARD_NONE) {
Serial.println("No SD card attached");
return;
}

Serial.print("SD Card Type: ");
if (cardType == CARD_MMC) {
Serial.println("MMC");
} else if (cardType == CARD_SD) {
Serial.println("SDSC");
} else if (cardType == CARD_SDHC) {
Serial.println("SDHC");
} else {
Serial.println("UNKNOWN");
}
uint64_t cardSize = SD.cardSize() / (1024 * 1024);
Serial.printf("SD Card Size: %lluMB\n", cardSize);
}

void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
void setup() {
Serial.begin(115200);
initWiFi();
initSDCard();

server.on("/sensor", HTTP_GET, [ ](AsyncWebServerRequest * request) {
request->send(SD, "/index.html", "text/html");
});
server.serveStatic("/", SD, "/");
server.begin();
}

void loop() {
}

Please follow the advice given in the link below when posting code, in particular the section entitled 'Posting code and common code problems'

Use code tags (the </> icon above the compose window) to make it easier to read and copy for examination

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.