Panrepticon Logo

The Panrepticon

I’ve been away for a while. Away from web design, from artwork, from writing – from the world at large, really. I needed something to get me back into the swing of things, I had a Raspberry Pi and a desire to spy on my pets.  So obviously I decided to set up a quick remotely-accessible webcam server.

What started as a quick Raspberry Pi project soon turned into a full-stack coding adventure involving Javascript, HTML5, CSS3, router configuration, apache tweaks, PHP, cron jobs, and probably some other things I can’t remember right now. But at the end of it all I have a website which lets me peek in on my little scaly babies when I’m not at home. I feel pretty proud of this little learning experience, so here it is!

Screenshot of the Panrepticon Website
Screenshot of the Panrepticon Website

The website itself was going to be a simple panel of streams, until I decided that I wanted to try out working to the new Google Material Design specs – to see how easily I could build something simple, elegant and delightfully functional. Once I had decided on that, ideas for functionality started popping out of all my orifices, and I ended up building the elegant website I share with you today.

Everything was put together as much from scratch as possible, including the slide-down menu; webcam view toggles; saving and downloading still snapshots; and a flexible layout. Pretty much everything works across all modern browsers, which is quite a point of pride for me. Though sadly the actual webcams themselves don’t work in Internet Explorer because of its lack of mjpeg support. I am hoping that the Edge browser will sort out that little annoyance when Windows 10 comes out later this month – if not, I shall curse the name of Microsoft unto the heavens… and figure out how to implement a workaround.

I’m working on a full walk-through of how I set it all up, which will include an analysis of the website code and how I optimised it all. It will also cover how to set up the Raspberry Pi, get Motion working with multiple webcams, customise your webcams into night vision cameras, getting your Pi’s and a home server to talk to each other, getting them to all talk to internet at large, and setting up a dynamic DNS service to view your new site. So watch this space to learn from my numerous mistakes!

All I need now is for the little scaly gits to stop hiding so we can see them on the damn cameras… Do feel free to send me any pictures you manage to snap of them! Here are some of my favourites of Boris (haven’t caught Speck on them yet, as he’s nocturnal and I haven’t put any infra-red lights in the tank yet):

Commander Boris 15-06-15 11:28:31
Commander Boris Appears 15-06-15 11:28:31
Commander Boris 13-06-15 02:45:05
Commander Boris 13-06-15 02:45:05
Commander Boris 08-06-15 10:47:18
Commander Boris Descends 08-06-15 10:47:18
Commander Boris 28-05-15 21:54:13
Commander Boris Nomming 28-05-15 21:54:13
Commander Boris 08-06-15 11:36:14
Commander Boris Yawning 08-06-15 11:36:14
Commander Boris 17-05-15 14:19:00
Commander Boris 17-05-15 14:19:00

Leave a Comment