MicroPython Forum (Archive)

Posted: **Fri Mar 06, 2020 9:50 am**

Hi,

I am trying to display a logo on a html page.
The code is on main.py

<h1>PHLOX Web Server</h1> 
    <img src="logo.jpg" alt="logo Phlox">
    <li><a href="#Res">RESEAU</a> ;</li>
    <br>

I loaded the image with main.py and boot.py
I guess the image is not at the right place or I should add a path to find it but I don't know how?

Thanks for your help

Chris

Posted: **Fri Mar 06, 2020 10:18 am**

hi,

Which web server are you using? You'll need to handle the request for /logo.jpg and return the contents of the file from the filesystem (i assume you're already doing this for the html file?)

Posted: **Fri Mar 06, 2020 10:53 am**

Hi Jimmo,

I don't use a web server just html code see below :

Code: Select all

  html = """
  <!DOCTYPE html>
  <html>
  <head> 
    <title>Phlox Web Server</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:,"> 
    <style>html{font-family: Helvetica; display:inline-block; margin: 0px auto; text-align: center;}
    img{margin-bottom:40px;}
    h1{color: #0F3376; padding: 2vh;margin-top:40px;margin-bottom:40px;}
    h2{margin-top:40px;margin-bottom:40px;}
    li{margin-top:40px;margin-bottom:40px;}
    p{font-size: 1.5rem;}
    .button{display: inline-block; background-color: #e7bd3b; border: none; border-radius: 4px; color: white; padding: 16px 40px; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}
    .button2{background-color: #4286f4;}</style>
   </head>
   <body>
    <h1>PHLOX Web Server</h1> 
    <img src="logo.jpg" alt="logo Phlox">
    <li><a href="#Res">RESEAU</a> ;</li>
    <br>
    <li><a href="#Lum">GESTION DES ECLAIRAGES</a> ;</li>
    <br>
    <hr>
    <h2 id="Res">RESEAU</h2>
    <br>
    <hr>
    <h2 id="Lum">GESTION DES ECLAIRAGES</h2>
    <br>
    <p>ECLAIRAGES: <strong>""" + gpio_state + """</strong></p>
    <br>
    <p><a href="/?led=on"><button class="button">ON</button></a></p>
    <p><a href="/?led=off"><button class="button button2">OFF</button></a></p>
   </body>
   </html>"""
  return html

In html to display an image, you are supposed to use <img src="image"> if the image is the same folder than the code.
Here they are in the same place but not in a folder see below

iMac-4:~ Chris$ ampy ls
/boot.py
/logo.jpg
/main.py

Thanks

Chris

Posted: **Fri Mar 06, 2020 3:36 pm**

ChrisB wrote: ↑
Fri Mar 06, 2020 10:53 am

I don't use a web server...

That's not going to work... you need an http server.

Posted: **Fri Mar 06, 2020 4:28 pm**

why?
I can display an html page but I cannot attached an image to it without a web server ?
Quite strange...
I tried to use a web server but they are too heavy, you need to freeze them within the module folder inside the esp32 port and flash the firmware.
I could not achieve to do it using my iMac ...
Since I only want to display 1 html page I thought it would be easier to do it without web server ...

Chris

Posted: **Fri Mar 06, 2020 4:39 pm**

All you seem to be doing is dumping your html to the standard output. That is not the same thing as serving a web page to a browser over the network.

Posted: **Fri Mar 06, 2020 11:16 pm**

You can base64 encode an image and embed it in the html. Saves multiple http requests.
Still need a http server to send the html to a browser.

Which web server did you try, which was considered too heavy?
We might be able to suggest some alternatives.

Posted: **Mon Mar 09, 2020 5:56 am**

I tried MicroWebSrv2.
I could not load any pages with it, too heavy...
I was told to freeze it but I was never able to do it.
Thanks

Chris

Posted: **Wed Mar 11, 2020 7:02 am**

No "light" web server to suggest?

Thanks

Chris

Posted: **Mon Mar 16, 2020 5:06 am**

microdot --- https://github.com/miguelgrinberg/micro ... es/gpio.py

It has a nice demo in the examples folder that shows how to serve a file from the filesystem.

MicroPython Forum (Archive)

Display image on a html page from main.py

Display image on a html page from main.py

Re: Display image on a html page from main.py

Re: Display image on a html page from main.py

Re: Display image on a html page from main.py

Re: Display image on a html page from main.py

Re: Display image on a html page from main.py

Re: Display image on a html page from main.py

Re: Display image on a html page from main.py

Re: Display image on a html page from main.py

Re: Display image on a html page from main.py