Pico W Web Server Question – Page 2 – Raspberry Pi

Inq

(@inq)

Member

Joined: 2 years ago

Posts: 1900

2022-08-20 10:15 pm

As far as how you would add an image to an HTML page, something like this is necessary.

<!DOCTYPE html>
<html>
<body>
  <h2>HTML Image</h2>
  <img src="flower.jpg" width="500" height="333">
</body>
</html>

It is just the one line. You can have many as you want sprayed out all over the place. Once this html file is delivered to the browser, the browser will detect that... Oh! you want to add a picture named flower.jpg, it will then request from the same server that file in a second request. When requested, your server will need to provide that file.

I'll fire this post off to get you started, but I'll need to look a Bill's example to see if I'm advising you consistently with Bill.

VBR,

Inq

3 lines of code = InqPortal = Complete IoT, App, Web Server w/ GUI Admin Client, WiFi Manager, Drag & Drop File Manager, OTA, Performance Metrics, Web Socket Comms, Easy App API, All running on ESP8266...
Even usable on ESP-01S - Quickest Start Guide

ReplyQuote

Inq

(@inq)

Member

Joined: 2 years ago

Posts: 1900

2022-08-20 10:20 pm

My Internet is terribly slow... < 100 kb/sec. Could you provide me a link to Bill's example code. If its only one of his YouTube, I don't have the bandwidth to watch it, but I could see the text of the code provide... in several minutes.

VBR,

Inq

P.S. - Thanks Ron for the plug. 😉 🙄

3 lines of code = InqPortal = Complete IoT, App, Web Server w/ GUI Admin Client, WiFi Manager, Drag & Drop File Manager, OTA, Performance Metrics, Web Socket Comms, Easy App API, All running on ESP8266...
Even usable on ESP-01S - Quickest Start Guide

ReplyQuote

Inq

(@inq)

Member

Joined: 2 years ago

Posts: 1900

2022-08-20 10:29 pm

@ewilson100, @zander - Re-reading your O.P., it appears to me that you are using a hard-coded web server.

client.println ("");

You have some logic that when you want some html page, you send back the above line and I'm assuming you know you need all the other like I showed above.

As I mentioned above, this simply tells the browser that you want to add an image. The browser is going to request for that arrl.jpg file, and you have to provide it.

3 lines of code = InqPortal = Complete IoT, App, Web Server w/ GUI Admin Client, WiFi Manager, Drag & Drop File Manager, OTA, Performance Metrics, Web Socket Comms, Easy App API, All running on ESP8266...
Even usable on ESP-01S - Quickest Start Guide

ReplyQuote

ewilson100

(@ewilson100)

Member

Joined: 2 years ago

Posts: 15

Topic starter 2022-08-20 11:36 pm

@zander Thanks again, Ron and Dennis...hopefully I can find some time tomorrow to work on this.

Ed

ReplyQuote

Ron

(@zander)

Father of a miniature Wookie

Joined: 3 years ago

Posts: 6965

2022-08-20 11:41 pm

@inq @ewilson100 FYI I was looking for information on this as well and on the nerds website saw a neat feature (see pics)I tried an ESP8266 and the same ESP32 they use but I don't have that 'Sketch data upload' feature. I created a data folder and put some images in beforehand. This seems like a nifty way to do this, why is it missing?

First computer 1959. Retired from my own computer company 2004.
Hardware - Expert in 1401, and 360, fairly knowledge in PC plus numerous MPU's and MCU's
Major Languages - Machine language, 360 Macro Assembler, Intel Assembler, PL/I and PL1, Pascal, Basic, C plus numerous job control and scripting languages.
Sure you can learn to be a programmer, it will take the same amount of time for me to learn to be a Doctor.

ReplyQuote

Inq

(@inq)

Member

Joined: 2 years ago

Posts: 1900

2022-08-20 11:55 pm

Posted by: @zander

@inq @ewilson100 FYI I was looking for information on this as well and on the nerds website saw a neat feature (see pics)I tried an ESP8266 and the same ESP32 they use but I don't have that 'Sketch data upload' feature. I created a data folder and put some images in beforehand. This seems like a nifty way to do this, why is it missing?

I can't even speak to the ESP32 with direct knowledge, it will depend on whether the Pico W has the ability to set aside some memory to use as a hard disk. On the ESP8266, we use either SPIFFs or LittleFS libraries. These set aside 3MB to act as a hard disk. Those libraries either SPIFFs or LittleFS supply that upload feature that integrates into the Arduino IDE so you can then upload any files HTML, jpg, png... etc to the ESP8266 "hard disk". By using those libraries, you have in essence created a computer with a file system.

You would have to see if someone has ported one of those to the Pico W.

And that would still not be the end of the work. That just uploads the files to ESP8266. You would have to have code in your sketch to recognize the Browser request for the image file and then fetch it off the disk and send it to the browser. This is all very code intensive.

If @ewilson100 is still with us and wants to serve an image on a web page, it can be hard-coded to return a specific image. It must be a small image of less than 32KB. Anything over 32KB gets very difficult. Let me know if you are still interested.

VBR,

Inq

