Image and webserver

Archive
1

Hello

can some one point me in the right direction?

I want to use local pictures as buttons on the html respons from an WebEvent.

Here is my code in short form

        void webEventTest_WebEventReceived(string path, WebServer.HttpMethod method, Responder responder)
        {
            byte[] messageBytes = System.Text.Encoding.UTF8.GetBytes(TestPage());
            responder.Respond(messageBytes, "");
        }

static string TestPage()
        {
            string s = "<html>\n";                                      // First the page type

            s += "<head><title>Test Page</title></head>\n";   // now the page header

            s += "<body>\n";                                            // start the body        

            s += "<a href=\"test\"><img style=\"border:0px;width:100%;height:20%;\" src=\"IMAGE.png\" onMouseDown==\"IMAGE.png\" onmouseout=\"IMAGE.png\" alt=\"IMAGE.png\" /></a><script type=\"text/javascript\">img=new Image();img.src= \"IMAGE.png\";</script>";
           
            s += "</body>";                                             // close the body section

            s += "</html>";                                             // close the page type

            return s;

        }

So what do i need to put in the “IMAGE.png” to make it work with png files in the Resources folder?
To code works fine with images files like http//www.picturesite.com/picture.png

2

in your project you need the image file/s. You can load them like on SD card, or as resources if you want to. You need to be able to request that resource directly (browser request direct to it to check). That means you need the request handler to decide if it’s handling the root page or the image file…

3

You’ve 2 ways to do so :

  1. Directly embed your image in the html file as a data image Base64 byte array,

  2. Put your images on an SD card, and catch the file name in the post of your html page on server side.

Advantages :

choice 1. the client does not have to request/response on each image when posting,
choice 2. You can change easily the image when you need,

Disavantages :

choice 1. Your html file will be some kbytes more than without any binary data,
choice 2. It needs an external storage, and need 1 req/resp per image file to load…

To convert a bitmap to Base64 encoded string, you can use this website :

1 Like
4

Thanks for the answers