⊥Źródło:10.5: Working with APIs in Javascript – p5.js Tutorial
Najpierw rejestrujemy się na stronie: https://sunrise-sunset.org/api i pobieramy API ID.
Link dzięki któremu ściągamy dane w formacie JSON:
http://api.openweathermap.org/data/2.5/weather?q=Gdynia,pl&APPID=79af02db1af757d0b6d17411ebfdd728&units=metric&lang=pl
Ściągnięte dane dla miasta Gdynia wyglądają tak:
{“coord”:{“lon”:18.54,”lat”:54.52},”weather”:[{“id”:800,”main”:”Clear”,”description”:”clear sky”,”icon”:”01n”}],”base”:”stations”,”main”:{“temp”:284.15,”pressure”:1019,”humidity”:40,”temp_min”:284.15,”temp_max”:284.15},”visibility”:10000,”wind”:{“speed”:4.1,”deg”:160},”clouds”:{“all”:0},”dt”:1523133000,”sys”:{“type”:1,”id”:5349,”message”:0.0039,”country”:”PL”,”sunrise”:1523073692,”sunset”:1523122509},”id”:3099424,”name”:”Gdynia”,”cod”:200}
Aby przejrzeć je w bardziej czytelnej formie przyda się rozszerzenie JSON. Podaję dla Safari, ale są też dla Chrome i Firefox
Safari JSON extension: https://github.com/rfletcher/safari-json-formatter/downloads
Kod p5.js
</pre>
var weather;
var api = 'http://api.openweathermap.org/data/2.5/weather?q=';
var apiKey = '&APPID=79af02db1af757d0b6d17411ebfdd728';
var units = '&units=metric';
var input;
function setup() {
createCanvas(400, 200);
var button = select('#submit');
button.mousePressed(weatherAsk);
input = select('#city');
}
function weatherAsk() {
var url = api + input.value() + apiKey + units;
loadJSON(url, gotData);
}
function gotData(data) {
weather = data;
}
function draw() {
background(100);
if (weather) {
var temp = weather.main.temp;
var humidity = weather.main.humidity;
console.log(temp, humidity);
fill(255);
textSize(20);
text(input.value(), 50, 50);
text("temperatura = "+temp+"°C", 50, 100);
text("wilgotność = "+humidity+"%", 50, 150);
//ellipse(100, 100, temp, temp);
//ellipse(300, 100, humidity, humidity);
}
}
<pre>
Kod HTML
</pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.6_p5.js_api_query_user_input</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
<p>
City: <input id ="city" value="Gdynia"></input>
<br/>
<button id="submit">submit</button>
</p>
</body>
</html>
<pre>