3 lines of code = InqPortal = Complete IoT, App, Web Server w/ GUI Admin Client, WiFi Manager, Drag & Drop File Manager, OTA, Performance Metrics, Web Socket Comms, Easy App API, All running on ESP8266...
Even usable on ESP-01S - Quickest Start Guide

ReplyQuote

Inq

(@inq)

Member

Joined: 2 years ago

Posts: 1900

2022-08-21 12:08 am

@ewilson100, @zander - Here is an example web page that has the image data imbedded in-line of the HTML page. This is pretty much a minimal webpage. This is ONLY a 3KB image. You would have to put all this stuff into your println statements. You can try it out if you save this file on your computer and double click it. Your browser will load it and show you the image. If you still want to go through this painful way, let me know and I can help you convert your desired image to put in the <img> statement.

index.html

VBR,

Inq

3 lines of code = InqPortal = Complete IoT, App, Web Server w/ GUI Admin Client, WiFi Manager, Drag & Drop File Manager, OTA, Performance Metrics, Web Socket Comms, Easy App API, All running on ESP8266...
Even usable on ESP-01S - Quickest Start Guide

ReplyQuote

ewilson100

(@ewilson100)

Member

Joined: 2 years ago

Posts: 15

Topic starter 2022-08-21 12:12 am

@inq Yes, the image that I want to serve is hard-coded and is less than 32K. If there is a simple way to implement this, I would appreciate hearing how to do it. I cannot access my computer right now so I am sending this from my phone.

ReplyQuote

Inq

(@inq)

Member

Joined: 2 years ago

Posts: 1900

2022-08-21 12:39 am

Posted by: @ewilson100

@inq Yes, the image that I want to serve is hard-coded and is less than 32K. If there is a simple way to implement this, I would appreciate hearing how to do it. I cannot access my computer right now so I am sending this from my phone.

When you get a chance to look at the index.html example above, you'll see that the src= portion of the <img> statement, is now full of the actual data instead of the image file name. At the beginning, you'll see data:image/jpeg;base64. The binary data your jpg/png/etc can not be directly put into source code, so it has to be converted in a standard that can represent binary code. In this case base64. You can search on the Internet for an image to base64 converter, or use this one that I bookmarked years ago.

https://www.base64-image.de/

To Use:

Drag your image onto the drop zone on that page. Be aware you are uploading your image and I have no idea what they are doing with it besides converting it.
After it finishes uploading and converting, you'll see a </> show code button out next to your file. Click it.
Out next to the For use in <img> elements: version, you'll see a copy to clipboard button. Click it.
Paste it inside the double quotes of the following HTML, next to the src= field.
Save the file and try it out first on your development computer, before trying to hard-code it into the Sketch.
Break it up as necessary so that your client.println() statements can handle it. If you have to break-up the actual data portion into multiple statements, be away you can not use the println() as it adds a line feed. I'm assuming there is also a client.print() version also that does not add the line feed.

I don't do things this way, but for small images, this should work. Good luck!

VBR,

Inq

<!DOCTYPE html>
<html>
<body>
  <h2>HTML Image</h2>
  <img src="placeWithImageData">
</body>
</html>

3 lines of code = InqPortal = Complete IoT, App, Web Server w/ GUI Admin Client, WiFi Manager, Drag & Drop File Manager, OTA, Performance Metrics, Web Socket Comms, Easy App API, All running on ESP8266...
Even usable on ESP-01S - Quickest Start Guide

ReplyQuote

ewilson100

(@ewilson100)

Member

Joined: 2 years ago

Posts: 15

Topic starter 2022-08-21 1:18 am

@inq Thanks...I will give that a try tomorrow.

ReplyQuote

ewilson100

(@ewilson100)

Member

Joined: 2 years ago

Posts: 15

Topic starter 2022-08-21 11:36 am

Ok, Guys, I have decided that I will "bite the bullet" and attempt to figure-out the HTML code to serve a graphic of any reasonable size (keeping in mind that I am using a microcontroller) to a web browser on my local network. The two of you have pointed me to several examples and hopefully the "light will turn on" and I will find success.

I would again like to sincerely thank you both for taking the time to help me!

Ed Wilson

ReplyQuote

frogandtoad

(@frogandtoad)

Member

Joined: 5 years ago

Posts: 1458

2022-08-21 12:41 pm

@ewilson100

HTML coding is very easy...

...is the only tag you really need... but the most important question you need to determine is what is the correct path?

More than likely, it will be local to the index/default.html file, so once you work that out, you will be on fire! 😉

Cheers

Ron reacted

ReplyQuote

Inq

(@inq)

Member

Joined: 2 years ago

Posts: 1900

2022-08-21 2:04 pm

Posted by: @ewilson100

Ok, Guys, I have decided that I will "bite the bullet" and attempt to figure-out the HTML code to serve a graphic of any reasonable size (keeping in mind that I am using a microcontroller) to a web browser on my local network. The two of you have pointed me to several examples and hopefully the "light will turn on" and I will find success.

I would again like to sincerely thank you both for taking the time to help me!

Ed Wilson

