Patrick Catanzariti is a freelance web developer with a passion for exploring the amazing things that brilliant minds make possible every day through new web technologies and techniques. He loves opportunities to tinker with something new in a tech demo.

Patrick's articles

  1. Mobile Web Superpowers – Ambient Light API

    The web has become a virtual environment that brings with it a whole range of experiences. If someone wants to look up the latest discouraging remarks about Ben Affleck’s casting as Batman on their smartphone while discussing the new Batman movie at a picnic. They can read as many comments as their heart desires. We live in an age where, as developers, we can provide the public with resources, knowledge and experiences that compliment their day to day lives and random interests wherever they are. With new devices APIs and sensors, we’re starting to see possibilities that will allow us to respond to their environment, location and device state.

    There’s a lot happening in the world of device APIs. For eager developers like myself, there’s an exciting opportunity to start exploring how we can use these upcoming APIs to improve the experience of visitors to our website/web app.

    Are they in a dark room where they’d rather not have a bright white background burning their retinas when they access our new “Gotham” TV show fansite?

    Are they likely to be struggling at the aforementioned picnic – squinting at our text through the midday sun?

    Is their phone battery about to run out, making it likely they’ll not want to play that streaming video background of the Gotham city skyline as they read the latest Batman fan fiction?

    With this series of articles, I’ll be covering various APIs like these along with demos and potential uses for each one. Hopefully it’ll shake up some ideas of your own for an upcoming project!

    We’ll start with the W3C Ambient Light API which will allow us to respond to the levels of light around a device.

    The basics of the Ambient Light API

    The Ambient Light API provides developers with a way to sense the light intensity around a device. It measures the light around the device in lux, an international unit of measurement for light intensity.

  2. Getting Started with Browserify

    JavaScript implementations have been getting more and more complex as the beautiful beast we call the web evolves each year. Many of us now work with JavaScript modules – independently functioning components that come together to work as a cohesive whole, yet can happily have any component replaced without causing armageddon. Many of us have been using the AMD module pattern and RequireJS to accomplish this neatly.

    Last year, Browserify hit the scene and brought on a lot of excitement. As the dust starts to settle, I wanted to write up an overview on what Browserify is, how it works, and a few options for adding it into your workflow.

    What is Browserify?

    Browserify allows us to use node.js style modules in the browser. We define dependencies and then Browserify bundles it all up into a single neat and tidy JavaScript file. You include your required JavaScript files using require('./yourfancyJSfile.js') statements and can also import publicly available modules from npm. It’s also quite simple for Browserify to generate source maps for you so that you can debug each JS file individually, despite the fact it’s all joined into one.

    Why Import node Modules?

    Importing modules is a blessing – rather than visit a range of sites to download libraries for your JavaScript, just include them using require() statements, ensure that the modules have been installed and you’re good to go. Commonly used JavaScript libraries like jQuery, Underscore, Backbone and even Angular (as an unofficial distribution) are all available to work with. If you’re working on a site that already runs node, you’re simplifying things even further with one common way to structure all of your JS. I really like that concept.

    What You’ll Need

    To get started with Browserify, the bare minimum you’ll need is:

    • node.js
    • npm – this comes installed with node by default.
    • Browserify – I’ll explain how to install this one.
    • A pack of JavaScript modules you’re ready to tame!

    Getting Started

    To get started, you’ll need node and npm installed on your computer. Head to the links above if you’re looking for guidance on getting these installed. If you’re totally stuck, try these instructions on installing Node.js via package manager. You won’t need to actually do any node work to use Browserify. We’re installing node solely because npm runs off it. Once you’ve got npm, you can install Browserify using the following command:

    [code]
    npm install -g browserify
    [/code]

    What we’re doing here is using npm to install Browserify globally on your machine (the -g tells npm to install a module globally).

    If you get an error that starts with the following:

    [code]
    Error: EACCES, mkdir '/usr/local/lib/node_modules/browserify'
    [/code]

    Then you have a permission issue. You can sudo the command, but I recommend checking out this post instead.

    Creating Your First Browserify File

    Let’s start by creating a Browserified JavaScript file that imports an extremely popular module, Underscore. We’ll use Underscore to track down Superman. I’ve called my JS file main.js, and have placed it in a js folder in my project.

    We start by assigning the _ variable to Underscore using Browserify’s require() statement in our JavaScript:

    [js]
    var _ = require(‘underscore’);
    [/js]

    Next, we’ll use the each() and find() functions from Underscore. We’ll search through two arrays of names and run a console.log to say whether it sees Superman or not. Highly advanced stuff Lex Luthor could only dream of. Our final JavaScript code will look like this:

    [js]
    var _ = require(‘underscore’),
    names = ['Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'],
    otherNames = ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen'];

    _.each([names, otherNames], function(nameGroup) {
    findSuperman(nameGroup);
    });

    function findSuperman(values) {
    _.find(values, function(name) {
    if (name === ‘Clark Kent’) {
    console.log(‘It\’s Superman!’);
    } else {
    console.log(‘… No superman!’);
    }
    });
    }
    [/js]

    We’ll want to ensure that Browserify can find the npm module when it tries to add it to our project. The bare basics of doing so involves opening up your terminal, navigating to the folder which holds your JavaScript project, and then running this command to install Underscore in that folder:

    [code]
    npm install underscore
    [/code]

    For those unfamiliar with how node and npm work, this creates a folder called node_modules in your project which holds the code for your Underscore module. The command retrieves the latest version of Underscore from the npm repository at https://registry.npmjs.org/underscore. With that module in our node_modules folder, Browserify can now find it and use it.

    Running Browserify for the First Time

    When we run Browserify, it’ll want to build a new JavaScript file with all of our attached modules. In this case, it’ll build a JavaScript file with Underscore inside it. We’ll need to decide on a name for this new file, I’ve gone with findem.js. I run this command from my project’s root folder:

    [code]
    browserify js/main.js -o js/findem.js -d
    [/code]

    This command reads your main.js file and outputs it into the findem.js file defined by the -o option. I’ve included the -d option so that it’ll generate a source map for us too, this way we can debug main.js and underscore cleanly as separate files.

    Using the Browserify Output

    From there, it’s as simple as including the file on your page like any other JS file:

    [html]

    [/html]

    Importing Your Own JavaScript Files

    It’s unlikely that all of your application will come from node modules. To include your own JavaScript, you can use the same require() function. The following line of JavaScript will import a JS file called your_module.js into the greatestModuleEver variable:

    [js]
    greatestModuleEver = require(‘./your_module.js’);
    [/js]

    To import our JavaScript like this, we just need to structure our JavaScript as a module. To do so, we must define module.exports. One way to do this is shown below.

    [js]
    module.exports = function(vars) {
    // Your code
    }
    [/js]

    Side Note!

    If you’ve got a bunch of JavaScript libraries that aren’t in npm and you’re looking for an easier way to get these all into Browserify, you can use the Browserify-shim npm module to convert these files for you. We won’t be using it in this article but some devs might be keen to give that a go.

    Our Example with a Module

    To give a simple example of how this works, we’ll take out the arrays from the previous superhero search example and replace them with a separate JS module that returns an array of names. The module looks like so:

    [js]
    module.exports = function() {
    return ['Barry Allen', 'Hal Jordan', 'Kara Kent', 'Diana Prince', 'Ray Palmer', 'Oliver Queen', 'Bruce Wayne', 'Wally West', 'John Jones', 'Kyle Rayner', 'Arthur Curry', 'Clark Kent'];
    }
    [/js]

    Next, we’ll import that module into our code using names = require('./names.js'):

    [js]
    var _ = require(‘underscore’),
    names = require(‘./names.js’);

    findSuperman(names());

    function findSuperman(values) {
    _.find(values, function(name) {
    if (name === ‘Clark Kent’) {
    console.log(‘It\’s Superman!’);
    } else {
    console.log(‘… No superman!’);
    }
    });
    }
    [/js]

  3. Advanced Pebble Watch Configuration

    For anyone who watched Power Rangers as a kid and dreamed of having a fancy watch that made them feel like a superhero, smartwatches are a dream come true. I may be one of the aforementioned Power Ranger dreamers. Combine that with the developer urges that fill my veins and you’ve got a child of the 90s who is soon to become a grey, mad scientist like Doctor Emmett Brown from “Back to the Future.”

    I recently wrote an article on the basics of Pebble Watch development with JavaScript. In summary, we made a watchface that used the Foursquare API to tell the user where their nearest Starbucks was at all times. This is what it looked like in action:

    The Find Me Starbucks app in action

    I mentioned that there was a bit more that was possible with JavaScript which I couldn’t cover in that article. This is my follow up that’ll cover the other features of the PebbleKit JavaScript framework.

    In this article, I’ll be covering how to expand the “Find Me Starbucks” app we developed in the previous article to allow the user to choose the type of location the app will find for them. Not everyone is as big a fan of Starbucks as I am! We’ll add a configuration screen that’ll allow them to type in their own place of interest and save that setting for them each time they use the app.

    If you’re looking to follow along with this tutorial, you’ll need:

    • Either an Android phone or an iPhone with the Pebble app installed and running.
    • A Pebble watch.
    • API credentials for the FourSquare API.
    • An available Wi-Fi network to transfer your app to your mobile device and Pebble watch.
    • A basic knowledge of JavaScript.
    • The willingness to use a command line and experiment with C code.
    • To preferably have gone through the previous tutorial or have a knowledge on the basics of Pebble app development with the PebbleKit JavaScript framework.
    • An online web host to store a single file online that’ll be your configuration page.

    Full Code for This Tutorial

    Rather than throw in all of the code from our last tutorial into this article, you can check out the code for “Find Me Starbucks” on GitHub or read through the previous tutorial. The code for our updated app is also available over at “Find me Anything” on GitHub, so if you’d like to download the code and follow along – feel free!

    How Configuration Works in the World of Pebble Apps

    Prior to the introduction of the PebbleKit JavaScript Framework in version 2.0 of the SDK, Pebble apps needed to have a companion app installed onto the user’s phone in order to accept any custom settings. If a user wanted a weather app to show them the weather in Celsius rather than Fahrenheit, they’d need to install the companion app first and open that to change the settings (or have a crude settings window on the watchface app itself).

    JavaScript Enabled Settings Page

    With the new SDK, we can now define a configuration page that’ll be accessible within Pebble’s Android/iOS app itself. Settings are accessed in the same spot as the place the user goes to install and arrange their watch apps. Cleaner and more logical from a user’s standpoint.

    JavaScript Enabled Local Storage

    The new SDK’s JavaScript also uses the W3C recommendation for Web Storage, allowing you to store settings within the app for future use. If the user asks to have that Celsius/Fahreinheit setting, we can use web storage to remember the user’s preference. In our case, we want to store the type of location the user is interested in.

    How it Works

    The settings page is a single page on the web that contains a form to toggle your app’s settings. The JavaScript in your app waits for any adjusted settings to be submitted through the form back to your app’s JavaScript and stores the settings it receives in local storage.

    Sound confusing? It’s not an ideal set up for some cases, as it means that you’ve got to host your own settings page somewhere on the web for others to access. It seems that Pebble plans on having the ability to bundle this settings page up with the app in the future which would be great for some apps out there. The current setup does come with benefits – if you want to reskin or adjust something on the settings page alone, there’s no need to update the app itself as the settings page is independent.

    Update Your appinfo.json

    First, to enable the settings page on your application, we add "configurable" to the capabilities array that we previously used to define access to the geolocation API via the "location" keyword:

    [js]
    “capabilities”: ["location", "configurable"]
    [/js]

    We also add in one extra key for our app to use called "searchingFor", this will be the string that’ll either be “Starbucks” or a custom type of location that the user requests:

    [js]
    “appKeys”: {
    “location”: 0,
    “searchingFor”: 1
    }
    [/js]

    Creating Your Settings Page

    As mentioned above, you’ll need to host a webpage with a form for the user to change what they’re searching for. My one looks like so:

    Find Me Anything settings screen

    The basic HTML you’ll need looks like so (I’ve removed my styling and framework related markup for simplicity):

    [html]




    [/html]
  4. Controlling an Arduino with NodeJS and Johnny-Five

    One of the advantages of being a JavaScript developer is the array of APIs and frameworks that bring a whole new level of possibilities to what previously was restricted to web development. A great example of this is the world of electronics and Arduinos. JavaScript libraries/frameworks such as Firmata and Johnny-Five make it a lot easier for JavaScript developers to get more involved and develop applications that can interact with, respond to and control Arduino powered technology.

    This video aims to help those new to Arduinos and NodeJS understand the basics of getting started. I’ll provide an overview of what you’ll need to do in order to get a Node application speaking to an Arduino using the Johnny-Five JavaScript framework. By the end we will have used the power of JavaScript to turn an LED light on and off!

  5. Pebble Watch Development with JavaScript

    The Pebble watch has seen a growing number of techies like myself wearing it excitedly around their wrists in recent months. They’ve just released version two of their API which not only brings a Pebble app store into fruition but also brings a JavaScript framework into the picture. The PebbleKit JavaScript Framework allows you to use JavaScript to dynamically read in data and events from the web onto a Pebble watch app, and vise versa. This brings an exciting new realm of potential to Pebble apps – we can now easily integrate the Pebble watch with any number of cool web APIs.

    This article will teach you how to add JavaScript to a Pebble app using the PebbleKit JavaScript Framework. We’ll be creating a watchface that displays the address of the nearest Starbucks at all times. To get this data, we’ll be using the Foursquare API to find nearby locations using their venue search. It’ll be simple to change the functionality to search for a different type of location if you’re not a big Starbucks drinker!

    This article is written from the perspective of a JavaScript developer looking to get started from the very beginning. There will be a bit of C programming involved as the Pebble watch app itself runs on C. If you aren’t comfortable with C, you can use the sample C code and adjust JavaScript to add new functionality and experiment away!

    Prerequisites

    If you’re looking to follow along with this tutorial, you’ll need the following:

    • An Android phone or an iPhone with the Pebble app installed and running.
    • A Pebble watch.
    • API credentials for the Foursquare API.
    • A Wi-Fi network to transfer your app to your mobile device and Pebble watch.
    • The bravery to combine JavaScript with some C code.

    One rather important point to note: your iPhone/Android device and your computer will need to be on the same Wi-Fi network in order for you to push new apps to it.

    Installing the Pebble SDK

    We need to install the Pebble SDK locally. Download and installation instructions vary depending on OS, but Pebble’s documentation covers it quite clearly. Therefore, I won’t go into too much detail here.

    Your First Project

    First, create a folder for all your Pebble apps, and navigate to it in a terminal window:

    [code]
    mkdir /Users/patcat/pebble-dev/projects
    cd /Users/patcat/pebble-dev/projects
    [/code]

    Next, create a new project using the following command.

    [code]
    pebble new-project --javascript find_me_starbucks
    [/code]

    This command makes a new directory with the name of your project (e.g. find_me_starbucks). We’re going to be working in that directory, so cd into it. Inside the project directory you’ll notice that Pebble has been kind enough to set a bunch of stuff up for us:

    • appinfo.json – This is really similar to a package.json file for Node developers.
    • resources – Keep images and such in here if your app needs them.
    • src – All your code lives here. This is where we’ll start.
    • wscript – This file tells the Pebble SDK how to build your app. This file is best left alone unless you know what you’re doing.

    Running the App on the Pebble Device

    Next, we’ll verify that we can successfully get our sample app onto the Pebble watch. Ensure that you’re still in your project folder and run the following build command.

    [code]
    pebble build
    [/code]

    That will run in the terminal and prepare everything needed for your app to upload to your device. If this is the first time you’re doing Pebble development, we’ll need to set up the Pebble watch to accept our test app. To do this:

    • On Android, open the Pebble app > Settings > Developer Options and tick Enable Developer Connection.
    • On iOS, go to the iOS settings application > Pebble > Enable Developer Mode.

    Next, open up the Pebble app, open the menu, and click the newly enabled “Developer” menu item. You should see a screen that displays the IP address of your Pebble watch. This screen is shown in the following figure.

    The Pebble Developer Screen

    Enter the following command in the terminal, substituting IP_ADDRESS_OF_YOUR_PHONE with your phone’s IP.

    [code]
    pebble install --phone IP_ADDRESS_OF_YOUR_PHONE
    [/code]

    Your Pebble watch should now have your test app. It should be a default app that just detects when you press each button on your Pebble watch. If everything worked properly, we can move on to the next step of locating a nearby Starbucks. If something went wrong, here are a few potential things to check:

    • Make sure your phone and your computer are both on the same network.
    • Make sure your Pebble watch has an available slot for an app. If not, you’ll need to remove one first!
    • Try restarting your phone and executing pebble install command again. Note that your IP address might change in the process.

    The appinfo.json File

    This file is an incredibly vital piece in our Pebble app puzzle. The command we ran earlier set up the very basic pieces, but we’ll want to know exactly what’s what and where we need to make some adjustments. The appinfo.json file for “Find Me Starbucks” will look like this:

    [js]
    {
    “uuid”: “f614da96-1c67-4ab6-be80-903d63728080″,
    “shortName”: “Find Me Starbucks”,
    “longName”: “Find Me Starbucks”,
    “companyName”: “Patrick Catanzariti”,
    “versionCode”: 1,
    “versionLabel”: “1.0.0″,
    “watchapp”: {
    “watchface”: true
    },
    “appKeys”: {
    “location”: 0
    },
    “capabilities”: ["location"],
    “resources”: {
    “media”: []
    }
    }
    [/js]

    Here is a breakdown of what all of these fields mean:

    • uuid – This is a unique ID that Pebble has generated for our project. There is no need to change this from what is generated for us. Do not use the one shown in the listing above.
    • shortName – The name appears on the Pebble watch launcher.
    • longName – The name appears on the Pebble watch mobile app. The long name “Find Me Starbucks” is short enough to fit on the Pebble watch, so both names are the same in this case.
    • companyName – The company or developer name.
    • versionCode – Version number that you’ll increase with each release.
    • versionLabel – The version label. Pebble recommends the format Major.Minor.Bugfix.
    • watchapp – Two options can be added here.
      • watchface – Whether the app is a watchface (the user cannot interact with it and they’ll expect it to tell them the time) or a more fully featured app that the user can interact with. We’re making a watchface with the “Find Me Starbucks” app.
      • only_shown_on_communication – Whether the app should be visible only when receiving data from the mobile app. This is optional, and for our app, we don’t need it.
    • appKeys – The key names we’ll be storing data in to pass from our JavaScript to the Pebble watch. I’ll explain this in more detail soon, but it’s important to get this right.
    • capabilities – This field allows you to define permissions for the app, such as whether it will need to access the user’s location and whether the app will have a configuration window on the mobile app (e.g. ["location", "configurable"]). On version 2 of the API, specifying the location capability may not be necessary, but I like to include it just to be on the safe side.
    • resources – Only contains the media object, which lists all the media to be bundled with the app. The formats accepted are raw, png, png-trans, and font. For this tutorial, we won’t be using any images, but if you decide to include an icon for your app (or images in the app itself), you’ll need to add the images here.

    The “Find Me Starbucks” C Code

    The pebble new-project command created a C file in your src folder. Open that file (if you’ve been following my naming so far, it’ll be src/find_me_starbucks.c). The C code for “Find Me Starbucks” is a bit more complex than the initial template. It uses the concepts in the initial template file and a few new ones. The main focus of this article is the JavaScript side of it all, so we won’t go over this in detail. An explanation of the C code is provided as a bonus at the end of this article. It will give you a bit more background so you can make some small adjustments to compliment your JS.

    For now, we’ll copy and paste the following C code into the src/find_me_starbucks.c file. It should replace everything that was there before:

    [code]
    #include

    static Window *window;
    static TextLayer *text_layer;
    static TextLayer *label_layer;
    static TextLayer *time_layer;

    static AppSync sync;
    static uint8_t sync_buffer[64];

    enum {
    OUR_LOCATION = 0x0
    };

    void sync_tuple_changed_callback(const uint32_t key,
    const Tuple* new_tuple, const Tuple* old_tuple, void* context) {

    switch (key) {
    case OUR_LOCATION:
    text_layer_set_text(text_layer, new_tuple->value->cstring);
    break;
    }
    }

    // http://stackoverflow.com/questions/21150193/logging-enums-on-the-pebble-watch/21172222#21172222
    char *translate_error(AppMessageResult result) {
    switch (result) {
    case APP_MSG_OK: return "APP_MSG_OK";
    case APP_MSG_SEND_TIMEOUT: return "APP_MSG_SEND_TIMEOUT";
    case APP_MSG_SEND_REJECTED: return "APP_MSG_SEND_REJECTED";
    case APP_MSG_NOT_CONNECTED: return "APP_MSG_NOT_CONNECTED";
    case APP_MSG_APP_NOT_RUNNING: return "APP_MSG_APP_NOT_RUNNING";
    case APP_MSG_INVALID_ARGS: return "APP_MSG_INVALID_ARGS";
    case APP_MSG_BUSY: return "APP_MSG_BUSY";
    case APP_MSG_BUFFER_OVERFLOW: return "APP_MSG_BUFFER_OVERFLOW";
    case APP_MSG_ALREADY_RELEASED: return "APP_MSG_ALREADY_RELEASED";
    case APP_MSG_CALLBACK_ALREADY_REGISTERED: return "APP_MSG_CALLBACK_ALREADY_REGISTERED";
    case APP_MSG_CALLBACK_NOT_REGISTERED: return "APP_MSG_CALLBACK_NOT_REGISTERED";
    case APP_MSG_OUT_OF_MEMORY: return "APP_MSG_OUT_OF_MEMORY";
    case APP_MSG_CLOSED: return "APP_MSG_CLOSED";
    case APP_MSG_INTERNAL_ERROR: return "APP_MSG_INTERNAL_ERROR";
    default: return "UNKNOWN ERROR";
    }
    }

    void sync_error_callback(DictionaryResult dict_error, AppMessageResult app_message_error, void *context) {
    APP_LOG(APP_LOG_LEVEL_DEBUG, "... Sync Error: %s", translate_error(app_message_error));
    }

    static void handle_second_tick(struct tm* tick_time, TimeUnits units_changed) {
    static char time_text[] = "00:00";

    strftime(time_text, sizeof(time_text), "%I:%M", tick_time);
    text_layer_set_text(time_layer, time_text);
    }

    static void init_clock(Window *window) {
    Layer *window_layer = window_get_root_layer(window);
    GRect bounds = layer_get_bounds(window_layer);

    time_layer = text_layer_create(GRect(0, 20, bounds.size.w, bounds.size.h-100));
    text_layer_set_text_alignment(time_layer, GTextAlignmentCenter);
    text_layer_set_text_color(time_layer, GColorWhite);
    text_layer_set_background_color(time_layer, GColorClear);
    text_layer_set_font(time_layer, fonts_get_system_font(FONT_KEY_BITHAM_42_LIGHT));

    time_t now = time(NULL);
    struct tm *current_time = localtime(&now);
    handle_second_tick(current_time, SECOND_UNIT);
    tick_timer_service_subscribe(SECOND_UNIT, &handle_second_tick);

    layer_add_child(window_get_root_layer(window), text_layer_get_layer(time_layer));
    }

    static void init_location_search(Window *window) {
    Layer *window_layer = window_get_root_layer(window);
    GRect bounds = layer_get_bounds(window_layer);

    label_layer = text_layer_create((GRect) { .origin = { 0, 90 }, .size = { bounds.size.w, 100 } });
    text_layer_set_text(label_layer, "Nearest Starbucks:");
    text_layer_set_text_color(label_layer, GColorWhite);
    text_layer_set_text_alignment(label_layer, GTextAlignmentCenter);
    text_layer_set_background_color(label_layer, GColorClear);
    text_layer_set_font(label_layer, fonts_get_system_font(FONT_KEY_GOTHIC_14_BOLD));
    layer_add_child(window_layer, text_layer_get_layer(label_layer));

    text_layer = text_layer_create((GRect) { .origin = { 0, 115 }, .size = { bounds.size.w, bounds.size.h } });
    text_layer_set_text(text_layer, "Loading...");
    text_layer_set_text_color(text_layer, GColorWhite);
    text_layer_set_text_alignment(text_layer, GTextAlignmentCenter);
    text_layer_set_background_color(text_layer, GColorClear);
    text_layer_set_overflow_mode(text_layer, GTextOverflowModeFill);
    text_layer_set_font(text_layer, fonts_get_system_font(FONT_KEY_GOTHIC_14));
    layer_add_child(window_layer, text_layer_get_layer(text_layer));

    Tuplet initial_values[] = {
    TupletCString(OUR_LOCATION, "Loading...")
    };

    app_sync_init(&sync, sync_buffer, sizeof(sync_buffer), initial_values, ARRAY_LENGTH(initial_values),
    sync_tuple_changed_callback, sync_error_callback, NULL);
    }

    static void window_load(Window *window) {
    init_location_search(window);
    init_clock(window);
    }

    static void window_unload(Window *window) {
    text_layer_destroy(text_layer);
    text_layer_destroy(label_layer);
    text_layer_destroy(time_layer);
    }

    static void init(void) {
    window = window_create();
    window_set_window_handlers(window, (WindowHandlers) {
    .load = window_load,
    .unload = window_unload,
    });

    app_message_open(64, 64);

    const bool animated = true;
    window_stack_push(window, animated);
    window_set_background_color(window, GColorBlack);
    }

    static void deinit(void) {
    window_destroy(window);
    }

    int main(void) {
    init();

    APP_LOG(APP_LOG_LEVEL_DEBUG, "Done initializing, pushed window: %p", window);

    app_event_loop();
    deinit();
    }
    [/code]

  6. Controlling Your Android Phone with the Wave of a Finger

    My definition of fun these days involves tinkering around with different technologies and seeing how I can play them off each other. Like a crazy conductor waving his arms wildly to get an orchestra to perform together, I type away like mad until an idea in my mind finally works.

    In this article, I’ll be showing you how I’ve created an Android Call Controller that mutes the ring on an incoming call with the circling of a finger. We’ll be using the following technologies:

  7. Accessing localhost From Anywhere

    You’ve spent hours working locally on your computer, getting that new website design to look just right. Your CMS is nicely set up with sample content and you want to test it out on a few mobile devices and tablets. Your client also wants to take a look — but you don’t have time to […]

  8. Controlling Web Pages with Javascript and on{X}

    I had lost my phone. I left it on a couch in a shopping mall and returned back to find it gone. Someone had been gifted a new phone via the awful art of stealing. I sent JavaScript code remotely to my phone over the web that sent me the coordinates of the device any […]

  9. JavaScript Beyond the Web

    In the span of only a few years, JavaScript has fast become the most valuable language I’ve ever worked with. I know I’m not alone on this one. I remember the early days on Netscape Navigator when I was overjoyed to see I could change the text on my webpage by asking the user a […]