##// END OF EJS Templates
Documentation for QML Weather demo app
Tero Ahola -
r1225:fa2cebfef38c
parent child
Show More
1 NO CONTENT: new file 100644, binary diff hidden
@@ -0,0 +1,32
1 /*!
2 \example demos/qmlweather
3 \title Qml Weather
4 \subtitle
5
6 \image demos_qmlweather.png
7
8 This is a basic demonstration how to use the different chart types by using qml. By default the
9 application uses static test data to mimic a weather forecast. You can also obtain an application
10 id from http://www.worldweatheronline.com/ to get access to their weather API. You can then give
11 your application id as a parameter to the Qml Weather executable to make it use live data.
12
13 For example:
14 \code
15 bin\qmlweather.exe 1234567890abcdef123456
16 \endcode
17
18 The demo application uses a ChartView and a couple of series to visualize weather data:
19 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 1
20 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 2
21
22 To get data with weather forecast data, we make an HTTP GET request to World Weather Online. We
23 request the response in JSON data format.
24 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 3
25
26 The JSON response contains an array of forecast data:
27 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 4
28
29 That is then used as input data for our series and a ListModel we use as a container for weather
30 icon URLs:
31 \snippet ../demos/qmlweather/qml/qmlweather/main.qml 5
32 */
@@ -25,15 +25,19 Rectangle {
25 25 width: 360
26 26 height: 360
27 27
28 //![1]
28 29 ChartView {
29 30 id: chartView
30 31 title: "Weather forecast"
32 //![1]
31 33 anchors.top: parent.top
32 34 anchors.bottom: weatherImageRow.top
33 35 anchors.left: parent.left
34 36 anchors.right: parent.right
35 37 legend: ChartView.LegendTop
36 38
39 //![2]
40 // BarSeries {
37 41 GroupedBarSeries {
38 42 barCategories: [ "2008", "2009", "2010", "2011", "2012" ]
39 43 BarSet {
@@ -41,13 +45,6 Rectangle {
41 45 name: "Rainfall"
42 46 }
43 47 }
44 // BarSeries {
45 // barCategories: [ "2008", "2009", "2010", "2011", "2012" ]
46 // BarSet {
47 // id: rainfallSet
48 // name: "Rainfall"
49 // }
50 // }
51 48
52 49 ScatterSeries {
53 50 id: maxTempSeries
@@ -58,6 +55,7 Rectangle {
58 55 id: minTempSeries
59 56 name: "Min. temperature"
60 57 }
58 //![2]
61 59 }
62 60
63 61 // A timer to refresh the forecast every 5 minutes
@@ -68,8 +66,12 Rectangle {
68 66 running: true
69 67 onTriggered: {
70 68 if (weatherAppKey != "") {
69 //![3]
70 // Make HTTP GET request and parse the result
71 71 var xhr = new XMLHttpRequest;
72 xhr.open("GET", "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key=" + weatherAppKey);
72 xhr.open("GET",
73 "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key="
74 + weatherAppKey);
73 75 xhr.onreadystatechange = function() {
74 76 if (xhr.readyState == XMLHttpRequest.DONE) {
75 77 var a = JSON.parse(xhr.responseText);
@@ -77,6 +79,7 Rectangle {
77 79 }
78 80 }
79 81 xhr.send();
82 //![3]
80 83 } else {
81 84 // No app key for worldweatheronline.com given by the user -> use static data
82 85 var responseText = "{ \"data\": { \"current_condition\": [ {\"cloudcover\": \"10\", \"humidity\": \"61\", \"observation_time\": \"06:26 AM\", \"precipMM\": \"0.0\", \"pressure\": \"1022\", \"temp_C\": \"6\", \"temp_F\": \"43\", \"visibility\": \"10\", \"weatherCode\": \"113\", \"weatherDesc\": [ {\"value\": \"Sunny\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0001_sunny.png\" } ], \"winddir16Point\": \"SE\", \"winddirDegree\": \"140\", \"windspeedKmph\": \"7\", \"windspeedMiles\": \"4\" } ], \"request\": [ {\"query\": \"Jyvaskyla, Finland\", \"type\": \"City\" } ], \"weather\": [ {\"date\": \"2012-05-09\", \"precipMM\": \"0.4\", \"tempMaxC\": \"14\", \"tempMaxF\": \"57\", \"tempMinC\": \"7\", \"tempMinF\": \"45\", \"weatherCode\": \"116\", \"weatherDesc\": [ {\"value\": \"Partly Cloudy\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0002_sunny_intervals.png\" } ], \"winddir16Point\": \"S\", \"winddirDegree\": \"179\", \"winddirection\": \"S\", \"windspeedKmph\": \"20\", \"windspeedMiles\": \"12\" }, {\"date\": \"2012-05-10\", \"precipMM\": \"2.4\", \"tempMaxC\": \"13\", \"tempMaxF\": \"55\", \"tempMinC\": \"8\", \"tempMinF\": \"46\", \"weatherCode\": \"266\", \"weatherDesc\": [ {\"value\": \"Light drizzle\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0017_cloudy_with_light_rain.png\" } ], \"winddir16Point\": \"SW\", \"winddirDegree\": \"219\", \"winddirection\": \"SW\", \"windspeedKmph\": \"21\", \"windspeedMiles\": \"13\" }, {\"date\": \"2012-05-11\", \"precipMM\": \"11.1\", \"tempMaxC\": \"15\", \"tempMaxF\": \"59\", \"tempMinC\": \"7\", \"tempMinF\": \"44\", \"weatherCode\": \"266\", \"weatherDesc\": [ {\"value\": \"Light drizzle\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0017_cloudy_with_light_rain.png\" } ], \"winddir16Point\": \"SSW\", \"winddirDegree\": \"200\", \"winddirection\": \"SSW\", \"windspeedKmph\": \"20\", \"windspeedMiles\": \"12\" }, {\"date\": \"2012-05-12\", \"precipMM\": \"2.8\", \"tempMaxC\": \"7\", \"tempMaxF\": \"44\", \"tempMinC\": \"2\", \"tempMinF\": \"35\", \"weatherCode\": \"317\", \"weatherDesc\": [ {\"value\": \"Light sleet\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0021_cloudy_with_sleet.png\" } ], \"winddir16Point\": \"NW\", \"winddirDegree\": \"311\", \"winddirection\": \"NW\", \"windspeedKmph\": \"24\", \"windspeedMiles\": \"15\" }, {\"date\": \"2012-05-13\", \"precipMM\": \"0.4\", \"tempMaxC\": \"6\", \"tempMaxF\": \"42\", \"tempMinC\": \"2\", \"tempMinF\": \"35\", \"weatherCode\": \"116\", \"weatherDesc\": [ {\"value\": \"Partly Cloudy\" } ], \"weatherIconUrl\": [ {\"value\": \"http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0002_sunny_intervals.png\" } ], \"winddir16Point\": \"WNW\", \"winddirDegree\": \"281\", \"winddirection\": \"WNW\", \"windspeedKmph\": \"21\", \"windspeedMiles\": \"13\" } ] }}";
@@ -121,15 +124,20 Rectangle {
121 124 minTempSeries.clear();
122 125 weatherImageModel.clear();
123 126
127 //![4]
124 128 // Loop through the parsed JSON
125 129 for (var i in weatherData.data.weather) {
126 130 var weatherObj = weatherData.data.weather[i];
131 //![4]
127 132
133 //![5]
128 134 // Store temperature values, rainfall and weather icon
129 maxTempSeries.append(Number(i), weatherObj.tempMaxC);
130 minTempSeries.append(Number(i), weatherObj.tempMinC);
131 rainfallSet.append(Number(i), weatherObj.precipMM);
135 maxTempSeries.append(i, weatherObj.tempMaxC);
136 minTempSeries.append(i, weatherObj.tempMinC);
137 rainfallSet.append(i, weatherObj.precipMM);
138
132 139 weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});
140 //![5]
133 141
134 142 // Update scale of the chart
135 143 chartView.axisX.min = 0;
@@ -16,11 +16,11
16 16 <li><a href="demos-chartthemes.html">Chart themes</a></li>
17 17 <li><a href="demos-piechartcustomization.html">Pie chart customization</a></li>
18 18 <li><a href="demos-dynamicspline.html">Dynamic spline chart</a></li>
19 <li><a href="demos-qmlchart.html">Qml chart</a></li>
19 <li><a href="demos-qmlchart.html">Qml Basic Charts</a></li>
20 <li><a href="demos-qmlweather.html">Qml Weather</a></li>
20 21 </ul>
21 22 </td>
22 23 </tr>
23 24 </table>
24 25 \endraw
25 26 */
26
General Comments 0
You need to be logged in to leave comments. Login now