Responsive Design with Adaptive Images

Today I got curious if I could solve the issue of high-res images being loaded on small screens with responsive design. Here’s my solution via jQuery plugin.

Basically, I’m detecting the max size of the image by looking at its parent container and comparing that with the grid breakpoints. In my example I used Bootstrap, but I don’t see why any other responsive framework wouldn’t work.

Github

Demo

Emoji URLs

I got curious if one could construct emoji URLs…

Emoji_URL

.htaccess

RewriteEngine On
RewriteRule (.+) index.php?request=$1 [L,QSA]

index.php

$requestArray = explode("/", $_GET['request']);

echo "Welcome to my page about ";

if(urlencode($requestArray[0]) == '%F0%9F%90%A8') echo 'koalas';

echo ' eating ';

if(urlencode($requestArray[1]) == '%F0%9F%8D%94') echo "burgers!\n";

Demo

Sent messages email graph

Did this quick graph recently with my Gmail data to see when I was most likely to send an email. Surprisingly my night-owlness isn’t as apparent as I thought it’d be.

If you’re waiting on an email from me, it’s most likely coming at 11am or 11pm.

Email times

Raspberry Pi + Garage door opener: Part 2

In Part 1 of my ‘Raspberry Pi + Garage door’ series, I showed a super simple way to control a garage door with a script that could potentially be ran from the Internet.

This part expands on that and tackles the issue: ‘How do I know the state of my garage door if I’m not at home?’

Because the code operates no differently than someone pressing a single button on the remote control, you would normally have to look with your own eyes to see if you were closing, stopping, or opening the garage door. This can be an issue when your eyes are nowhere close to it.

I wanted to come up with a solution that didn’t involve running new equipment such as a switch to detect the door’s orientation. I decided to utilize what I already had in the garage: A camera. Namely, this one: Foscam FI8910W

The idea is to use the camera to grab an image, pipe that image into OpenCV to detect known objects, and then declare the door open or closed based off of those results.

I whipped up a couple of shapes in Photoshop to stick on the inside of my door:

shapes_web

 

videostream
Shapes taped to the inside of the garage door

I then cropped out the shapes from the above picture to make templates for OpenCV to match.

Templates for OpenCV

The basic algorithm is this:

  1. Get the latest image from the camera
  2. Look for our templates with OpenCV
  3. If all objects (templates) were detected, the door is closed – otherwise it’s open
1423729418.65
Shapes successfully detected

 

To help make step 3 more accurate, I added a horizontal threshold value which is defined in the configuration file. Basically, we’re using this to make sure we didn’t get a false positive – if the objects we detect are horizontally aligned, we can be pretty certain we have the right ones.

I was happy to find that the shapes worked well in low-light conditions. This may be due to the fact that my garage isn’t very deep so the IR range is sufficient, as well as the high contrast of black shapes on white paper.

Currently I have some experimental code in the project for detecting state changes. This will not only provide more information (e.g. the door is opening because we detect the pentagon has gone up x pixels), but is good for events (e.g. when the alarm system is on, let me know if the door has any state change).

I’ve tested running this on the Raspberry Pi and it works fine, though it can be a good bit slower than a full-blown machine. I have a Raspberry Pi 2 on order and it’ll be interesting to see the difference. Since this code doesn’t need anything specific to the Raspberry Pi, someone may prefer to run it on a faster box to get more info in the short time span it takes for a door to open or close.

I’ve created a video to demo the script in action!

GitHub: https://github.com/twstokes/door_detect

Python and the Gmail API

The other day an idea popped in my head for a side project that would involve the Gmail API. Whenever this happens, I normally hit up the developer site, find a simple tutorial, and immediately get my hands dirty.

A quick search led me to this page. It’s called a “Quickstart: Run a Gmail App in Python.” Perfect. I’ll run this script and be on my way in no time. Well, not so fast.

This tutorial assumes I’m doing development on my local machine where it can pop open a web browser and authorize the API access. Most of the time I don’t operate that way – I use a remote Linux server of some kind.

To get this quick start guide working on a remote server:

  1. In the Google Developers Console, generate a client ID for a native application (this may work with other types of client IDs, but I know it works with a native one)
  2. Save the client_secret JSON to the script directory
  3. Add the ability to read command line arguments and call the function ‘tools.run_flow()’ instead of just ‘run’
  4. Run the script with “–noauth_local_webserver” as an argument

Now when you run the script, you’ll get a link to copy into any browser to authorize the access. Then, you’ll get an auth code to paste back into your script.

I’ve included both scripts so that you can compare easily. I hope this saves others from frustration and I also hope Google improves the tutorial.

quickstart_original.py
quickstart.py

Raspberry Pi + Garage door opener: Part 1

I want to be able to control my garage door from anywhere. Solution? Dedicated Raspberry Pi.

Pi with breakout board
Pi with breakout board attached to garage remote

 

How it was made:
  1. The garage door opener remote was removed from its casing and I located the button used to open the door. My particular model had three buttons.
  2. I soldered a jumper on the button leads to always create a circuit, removing the functionality of the button so it’s “always on” when power is applied. The button was this style – a standard electronics button.
  3. I removed the coin battery and soldered on two leads that will be powered by the Raspberry Pi. When the Raspberry Pi sends power, this will be no different than someone normally pressing the remote button.
  4. I wrote code to control the pin that outputs power.
Notes:
  • Garage door openers can vary, but I’m willing to bet a lot (if not most) use a CR2032 battery. The Pi puts out 3.3 volts, (.3 V higher), but I haven’t noticed any issues.

I’ve provided the simplest example here. The next step would be to have the code driven by a web interface that could be loaded on a phone or a web browser.

There will be an exciting part 2 to this article where I take this one step further!

Part 2 is up!

GitHub: https://github.com/twstokes/garage-pi

Garage remote circuitry
Garage remote circuitry
Jumpered Button
Jumpered Button
Pi with breakout board
Pi with breakout board