##// 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 */
@@ -1,151 +1,159
1 1 /****************************************************************************
2 2 **
3 3 ** Copyright (C) 2012 Digia Plc
4 4 ** All rights reserved.
5 5 ** For any questions to Digia, please use contact form at http://qt.digia.com
6 6 **
7 7 ** This file is part of the Qt Commercial Charts Add-on.
8 8 **
9 9 ** $QT_BEGIN_LICENSE$
10 10 ** Licensees holding valid Qt Commercial licenses may use this file in
11 11 ** accordance with the Qt Commercial License Agreement provided with the
12 12 ** Software or, alternatively, in accordance with the terms contained in
13 13 ** a written agreement between you and Digia.
14 14 **
15 15 ** If you have questions regarding the use of this file, please use
16 16 ** contact form at http://qt.digia.com
17 17 ** $QT_END_LICENSE$
18 18 **
19 19 ****************************************************************************/
20 20
21 21 import QtQuick 1.1
22 22 import QtCommercial.Chart 1.0
23 23
24 24 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 {
40 44 id: rainfallSet
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
54 51 name: "Max. temperature"
55 52 }
56 53
57 54 ScatterSeries {
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
64 62 Timer {
65 63 interval: 300000;
66 64 repeat: true
67 65 triggeredOnStart: true
68 66 running: true
69 67 onTriggered: {
70 if (weatherAppKey != "") {
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);
76 78 parseWeatherData(a);
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\" } ] }}";
83 86 var a = JSON.parse(responseText);
84 87 parseWeatherData(a);
85 88 }
86 89 }
87 90 }
88 91
89 92 Row {
90 93 id: weatherImageRow
91 94 anchors.bottom: parent.bottom
92 95 anchors.bottomMargin: 10
93 96 anchors.left: parent.left
94 97 anchors.leftMargin: 25
95 98 anchors.right: parent.right
96 99 anchors.rightMargin: 25
97 100
98 101 ListModel {
99 102 id: weatherImageModel
100 103 }
101 104
102 105 Repeater {
103 106 id: repeater
104 107 model: weatherImageModel
105 108 delegate: Image {
106 109 source: imageSource
107 110 width: weatherImageRow.width / weatherImageModel.count
108 111 height: width
109 112 fillMode: Image.PreserveAspectCrop
110 113 }
111 114 }
112 115 }
113 116
114 117 function parseWeatherData(weatherData) {
115 118 // Clear previous values
116 119 chartView.axisX.min = 0;
117 120 chartView.axisX.max = 5;
118 121 chartView.axisY.min = 0;
119 122 chartView.axisY.max = 5;
120 123 maxTempSeries.clear();
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;
136 144 chartView.axisX.max = i;
137 145 while (chartView.axisY.min >= Number(weatherObj.tempMinC))
138 146 chartView.axisY.min = chartView.axisY.min - 10;
139 147 while (chartView.axisY.max <= Number(weatherObj.tempMaxC))
140 148 chartView.axisY.max = chartView.axisY.max + 10;
141 149
142 150 // Set the x-axis labels to the dates of the forecast
143 151 // TODO: the API could probably be more intuitive..
144 152 // Now it takes an array of strings: chartView.axisXLabels = ["value1", "label1", "value2", "label2", ...]
145 153 var xLabels = chartView.axisXLabels;
146 154 xLabels[Number(i) * 2] = i;
147 155 xLabels[(Number(i) * 2) + 1] = weatherObj.date.substring(5, 10);
148 156 chartView.axisXLabels = xLabels;
149 157 }
150 158 }
151 159 }
@@ -1,26 +1,26
1 1 /*!
2 2 \page demos.html
3 3 \title Demos
4 4 \keyword Demos
5 5
6 6 \raw HTML
7 7 <table cellpadding="2" cellspacing="1" border="0" width="100%" class="indextable">
8 8 <tr>
9 9 <th class="titleheader" width="33%">
10 10 List of demos
11 11 </th>
12 12 </tr>
13 13 <tr>
14 14 <td valign="top">
15 15 <ul>
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