This slideset was developed for the Young Rewired State Festival of Code. It shows how Processing 2.0 can be used to develop Apps to work with JSON Open Data.

1. Processing 2.0
+ Open Data
@stevebattle
stevebattle.me
blog.stevebattle.me
processing.freeforums.org

2. 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

3. 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

4. • Save this sketch as ‘weather’
• Drag openjson.jar onto the PDE, see:
http://code.google.com/p/battle-bot/downloads/list

5. 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"
}
]}}

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

7. Get the five day forecast

8. {"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

9. Method chaining

10. Plan ahead with a sketch

11. Graphical Widgets
• Sketch > Import Library > Add Library
• Sketch > Import Library > ControlP5
import controlP5.*;

12. ListBox Widget
public void draw() {
background(255);
fill(0);
}

13. •Define locationID as global:
String locationID = "310004"; // Bristol
•Replace // Search for ‘Bristol’ code with:
initList(locations);

15. •Detect the List selection event
to assign locationID

16. Tab Widgets
• To make the siteList selection happen
before it gets the forecast we’ll put
them on different tabs.

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

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

19. Chart Widget
• Instead of printing the forecast we’ll
plot the temperatures on a chart.
Chart chart;

20. Modify initForecast()

21. Upload App
A 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

22. 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));

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