Building and displaying html on a TFT

Hi, the aim of my project is to grab html data from a web page input by a user, then display it on a 240x240 IPS st7789 TFT display wired to my esp8266 wemos d1 mini. Already I've managed to use a simple http.get code, that grabs the html content of a web page, but the step I need guidance with is converting that html data into visual graphic on the TFT. I'm using the TFT_espi library. This is my code that displays the html as text on the TFT:.

so, can anyone advice me on converting html to tft_espi visual functions

#include <TFT_eSPI.h> // Graphics and font library for ST7735 driver chip
#include <SPI.h>

TFT_eSPI tft = TFT_eSPI();  // Invoke library, pins defined in User_Setup.h

unsigned long targetTime = 0; // Used for testing draw times
#include <Arduino.h>

#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>

#include <ESP8266HTTPClient.h>

#define USE_SERIAL Serial
#define SERVER_NAME "http://www.hmpg.net/" // put the host name here like http://www.google.com . this is an example that works :)
#define WIFI_SSID "BTHub3-4W5H"
#define WIFI_PASS "eecd3d758e"

ESP8266WiFiMulti WiFiMulti;

void setup() {

 tft.init();
 tft.setRotation(1);
 tft.fillScreen(TFT_BLACK);
 pinMode(D1, OUTPUT);
 pinMode(D4, OUTPUT);
 USE_SERIAL.begin(115200); // Init Serial comms

 // Clear Serial buffer
 USE_SERIAL.println();
 USE_SERIAL.println();
 USE_SERIAL.println();
 USE_SERIAL.println("Clearing Serial buffer...");
 for (uint8_t t = 4; t > 0; t--) {
   USE_SERIAL.flush();
   delay(1000);
 }

 // Add access point to WiFimulti
 WiFiMulti.addAP(WIFI_SSID, WIFI_PASS);

}

void loop() {
 // wait for WiFi connection
 if ((WiFiMulti.run() == WL_CONNECTED)) {
   digitalWrite(D4, HIGH);

   // configure and initiate connection with target server and url
   HTTPClient http;
   USE_SERIAL.print("[HTTP] starting...\n");
   http.begin(SERVER_NAME);

   USE_SERIAL.print("[HTTP] GET...\n");
   // start connection and send HTTP header
   int httpCode = http.GET();

   // httpCode will be negative on error. Success http code is 200
   if (httpCode > 0) {
     USE_SERIAL.printf("[HTTP] GET... code: %d\n", httpCode);

     // receive response from the Server
     if (httpCode == HTTP_CODE_OK) {
       digitalWrite(D1, LOW);
       // On successful connection
       USE_SERIAL.print("[HTTP] Received HTML...\n");
       String payload = http.getString();
       USE_SERIAL.println(payload);
       USE_SERIAL.println(payload.length());
       USE_SERIAL.flush();
       tft.setTextSize(0);

       tft.setTextColor(TFT_GREEN, TFT_BLACK);
       int textline = 0;
       int howmuch = 0;
       int i = 0;
       for (int z = 0; z < payload.length(); z++) {


         for (i = 2; i < 33; i = i + 1) {


           tft.drawChar(payload.charAt(i + howmuch), i * 7, textline, 1);

         }
         howmuch = howmuch + i;
         textline = textline + 9;
       }
     } else {
       USE_SERIAL.printf("[HTTP] GET... failed, error: %s\n", http.errorToString(httpCode).c_str());
     }

     http.end();
     delay(1000);
     digitalWrite(D1, HIGH);
   }
   // 10 second delay, since we don't want to overload the target Server
   else digitalWrite(D4, LOW);
   delay(10000);
 }
}


                                                                                                                                                         ```

Hello,

didn't you get a warning from the forum's software that you needed to use code tags if you are posting code? if so, why did you ignore it?

do yourself a favour and please read How to get the best out of this forum and modify your post accordingly (including code tags and necessary documentation for your ask).

Hi, I've used code tags but it hasn't formatted it properly, random code is placed in separate code tags

please edit your post, remove the wrong back quotes
Then select each code parts and press the </> icon in the tool bar to mark it as code. It's barely readable as it stands. (also make sure you indented the code in the IDE before copying, that's done by pressing ctrlT on a PC or cmdT on a Mac)

are you trying to write an HTML interpreter ? it's a huge task...

pretty much. i have a lot of time to spend on this project and i understand there is 142 tags in html and have sd card readers to store code in if it ends up being too big for the beefy esp8266

You probably need to start from the HTML DOM...

Once you have this model, then you can traverse that tree to decide what to paint where...

it's super ambitious (not to mention CSS and Javascript) - not even sure it will fit in your ESP's memory.

1 Like

thanks, that's just the documentation I was looking for! ill look into it and see if i can get my head around how the html elements work, and how i can emulate it with tft_espi functions

lucky ive got a micro sd shield

it's a lot... if you are just discovering this, be ready to be overwhelmed by how complex the web has become..

may be you can dig into web browsers that run in a terminal and find their GitHub

for example Lynx displays only the text part of a Web page and ignores images, video, etc. Could be a start

it will be then super slow :slight_smile:

that sounds good, would my http.get code be able to pull the html from those browsers though ? it would make everything alot easier if it can. ill start testing

I.E. a web browser

you don't get html from a browser, you get an answer from an HTTP server

if you don't know this, then you probably need to first read about the HTTP protocol...
see HTTP - Hypertext Transfer Protocol Overview

:+1:

yeah they do even more than interpret HTML those days, so I was trying to aim "low" :slight_smile:

A SAX parser may be easier to implement than a DOM parser, with less memory requirements and simpler structure of the returned information.

It allows to skip tags that can not (yet) be shown. This allows to implement display elements and attributes one by one.

currently i get this lovely mess of html pushed to the display, but its getting close ish, and just about gives you the information the web page is trying to convey:


by using dom or sax it will be even clearer. the web page that its trying to show is http://www.hmpg.net/

you can envision that too. At some point you need to compute the geometry of the layout and its elements based on the render tree though. having thus already a tree representation helps with performance.

Do you know how to write a webpage? I’ve got an impression your are starting from the wrong end.

i know the basics of html tags and their functions, and how they manipulate text, but i am still learning. my aim is just to get pure text across, so I'm mainly just trying to strip away the html tags so that its easy to read on my display. by using charAt() i can scan through my string containing the html for tag signs "<" then use str.replace() to remove the tag

or use the b (break) and p (paragraph) tags to make the text better readable on your display.