logo elektroda
logo elektroda
X
logo elektroda
Advanced Search
logo elektroda

ESP01, GCC, Eclipse - how do I conveniently upload extended HTML with multiple quotes?

zbynio_k 690 12
ADVERTISEMENT
Treść została przetłumaczona polish » english Zobacz oryginalną wersję tematu
Report a violation of the law
Reply | New topic
  • #1 21541069
    zbynio_k
    Level 10  
    Posts: 169
    Rate: 2
    Hello.
    I am programming in gcc on Eclipses.
    I have set up a web server on ESP01, I think complete.
    I am able to send data to the websocket, to the browser, via the function
    websocket_write_all(buf, strlen(buf), WEBSOCKET_TEXT);

    as the HTML code of the page is defined
    #define HTML_INDEX_PAGE sent by function
    http_send_string(con, HTML_INDEX_PAGE, "text/html");

    The problem arises when I want to define HTML_INDEX_PAGE as the code of a more extended page, there are a lot of inverted commas in the code which effectively prevents me from defining the HTML code as a string.

    Please give me a hint on how I should send the extended HTML code to the browser.
    I am attaching screenshots and details/body of the function in the attachment.
    Regards

    edit - there are tons of examples for the Arduino IDE on the web.
    edit2 - code for ESP in NOTA and NONOS, important !

    Screenshot of a browser displaying a simple HTML page from ESP01, with Polish messages about websocket connection and a list of counters and times. .
    Screenshot of a web page for testing data send and receive with Wemos-D1 mini PRO, featuring DIRECT-1 and DIRECT-2 buttons and selection fields. .
    Attachments:
    • załącznik.txt (1.55 KB) You must be logged in to download this attachment.
  • ADVERTISEMENT
  • #2 21541115
    JacekCz
    Level 42  
    Posts: 8670
    Help: 760
    Rate: 1460
    Chaos. I completely fail to understand what you want.

    The #define is not (although I know silly monkey-copy examples prefer it) the best means of defining constants or variables

    And already #define in #define it can't end well

    Where is this supposedly mature webserver, if you are still looking terribly low-level and proudly tapping code as if it doesn't exist?
    The mythical webserver is supposed to free you from just such nonsense, and has it documented for the user
  • ADVERTISEMENT
  • #3 21541122
    zbynio_k
    Level 10  
    Posts: 169
    Rate: 2
    1. low-level because the web server code is in gcc
    2. the HTML text in the example as #define - I don't see a problem

    in one sentence > how to send the HTML page code to the browser as a STRING ?
  • #4 21541133
    JacekCz
    Level 42  
    Posts: 8670
    Help: 760
    Rate: 1460
    zbynio_k wrote:
    in one sentence > how to send the page code in HTML to the browser as a STRING ?
    .

    In one sentence: you send correctly (assuming there's no <gt> there, but probably not).

    You just don't understand what a C-string is in itself (any sequence of characters up to \0 ) , and what a string literal (a record of a constant in the language) differs from it.
    Unfortunately, programming IS FULL of differentiated abstractions, and doing something more complicated and not differentiating we have a problem.

    zbynio_k wrote:
    the web server code is in gcc
    .
    Give a link, because I don't know

    Added after 27 [minutes]:

    zbynio_k wrote:
    #define - I don't see a problem
    .

    And I have seen many problems
  • ADVERTISEMENT
  • #5 21541179
    zbynio_k
    Level 10  
    Posts: 169
    Rate: 2
    I will try to be less chaotic, more to the point

    1. maybe I'm not super proficient in C(gcc) but I've always defined an ASCII text variable like this
    uint8_t *name ={"ESP_MASTER"}; or
    uint8_t name ={"ESP_MASTER"};
    or char instead of uint8_t

    and there is no problem with such an ASCII character string

    2. in the example page, ESP sends an ASCII string

    "<!DOCTYPE HTML><html><head>OK > is HERE: #define HTML_INDEX_PAGE</head><body><div style='width: 400px; height: 800px; overflow:auto;' id='wdata'></div><script src='websocket_test.js'></script></body></html>"
    so the theme is simple,

    3. I want to send the HTML code of the page (attached) to the browser and it seems to me that this way is not possible

    4. link to the "erected" web server
    https://github.com/zyperpl/esp8266-websocket-server

    By the way, I'm programming AVR's and I'm just getting into ESP
    but I have made a few working projects
    clocks of various sorts with time synchronisation after NTP, weather stations, communication after esp_now ...

    edit - maybe you can suggest how to do it
    Attachments:
    • page3.rar (1.78 KB) You must be logged in to download this attachment.
  • #7 21541238
    zbynio_k
    Level 10  
    Posts: 169
    Rate: 2
    so far, thanks
    I see that sending html code to the browser is not that simple
    unless there is another method than sending an ASCII string ?
  • #8 21541385
    miszczo997
    Level 28  
    Posts: 1052
    Help: 134
    Rate: 159
    Use makefsdata, which will generate arrays for you from your file package to the server.
    This is more or less what it looks like
    https://github.com/plawnik/stm32f407_live_chart/tree/main/socket_test/LWIP/App
    The www contains the files you want to put on the server, the fsdata_custom.c file is an array file system.
    If you are working on windows look for the makefsdata.exe utility, it should be available somewhere with examples from ST. You'll also need some dll which you need to put in the same folder as the tool, I can't remember which one it was exactly anymore, but I think it was something from netframeworks - you'll get a message about a missing dll file when you try to use the tool. You'll get the resulting file when you drag a bunch of server files onto the exe file.
    If you're running Linux, there's a perl script available from makefsdata.co.uk that you should be able to run without any problems.
  • #9 21541395
    fred_onizuka
    Level 19  
    Posts: 267
    Help: 37
    Rate: 94
    In HTML code, various unusual characters can be written as codes. There are several versions of how to write such characters, e.g. inverted commas are "&_#_34_;" or "&_quot_;" (I had to add the underscore characters "_" because they could not be written otherwise here).
  • Helpful post
    #10 21541447
    miszczo997
    Level 28  
    Posts: 1052
    Help: 134
    Rate: 159
    I found my notes on how to automate this in eclipse on windows, every time you compile, the contents of the www folder will be automatically generated into the fsdata.c file. You have to customize for yourself under your project, I used this with stm32.
    Code: text Expand Select all Copy to clipboard
    1. Project->properties->C/C++ Build->Settings->Build Steps->PreBuild steps->Command
cmd /c "..\utils\makefsdata.bat"
2. Copy makefsdata.exe to main project folder, add msvcr100d.dll if needed to this same location
3. Make script in this same location ->makefsdata.bat
SET "mypath=%~dp0"
echo %mypath:~0,-1%
"%mypath:~0,-1%\makefsdata.exe" "%mypath:~0,-1%\stronaWWW"
move fsdata.c "%mypath:~0,-1%\Middlewares\Third_Party\LwIP\src\apps\httpd"
4. Tune folders with source, and output file
    .
  • ADVERTISEMENT
  • #11 21541719
    JacekCz
    Level 42  
    Posts: 8670
    Help: 760
    Rate: 1460
    fred_onizuka wrote:
    quotation marks are "&_#_34_;" or "&_quot_;"
    .


    We are still waiting for the mythical HTTP server code that is supposedly included in GCC. Such recoding is a primer.
    Unless it's typical arduino code copied from weak programmers by weak programmers.

    ESP already has enough computing power to do this without strange compromises, and my intuition tells me that there is a high quality (i.e. standards-holding) yet simple http server in the ecosystem

    Added after 12 [minutes]:

    zbynio_k wrote:
    send html code to browser
    .

    Even the term itself lets you in on the mailny.
    It's not the sending itself, but the SECOND phase of the request-response cycle, and any quality HTTP server will do it right (including the first one)
  • #12 21544559
    zbynio_k
    Level 10  
    Posts: 169
    Rate: 2
    thanks, I'm using eclipse with 03.25 and the options you showed are not there
    1. project->properties->C/C++ Build->Settings->Build Steps->PreBuild steps->Command
    I also cannot find the makefsdata.exe file on the internet

    but your hint led me to a clue > it is possible to convert e.g. online HTML text to HEX array

    I have displayed this array and ... works
    not as I would like because I send it as plain text
    I try sending as
    http_send_string(con, HTML_INDEX_PAGE, "text/html");

    Greetings
  • #13 21544649
    miszczo997
    Level 28  
    Posts: 1052
    Help: 134
    Rate: 159
    zbynio_k wrote:
    thanks, I'm using eclipse from 03.25 and those options you showed are not there
    1. project->properties->C/C++ Build->Settings->Build Steps->PreBuild steps->Command
    .
    It must 100% be in the options somewhere, look for it. If not then you can always manually fire it up by dragging the file package onto makefsdata

    zbynio_k wrote:
    I also cannot find the file makefsdata.exe on the internet
    .
    https://github.com/DuinOS/FreeRTOS/tree/maste.../httpserver_raw_from_lwIP_download/makefsdata

    zbynio_k wrote:
    I have displayed this board and ... works
    not as I would like because I send as plain text
    i will try sending as
    http_send_string(con, HTML_INDEX_PAGE, "text/html");


    You need to add the headers plus content type at the beginning of the array you created. Take a look at this example from github that I posted, the actual page starts with the raw data comment, before that you have all the extra data that needs to be sent beforehand that you can copy into your array for testing.
    As you run makefsdata it will be generated automatically.
Reply | New topic
Report a violation of the law

Topic summary

✨ The discussion addresses the challenge of serving extended HTML pages containing multiple quotation marks from an ESP01 web server programmed in GCC using Eclipse. The main issue is defining large HTML content as C strings due to embedded inverted commas, complicating direct string literal usage. Solutions include avoiding #define for large strings, understanding C string literals versus character arrays, and using external tools like makefsdata to convert HTML files into C arrays for embedding in firmware. The makefsdata utility automates generating filesystem data arrays from HTML files, facilitating HTTP serving without manual string escaping. Additional advice covers encoding special HTML characters as entities to avoid syntax conflicts. Integration of makefsdata into Eclipse build steps is suggested for automation, though some users report difficulty locating the tool or configuring Eclipse accordingly. References to existing ESP8266 websocket server projects and examples highlight practical implementations. The discussion emphasizes using filesystem-based approaches over raw string literals for serving complex web pages on resource-constrained embedded devices.
Generated by the language model.
Today's popular

FAQ

TL;DR: ESP8266 GCC/Eclipse devs: use lwIP makefsdata; a 4‑step pre‑build “automatically generated into the fsdata.c file” and avoids escaping quotes. Serve arrays with proper HTTP headers (Content‑Type: text/html). [Elektroda, miszczo997, post #21541447]

Why it matters: It removes fragile #define strings and prevents browsers from showing your HTML as plain text.

Quick Facts

How do I serve a long HTML page from ESP‑01 without escaping every quote?

Use lwIP httpd’s makefsdata to turn your /www folder into fsdata.c arrays and serve files by path. This avoids massive #define strings and brittle escaping. Automate it with an Eclipse pre‑build step so assets regenerate on every build. Then serve with correct headers and Content‑Type. As one expert put it, “Use makefsdata, which will generate arrays for you from your file package.” [Elektroda, miszczo997, post #21541385]

Can I just define HTML_INDEX_PAGE as a C string macro?

You can, but it’s hard to maintain and easy to break. Preprocessor #define for large content is discouraged. Prefer const data or a generated file table instead. That keeps your code readable and avoids nested macro pitfalls. A lightweight HTTP server should abstract these details for you. [Elektroda, JacekCz, post #21541115]

Does switching to C++ solve the quote problem?

Yes. C++11 (2011) added raw string literals, written as R"(…)", which keep quotes and newlines unescaped. C has no raw strings, so this only helps if you compile as C++. Enable C++11 in your toolchain and convert big HTML blobs to raw strings. This is a clean alternative when not using a file generator. [String and character literals (C++)]

How do I auto‑generate fsdata.c in Eclipse on Windows?

  1. Add a Pre‑Build step: Project > Properties > C/C++ Build > Settings > Build Steps; Command: cmd /c "..\utils\makefsdata.bat".
  2. Place makefsdata.exe and a makefsdata.bat script in your project; the script runs the tool on your www folder and moves fsdata.c into your httpd directory.
  3. Build. The www folder becomes fsdata.c on every compile. [Elektroda, miszczo997, post #21541447]

Where can I download makefsdata?

Grab the tool from lwIP httpd example repositories. In the thread, a GitHub path was shared containing makefsdata sources and the executable. Build it or use the provided exe for Windows. This gives you a simple way to package HTML, JS, and CSS into a single fsdata.c file. [Elektroda, miszczo997, post #21544649]

Windows reports a missing DLL when running makefsdata—what should I do?

Place the missing DLL (e.g., msvcr100d.dll) in the same directory as makefsdata.exe. The error dialog tells you which DLL is required. After copying, rerun the tool or your pre‑build step. This resolves the dependency and lets the generator produce fsdata.c correctly. [Elektroda, miszczo997, post #21541447]

I converted HTML to a hex array, but the browser shows plain text. Why?

You are likely sending only the body without HTTP headers. Prepend a valid status line and headers, including Content‑Type: text/html. Alternatively, call your helper that constructs headers for you. Without headers, the browser renders the payload as literal text. This is a common failure mode. [Elektroda, miszczo997, post #21544649]

How do I send the generated page with my existing http_send_string(...)?

Keep using http_send_string(con, HTML_INDEX_PAGE, "text/html"). Point HTML_INDEX_PAGE to your generated content or file‑based buffer. If your helper adds headers, you only supply the body and content type. This keeps your code simple and consistent with your current approach. [Elektroda, zbynio_k, post #21541179]

Can I replace double quotes with HTML entities like "?

Yes. HTML entities such as " or " render as quotation marks in the browser. They reduce the need to escape characters in C strings. Remember that entities are decoded by HTML, not by your C compiler. Avoid this inside embedded JavaScript strings. “Quotation marks are “"” or “"”.” [Elektroda, fred_onizuka, post #21541395]

How do I integrate fsdata.c with lwIP httpd?

Place the generated fsdata.c in your httpd app’s source tree. The server uses that in‑flash array as a tiny file system. Requests map to paths within the table and return the corresponding content. The example shows fsdata_custom.c as a working pattern. [Elektroda, miszczo997, post #21541385]

Does this work on ESP8266 NONOS with GCC in Eclipse?

Yes. You generate arrays and send them using your server’s send routine. The thread shows an ESP8266 project using http_send_string with a content type, which aligns with this approach. The method is toolchain‑agnostic and fits your current workflow. [Elektroda, zbynio_k, post #21541179]

I still want C strings—what’s the least painful way?

Use const char[] stored in flash and split content across adjacent string literals. Escape quotes as \" and prefer single quotes in HTML attributes to reduce escapes. Keep lines short and avoid macro nesting. Remember a C‑string is characters until the first \0. [Elektroda, JacekCz, post #21541133]

Eclipse doesn’t show a Pre‑Build hook—how can I proceed?

It exists; search within C/C++ Build > Settings. If you cannot find it, generate files manually. Drag your www folder onto makefsdata.exe to produce fsdata.c, then add it to your project and rebuild. This unblocks you immediately. [Elektroda, miszczo997, post #21544649]

How do I serve multiple assets like websocket_test.js and CSS reliably?

Put all site files under a www folder before running makefsdata. The tool packages the entire set into fsdata.c, so your server can deliver HTML, JS, and CSS by their paths. This keeps asset handling simple and consistent. [Elektroda, miszczo997, post #21541385]
Generated by the language model.
ADVERTISEMENT