##// END OF EJS Templates
HG_REPOSITORIES » LPP » INSTRUMENTATION » USERS » JEANDET » qtcharts
RSS

Clone from http://code.qt.io/qt/qtcharts.git

Fancy background to QML Weather demo
Tero Ahola -
r1959:cd9047668198
parent child
Show More
Side by Side Unified
Context file:
r1959:cd9047668198 Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,182 +1,189
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.1
23 23
24 24 Rectangle {
25 25 width: 360
26 26 height: 360
27 gradient: Gradient {
28 GradientStop { position: 0.0; color: "lightblue" }
29 GradientStop { position: 1.0; color: "white" }
30 }
27 31
28 32 //![1]
29 33 ChartView {
30 34 id: chartView
31 35 title: "Weather forecast"
32 36 //![1]
33 37 anchors.top: parent.top
34 38 anchors.bottom: weatherImageRow.top
35 39 anchors.left: parent.left
36 40 anchors.right: parent.right
37 41 legend.alignment: Qt.AlignTop
38 42
39 43 //![2]
40 44 BarCategoriesAxis {
41 45 id: barCategoriesAxis
42 46 }
43 47
44 48 BarSeries {
45 49 id: myBarSeries
46 50 axisX: barCategoriesAxis
47 51 axisY: valueAxisY
48 52 BarSet {
49 53 id: rainfallSet
50 54 label: "Rainfall"
51 55 }
52 56 }
53 57
54 58 ValueAxis {
55 59 id: valueAxisX
56 60 min: 0
57 61 max: 5
58 62 }
59 63
60 64 ValueAxis{
61 65 id: valueAxisY
62 66 min: 0
63 67 max: 10
64 68 }
65 69
66 70 LineSeries {
67 71 id: maxTempSeries
68 72 axisX: valueAxisX
69 73 axisY: valueAxisY
70 74 name: "Max. temperature"
71 75 }
72 76
73 77 LineSeries {
74 78 id: minTempSeries
75 79 axisX: valueAxisX
76 80 axisY: valueAxisY
77 81 name: "Min. temperature"
78 82 }
79 83 //![2]
80 84 }
81 85
82 86 // A timer to refresh the forecast every 5 minutes
83 87 Timer {
84 88 interval: 300000
85 89 repeat: true
86 90 triggeredOnStart: true
87 91 running: true
88 92 onTriggered: {
89 93 if (weatherAppKey != "") {
90 94 //![3]
91 95 // Make HTTP GET request and parse the result
92 96 var xhr = new XMLHttpRequest;
93 97 xhr.open("GET",
94 98 "http://free.worldweatheronline.com/feed/weather.ashx?q=Jyv%c3%a4skyl%c3%a4,Finland&format=json&num_of_days=5&key="
95 99 + weatherAppKey);
96 100 xhr.onreadystatechange = function() {
97 101 if (xhr.readyState == XMLHttpRequest.DONE) {
98 102 var a = JSON.parse(xhr.responseText);
99 103 parseWeatherData(a);
100 104 }
101 105 }
102 106 xhr.send();
103 107 //![3]
104 108 } else {
105 109 // No app key for worldweatheronline.com given by the user -> use dummy static data
106 110 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\" } ] }}";
107 111 var a = JSON.parse(responseText);
108 112 parseWeatherData(a);
109 113 }
110 114 }
111 115 }
112 116
113 117 Row {
114 118 id: weatherImageRow
115 119 anchors.bottom: poweredByText.top
116 120 anchors.bottomMargin: 10
117 121 anchors.left: parent.left
118 122 anchors.leftMargin: 25
119 123 anchors.right: parent.right
120 124 anchors.rightMargin: 25
121 125
122 126 ListModel {
123 127 id: weatherImageModel
124 128 }
125 129
126 130 Repeater {
127 131 id: repeater
128 132 model: weatherImageModel
129 133 delegate: Image {
130 134 source: imageSource
131 135 width: weatherImageRow.width / weatherImageModel.count
132 136 height: width
133 137 fillMode: Image.PreserveAspectCrop
134 138 }
135 139 }
136 140 }
137 141
138 142 Text {
139 143 id: poweredByText
140 144 anchors.bottom: parent.bottom
141 145 anchors.bottomMargin: 10
142 146 anchors.left: parent.left
143 147 anchors.leftMargin: 25
144 148 text: "Powered by World Weather Online"
145 149 }
146 150
147 151 function parseWeatherData(weatherData) {
148 152 // Clear previous values
149 153 maxTempSeries.clear();
150 154 minTempSeries.clear();
151 155 weatherImageModel.clear();
152 156
153 157 //![4]
154 158 // Loop through the parsed JSON
155 159 for (var i in weatherData.data.weather) {
156 160 var weatherObj = weatherData.data.weather[i];
157 161 //![4]
158 162
159 163 //![5]
160 // Store temperature values, rainfall and weather icon
164 // Store temperature values, rainfall and weather icon.
165 // The temperature values begin from 0.5 instead of 0.0 to make the start from the
166 // middle of the rainfall bars. This makes the temperature lines visually better
167 // synchronized with the rainfall bars.
161 168 maxTempSeries.append(Number(i) + 0.5, weatherObj.tempMaxC);
162 169 minTempSeries.append(Number(i) + 0.5, weatherObj.tempMinC);
163 170 rainfallSet.append(i, weatherObj.precipMM);
164 171 weatherImageModel.append({"imageSource":weatherObj.weatherIconUrl[0].value});
165 172 //![5]
166 173
167 174 // Update scale of the chart
168 175 valueAxisY.max = Math.max(chartView.axisY().max,weatherObj.tempMaxC);
169 176 valueAxisX.min = 0;
170 177 valueAxisX.max = Number(i) + 1;
171 178
172 179 // Set the x-axis labels to the dates of the forecast
173 180 var xLabels = barCategoriesAxis.categories;
174 181 xLabels[Number(i)] = weatherObj.date.substring(5, 10);
175 182 barCategoriesAxis.categories = xLabels;
176 183 barCategoriesAxis.visible = true;
177 184 barCategoriesAxis.min = 0;
178 185 barCategoriesAxis.max = xLabels.length - 1;
179 186 }
180 187 }
181 188
182 189 }
Show file before | Show file after | Hide comments
1 NO CONTENT: modified file, binary diff hidden
General Comments 0
You need to be logged in to leave comments. Login now