load web files from filesystem #22892

ChrisVonFrosta · 2025-01-28T03:41:47Z

ChrisVonFrosta
Jan 28, 2025

is it possible to load "normal" formated styles.css or somthing like that from filesystem?

s-hadinger · 2025-01-28T08:56:15Z

s-hadinger
Jan 28, 2025
Collaborator

You need to be more specific, otherwise the response is "it depends"

3 replies

ChrisVonFrosta Jan 28, 2025
Author

You're absolutely right - as always ;)
Among other things, I would like to be able to load a styles.css or script.js in HTML. The inline inserts with line-by-line single quotes are very cumbersome for me. I naively tried triple quotes (""") like in Python for multiline strings, but of course, that didn't work.

Maybe something similar or the same: Loading an image from the filesystem into HTML, for example as a background. I managed to do it with <img src='http://192.168.170.120/ufsd?download=/pfeil.png', but I suspect there's a better solution?!

In principle, I want to achieve an arrwor for wind direction, like the following example :

Plain test HTML:

index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Windrichtung</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="wind-container">
        <div class="wind-arrow" id="windArrow">
            <!-- <img src='http://192.168.170.120/ufsd?download=/pfeil.png'" -->
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

styles.css

// script.js
function updateWindDirection(degrees) {
    const windArrow = document.getElementById('windArrow');
    windArrow.style.transform = `translate(-50%, -50%) rotate(${degrees}deg)`;
}

script.js

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.wind-container {
    position: relative;
    width: 50%;
    height: 100vh;
    background-image: url('hintergrundbild.png'); /* Pfad zum Hintergrundbild */
    background-size: cover;
    background-position: center;
}

.wind-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-image: url('http://192.168.170.120/ufsd?download=/pfeil.png');  /* Pfad zum Pfeilbild */
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(0deg);
}

use updateWindDirection(angle) in browser cosole to rotate.

With inline styles, the test example works:

webserver.content_send(
          "<div class='wind-container' style='position: relative; width: 100%; height: 100vh; '>"
          "    <div id='windArrow' class='wind-arrow' style='position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background-image: url('http://192.168.170.120/ufsd?download=/pfeil.png'); background-size: contain; background-repeat: no-repeat; transform-origin: center; transform: translate(-50%, -50%) rotate(0deg);'>"
          "       <img src='http://192.168.170.120/ufsd?download=/pfeil.png'"
          "     </div>"
          "</div>"
          "<script>"
          "    function updateWindDirection(degrees) {"
          "        const windArrow = document.getElementById('windArrow');"
          "        windArrow.style.transform = `translate(-50%, -50%) rotate(${degrees}deg)`;"
          "    }"
          "</script>"
        )

But the "background.png" is already too large for the internal memory (Lilygo T3 v1.6.x). Is there any documentation for accessing files from the SD card?

s-hadinger Jan 29, 2025
Collaborator

Unfortunately there is no direct support for serving content stored in file-system. It should not be too hard to implement using simple Berry code. But I won't be able to explore in the short term.

sfromis Jan 30, 2025

@s-hadinger AFAIK, there should be support for serving filesystem content, with #define UFILESYS_STATIC_SERVING and command UFSServe (btsimonh was sneaky with some changes #19014 b1cc87d )

Tasmota/tasmota/tasmota_xdrv_driver/xdrv_50_filesystem.ino

Lines 26 to 30 in 9d963ce

    
           // Enables serving of static files on /fs/ 
        
           // costs 1844 bytes of flash and 40 bytes of RAM 
        
           // probably not useful on esp8266, but useful on esp32 
        
           // You could serve a whole webapp from Tas itself. 
        
           //#define UFILESYS_STATIC_SERVING

I wanted to try it out, but unfortunately, build fails

/tasmota/tasmota/tasmota_xdrv_driver/xdrv_50_filesystem.ino:1046:10: error: 'bool StaticRequestHandlerAuth::handle(WebServer&, HTTPMethod, String)' marked 'override', but does not override
 1046 |     bool handle(WebServer& server, HTTPMethod requestMethod, String requestUri) override {
      |          ^~~~~~

wjohn007 · 2025-01-30T17:00:58Z

wjohn007
Jan 30, 2025

A working UFILESYS_STATIC_SERVING would be really helpful.

The proposed solution with Berry only allows small files to be served,
as these must first be read completely by Berry and thus use up a lot of memory.

In the meantime, the attached FileServer class might help.
More information in the comments of the file.
FileServer.zip

I used that in the following application

1 reply

sfromis Jan 30, 2025

I think that it could also be feasible with redirects to links like what was used in the above.
http://192.168.170.120/ufsd?download=/pfeil.png
The webserver module has a redirect method for setting location and status 302.

That should avoid the path through Berry code, and still be workable with standard browser handling of relative URL for same-site references like /assets/pfeil.png, when the URL format with a query string is not workable.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

load web files from filesystem #22892

{{title}}

Replies: 2 comments 4 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

load web files from filesystem #22892

ChrisVonFrosta Jan 28, 2025

Replies: 2 comments · 4 replies

s-hadinger Jan 28, 2025 Collaborator

ChrisVonFrosta Jan 28, 2025 Author

s-hadinger Jan 29, 2025 Collaborator

sfromis Jan 30, 2025

wjohn007 Jan 30, 2025

sfromis Jan 30, 2025

ChrisVonFrosta
Jan 28, 2025

Replies: 2 comments 4 replies

s-hadinger
Jan 28, 2025
Collaborator

ChrisVonFrosta Jan 28, 2025
Author

s-hadinger Jan 29, 2025
Collaborator

wjohn007
Jan 30, 2025