The beauty of client side programming is any browser is your development environment. You can create your content, html/images all on your one computer and test them on that same computer. In that regard learn HTML is very easy. Drop these two files into any folder and double-click the html file and you have your client-side solution.

ShowImage.html

The problem is not the HTML code as I mentioned at the very beginning. It is simply one line. It is the way that it must be handled by the web server - Your Pico W.

All web servers are simple computers with file systems. When you browse to static pages on the Internet, you are simply "asking for a file" from some file server. It is the browser on your end that displays that file. Think of the browser as just another program that opens a file (MS Word - *.doc, MS Excel - *.xls), except those files come from some remote computer (web server). The most common "files" that browsers know how to handle are:

*.html
*.css
*.js
*.jpg
*.png
(many more)

As I tried to describe briefly before, your browser asked YOUR PICO W WebServer for a file. Inside that HTML file it finds the LINK to an image that it must re-ask the server for that image file. In the simple starter sketch Bill supplied, the Pico is not delivering a file, it is supplying the same hard-coded content that is in the file no matter what the browser asks for.

To make your Pico act as a generic web server you must have:

A way to store files - SPIFFs and LittleFS are libraries to do that. There is likely an equivalent available for the Pico. Those libraries usually provide a utility that will allow you to upload "content".
The Sketch must then allow multiple connections at the same time. Chorme, Edge, Safari will try to connect multiple times to retrieve files.
It has to receive those requests, parse out those URL's to figure out what file is being requested.
Looks to see if the requested file exists on the Pico's file system.
If not, return the "404 Page"
If so, open the file and start streaming the data back to the browser.
Close up the connection, waiting for the next to arrive.

It is possible to do all this just like a full-blown Apache or MS IIS web server out on the Internet on your Pico. The library I created to do all that for you (but only on a ESP8266) has over 40,000 lines of code and has probably ten thousand hours in it over the ten years. It has been refined and debugged over the years. An expert C++ programmer probably could start cold today and do it in a year or two. And if you like coding, I highly recommend the project.

VBR,

Inq

3 lines of code = InqPortal = Complete IoT, App, Web Server w/ GUI Admin Client, WiFi Manager, Drag & Drop File Manager, OTA, Performance Metrics, Web Socket Comms, Easy App API, All running on ESP8266...
Even usable on ESP-01S - Quickest Start Guide

Ron reacted

ReplyQuote

ewilson100

(@ewilson100)

Member

Joined: 2 years ago

Posts: 15

Topic starter 2022-08-21 4:39 pm

Well, I like coding (but I am no expert) , however I probably do not have 10 years left in my life to complete the project.

I decided to take the easy way out (for now) and put a link (in the Pico W server HTML) to a graphic on a web site that I maintain that is hosted by an ISP. This works fine and only requires a single line of HTML.

I also figured-out how to make the Pico W web site accessible over the internet this morning which is kinda neat. I do not have a fixed IP address, however, and will have to either pay for that upgrade or come up with some other solution.

Inq reacted

ReplyQuote

Inq

(@inq)

Member

Joined: 2 years ago

Posts: 1900

2022-08-21 5:31 pm

Posted by: @ewilson100

Well, I like coding (but I am no expert) , however I probably do not have 10 years left in my life to complete the project.

I decided to take the easy way out (for now) and put a link (in the Pico W server HTML) to a graphic on a web site that I maintain that is hosted by an ISP. This works fine and only requires a single line of HTML.

I also figured-out how to make the Pico W web site accessible over the internet this morning which is kinda neat. I do not have a fixed IP address, however, and will have to either pay for that upgrade or come up with some other solution.

I should have mentioned the option of linking to an off-Pico-W-WebServer resource. Obviously, that works fine as long as the device connecting to your server also has an Internet connection (which is common).

I and my students often use the ESP8266 webserver as a remote control receiver where they connect their phone directly to the WiFi (Soft AP Mode) and drive their bot's with their phones without any router in between, like when outside away from the house, etc.

Dynamic IP Address Resolution

ISP's give your router it's address from their DHCP and some have very short expiration (1 day). Some, I've seen keep the same IP for months even through power outages. Yes, getting a static IP address solves that problem, but then some ISP's won't let port 80 traffic go to your address to keep people from hosting websites at their homes. I used to do it until I found the security hole in my network was just not worth it. And now, no bandwidth anyway.

You may have a router that supports a feature to do DDNS (Dynamic DNS). I have never used it, but I understand your router can notify a paid service of its new IP address (when your ISP changes it) and they distribute it to the DNS servers of the world. Thus, even if your home address changes, you going to www.ewilson100.com/picoW.html will always find your server.

Another option is since you have a public facing website, you could have your Pico update some webpage on your public site with its new address and you first go to your public site, hit a button and it goes to your picoW.

I've considered doing this, but have not really found anything I want to reach inside the house from outside the house... yet. 😉

VBR,

Inq

3 lines of code = InqPortal = Complete IoT, App, Web Server w/ GUI Admin Client, WiFi Manager, Drag & Drop File Manager, OTA, Performance Metrics, Web Socket Comms, Easy App API, All running on ESP8266...
Even usable on ESP-01S - Quickest Start Guide

ReplyQuote