Notifications
Clear all

Pico W Web Server Question

31 Posts
4 Users
4 Likes
536 Views
ewilson100
(@ewilson100)
Active Member
Joined: 6 months ago
Posts: 16
Topic starter  

I was recently able to acquire a Raspberry Pi Pico W board and am attempting to implement a simple web server on my local network. Using Bill's example as a guide, I am using the Arduino IDE and have successfully developed the server using only text. I would like to include some simple graphics however.

The graphic that I am using for a test is called arrl.jpg. I copied this graphic to the F: drive that is created when you hold down the boot button and apply power to the board. The file copies fine but disappears when I upload the UF2 file to the drive. It, of course, does not display on the web page.

I am a novice with HTML, but I used the following HTML code to try to get the graphic to display:

client.println ("<img src = arrl.jpg>");

I believe that one reason that my approach is not working is that the graphics file seems to get erased after I upload the UF2 file for the "sketch", but perhaps my thinking is not correct with respect to the HTML code required.

Any guidance would be sincerely appreciated!

Thanks,

Ed Wilson

 

 

 

 


   
Quote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 I have only recently started looking at the PICOW, but my suspicion is like most all the other small boards, any kind of reset will wipe out the board contents. I have a sketch loaded right now and it serves a few files, those files are in the sketch folder and the storage library is used to work with them. Try to find a sample that serves images and learn from that.

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 Put the image file in your sketch folder and try that again.

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
ewilson100
(@ewilson100)
Active Member
Joined: 6 months ago
Posts: 16
Topic starter  

Unfortunately, placing the file in the sketch folder does not help.

 

Ron, can you point me to any examples that serve images?

 

Ron, another question...you mention the "Storage Library"...I am not sure I understand what that is or where it is located.

This post was modified 4 months ago by ewilson100

   
ReplyQuote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 I am ookng for an example. It won't be PICO, but it will be ESP32 because more examples. Make sure you have the ESP32 boards loaded in your IDE preferences. Here is the line to add

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

Start each board entry on a new line.

Back in a few.

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
ewilson100
(@ewilson100)
Active Member
Joined: 6 months ago
Posts: 16
Topic starter  

@zander The ESP32 board is already loaded as I “play” with that board from time to time.


   
ReplyQuote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 My camera web server serves a few images, the images are all in a sub dir called Docs. 

Sorry, this is hopefully not what you are looking for. The code to display a logo is dozens of lines in 3 places. Stuff like sprintf html code.

Are you an experienced web developer?

 

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 Here is an example that is closer to what you want. The NERDS are always a good bet to find examples.

https://randomnerdtutorials.com/esp32-web-server-microsd-card/#more-102201

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
ewilson100
(@ewilson100)
Active Member
Joined: 6 months ago
Posts: 16
Topic starter  

@zander No, Ron, I am by no stretch of the imagination an experienced web developer. I know a little bit of HTML, but that is about it.

I not attempting to create anything other than a very basic web page, but I would like to include some small graphics files. If I can figure out how to display a simple graphic, I will be happy.

Ed


   
ReplyQuote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 @Inq If I showed you the example I found, it would blow your mind. Either it's always hard, or there are multiple ways. I am tagging Dennis who is an expert in this.

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 @Inq FYI Here is just one piece of the code I found to display the logo. Hopefully Dennis can show you a MUCH simpler approach.

Screen Shot 2022 08 20 at 14.03.15

 

const std::string portal_html = R"=====(<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title id="title"><CAMNAME> - portal</title>
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body style="text-align: center;">
    <img src="logo.svg" style="position: relative; float: right;">
    <h1><CAMNAME> - access portal</h1>
    <div class="input-group" style="margin: auto; width: max-content;">
      <a href="?view=simple" title="Click here for a simple view with minimum control" style="text-decoration: none;" target="_blank">
      <button>Simple Viewer</button></a>
      <a href="?view=full" title="Click here for the main camera page with full controls" style="text-decoration: none;" target="_blank">
      <button>Full Viewer</button></a>
      <a href="view" title="Click here for the dedicated stream viewer" style="text-decoration: none;" target="_blank">
      <button>Stream Viewer</button></a>
    </div>
    <hr>
    <a href="dump" title="Information dump page" target="_blank">Camera Details</a><br>
  </body>
</html>)=====";

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
ewilson100
(@ewilson100)
Active Member
Joined: 6 months ago
Posts: 16
Topic starter  

@zander Thanks, Ron...yes, simple is better!

Thanks in advance to Dennis.


 


   
ReplyQuote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 Dennis is off line at the moment, probably at supper but he might come back on later. Did you look at the nerds?

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
ewilson100
(@ewilson100)
Active Member
Joined: 6 months ago
Posts: 16
Topic starter  

@zander Yes, I took a quick look at their code...I saw a couple ideas that I might try tomorrow.


   
ReplyQuote
Ron
 Ron
(@zander)
Famed Member
Joined: 2 years ago
Posts: 3462
 

@ewilson100 Here is a tutorial for what you want to do but foer ESP32. You will just need to change the libraries being used, the code to actually do what you want is the same on all boards. Maybe start with the PICO server example then copy the image code over from the esp32. I might give it a try but I am not sure I have time for the next couple days.

https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/

"Don't tell people how to do things. Tell them what to do and let them surprise you with their results.” - G.S. Patton, Gen. USA
"Never wrestle with a pig....the pig loves it and you end up covered in mud..." anon


   
ReplyQuote
Page 1 / 3