We installed some new digital cameras to replace an existing analog setup. The cameras are both similarly priced.

Videos are great at demonstrating a feature, but they are a slow and clunky experience. Animated GIFs are quick and lightweight, and no voice narration. I used Licecap to capture these videos. Embedding them is as easy as an img tag How do I add a bridge? How do I add a camera? How do I get to camera settings? How do I change camera resolution? How do I view cameras? How do I create a layout? How do I resize a layout?

Build tools are traditionally the realm of backend systems. Recently, as frontend systems have gotten more complex, JavaScript specific tools have emerged. There are plenty of options and it would be impossible to keep up with them all. I wanted to explain how we make use of Grunt.js and what it does for us. What are Frontend build tools There are several tasks that need to be done before releasing a modern webapp. The JavaScript needs to be concatenated into a single file to improve page sp

In order to show off the EEN API I made an example access control system out of a Raspberry PI, RFID reader and Node.js Node.js was a natural fit for this project because of how easy it is to handle events from the RFID reader, add realtime support through websockets and pull data out of Eagle Eye Networks with the een module . All the important changes can be made from config.js in the root directory. From there you can define badges and doors. Each door has its own reader which is defined by

Infinite scrolling is a really cool effect and a great use of AJAX. It also has some weird side-effects that you'll need to be aware of. This is the starting point I used in the event version of the Gallery Viewer. The major parts are throttling the scroll event and detecting the scrolling direction. Because I am loading images I want to get started on the request as soon as possible, or I would wait until they were close to the bottom of the page before loading. There is a also a little <d

Introduction This blog post is an example of how you can use the Eagle Eye Networks API to embed the preview stream where ever you want. Background The API makes it very easy to get the preview stream for all the cameras in an account. The preview stream is a series of JPEG images and requires authentication. Our code today will show how to use the API to provide the images on a webpage without authentication. Step 1: We are going to use the code at mcotton/watcher to run a Node.js server that

Sometimes you want to get an updated property . In this case, I am animating an image to make it 10% bigger when I hover over it. I also have a slider that allows the grid sizing to change. $(img.currentTarget).animate({ 'position': 'absolute', 'height': (function() { return $('#slider').slider('value') * 1.1 + '%' })(), 'width': (function() { return $('#slider').slider('value') * 1.1 + '%' })(), 'z-index': '10', 'margin': '-15px -15px -15px -15px'}, 0, funct

I had several hours this week as I drove from Austin to Ft. Worth and started thinking about reactive programming. I would like to be able to attach an event to the value of some other variable. I put together a little demo page along with the github repo .

Our condo recently had some flood damaged and their are workers coming in and out to do repairs. My wife and I both work and do not feel comfortable with strangers in our house without us. We don't have the needed wiring in our hallway and my wife didn't want to see any wires run down the wall. So I made a wired camera wireless with parts I had laying around. First I needed a wireless to wired bridge. There are several specialty parts available that do this but one of the cheapest and easies

I absolutely love you can't javascript under presurre and will be using it next time I am interviewing someone. It is really just fizzbuzz with a couple really easy problems thrown in up-front. It isn't really about the total time the applicant gets, its more about how they approach the problems and then how they refine their solution when they are given more time. I approached them using a simple for loop but given more time I would refactor the code to use forEach and/or reduce.

Bootstrap is great. Backbone.js is great. Same with underscore.js and jQuery. These are all great things but there is a problem with clicking on dropdown menu items from mobile safari on iOS devices. There is an easy fix for regular jQuery and even Backbone.js. Old code: $('#userSettings').click(function(e) { e.preventDefault(); (new EditUserProfileView({ model: userList.getCurrentUser() })).render(); }); New Code: $('#userSettings').on('touchstart click', function(e) { e.preventD

[UPDATE: It turns out that we could make a simple change on the server and remove the need for this code to run client-side. There was nothing wrong with the approach we took in the article, but decided to do it on the server as an enhancement to our API] I just got through experimenting with web workers and pushed it out to production. Now its time to explain what I've learned. To see historicaly videos and events, we launch a new window called the history browser. It uses SVG to create tile

Since I had to install this on two different machines I thought I'd be nice and leave this for someone else to find. I store custom compiled stuff in ~/src but you can put it anywhere you'd like cd src curl -O http://redis.googlecode.com/files/redis-2.6.14.tar.gz tar zxvf redis-2.6.14.tar.gz cd redis-2.6.14 make cd /usr/local/bin ln -s /Users/cotton/src/redis-2.6.14/src/redis-server redis-server ln -s /Users/cotton/src/redis-2.6.14/src/redis-cli redis-cli Now you can start up the redis-server i

This is my current merging strategy and workflow. I have the branch mcotton-next and when I make new features I git checkout -b mcotton-branch-name As I make changes I make incremental commits and run grunt. I use this command grunt && git status -s|awk '{ print $2 }'|xargs git add; git commit -m "<commit message>" && git push stage mcotton-branch-name Because I make a lot of little commits I use git merge mcotton-branch-name --squash so that I can make my own commit with a unified message. Af

I've been working on a little framework for extending Backbone.js. This is largely to reduce the amount of boilerplate I have to write. I'll keep updating, but feel free to look at it and poke around. https://github.com/mcotton/Rocket

I want to deploy new code to using a simple command like git push stage master or git push prod master On the server, make a new git repository git init Edit the config file inside of .git/ [core] repositoryformatversion = 0 filemode = true bare = false logallrefupdates = true [receive] denyCurrentBranch = ignore Make a post-receive hook with these commands #!/bin/sh cd .. GIT_DIR='.git' umask 002 && git reset --hard Make that hook exacutable chmod +x post-receive On your

Everyone is up in arms about the ending of Google Reader. I use it daily and more importantly my iPhone/iPad use it as the syncing protocol for RSS apps. What I don't understand is why everyone isn't seeing this as an opportunity? Google created a product and now everyone has their shot to show what they can do. Think that Google is amazing? Try to make your own version and see how you compare. Think Google is past their prime? Try to make your own version and see how you compare. Don't care

I sent out this email about a presentation I would be willing to give. Are you interested in a node talk about camera uploads directly from iPhone to Node and then to S3? Starting from nothing, then use Why use Node? Why make it async? node-formidable to handle uploads knox to upload to S3 router to make sensible URLs, structure for REST nano to integrate with CouchDB Depending on the experience of the audience, I can include: socket.io integration for upload progress indicator making a REST-ful

I have been doing a lot of in-browser testing. Because of this I want an insight to what the browser is doing. console.log('DEBUG: ' + data) But this gets unmanageable very quickly. The next evolution is to place a flag for what should be logged. It also helps to prefix all the logs with a category (DEBUG, INFO, ERROR, etc) debug = true if (debug) console.log('DEBUG: ' + data) This is a little better but still isn't that much better. The next jump is to make debug into an object and get mor

This is how I'm approaching the problem of trying to simulate live video from a series of preview images. After initial page setup, we start the polling service After each polling response we look for new preview images ('pre') For each preview response, we ask each camera to update its image As an optimization we only update the cameras that are currently on screen When the new image has loaded, we swap it with the one being displayed (this eliminates flickering) If the image has taken longer t