Chipworkx server to display html image

Archive
1

Hi,

I have created a webserver to display settings in html stored on my nand drive, using the code sample below which works very well.

I want to display an image as well as displaying the settings. I can get it to display an image via the internet using html image tag <img src=http://… no problem.

The problem is I want to be able to display a image i have stored on my nand drive onto my webserver using the html image tag, my device will only be connected to the internet to get the time for RTC during setup. So using the internet to serve images is not an option.

I am not sure where to start on this. I have tried to get the “physical” file location and place it in the tag, which doesnt work. Will have have to create another webserver (in a new thread) to serve an image?

How does one show html images or even new pages using this [webserver sample below] method of creating a webserver.

Webserver sample

Many thanks

2

You will add the image link to point back to your ip/link and then the browser will send you a second request for the image.

You can also embed images right in your HTML. The web is full of info on this.

3

Thanks Gus, not sure what method your refereing to.

So currently my image is stored

\nand\Logo.png - Do I create another thread (server) to show this image.

eg 192.168.2.2 would send Logo.png as a byte array?

Is that what your thinking?

Yeah, I’m ok with the html part. Just how to get my “server” to access and render stored images or even files on my nand drive is whats causing me a bit of a head ache.

Many Thanks

4

as a server, you get requests for files

192.168.1.1/file.html
192.168.1.1/folder/file.html

The image will be like those

192.168.1.1/file.jpg

so when your HTLP page contains a reference for your image, the browser will issue a second request for the image.

I would start by just the image then try to embed inside an HTML page.
192.168.1.1/yourimage.png

when you get the request, send back the image from nand.

5

a better SRC= line to use in your HTML is something like “/image.jpg” because that’s a relative path to the same “server”, being your Fez.

There’s a thread http://www.tinyclr.com/forum/topic?id=9669&page=1 that goes through some of the underlying concepts. Think of files as just one way of storing some content that you need to deliver in the stream of requests. You can also have content in HTML in-line in your code, or HTML files on the storage.

6

Thanks guys.

Ok, i finally got it working. If I did a direct call to the image ie http://192.168.2.1/logo.png without any html elements it displayed it no problem.

WebSock.Send(System.Text.UTF8Encoding.UTF8.GetBytes(NandVol.RootDirectory + @ "\Webimages\\Logo.png"));

I was struggling to get a image to work in a html image link. The way I got it working was to use the embeded image option (<img src=data:image/png;YW55IGNhcm5h…) .

Th problem with this, is that you have to supply a base64 string as the image data.

So I created a console app and converted my image file to a .bin.

System.Convert.ToBase64String(File.ReadAllBytes(Environment.GetFolderPath(Environment.SpecialFolder.Desktop) + "\\Logo.png"))

I then copied this to my nand drive and now reference my image through the .bin file now, not the png file.



            // Get base64 image  string //
            System.IO.FileStream fs = new System.IO.FileStream(Nandvol.RootDirectory + @ "\Webimages\Logo.bin", System.IO.FileMode.Open);
            System.IO.StreamReader sr = new System.IO.StreamReader(fs);
            string Logobase64 = sr.ReadToEnd();
            sr.Close();
            fs.Close();
            
            //Html tag - return to socket //
           string displayhtml = "<img src=\"data:image/png;base64,"+Logobase64 +"\" alt=\"Logo\">";

Thats it!!! I can go bed now!!!

Thanks again guys.

7

@ LondonGeek - Encoding to base64 is a longer process and creates more data to be returned over the network, very slow and sloppy in my opinion, and should only be used when no other option is available. If you setup the listening socket to accept multiple connections with the Socket.Listen(int) method, you can send like this


if (request.ToLower() == "/logo.png")
{
byte[] image = System.Text.UTF8Encoding.UTF8.GetBytes(NandVol.RootDirectory + @ "\Webimages\\Logo.png");

//Construct a header
string header = "HTTP/1.0 200 OK\r\n";
header += "Content-Type: image/png\r\n";
header += "Content-Length: " + image.Length + "\r\n\r\n";

WebSock.Send(System.Text.UTF8Encoding.UTF8.GetBytes(header));
WebSock.Send(image);
}
8

Hi James,

Ok, could you show me your method using a html image tag please.

Thanks

9

@ LondonGeek - I am sorry for not including this in the last post, but the HTML tag is as follows


<img src="/logo.png" />
10

@ James,

No problemo, I shall give that a try.

So what happens if I’ve got mulipal images?

Thanks

11

@ LondonGeek - You would handle each case as the method I provided, just changing the request check and the image byte array to the different image. Depending on how many images you have, and depending on what browser you have, each image could come in as a separate request at the same time, or they could come sequentially (the next request is passed to your server when the last image has finished downloading), so make sure you provide an adequate number of back logs (listening queue spots) with the Socket.Listen(int) method.

12

@ James

I’m not sure your method is any less sloppy to be honest. There would be more socket calls for say just 3 images (6 in all) which all equals more bytes (data) and equally more time plus more coding.

I’m not really worried about how much process/memory it uses. Once the ethenet cable is plugged in nothing runs excepted the http server.
I have not noticed it running slow (to be honest). Maybe if I had 30 images lol.

But hey I’ll give it a try.

Many thanks

Happy new year

13

@ LondonGeek -

As Gus said previously, the Werbserver is asked for each existing http call, so if you have N images, you wil have N call to the server with request on http://…/imageX.jpg. with X is 1 to N…