Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Help displaying an image from file #318

Open
Hacking-Away opened this issue Oct 27, 2024 · 6 comments
Open

Help displaying an image from file #318

Hacking-Away opened this issue Oct 27, 2024 · 6 comments

Comments

@Hacking-Away
Copy link

Hacking-Away commented Oct 27, 2024 •
edited
Loading

This lib is great, I am only one day in and I have webpages with controls and all sorts showing up where before I was following a lot of tutorials dealing with raw HTML assembling and getting frustrated, fast..... but I feel like I must be missing something with ESPUI and images.

It seems the way to display an image is in a tag, per the docs.

In fact, because HTML can be used in the label's value, you can make a label display images by including an tag.

That's OK for images already accessible by http, but the images I want to display are in LittleFS.

I found #143 which seems to build up a string from a buffer - I don't completely understand if I need to do something like that, streaming the file from LittelFS with file.open and so on, or if - and this is what I hope is true - I missed something and it's built in, and I can just specify an existing file from LittleFS.

Help appreciated :-)
@Hacking-Away
Copy link
Author

Hacking-Away commented Oct 27, 2024 •
edited
Loading

In fact, this might be a file problem more than an image one because this also doesn't work for me:

ESPUI.fileDisplay("Filetest", ControlColor::Turquoise, "/test.txt");
test.txt reads OK elsewhere in code using this:

File file = LittleFS.open("/test.txt", "r"); 
 Serial.println("LittleFS testfile content:");
   while(file.available()){`
  Serial.write(file.read());
  }

But what I get on the webpage, in the file text box is

<!DOCTYPE html><html><head><title>Captive Portaletc which is obviously the wrong file or memory string and probably a good clue to what I am doing wrong.....

@Hacking-Away
Copy link
Author

Hacking-Away commented Oct 30, 2024 •
edited
Loading

Well.... i am displaying images sucessfully but it seems like a hack - i set up another asyncwebserver on port 81 and set the image URL in the label to http://myhostname.local:81/imagename

My second webserver just reads images from littleFS and makes them available on port 81.

Have i missed something obvious and there is a way to just call a littleFS file from the ESPUI label?

@zajac-grzegorz
Copy link

I am using the following code to display the image on the label component:

Image file located in: /app/re_logo.png on the LittleFS.

ESPUI.label("Status:", ControlColor::Turquoise, "<img src='app/re_logo.png' width='50' height='50'>");

and then:

AsyncWebServer* server = ESPUI.WebServer();
server->serveStatic("/", LittleFS, "/");

@Hacking-Away
Copy link
Author

Could you explain how that works please? My understanding is that the newly defined "server" will point to the same instance of the aynscwebserver object that is made by ESPUI....and then we are saying for requests to "/" to juse server the called image file. This doesn't screw up ESPUI internally?

Thanks I will try this way in the meantime.

@zajac-grzegorz
Copy link

Could you explain how that works please? My understanding is that the newly defined "server" will point to the same instance of the aynscwebserver object that is made by ESPUI....and then we are saying for requests to "/" to juse server the called image file. This doesn't screw up ESPUI internally?

Thanks I will try this way in the meantime.

Yes, exactly. The 'server' pointer will point to the instance of the AsyncWebServer created inside the ESPUI. Then you can attach other handlers to it, like i.e. 'servestatic'. Nothing will break.

@MartinMueller2003
Copy link
Collaborator

Just a note: By convention, the "/" endpoint should return an index.html file or nothing at all. You can add any other endpoints you like below that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@MartinMueller2003 @zajac-grzegorz @Hacking-Away