BA372 — Assignment 1: HTTP Image Browser
In C# write a simple HTTP image browser; i.e., a Windows forms app which, like an
ordinary web browser, allows users to enter a URL in a textbox at the
top of the window, makes an HTTP request for the resource located at the URL
and which, if the URL references an image file;
e.g., *.jpg, *.gif, *.png, etc., displays the retrieved image in the
browser's Image window. Note: vector images (*.svg) do not have to be displayed.
However, this browser should not only display the image, it should also, in a small window above the image,
display the HTTP response line and all HTTP headers
received from the server serving the HTTP request. For instance, an HTTP
request for http://classes.bus.oregonstate.edu/ba372/reitsma/images/cob.png,
results in the following response line and headers being returned by COB's web server:
HTTP/1.1 200 OK
Last-Modified: Mon, 19 Mar 2018 20:55:38 GMT
Date: Mon, 18 Mar. 2019 23:39:02 GMT
Content-Length: 59587 (58K) [image/png]
Length: 59587 (58K) [image/png]
In addition, we want to distinguish the HTTP response status from
the headers and display it in a separate Status code
textbox (see example above).
Clearly, since we do not know how many headers we will be receiving
from the server, we must make the box that lists the returned
headers scrollable. Similarly, we want to accommodate for large images. Hence, we want some
way of scaling the images or be able to scroll them.
At this point in our coursework, we should also start thinking a little about user interface issues.
For instance, just like users can enlarge or shrink their web browser window, so should your user be able to
enlarge and shrink the window of your HTTP image browser. Obviously, with such enlarging/shrinking, the
interface elements contained in the window should enlarge/shrink accordingly.
Your program should also recognize whether or not an image was
requested and if the request actually succeeded. If not, an error message should gracefully handle the error.
Similarly, your program should recognize if a user entered an invalid URL.
Also, make sure that you build in a facility for handling timeouts;
i.e., handling an HTTP server
that does not reply within a certain amount of time.
Finally, make it so that, just as in a regular browser, you can hit the Enter/Return key on the keyboard instead of having to click the
Some tips and hints:
- Several ways exist to make and execute HTTP requests in C#. The following works well:
Use a three-step procedure. First, make a URI (URL) from a string, then make
an HttpWebRequest from the URI. Finally, run the request and capture the result in an HttpWebResponse. Like this:
Uri myuri = null;
System.Net.HttpWebRequest my_request = null;
System.Net.HttpWebResponse my_response = null;
//Try to make a valid URI
my_uri = new Uri("URL_goes_here");
//Make the HttpWebRequest (note the type cast)
my_request = (System.Net.HttpWebRequest)System.Net.WebRequest.Create(my_uri);
//Set some of the request parameters
my_request.Method = "GET";
my_request.Timeout = 5000; //in miliseconds
//Run the request and capture the response
my_response = (System.Net.HttpWebResponse)my_request.GetResponse();
An HTTP timeout (in milliseconds) can be set by using the Timeout attribute of the
HttpWebRequest. A five second (5,000 milliseconds) is a good default.
These HttpWebRequest and HttpWebResponse classes are very rich and powerful. For instance, almost
anything you want to know about the HTTP response (its status, does the body contain an image? how many bytes were returned?
What are its headers? etc.) is stored on the HttpWebResponse.
Whenever we have to display images, we have a potential scaling problem; the image is
either larger or smaller than the canvas on which we want to display it. Although several ways
to deal with the problem exist, a simple (quick and dirty) way to accommodate large images
is to embed the PictureBox on which we display the image inside a
Panel object and let the
scroll the PictureBox. If we make the PictureBox object larger than the Panel object,
set its SizeMode to Autosize and set the Panel's Autoscroll property to true, the
Panel will scroll the PictureBox.
There exist several ways to display an image in a PictureBox.
However, do NOT use the PictureBox.Load(url) method
as this would generate a brand new HTTP request. This would make little sense since you already made the request and already have the image in memory.
An alternative method is to stream the image from memory directly to the PictureBox's Image like so:
System.IO.Stream my_stream = http_response.GetResponseStream();
myPictureBox.Image = Image.FromStream(my_stream);
To make the Enter/Return key work as the Go button, we can do several things.
A relatively easy and elegant solution is to write code for the _KeyDown method of the URL textbox
which checks to see if the key pressed is the Enter/return key, and if so, calls the
method which is normally invoked by the Go button. Something like the following should work:
private void URLTextBox_KeyDown(Object sender, KeyEventArgs e)
if (e.KeyCode == Keys.Enter)
goButton_Click(URLTextBox, new EventArgs());