Creating a Security Camera Page for the iPad

I may have posted before about the Foscam cameras I have around my house. I have one inside the house and three outside, covering all the doors. There are a myriad of apps out there that allow you to view live streams from Foscam cameras, however, most of them are either designed for iPhone (thus for iPad you have to use pixel doubling, which sucks) and/or they have a bunch of chrome that I'd rather not waste screen real estate showing.

A couple years ago I bought one of the first generation iPads. It was great, but given the OS upgrades that it's missing out on and the low resources that most modern apps blow right past, it's become less and less used. I decided to get some more use out of it by building a small web page with custom controls to stream each of my cameras' feeds to the iPad. The thought was to mount the iPad near the front door so that I could do a quick check of all the cameras while walking to the front door to answer a caller (since one of the cameras looks at the front door, I'd also get a quick look at the caller without looking through the peephole). After looking around at some of the DIY options, I decided to go with a Luxone iPad Wall Mount since they had one specifically built for the 1st generation iPad. It was more expensive than some of the DIY options, but the finished product looks cleaner (IMO). The place where I had decided to mount the iPad had a light switch right below it. A quick test with the multimeter showed that power is run to the switch instead of the light, so I could wire in an iPad charger which would draw power regardless of the state of the light switch. Fast forward a couple of hours and I had made some room in the circuit box for the iPad charger, soldered on some leads which were wired into the switch's hot wires and ran the iPad cable up and out of the switch to the wall mount. The end result is that the iPad sits in a landscape position and always has power. A quick change of the config so that it never auto-locks and the iPad stays on 24/7.

As for the page, I had several web servers around were I could host the page. It didn't take much to design the page, but I wanted some extra fun. I decided that tapping on a camera feed should blow the feed up to the full size of the screen. Tapping again would shrink it down to its original size. This was easily accomplished with a bit of CSS. Essentially, there are three things in the CSS:

1. The standard classes that setup the body
2. An option that sets the initial size of each stream and specifies the timing function for CSS animations.
3. 4 classes that determine where the streams sit
4. 2 classes that are tied to the animation (one to grow one to shrink)
5. 2 animations (one to grow one to shrink)

After that, there's a simple javascript that does two main things depending on whether the image is its original size or has been blown up to full screen:

1. Switch to the other class so that the animation happens
2. Set the final style parameters of the stream so it stays the way it is at the end of the animation

Then there are the streams themselves. I added username and password parameters to the URLs so they don't have to be typed in every time. There were some other parameters that I added so that when I saved a bookmark to the home screen it would open up and look like an app. The details are here. I really only added <meta name="apple-mobile-web-app-capable" content="yes"> and <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">. Then I pulled up the page in Safari, added a shortcut from there to my home screen and closed Safari. Now when I open using the shortcut, it opens up as if it were a separate app from Safari and none of the Chrome is there.

Putting a Hidden Help Section on a Web Page

Continuing in a series of posts, here's how to add a hidden div to a web page (and make it visible on demand).

For the health check report, I had built a way to transform the output of the script into a usable report and added editable content so that the report could be further tweaked after rendering the page. Given that others would eventually be using the report, I needed to add a way to help non-coders when inserting content into the report so that it looked cogent and coherent. Thus the help section.

However, I couldn't put a help section on the final report, that wouldn't look good when the report was delivered to the customer. So, I had to create a way for the help section to be normally hidden, with a button or link to display the help section. Also, the button had to be hidden!

Let's start with the help section itself. Take a look at the XSLT itself. The help section is simply a DIV containing the help content, with some special CSS applied to hide it until needed. Look at line 22. Notice that the display style is set to none. This hides the DIV entirely and collapses the space around it. It's as if the DIV isn't even there.

Now for a button to show the div when needed. Look at line 15 and you'll see an image with an onclick function. The function is contained in the external JavaScript file (lines 23-29). The JavaScript simply toggles the display style from none to block and back. Really, it wouldn't be too much to just put that function right in the img tag itself, but since I already had the external JS file, it was just as easy this way.

Another look at line 15 will show that the img is contained within a div with id="helptoggler". That div has three lines of CSS that essentially make it invisible until the mouse hovers over it and also puts it in the top left corner of the page:

1. #helptoggler {position:absolute;left:0px;top:0px;}
2. #helptoggler > img {visibility:hidden;width:32px;height:auto;}
3. #helptoggler:hover > img {visibility:visible;}

This means that the image is in the top left corner of the page, is hidden until moused over, and when clicked shows the help section.

Since the JavaScript is built as a toggler, the same function can be called anywhere a link is desired to hide the help section. Clicking on the image in the top left corner hides the DIV, but notice that within the help section itself is a span with an onclick action calling the same JavaScript function (line 24).

Once again, if you want to play with the files themselves, just download, unzip, and open the XML file in IE.