Processing 2.0+ Open Data

@stevebattlestevebattle.me

blog.stevebattle.me

processing.freeforums.org

Here’s the plan

1.Access Open Data (weather forecast)

2.Read JSON (JavaScript Object Notation)

3.Graphical widgets (ControlP5)

4.Upload App to mobile device

Access Open Data• The Met Office have created DataPoint:

http://www.metoffice.gov.uk/datapoint

• Free registration here to get a key:http://bit.ly/11ApBRT

• All resources have a base URL:http://datapoint.metoffice.gov.uk/public/data/

• Add resource path and key parameter:http://datapoint.metoffice.gov.uk/public/data/RESOURCE?key=XXXX

• Five day forecast for Bristol:http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/json/310004?res=daily&key=XXXX

• Save this sketch as ‘weather’

• Drag openjson.jar onto the PDE, see:http://code.google.com/p/battle-bot/downloads/list

JSON http://www.json.org

• Objects {} containing string:value pairs

• Arrays [] of values

• Values can be objects, arrays, strings, numbers, booleans, or null

{"Locations": {"Location": [ { "id": "3094", "name": "Rosehearty Samos", "longitude": "-2.121", "latitude": "57.698" }, ... { "id": "354552", "name": "Perranuthnoe (Perran Sands) (Beach)", "longitude": "-5.4411", "latitude": "50.1121" } ]}}

• Use a loop to search JSON for an object named ‘Bristol’.

Get the five day forecast

{"SiteRep": { "Wx": {"Param": [ { "$": "Day Maximum Temperature", "name": "Dm", "units": "C" }, ... ]}, "DV": { "dataDate": "2013-08-02T21:00:00Z", "Location": { "Period": [ { "value": "2013-08-02Z", "type": "Day", "Rep": [ { "Dm": "24", ... } ] }, ... ] } "type": "Forecast" }}}

The five day forecast

Method chaining

Plan ahead with a sketch

Graphical Widgets• Sketch > Import Library > Add Library

• Sketch > Import Library > ControlP5 import controlP5.*;

ListBox Widget

public void draw() { background(255); fill(0);}

•Define locationID as global:String locationID = "310004"; // Bristol

•Replace // Search for ‘Bristol’ code with:initList(locations);

•Detect the List selection event to assign locationID

Tab Widgets• To make the siteList selection happen

before it gets the forecast we’ll put them on different tabs.

• Move the forecasting code at the end of setup() into its own function...

...and call the function when the ‘forecast’ tab is selected.

Chart Widget• Instead of printing the forecast we’ll

plot the temperatures on a chart.

Chart chart;

Modify initForecast()

Upload AppA few minor tweaks are required to run this as an Android App.

• Switch to ‘Android’ mode.

• You have to give the App permission to

use the internet:

Android > Sketch Permisions > Check INTERNET

App Mods• Set the size() for the device:

size(displayWidth,displayHeight);

• Optionally change the orientation:orientation(LANDSCAPE);

• The tab widgets are too small:cp5.getTab(“default”).setWidth(200).setHeight(40);cp5.getTab(“forecast”).setWidth(200).setHeight(40);

• The ListBox is too small. Double: ItemHeight, BarHeight, ScrollBarWidth.

• The font is too small:PFont pfont = createFont(“Ariel”,20,true);cp5.setFont(new ControlFont(pfont,24));

Summary• Decorating the Met Office weather

chart is left as an exercise for the reader. See controlP5 javadoc:<http://www.sojamo.de/libraries/controlP5/reference/>

• Try displaying other information in the forecast, such as the weather summary (field “W”). <http://www.metoffice.gov.uk/media/pdf/3/0/DataPoint_API_reference.pdf>

• You now have the technology to create great open data Apps using Processing 2.0