Showing a bitmap on html page possible?

#1

Hi

I have the esp32 board and I’m writing a wheather station with it.
It all goes well , but now I like to know if it is possible to import a bitmap on sdcard , so that it can be used
with html code

In html it looks like this:

< img src="./moon.jpeg" width="30px" height=“30px” >

The problem I think is to specify the image source
I could send the html code with a

(princ "< img src="./moon.jpeg" width="30px" height=“30px”  >"  s)

But how to specify the source of the image ?
Can this be done anyway ?

Thanks for any advice

Ronny Suy

#2

You need to encode the image data using Base64 encoding. Here’s an example that transfers a PNG image of a red dot and displays it on a web page:

(defun webpage ()
  (loop
   (with-client (s)
     (loop
      (let ((line (read-line s)))
        (when (null line) (return))
        (print line)))
    (println "HTTP/1.1 200 OK" s)
    (println "Content-Type: text/html" s)
    (println "Connection: close" s)
    (println "" s)
    (princ "<!DOCTYPE HTML><html><body><h1>ADC Value: " s)
    (princ (analogread 0) s)
    (princ "<img src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA" s)
    (princ "AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO" s)
    (princ "9TXL0Y4OHwAAAABJRU5ErkJggg==' alt='Red dot' />" s)
    (println "</h1></body></html>" s)
    (println "" s))
   (delay 5000)))

There are several web sites that will convert an image to Base64 for you, or you could try using my uLisp base64 function on the Wi-Fi examples page (I haven’t tried it).

An alternative to serving the images from the ESP32 would be to host them on an external site, and include a reference to them in your server HTML.

#3

Hi David

Thanks !
If I choose a small jpeg and do a conversion online , then I get a rather long string.
Is this correct ? And can I just copy paste this long string into 1 (princ …) instruction , or do I have to cut it into pieces ?

Kind regards , Ronny

#4

Hi Ronny,

The number of characters in the Base64 string will be 4/3 times the size of the file in bytes. GIF would be a better file format as it tends to give smaller files. In theory you can paste it the string into one princ instruction, as uLisp doesn’t have any limit on the length of strings it supports, but uLisp may run out of memory allocating space for such a long string so it might be safer to break it into pieces. Some Base 64 converters split the string up into pieces for you.

Try it!

Regards, David

#5

Hi David

I’ve tried several sites and they all work !
It works like a charm.

I have 1 remaining question: Is it also possible to use something simular using sd-card.
Because it consumes some memory, and maybe this can avoided with an sd card.

Regards ,
Ronny Suy

#6

Yes, you could read the Base 64 string encoding for the image from an SD card, and it won’t take up memory in uLisp. You could also store the actual image on the SD card, and Base 64 encode it each time you use it using the uLisp function for Base 64 encoding.

David

#7

Yes ok, but … how ??
I don’t have any idea how to do this
Hope you don’t mind my question

Ronny

#8

Presumably you’ve already converted your image to Base 64 encoding. On your computer save this into a text file, and copy the file onto the SD card; call it something like: image.txt.

Put the SD card into the SD card socket on your ESP32 board. Now in the (webpage) function, instead of the princ statements to print the image data to the stream you would put something like:

(with-sd-card (sd "image.txt")
  (loop
    (let ((data (read-line sd)))
      (when (null data) (return))
      (princ data s))))

So this would read each line from the SD card and write it to the web stream.

You would either need to princ the HTML each side of the data:

<img src='data:image/png;base64,

or you could include this in the file.

I haven’t had a chance to test this, so please let me know if it works.

#9

Hi David

I have successfully implemented images on my website.
I used your construction as above:

(with-sd-card (sd "image.txt")
  (loop
    (let ((data (read-line sd)))
      (when (null data) (return))
      (princ data s))))

This piece of code is running inside a (with-client (s) form.
Image.txt is a file on sd-card which contains a text in base64 which is the image (giff, bmd, tiff or whatever) converted to base64 and added with html tags.

I have an image of lets say a first quarter image of the moon and the contents of the file look like this :

<img src='data:image/gif;base64,R0lGODlhgACAAPUAAC8vLzAwMKeGI6eFJKiFI6mGI6yJI62KI6+LIq
+LI6uIJKyIJLGLIrONI7SOI7SPI7aQI7mSIruUIr+WIcmeH8qeH8+iH9GiH9GjH9KkH9SlH9amH9
ioHtuqH9yqHt6tHt+tHuGvHuOwHeezHem0HOi0He23HO+5HPe+G/C6HPG6HPO8HPS8HPi/G8GXIM
GYIMabIMacIMidIMufIM+hIPzCG/nAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAD
cALAAAAACAAIAAAAb/wJtwSCwaj8ik8gZoOpu1KKoEIpVcy6x2y+16j89wOEou204sEejLbru/4v
i4TDerTJ23ft+W+591gXQrKiR8h4hFf4tOgo5lLSYiiZRujJcAj5pkKyOVn1qYmJukNSiGoKlEoq
KlpSyoqpWsrK6uLCWyiLS0tradunq8vb6uNibBbMO8xb4oIclcy8zNtsfRWdPU1bYq2Ejaw9zFKp
7fQ+Hi474t0Ofp6uu+scnw8fK2LNH29/iu3rr49fNXqoUsgQMJktIHCmFChZvo7XK4DaItdxMpEr
Noq4W5QxorciwFkE9IkSNJlXxzEmXKTchYttz4spSNNZZm1qppC0VO/52teNqK6QUoTaGbbHyUZj
Qo0lIrijZ1+pTU0mxTR1V9xTTrpa2uJCbxqhXsJoZLyJY1q0msEbVf2Z5NC5eRXJVK6tq9qykqOL
2L+G6aBAbwH8GaiCoy7AfxI4NvGTd27OgqE8lyKDtaKQRzZs2B0Hb2HAe0oDzoSIsxHUix6tWs6f
hM/bpRbDO0a0O5XebDaN27eUchDNy28BoMiwcXfuI38ONRbDjXDT2KBOXLhYvAnql6C+7Va3wAX7
0EeegozkNXf5y9cPe84d+WH5u+6fTYw4+wD3p8fu/8aTbJf9BNcFlx1Ul34HPQNbcgddAlp1x1xE
0InW/TvQadghmqhv/eKgge51qIwqGWm4bCidahZ8dx9qCHwln2Iou8QRZZbcIpBiKOvBFWGIqx+f
UXkKy5uBiMrKn4I2m3uXUjjaYpOSSUoDm5pGRJdoGkZjLmRaVjRtKFGWhKKTOmZjpqiSVls/WxJm
I3CcMYZWmaCZhjKWRUF2JhuqmXYB5RcidfGCXy511W7rGnXFIaqpZcQqryqFl9zuKVWY2mculWiW
o6VVUt+PhOU0+pkMs5R86EVKXfAMXTNaiOpepLz8SKVUgpwWrrrRSNpIIHu6rpkEWwBGsnPwqxUK
exXcHjzynMmuTsOsBEq+cy3ETSpbWKYusLCyt0yi1IRzligwonYDgYbqtxBXIGCiIUuq6xn9XQAg
lVlPDCvEEAADs='/>

The html tags added are in the beginning of the file: <img src=' and at the end '/> (mind the single quotes !)

The image was a gif file of 128x128 pixels.

I use this website url to convert the image to base64 :

You can do a lot of conversions on this site, and the advantage of this site is that you can split the base64 string into smaller chunks of lines. This way it looks nicer on your editor.

After the conversion you can copy/paste the string into a text editor, add the tags as described above, and save it to sd-card on the pc.

Hope someone finds this useful.
Greetings Ronny Suy