Nathan's Blog

Web development and useful information

Dash Button with Raspberry Pi

I set up my Raspberry Pi to listen for Amazon Dash Button presses recently.
Raspberry Pis are excellent devices for monitoring Dash button presses because they use very little electricity, so can be left running.

I spent some time getting it working so I’m adding the steps I took here.

1. The easiest way to get a Dash button’s MAC address:
Follow the steps in this post to find your Dash button’s MAC address.

View story at Medium.com

2. Install the required dependencies:

# Update your software
sudo apt-get update && sudo apt-get upgrade

# Install pydhcplib
sudo apt-get install python-pip
sudo pip install pydhcplib

3. Copy this script to your Raspberry Pi
The easiest way is to use wget:

wget https://gist.githubusercontent.com/mr-pj/75297864abef5c8f2d5c134be2656023/raw/adc4de046c8972243eb322a6137d508da9c80372/dashbutton.py

Here’s the script:

4. Replace the script’s MAC address with yours

# Replace "50:f4:de:f1:3b:a0" with the MAC address you found in step 1
# It needs to be lowercase, with a colon after every two characters
dashbuttons.register("50:f4:de:f1:3b:a0", do_something)

5. Make your Python script executable

sudo chmod +x /home/pi/dashbutton.py

7. Test the script
Your Python script should now be able to detect your Amazon Dash button presses. Test the Python script by running:

sudo python /home/pi/dashbutton.py

Press your button and you should see the message, “button has been pressed”.

8. Update the do_something function to make it do something useful
I’m using mine to track toilet roll changes. When I get down to two or less I send an email reminder.
I’m using another Dash button as a “digital habit tracker”.
I’m logging morning Meditation to a habits.txt text file on my Raspberry Pi. I’ve ordered four more to track other habits.


Analogue is so trendy.

Other uses for your Dash button:
Order pizza
Wireless doorbell
Control smart lights
Send a text
Track baby data
Track practice sessions

8. Set the Python script to run on startup

Edit /etc/rc.local

sudo vim /etc/rc.local

