The Web as the Ultimate Window
"Webcam Window" is a web application I wrote several years ago as a result of discovering a wide variety of beautiful webcams all over the Internet. The US National Park Service, various universities, and bold exploratory groups have deployed webcams that offer a continuous view of spectacular and unique scenery all over the globe, ranging from sweeping remote landscapes, views of bustling cities, and even the peak of Mt. Everest. Initially I was just accumulating bookmarks for the various webcams but eventually it got tedious jumping among them to enjoy their views. The only thing better than having a browser-based view of each camera in sequence would be to combine multiple cameras into a single larger "picture window" that would let me see them all at a glance and then select individual ones to zoom in for a full look.
I already had a list of webcams I wanted to combine, so all that remained was figuring out how to manage the layout and implement the "click to zoom in" feature. At the time I was very new to using HTML, CSS and Javascript to create web applications so the first challenge was implementing a simple row/column layout. For variety and to fit more cameras into a single web page I decided to implement both a three-across and two-across display, which meant creating some simple CSS classes to handle the different formatting. One of the great things about developing using HTML, CSS and Javascript is that it's easy to search the internet for excellent explanations and examples, and testing is a simple matter of loading the HTML page into a browser to see how it looks. Iteratively achieving the basic two-across and three-across layout using CSS turned out to be pretty easy.
Next up was implementing the click-to-zoom capability, so it was back to web searches to hunt for examples. Happily I discovered someone else had already created a simple Javascript library for exactly the kind of click-to-zoom feature I needed. Markus F. Hay's "Lytebox" (http://lytebox.com) provides ready-made Javascript functions and companion CSS styling so some simple adjustments to my existing layout code were all that was required.
In its current form Webcam Window doesn't support any kind of easy configuration. If you want to
change the webcams being displayed or alter their layout you need to edit the HTML file (index.html).
Each window pane is a separate <div> with a class assigned for either three-across
layout (cam1, cam2, and cam3 respectively) or for two-across
layout (camwindow_l, and camwindow_r respectively). Within each window
pane <div> is an <img> to be shown in that pane, of class
camimage so it is styled properly, and an anchor (link) to the actual webcam
itself of the class lytebox so the Lytebox library can do its magic.
Often webcams offer two links for accessing the current camera image - one that is a smaller, perhaps even thumbnail sized version, and another that is the full current image from the camera itself. If that's the case then it is best to use the full size image as the target for Lytebox as the image will automatically be scaled to fit fully within the browser window. The smaller other image can be used for the window pane, unless it is so small that the result is unappealing.
In some cases you might need to do a bit of investigative work to find the right links. Generally the main access point for a web cam is a page that provides a lot of additional information beyond the image itself. Using the browser pop-up menu (typically via the right mouse button) often helps discover the proper URL, though in some cases inspecting the source for the web page is required. Keep in mind that when you do this you're using an access URL that the web page developer many not intend to be exposed, so the link may change without warning which means the window pane will suddenly stop showing an image.
If you're interested in creating your own customized installation of Webcam Window you're welcome to just download the code directly from your browser. I'm also planning on making it available on github.com and will provide that info here as soon as I've done so.
