Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

User avatar
By josephchrzempiec
#83098 Hello let me rephrase what I was trying to say i even got a little confused by saying dynamic pages. I didn't understand sorry about that.

What I'm trying to do is i know without some type of SD card to host files like images or html pages it is impossible to do with the Esp8266. Ruby helped me before with finding a arduino sketch that has multiple pages on it. Thank you for that.

Code: Select allstatic const char PROGMEM EXAMPLE_HTML[] = R"rawliteral(
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                color: #434343;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                font-size: 14px;
                line-height: 1.42857142857143;
                padding: 20px;
            }

            .container {
                margin: 0 auto;
                max-width: 400px;
            }

            form .field-group {
                box-sizing: border-box;
                clear: both;
                padding: 4px 0;
                position: relative;
                margin: 1px 0;
                width: 100%;
            }

            form .field-group > label {
                color: #757575;
                display: block;
                margin: 0 0 5px 0;
                padding: 5px 0 0;
                position: relative;
                word-wrap: break-word;
            }

            input[type=text] {
                background: #fff;
                border: 1px solid #d0d0d0;
                border-radius: 2px;
                box-sizing: border-box;
                color: #434343;
                font-family: inherit;
                font-size: inherit;
                height: 2.14285714em;
                line-height: 1.4285714285714;
                padding: 4px 5px;
                margin: 0;
                width: 100%;
            }

            input[type=text]:focus {
                border-color: #4C669F;
                outline: 0;
            }

            .button-container {
                box-sizing: border-box;
                clear: both;
                margin: 1px 0 0;
                padding: 4px 0;
                position: relative;
                width: 100%;
            }

            button[type=submit] {
                box-sizing: border-box;
                background: #f5f5f5;
                border: 1px solid #bdbdbd;
                border-radius: 2px;
                color: #434343;
                cursor: pointer;
                display: inline-block;
                font-family: inherit;
                font-size: 14px;
                font-variant: normal;
                font-weight: 400;
                height: 2.14285714em;
                line-height: 1.42857143;
                margin: 0;
                padding: 4px 10px;
                text-decoration: none;
                vertical-align: baseline;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1 style="text-align: center;">Wifi Details</h1>
            <form method="post" action="/">
                <div class="field-group">
                    <label>SSID</label>
                    <input name="ssid" type="text" length=32>
                </div>
                <div class="field-group">
                    <label>Password</label>
                    <input name="password" type="text" length=64>
                </div>
                <div class="button-container">
                    <button type="submit">Save</button
                </div>
            </form>
        </div>
    </body>
</html>
)rawliteral";


Second part is

void handleExample() {
webserver.send(200, "text/html", EXAMPLE_HTML);
}

and the last part is

webserver.on("/example", handleExample);


What I'm trying to do is Automate this a little and make able to create newer pages without having to go into the code and create more code by hand.


From what I'm seeing Posted by you Ruby is a FSBrowser sketch. and Reading about it will let me load files like html pages and images. But doesn't that require a Sd card module? Looking at the code there is not anything for a Sd card? Sorry still new to the whole coding world. My area in skills is hardware love building it and making it work. Love taking something old and making something new out of it.


Joseph
User avatar
By rudy
#83102 An ESP8266 module that has 4MB of flash can only use 1MB of it at a time. There are different options for splitting up the remainder of the flash and one use is to use it as a file storage device. One popular option is to use 1MB for the code space and 3MB for the SPIFFS. (SPI Flash File System)

There also now is a second file system option for the ESP8266 Arduino framework called LittleFS.

https://arduino-esp8266.readthedocs.io/ ... d-littlefs

The FSBrowser.ino example server uses the files in the flash file system used to generate the web pages. There also is a mechanism to upload new files to it.

Have a look at this version of the FSbrowser.

https://github.com/gmag11/FSBrowserNG

It has combined a few useful libraries into one, making it a more complete solution.

When I did tests with web pages served from SD card, and the same web pages served from SPIFFS, the SPIFFS was faster. With the SD card the bits are transferred one bit at a time where the Flash can be accessed 4 bits at a time. (depending on the configuration at compile time). As long as you can live with the smaller space available with SPIFFS I consider it a prefered method.

When you compile and load the FSbrowser code you set the size of SPIFFS. Loading the contents of the SPIFFS is done as a separate step initially. Once the code and file system contents has been loaded, you can then do the file transfers through the webpage. http://ip_address/update
User avatar
By josephchrzempiec
#83105 So basically i can run a small webserver with a few small size KB images and a couple of html pages with no problem. The problem i have is i do not have a SD card module. The other problem is all my pins that I'm using are being taking up and no SPI pin available. The last problem is i do not have any room for a SD card module.

All i really wanted to do is host two pages and a few small images and now I know i can host it on the ESP8266 I will try it out. Thank you.
User avatar
By rudy
#83106 They don't have to be small image. I had tested with different sizes and I used 1MB sized image. Of course it takes longer to load than a 50K image.

One thing to note when using the ESP8266 as a server. It can only handle a few connections at the same time. If you had ten files that needed to be used to generate the page, then some of those connections will be refused, and will need to wait. Browsers look at what is needed to generate the page and will fire off multiple requests for those files expecting a server with greater resources.

If you are using html plus javascript and css, it is beneficial to have them all included in the same file. If they are all part of the html file then that is counted as one connection. If they were separate files then it would be three connections. I don't know the current number but I think the default is four or five tcp connections that the ESP8266 Arduino framework can handle at the same time.

The webpage code can be written to control the number of same time requests that the browser will make. I know it can be done. I looked into it a while back but never got around to figuring out the method.