kkl / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
조민지
58a2b7f8 1 parent de17b8ba

스크립트 하나로 합치기

Inline Side-by-side
Showing 1 changed file with 403 additions and 426 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 - <head> 3 +
4 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 +<head>
5 - <meta name="viewport" content="width=device-width, initial-scale=1" /> 5 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 - <title>Highcharts Example</title> 6 + <meta name="viewport" content="width=device-width, initial-scale=1" />
7 - 7 + <title>Highcharts Example</title>
8 - <style type="text/css"></style> 8 +
9 - </head> 9 + <style type="text/css"></style>
10 - <body> 10 +</head>
11 - <script src="highcharts.js"></script> 11 +
12 - <script src="modules/exporting.js"></script> 12 +<body>
13 - <script src="modules/export-data.js"></script> 13 + <script src="highcharts.js"></script>
14 - 14 + <script src="modules/exporting.js"></script>
15 - <div 15 + <script src="modules/export-data.js"></script>
16 - id="container1" 16 +
17 - style="width:1260px; height: 400px; margin: 0 auto" 17 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div>
18 - ></div> 18 +
19 - 19 + <div style="width:1275px; margin:0 auto;">
20 - <div style="width:1275px; margin:0 auto;"> 20 + <div style="display: inline-block;">
21 - <div style="display: inline-block;"> 21 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
22 - <div 22 + </div>
23 - id="container2" 23 + <div style="display: inline-block;">
24 - style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" 24 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
25 - ></div>
26 - </div>
27 - <div style="display: inline-block;">
28 - <div
29 - id="container3"
30 - style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
31 - ></div>
32 - </div>
33 -
34 - <div style="display: inline-block;">
35 - <div
36 - id="container4"
37 - style="width:400px; height: 300px; padding:0; margin-left:0px;"
38 - ></div>
39 - </div>
40 </div> 25 </div>
41 26
42 - 27 + <div style="display: inline-block;">
43 -<script src="/socket.io/socket.io.js"></script> 28 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
44 -<script> 29 + </div>
45 - var socket = io.connect('/',{transports: ['websocket'],upgrade:false}); 30 + </div>
46 - socket.emit("connection","client in"); 31 +
47 - socket.on("weatherInfo_minutely_send_to_client",(info)=>{ //서버에서 client에게 메세지 전송 32 +
48 - console.log(info); 33 + <script src="/socket.io/socket.io.js"></script>
34 + <script type="text/javascript">
35 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
36 + socket.emit("connection", "client in");
37 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
38 + console.log(info);
39 +
49 }); 40 });
50 -</script> 41 +
51 - <!-- 첫번째 그래프 --> 42 + var chart1 = Highcharts.chart("container1", {
52 - <script type="text/javascript"> 43 + chart: {
53 - Highcharts.chart("container1", { 44 + type: "areaspline",
54 - chart: { 45 + animation: Highcharts.svg, // don't animate in old IE
55 - type: "areaspline", 46 + marginRight: 10,
56 - animation: Highcharts.svg, // don't animate in old IE 47 + events: {
57 - marginRight: 10, 48 + load: function () {
58 - events: { 49 + // set up the updating of the chart each second
59 - load: function() { 50 + var series = this.series[0];
60 - // set up the updating of the chart each second 51 + setInterval(function () {
61 - var series = this.series[0]; 52 + var x = new Date().getTime(), // 현재 시간
62 - setInterval(function() { 53 + y = 0; //여기에 새로 넣을 값
63 - var x = new Date().getTime(), // 현재 시간 54 + series.addPoint([x, y], true, true);
64 - y = 0; //여기에 새로 넣을 값 55 + }, 60000); //1000=1초 -> 1분=60000
65 - series.addPoint([x, y], true, true);
66 - }, 60000); //1000=1초 -> 1분=60000
67 - }
68 } 56 }
69 - }, 57 + }
58 + },
70 59
71 - time: { 60 + time: {
72 - useUTC: false 61 + useUTC: false
73 - }, 62 + },
74 63
64 + title: {
65 + text: "실시간 사망률"
66 + },
67 + xAxis: {
68 + type: "datetime",
69 + tickPixelInterval: 150
70 + },
71 + yAxis: {
75 title: { 72 title: {
76 - text: "실시간 사망률" 73 + text: "Value"
77 - },
78 - xAxis: {
79 - type: "datetime",
80 - tickPixelInterval: 150
81 - },
82 - yAxis: {
83 - title: {
84 - text: "Value"
85 - },
86 - plotLines: [
87 - {
88 - value: 0,
89 - width: 1,
90 - color: "#808080"
91 - }
92 - ]
93 - },
94 - tooltip: {
95 - headerFormat: "<b>{series.name}</b><br/>",
96 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
97 }, 74 },
98 - legend: { 75 + plotLines: [
99 - //enabled: false
100 - layout: "vertical",
101 - align: "left",
102 - verticalAlign: "top",
103 - x: 120,
104 - y: 70,
105 - floating: true,
106 - borderWidth: 1,
107 - backgroundColor:
108 - (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
109 - "#FFFFFF"
110 - },
111 - exporting: {
112 - enabled: false
113 - },
114 - series: [
115 { 76 {
116 - name: "사망률", 77 + value: 0,
117 - data: (function() { 78 + width: 1,
118 - var deathArr = [], 79 + color: "#808080"
119 - time = new Date().getTime(); 80 + }
120 - var length= <%=dataLen%>; 81 + ]
121 - var i=-9; //얘는 시간계산용 82 + },
122 - var j=0; //얘는 반복문용 83 + tooltip: {
123 - for(;j<10-length;j++) 84 + headerFormat: "<b>{series.name}</b><br/>",
124 - { 85 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
125 - deathArr.push({ 86 + },
126 - x: time + i * 60000, 87 + legend: {
127 - y: 0 88 + //enabled: false
128 - }) 89 + layout: "vertical",
90 + align: "left",
91 + verticalAlign: "top",
92 + x: 120,
93 + y: 70,
94 + floating: true,
95 + borderWidth: 1,
96 + backgroundColor:
97 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
98 + "#FFFFFF"
99 + },
100 + exporting: {
101 + enabled: false
102 + },
103 + series: [
104 + {
105 + name: "사망률",
106 + data: (function () {
107 + var deathArr = [],
108 + time = new Date().getTime();
109 + var length = <%=dataLen%>;
110 + var i = -9; //얘는 시간계산용
111 + var j = 0; //얘는 반복문용
112 + for (; j < 10 - length; j++) {
113 + deathArr.push({
114 + x: time + i * 60000,
115 + y: 0
116 + })
129 i++; 117 i++;
130 - } 118 + }
131 119
132 - <%probArr.forEach((probArr)=>{%> 120 + <% probArr.forEach((probArr) => {%>
133 var temp; 121 var temp;
134 - temp= <%=probArr%>; 122 + temp = <%=probArr %>;
135 - 123 +
136 - // for(;j<10;j++) 124 + // for(;j<10;j++)
137 - // { 125 + // {
138 - // deathArr.push({ 126 + // deathArr.push({
139 - // x: time + i * 60000, 127 + // x: time + i * 60000,
140 - // y: temp 128 + // y: temp
141 - // }) 129 + // })
142 - // i++; 130 + // i++;
143 - // } 131 + // }
144 - 132 +
145 - deathArr.push({ 133 + deathArr.push({
146 x: time + i * 60000, 134 x: time + i * 60000,
147 y: temp 135 y: temp
148 - }) 136 + })
149 - i++; 137 + i++;
150 138
151 - <%})%> 139 + <%}) %>
152 140
153 return deathArr; 141 return deathArr;
154 - })() 142 + })()
155 - } 143 + }
156 - ] 144 + ]
157 - }); 145 + });
158 - </script> 146 +
159 - 147 + var chart2 = Highcharts.chart("container2", {
160 - <!-- 두번째 그래프 --> 148 + chart: {
161 - <script type="text/javascript"> 149 + type: "spline",
162 - Highcharts.chart("container2", { 150 + animation: Highcharts.svg, // don't animate in old IE
163 - chart: { 151 + marginRight: 10,
164 - type: "spline", 152 + events: {
165 - animation: Highcharts.svg, // don't animate in old IE 153 + load: function () {
166 - marginRight: 10, 154 + // set up the updating of the chart each second
167 - events: { 155 + var series = this.series[0];
168 - load: function() { 156 + setInterval(function () {
169 - // set up the updating of the chart each second 157 + var x = new Date().getTime(), // 현재 시간
170 - var series = this.series[0]; 158 + y = 0; //
171 - setInterval(function() { 159 + series.addPoint([x, y], true, true);
172 - var x = new Date().getTime(), // 현재 시간 160 + }, 60000); //1000=1초
173 - y = 0; //
174 - series.addPoint([x, y], true, true);
175 - }, 60000); //1000=1초
176 - }
177 } 161 }
178 - }, 162 + }
163 + },
179 164
180 - time: { 165 + time: {
181 - useUTC: false 166 + useUTC: false
182 - }, 167 + },
183 168
169 + title: {
170 + text: "기온"
171 + },
172 + xAxis: {
173 + type: "datetime",
174 + tickPixelInterval: 150
175 + },
176 + yAxis: {
184 title: { 177 title: {
185 - text: "기온" 178 + text: "Value"
186 }, 179 },
187 - xAxis: { 180 + plotLines: [
188 - type: "datetime",
189 - tickPixelInterval: 150
190 - },
191 - yAxis: {
192 - title: {
193 - text: "Value"
194 - },
195 - plotLines: [
196 - {
197 - value: 0,
198 - width: 1,
199 - color: "#808080"
200 - }
201 - ]
202 - },
203 - tooltip: {
204 - headerFormat: "<b>{series.name}</b><br/>",
205 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
206 - },
207 - legend: {
208 - //enabled: false
209 - layout: "vertical",
210 - align: "left",
211 - verticalAlign: "top",
212 - x: 120,
213 - y: 70,
214 - floating: true,
215 - borderWidth: 1,
216 - backgroundColor:
217 - (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
218 - "#FFFFFF"
219 - },
220 - exporting: {
221 - enabled: false
222 - },
223 - series: [
224 { 181 {
225 - name: "기온", 182 + value: 0,
226 - data: (function() { 183 + width: 1,
227 - var tempArr = [], 184 + color: "#808080"
228 - time = new Date().getTime(); 185 + }
229 - var length= <%=dataLen%>; 186 + ]
230 - var i=-9; 187 + },
231 - var j=0; 188 + tooltip: {
232 - for(j;j<10-length;j++) 189 + headerFormat: "<b>{series.name}</b><br/>",
233 - { 190 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
234 - tempArr.push({ 191 + },
235 - x: time + i * 60000, 192 + legend: {
236 - y: 0 193 + //enabled: false
237 - }) 194 + layout: "vertical",
195 + align: "left",
196 + verticalAlign: "top",
197 + x: 120,
198 + y: 70,
199 + floating: true,
200 + borderWidth: 1,
201 + backgroundColor:
202 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
203 + "#FFFFFF"
204 + },
205 + exporting: {
206 + enabled: false
207 + },
208 + series: [
209 + {
210 + name: "기온",
211 + data: (function () {
212 + var tempArr = [],
213 + time = new Date().getTime();
214 + var length = <%=dataLen%>;
215 + var i = -9;
216 + var j = 0;
217 + for (j; j < 10 - length; j++) {
218 + tempArr.push({
219 + x: time + i * 60000,
220 + y: 0
221 + })
238 i++; 222 i++;
239 - } 223 + }
240 224
241 - <%ptArr.forEach((ptArr)=>{%> 225 + <% ptArr.forEach((ptArr) => {%>
242 var temp; 226 var temp;
243 - temp= <%=ptArr%>; 227 + temp = <%=ptArr %>;
244 - 228 +
245 - // for(j;j<10;j++) 229 + // for(j;j<10;j++)
246 - // { 230 + // {
247 - // tempArr.push({ 231 + // tempArr.push({
248 - // x: time + i * 60000, 232 + // x: time + i * 60000,
249 - // y: temp 233 + // y: temp
250 - // }) 234 + // })
251 - // i++; 235 + // i++;
252 - // } 236 + // }
253 - 237 +
254 - tempArr.push({ 238 + tempArr.push({
255 x: time + i * 60000, 239 x: time + i * 60000,
256 y: temp 240 y: temp
257 - }) 241 + })
258 - i++; 242 + i++;
259 243
260 - <%})%> 244 + <%}) %>
261 245
262 return tempArr; 246 return tempArr;
263 - })() 247 + })()
264 - } 248 + }
265 - ] 249 + ]
266 - }); 250 + });
267 - </script> 251 +
268 - 252 + var chart3 = Highcharts.chart("container3", {
269 - <!-- 세번째 그래프 --> 253 + chart: {
270 - <script type="text/javascript"> 254 + type: "spline",
271 - Highcharts.chart("container3", { 255 + animation: Highcharts.svg, // don't animate in old IE
272 - chart: { 256 + marginRight: 10,
273 - type: "spline", 257 + events: {
274 - animation: Highcharts.svg, // don't animate in old IE 258 + load: function () {
275 - marginRight: 10, 259 + // set up the updating of the chart each second
276 - events: { 260 + var series = this.series[0];
277 - load: function() { 261 + setInterval(function () {
278 - // set up the updating of the chart each second 262 + var x = new Date().getTime(), // 현재 시간
279 - var series = this.series[0]; 263 + y = 0; //
280 - setInterval(function() { 264 + series.addPoint([x, y], true, true);
281 - var x = new Date().getTime(), // 현재 시간 265 + }, 60000); //1000=1초
282 - y = 0; //
283 - series.addPoint([x, y], true, true);
284 - }, 60000); //1000=1초
285 - }
286 } 266 }
287 - }, 267 + }
268 + },
288 269
289 - time: { 270 + time: {
290 - useUTC: false 271 + useUTC: false
291 - }, 272 + },
292 273
274 + title: {
275 + text: "풍속"
276 + },
277 + xAxis: {
278 + type: "datetime",
279 + tickPixelInterval: 150
280 + },
281 + yAxis: {
293 title: { 282 title: {
294 - text: "풍속" 283 + text: "Value"
295 - },
296 - xAxis: {
297 - type: "datetime",
298 - tickPixelInterval: 150
299 - },
300 - yAxis: {
301 - title: {
302 - text: "Value"
303 - },
304 - plotLines: [
305 - {
306 - value: 0,
307 - width: 1,
308 - color: "#808080"
309 - }
310 - ]
311 - },
312 - tooltip: {
313 - headerFormat: "<b>{series.name}</b><br/>",
314 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
315 - },
316 - legend: {
317 - //enabled: false
318 - layout: "vertical",
319 - align: "left",
320 - verticalAlign: "top",
321 - x: 120,
322 - y: 70,
323 - floating: true,
324 - borderWidth: 1,
325 - backgroundColor:
326 - (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
327 - "#FFFFFF"
328 }, 284 },
329 - exporting: { 285 + plotLines: [
330 - enabled: false
331 - },
332 - series: [
333 { 286 {
334 - name: "풍속", 287 + value: 0,
335 - data: (function() { 288 + width: 1,
336 - var windArr = [], 289 + color: "#808080"
337 - time = new Date().getTime(); 290 + }
338 - var length= <%=dataLen%>; 291 + ]
339 - var i=-9; 292 + },
340 - var j=0; 293 + tooltip: {
341 - for(j;j<10-length;j++) 294 + headerFormat: "<b>{series.name}</b><br/>",
342 - { 295 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
343 - windArr.push({ 296 + },
344 - x: time + i * 60000, 297 + legend: {
345 - y: 0 298 + //enabled: false
346 - }) 299 + layout: "vertical",
300 + align: "left",
301 + verticalAlign: "top",
302 + x: 120,
303 + y: 70,
304 + floating: true,
305 + borderWidth: 1,
306 + backgroundColor:
307 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
308 + "#FFFFFF"
309 + },
310 + exporting: {
311 + enabled: false
312 + },
313 + series: [
314 + {
315 + name: "풍속",
316 + data: (function () {
317 + var windArr = [],
318 + time = new Date().getTime();
319 + var length = <%=dataLen%>;
320 + var i = -9;
321 + var j = 0;
322 + for (j; j < 10 - length; j++) {
323 + windArr.push({
324 + x: time + i * 60000,
325 + y: 0
326 + })
347 i++; 327 i++;
348 - } 328 + }
349 329
350 - <%wsArr.forEach((wsArr)=>{%> 330 + <% wsArr.forEach((wsArr) => {%>
351 var temp; 331 var temp;
352 - temp= <%=wsArr%>; 332 + temp = <%=wsArr %>;
353 - 333 +
354 - // for(j;j<10;j++) 334 + // for(j;j<10;j++)
355 - // { 335 + // {
356 - // windArr.push({ 336 + // windArr.push({
357 - // x: time + i * 60000, 337 + // x: time + i * 60000,
358 - // y: temp 338 + // y: temp
359 - // }) 339 + // })
360 - // i++; 340 + // i++;
361 - // } 341 + // }
362 - 342 +
363 - windArr.push({ 343 + windArr.push({
364 x: time + i * 60000, 344 x: time + i * 60000,
365 y: temp 345 y: temp
366 - }) 346 + })
367 - i++; 347 + i++;
368 348
369 - <%})%> 349 + <%}) %>
370 350
371 return windArr; 351 return windArr;
372 - })() 352 + })()
373 - } 353 + }
374 - ] 354 + ]
375 - }); 355 + });
376 - </script> 356 +
377 - 357 + var chart4 = Highcharts.chart("container4", {
378 - <!-- 네번째 그래프 --> 358 + chart: {
379 - <script type="text/javascript"> 359 + type: "spline",
380 - Highcharts.chart("container4", { 360 + animation: Highcharts.svg, // don't animate in old IE
381 - chart: { 361 + marginRight: 10,
382 - type: "spline", 362 + events: {
383 - animation: Highcharts.svg, // don't animate in old IE 363 + load: function () {
384 - marginRight: 10, 364 + // set up the updating of the chart each second
385 - events: { 365 + var series = this.series[0];
386 - load: function() { 366 + setInterval(function () {
387 - // set up the updating of the chart each second 367 + var x = new Date().getTime(), // 현재 시간
388 - var series = this.series[0]; 368 + y = 0; //
389 - setInterval(function() { 369 + series.addPoint([x, y], true, true);
390 - var x = new Date().getTime(), // 현재 시간 370 + }, 60000); //1000=1초
391 - y = 0; //
392 - series.addPoint([x, y], true, true);
393 - }, 60000); //1000=1초
394 - }
395 } 371 }
396 - }, 372 + }
373 + },
397 374
398 - time: { 375 + time: {
399 - useUTC: false 376 + useUTC: false
400 - }, 377 + },
401 378
379 + title: {
380 + text: "강수량"
381 + },
382 + xAxis: {
383 + type: "datetime",
384 + tickPixelInterval: 150
385 + },
386 + yAxis: {
402 title: { 387 title: {
403 - text: "강수량" 388 + text: "Value"
404 - },
405 - xAxis: {
406 - type: "datetime",
407 - tickPixelInterval: 150
408 - },
409 - yAxis: {
410 - title: {
411 - text: "Value"
412 - },
413 - plotLines: [
414 - {
415 - value: 0,
416 - width: 1,
417 - color: "#808080"
418 - }
419 - ]
420 - },
421 - tooltip: {
422 - headerFormat: "<b>{series.name}</b><br/>",
423 - pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
424 - },
425 - legend: {
426 - //enabled: false
427 - layout: "vertical",
428 - align: "left",
429 - verticalAlign: "top",
430 - x: 120,
431 - y: 70,
432 - floating: true,
433 - borderWidth: 1,
434 - backgroundColor:
435 - (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
436 - "#FFFFFF"
437 }, 389 },
438 - exporting: { 390 + plotLines: [
439 - enabled: false
440 - },
441 - series: [
442 { 391 {
443 - name: "강수량", 392 + value: 0,
444 - data: (function() { 393 + width: 1,
445 - var rainArr = [], 394 + color: "#808080"
446 - time = new Date().getTime(); 395 + }
447 - var length= <%=dataLen%>; 396 + ]
448 - var i=-9; 397 + },
449 - var j=0; 398 + tooltip: {
450 - for(j;j<10-length;j++) 399 + headerFormat: "<b>{series.name}</b><br/>",
451 - { 400 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
452 - rainArr.push({ 401 + },
453 - x: time + i * 60000, 402 + legend: {
454 - y: 0 403 + //enabled: false
455 - }) 404 + layout: "vertical",
405 + align: "left",
406 + verticalAlign: "top",
407 + x: 120,
408 + y: 70,
409 + floating: true,
410 + borderWidth: 1,
411 + backgroundColor:
412 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
413 + "#FFFFFF"
414 + },
415 + exporting: {
416 + enabled: false
417 + },
418 + series: [
419 + {
420 + name: "강수량",
421 + data: (function () {
422 + var rainArr = [],
423 + time = new Date().getTime();
424 + var length = <%=dataLen%>;
425 + var i = -9;
426 + var j = 0;
427 + for (j; j < 10 - length; j++) {
428 + rainArr.push({
429 + x: time + i * 60000,
430 + y: 0
431 + })
456 i++; 432 i++;
457 - } 433 + }
458 434
459 - <%rainArr.forEach((rainArr)=>{%> 435 + <% rainArr.forEach((rainArr) => {%>
460 var temp; 436 var temp;
461 - temp= <%=rainArr%>; 437 + temp = <%=rainArr %>;
462 - 438 +
463 - // for(j;j<10;j++) 439 + // for(j;j<10;j++)
464 - // { 440 + // {
465 - // rainArr.push({ 441 + // rainArr.push({
466 - // x: time + i * 60000, 442 + // x: time + i * 60000,
467 - // y: temp 443 + // y: temp
468 - // }) 444 + // })
469 - // i++; 445 + // i++;
470 - // } 446 + // }
471 - 447 +
472 - rainArr.push({ 448 + rainArr.push({
473 x: time + i * 60000, 449 x: time + i * 60000,
474 y: temp 450 y: temp
475 - }) 451 + })
476 - i++; 452 + i++;
477 453
478 - <%})%> 454 + <%}) %>
479 455
480 return rainArr; 456 return rainArr;
481 - })() 457 + })()
482 - } 458 + }
483 - ] 459 + ]
484 - }); 460 + });
485 - </script> 461 + </script>
486 - </body> 462 +</body>
487 -</html> 463 +
464 +</html>
...\ No newline at end of file ...\ No newline at end of file
......