Pebble communication with Flask

I travel often for work so I have to spend some time in airports all around Canada.  Recently, I came across a Best Buy Express machine while waiting for my plane and decided to finally buy a Pebble :

The Pebble is a nice watch for its price (100$) and what I really like about it is the CloudPebble, an online development environment. The documentation is great and there is some nice tutorials to get started.

I wanted to make a quick project to learn a little bit about apps development. What I done is simple app that send an HTTP POST request to turn on/off an LED on my Intel Edison Arduino Breakout Board. There is two ways you can code for the Pebble on CloudPebble, you can use C or Javascript (with Pebble.js). The C way offers more flexibility at the expense of bigger code. The Javascript way is really simple, the API is a bit more limited but you can create great apps in less time. You also have easily access to the "ajax" function, which is the killer feature in my humble opinion.

The next 2 pictures show how simple the app is. This one is a picture of the app launcher in the Pebble menu :

And this is the actual app, it cannot be more simple than that :

The structure of the programming is the following :

1. Create a menu that displays 2 item (LED ON/ LED OFF)
2. Generate an event when the user "select" the menu item
3. When the event is generated, send a POST request to the embedded Linux board running Flask 

var UI = require('ui');
var ajax = require('ajax');

// Connect to Edison and send POST data (state=ON | state=OFF)
function request(state) {
ajax(
  {
    url: 'http://192.168.0.80:5000',
    method: 'post',
    data: {state:state}
  },
  function(data) {
    console.log(data);
  },
  function(error) {
    console.log('The ajax request failed: ' + error);
  }
);

}

// Make a list of menu items (ON/OFF)
var states = [
  {
    title: "ON",
    icon: "images/LEDon.png"
  },
  {
    title: "OFF",
    icon: "images/LEDoff.png"
  }
];

// Create the Menu
var menu = new UI.Menu({
  sections: [{
    title: 'LED State',
    items: states
  }]
});

// Send command when menu item is selected
menu.on('select', function(e) {
request(e.item.title);
});
      
menu.show();

On the other side, the Python script running Flask capture that POST request and turn an LED on or off depending of the value of the "state" data included in the request :

from flask import request
from flask import Flask
import mraa

app = Flask(__name__)

pin = mraa.Gpio(13)
pin.dir(mraa.DIR_OUT)

@app.route("/", methods=['POST',])
def toggle():
    state = request.form['state']
    print state
    if state=="ON":
        pin.write(1)
    elif state=="OFF":
        pin.write(0)
    return "done!"

if __name__ == "__main__":
    app.run(host="0.0.0.0",port=5000)

When the script is running, I print the value of "state" each time a request is received. We can see that the request is successful because the HTTP response is 200 (OK).

A great way to test the Python script in your Linux terminal is to use "curl" to simulate the Pebble POST request

curl --data "state=ON"  192.168.0.80:5000
curl --data "state=OFF" 192.168.0.80:5000

As usual, my code does nothing more than turning an LED on or off. This is intended to be used as a template for real projects. Remember that if you can toggle an output pin you can dominate the world :)