Download - Processing 2.0 + Open Data
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