Add the following to the end of /etc/rc.local (before exit 0

# Wait for an Internet connection
# If you connect using an Ethernet cable, change 'wlan0' to 'eth0'
while ! /sbin/ifconfig wlan0 | grep -q 'inet addr:[0-9]'; do
    sleep 3
done

# Network connection now exists: run Dash listener
# Change /home/pi/dashbutton.py to the path you copied the script to
# Send errors to rclocal.log <-- Useful for debugging sudo /usr/bin/python /home/pi/dashbutton.py 2>&1 /home/pi/rclocal.log &

# Make sure exit 0 is the last line of rclocal
exit 0

9. Reboot and test your script

sudo shutdown -r now

You should have the dashbutton.py process running in the background, listening for presses.
To verify your Python script is running type:

ps wafux | grep dash

You should see something like:

root      2490  0.0  0.6   3756  2296 ?        S    May21   0:00 sudo /usr/bin/python /home/pi/dashbutton.py /home/pi/rclocal.log
root      2499  0.0  1.8   8904  6924 ?        S    May21   0:00  \_ /usr/bin/python /home/pi/dashbutton.py /home/pi/rclocal.log

This means the Python script is running and listening for your presses.

Prepaid energy monitor with a Raspberry Pi

Instructions: https://github.com/n8kowald/powerpi

My flat has a prepayment energy meter.
Sometimes I forget to check how much money we have and the power goes out, forcing me to walk to the nearest open PayPoint location at inconvenient times.

I wanted a way to automate these checks.

The Raspberry Pi B+ enclosed emails me a photo of the money we have left

I had an unused Raspberry Pi B+, camera module (REV 1.3), and a USB Wi-Fi dongle. With these I could take a photo of the amount left and email myself a photo every day at a specified time.

It turned out to be easy.
The most time consuming bit was experimenting with raspistill options to produce the best photo for the dark cabinet it’s enclosed in.

Amount of money left on our prepaid electricity meter

Amount of money left on our prepaid electricity meter

As you can see the photo is not amazing. However, considering it was taken in a dark cabinet I’m happy with the result.

Full instructions here: https://github.com/n8kowald/powerpi

Next, I want to use Optical Character Recognition (OCR) to detect the amount in the photo.
I could then take readings every 5 minutes, save that to a database and produce a graph of the times when we use the most electricity.

Responsive utility classes

Utility classes serve a single purpose.
Examples of utility classes: .align-left, .float-left, .clearfix
Responsive utility classes allow you to create very flexible responsive websites.

This post is about what makes a great responsive utility class.

I’ll talk about: naming and a useful pattern.

For a good introduction to utility classes I suggest David Clark’s excellent article here.

Naming

I don’t like namespaced or aliased utility classes.
I don’t like them because they are harder to think about.

An example of a bad utility class is: .u-mt-10@md

Why is this bad?
You must know that .u is a convention for utility classes.
You must know that mt refers to margin-top.
You must know that @md means this utility class targets “Medium” sized devices.

What’s an alternative?

Utility classes should use CSS property names and values: .margin-top-10-xs

It is clear that this utility class adds 10 pixels of top margin.
Users familiar with Bootstrap’s grid system may guess that this targets “Extra small” viewports and greater.

Pattern: Inclusives and Exclusives

Two types of responsive utility classes are needed when building layouts: inclusives and exclusives.

  1. Inclusive: You need a utility class to target a specific device size and everything greater than it (most common)
  2. Exclusive: You need a utility class to only target a specific device size

Separate responsive utility classes into two categories: inclusives and exclusives.

A simple naming convention in your utility class tells you how it will behave.

Inclusives

Inclusive classes include the named device size and device sizes greater than itself.

When you use Bootstrap’s responsive grid you only have to define an element as .col-xs-12 and you get 12 columns on mobiles, tablets and desktops.

Noticing that this simple pattern results in less classes showed me that by default all responsive utility classes should behave this way.

Responsive utility classes are inclusives by default.

Every utility class that uses the convention of .property-value-deviceSize is an inclusive class.

You may have noticed our utility classes follow a different convention to Bootstrap’s columns.

Bootstrap uses: .property-deviceSize-value
We use: .property-value-deviceSize

This was intentional because it’s easier to think about.

When creating an element I know I want to apply 10 pixels of top margin to an element. The targeted device is a detail.

In my head I’ll say “margin top 10 on mobiles and greater”, not “margin top on mobiles and greater, of 10 pixels”.

How inclusives look in code

/* Inclusives */

// Mobile and >
.margin-top-10-xs {
    margin-top: 10px;
}
// Tablet and >
@media screen and (min-width: $screen-sm-min) {
    .margin-top-10-sm {
        margin-top: 10px;
    }
}
// Desktop and >
@media screen and (min-width: $screen-md-min) {
    .margin-top-10-md {
        margin-top: 10px;
    }
}

Exclusives

Exclusives target the named device size only.

They follow this convention: .property-value-only-deviceSize
A margin top of 10 pixels applied to only mobiles looks like: .margin-top-10-only-xs

How exclusives look in code.

/* Exclusives */

// Mobile - max-width used
@media screen and (max-width: $screen-xs-max) {
    .margin-top-10-only-xs {
         margin-top: 10px;
     }
}
// Tablet
@media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .margin-top-10-only-sm {
        margin-top: 10px;
    }
}
// Desktop
@media screen and (min-width: $screen-md-min) {
    .margin-top-10-only-md {
        margin-top: 10px;
    }
}

Distinguishing between inclusive and exclusive classes leads to incredibly flexible responsive utility classes.

Structural responsive utility classes

Copy this pattern for other structural properties.

Responsive utility classes are almost always used on structural CSS.

– Margin
– Padding
Line breaks

Utility classes should be imported last

Adding utility classes last helps you avoid specificity issues.
Using Sass or Less simply import your utility classes last.
By including our utilities last, I’ve not had to use !important yet.

@import base/reset.scss;
@import layout/layout.scss
@import module/headers.scss;
@import page/homepage.scss;
@import utilities/utilities.scss;

tl;dr

By naming our responsive utility classes with valid CSS property names and values we have created clear, easy to use utility classes that don’t require education – if you are familiar with CSS properties already.

By breaking responsive utility classes into inclusives and exclusives by -xs being inclusives and -only-xs being exclusives, our responsive utility classes are very flexible.

Page 1 of 7

Powered by WordPress & Theme by Anders Norén