Spark Core with a Humidity / Temp Sensor (HTU21D)

Monitor the humidity and temperature of your home or apartment from anywhere. The Spark Core connects to your home WIFI and allows you to monitor or control devices remotely. In this post we’ll start with a basic sensor. The HTU21D sensor was the least expensive sensor I could find that monitored both humidity and temperature.

This hookup guide is slightly different than hooking the HTU21D to an Arduino UNO. You can find an UNO hookup guide here. The downside to using the UNO is that it requires more effort to make the data accessible via the web. The Spark Core makes web integration a snap! I use my UNO for tinkering and my Spark Core for my connected home projects.

You’ll need:
- A Spark Core $39.00
- HTU21D sensor $14.95
- Male to Female wires $1.95
- Breakout Headers $1.50
- A soldering iron and solder

Pre-requisites:

Spark Core connected to your WIFI and ready to accept new sketches via the web interface. Solder 4 breakout headers to your HTU21D sensor for easy hookup using the male to female wires.

Step 1:

Connect the HTU21D sensor to the Spark Core. For accurate readings, make sure the sensor is at least 6 inches away from your board and heat sources.

Spark Core HTU21D

Click to zoom the images.

Breadboard Image

Step 2:

Create the Spark Core sketch. This sketch requires the HTU21D library that can be found on the Spark Fun product page. To include this library on the Spark Core, you’ll need to copy and paste the code into the tabs at the top of your sketch.

Humidity Sketch

Humidity.ino

// This #include statement was automatically added by the Spark IDE.
#include "HTU21D.h"

/* 
 HTU21D Humidity Sensor Example Code
 */

//Create an instance of the object
HTU21D myHumidity;
char resultstr[64];

void setup()
{
  myHumidity.begin();
  // expose your char buffer to the Cloud API
  Spark.variable("result", &resultstr, STRING);
}

void loop()
{
  
  float humd = myHumidity.readHumidity();
  float temp = myHumidity.readTemperature() * 9 / 5 + 32; // Convert to F
  sprintf(resultstr, "{\"data1\":%f,\"data2\":%f}", humd, temp);
  delay(30000);
}

Flash the new sketch to your device with the humidity.ino and HTU21D library files.

Step 3:

Use the Spark Cloud API to access the char buffer from your device.

https://api.spark.io/v1/devices/YOUR_DEVICE_ID/result?access_token=YOUR_ACCESS_TOKEN

Right now the results are in JSON and not visually appealing. In a future post I’ll walk through setting up a database, cron job and front end website to display the data.

Build a Single Page Web Application with Knockout.js

Knockout.js makes working with JavaScript much more enjoyable. The MVVM pattern helps to better organize code and keeps the UI in sync with the server. In the case of complex web applications, a framework like this is incredibly helpful. I would not recommend this library for static web content or sites that need to be SEO heavy. Developers with an Object-Oriented Programming background will be right at home with Knockout.js. Using the content provided by David Ly, I was able to quickly ramp up on this framework.

David Ly and I recently worked together to create a video tutorial series for Knockout.js. The video series walks through creating a simplified version of Google Docs, allowing users to create documents, spreadsheets and surveys. You can find the video series here:

http://www.packtpub.com/building-single-page-web-application-with-knockoutjs/video

Building a Single Page Web Application with Knockout.js

Knockout.js is a free, light weight framework you can use to build web applications.

Sample Video from Section 4:

Sections 1, 2 and 3 are pretty basic (starts out simple). Sections 4 and 5 get a bit heavier. Sections 6, 7 and 8 are code heavy, they dive into the more interesting features of Knockout.js. The video series is meant for people with a basic knowledge of HTML, CSS and JS.

Additional Resources

Knockout.js Homepage link
Knockout Context Debugger – Chrome Extension link
Knockout.js Plugins link

Android Device Manager

Use the new Android Device Manager to locate, ring your device or do a remote wipe. This website provided by Google is similar to the Find My iPhone service and requires initial set-up on your phone. I’ve known plenty of people that have lost phones and wished they had activated a service like this in advance. Log on today and set up your device.

https://www.google.com/android/devicemanager

The service doesn’t keep a history of your locations. Your device must be turned on and connected to the internet to work with the service. Here is a screen shot of the service in action:

Two

ActionBar with Android Support Library r18

Google recently released a new version of the Android Support Library (r18). They added a number of features. One of the biggest additions is support for the ActionBar back to 2.1 devices. In this post we’ll cover what you need to set up the new ActionBarActivity within your project. The sample code also shows how to integrate the DrawerLayout which was added in r13 of the support library.

With the addition of the Drawer and ActionBar to the support library, developing apps for 2.1+ devices is easier with fewer dependencies on third party libraries.

ActionBar with menu drawer screen shot.

Step 1: Setup Android Studio

First, download Android Studio. Next, open the SDK manager and download the latest Android Support Library and Android Support Repository. We’ll be using both v4 and v7 for this demo (step 2).

http://developer.android.com/sdk/installing/studio.html
http://developer.android.com/tools/support-library/setup.html#download

Make sure you are running the latest version of Android Studio (0.2.2+) and the latest version of Android (18.0.1+). Create a new project and continue to step 2.

Note: You can also include these libraries with Eclipse. Follow the instructions on the support library setup page for more information.

Step 2: Add Dependencies

Update your gradle.build file to include the following. If your gradle.build file is empty to start with, you’re editing the wrong file. Drill down into your project folder and find the gradle.build file with content in it.

buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:0.5.+'
    }
}
apply plugin: 'android'

repositories {
    mavenCentral()
}

dependencies {
    compile 'com.android.support:support-v4:18.0.+'
    compile 'com.android.support:appcompat-v7:18.0.+'
}

android {
    compileSdkVersion 18
    buildToolsVersion "18.0.1"

    defaultConfig {
        minSdkVersion 7
        targetSdkVersion 18
    }
}

At this point your project should compile.

Step 3: Add the Support ActionBar

public class MainActivity extends ActionBarActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ...

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

        ...

    }

Make sure to use the theme AppCompat or use a custom theme that inherits from AppCompat. If you don’t, you will get the following error: “must have a theme which inherits from Theme.AppCompat.”

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.AppCompat" >

Step 4: Style the ActionBar

You can use this website to help generate a theme based on AppCompat. Make sure to select AppCompat from the style compatibility drop down.

Keep in mind styles generated with that tool do not impact the styling of the ViewPager. ActionBar tabs may look similar to the ViewPager but they require a separate set of styles. More information can be found here.

Source Code:

Full source code to an example project built with Android Studio can be found here.