김윤지 / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
조민지
036e2a64 1 parent 7882825a

ejs errrorrrrrr

Inline Side-by-side
Showing 10 changed files with 1592 additions and 282 deletions
...@@ -18,8 +18,8 @@ app.use(logger('dev')); ...@@ -18,8 +18,8 @@ app.use(logger('dev'));
18 app.use(express.json()); 18 app.use(express.json());
19 app.use(express.urlencoded({ extended: false })); 19 app.use(express.urlencoded({ extended: false }));
20 app.use(cookieParser()); 20 app.use(cookieParser());
21 -app.use(express.static(path.join(__dirname, 'public'))); 21 +app.use('/',express.static(path.join(__dirname, 'public')));
22 -app.use(express.static(path.join(__dirname, 'code'))); 22 +app.use('/',express.static(path.join(__dirname, 'code')));
23 app.use('/name/:name/birth',express.static(path.join(__dirname, 'public'))); 23 app.use('/name/:name/birth',express.static(path.join(__dirname, 'public')));
24 app.use('/name/:name/birth',express.static(path.join(__dirname, 'code'))); 24 app.use('/name/:name/birth',express.static(path.join(__dirname, 'code')));
25 25
......
...@@ -25,9 +25,9 @@ ...@@ -25,9 +25,9 @@
25 25
26 <style type="text/css"> 26 <style type="text/css">
27 body { 27 body {
28 - background-image: url('background.jpg'); 28 + /* background-image: url('background.jpg');
29 background-repeat: no-repeat; 29 background-repeat: no-repeat;
30 - background-size: cover; 30 + background-size: cover; */
31 /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ 31 /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
32 } 32 }
33 33
...@@ -41,6 +41,11 @@ ...@@ -41,6 +41,11 @@
41 font-size: 20px; 41 font-size: 20px;
42 font-family: 'Yeon Sung', cursive; 42 font-family: 'Yeon Sung', cursive;
43 } 43 }
44 + #banner {
45 + position: absolute;
46 + top: 0;
47 + width: 100%;
48 + }
44 #footer { 49 #footer {
45 position: absolute; 50 position: absolute;
46 bottom: 0; 51 bottom: 0;
...@@ -55,22 +60,26 @@ ...@@ -55,22 +60,26 @@
55 </head> 60 </head>
56 61
57 <body> 62 <body>
58 - <div style="width:100%; text-align: center; margin-top:170px;"> 63 + <img src="./background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
59 - <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> 64 + <div id="banner">
60 - </div> 65 + <div style="width:100%; text-align: center; padding-top:170px;">
61 - <br><br><br> 66 + <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
62 - <div style="width:100%; text-align: center;"> 67 + </div>
63 - <form action="/starting" method="post">
64 - <div class="form-inline">
65 - <label>이름</label>
66 - <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
67 - &nbsp&nbsp&nbsp&nbsp
68 - <label>생년월일</label>
69 - <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
70 <br><br><br> 68 <br><br><br>
71 - <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;"> 69 + <div style="width:100%; text-align: center;">
72 - </div> 70 + <form action="/starting" method="post">
73 - </form> 71 + <div class="form-inline">
72 + <label>이름</label>
73 + <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
74 + &nbsp&nbsp&nbsp&nbsp
75 + <label>생년월일</label>
76 + <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
77 + <br><br><br>
78 + <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
79 + </div>
80 + </form>
81 + </div>
82 +
74 </div> 83 </div>
75 84
76 <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> 85 <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
......

204 KB
1 +<!-- <!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <!-- font -->
6 + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
7 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
8 +
9 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 + <meta name="viewport" content="width=device-width, initial-scale=1" />
11 + <title>Highcharts Example</title>
12 +
13 + <style type="text/css">
14 + html {
15 + margin: 0;
16 + padding: 0;
17 +}
18 + body {
19 + margin: 0;
20 + padding: 0;
21 +
22 + /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
23 + /* background-color:#65799B; */
24 + /* background-image: url("2.jpg");
25 + background-repeat: no-repeat;
26 + background-size: cover; */
27 + }
28 + #banner {
29 + position: absolute;
30 + top: 0;
31 + width: 100%;
32 + }
33 +
34 + </style>
35 +</head>
36 +
37 +<body>
38 + <script src="highcharts.js"></script>
39 + <script src="modules/exporting.js"></script>
40 + <script src="modules/export-data.js"></script>
41 +
42 + <div id="banner">
43 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
44 +
45 + <div style="width:1275px; margin:0 auto;">
46 + <div style="display: inline-block;">
47 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
48 + </div>
49 + <div style="display: inline-block;">
50 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
51 + </div>
52 +
53 + <div style="display: inline-block;">
54 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
55 + </div>
56 + </div>
57 +
58 + <script src="/socket.io/socket.io.js"></script>
59 + <script type="text/javascript">
60 + let client_data = {
61 + birth: "<%=birth%>",
62 + name: "<%=name%>"
63 + }
64 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
65 + socket.emit("connection", client_data);
66 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
67 + console.log(info);
68 +
69 + var date = new Date().getTime();
70 +
71 + chart1.series[0].addPoint({
72 + x: date,
73 + y: info.death
74 + });
75 +
76 + chart2.series[0].addPoint({
77 + x: date,
78 + y: info.temperature
79 + });
80 +
81 + chart3.series[0].addPoint({
82 + x: date,
83 + y: info.wind
84 + });
85 +
86 + chart4.series[0].addPoint({
87 + x: date,
88 + y: info.rain
89 + });
90 +
91 + });
92 +
93 +
94 + var chart1 = Highcharts.chart("container1", {
95 + chart: {
96 + type: "spline",
97 + animation: Highcharts.svg, // don't animate in old IE
98 + marginRight: 10,
99 + // events: {
100 + // load: function () {
101 + // // set up the updating of the chart each second
102 + // var series = this.series[0];
103 + // setInterval(function () {
104 + // var x = new Date().getTime(), // 현재 시간
105 + // y = Math.random(); //여기에 새로 넣을 값
106 + // series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
107 + // }, 1000); //1000=1초 -> 1분=60000
108 + // }
109 + // },
110 +
111 + backgroundColor: "rgba(255, 255, 255, 0.0)"
112 + },
113 +
114 + time: {
115 + useUTC: false
116 + },
117 +
118 + title: {
119 + text: "<%=name%>님의 실시간 사망 확률",
120 + style: {
121 + color: "#FFFFFF",
122 + fontWeight: "bold",
123 + fontFamily: 'Yeon Sung',
124 + fontSize:'32px'
125 + }
126 + },
127 + xAxis: {
128 + type: "datetime",
129 + tickPixelInterval: 150,
130 + labels: {
131 + style: {
132 + color: "white"
133 + }
134 + }
135 + },
136 + yAxis: {
137 + title: {
138 + text: "Value",
139 + style: {
140 + color: "white"
141 + }
142 + },
143 +
144 + plotLines: [
145 + {
146 + value: 0,
147 + width: 1,
148 + color: "#808080"
149 + }
150 + ],
151 + labels: {
152 + style: {
153 + color: "white"
154 + }
155 + }
156 +
157 + },
158 + tooltip: {
159 + headerFormat: "<b>{series.name}</b><br/>",
160 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
161 + },
162 + legend: {
163 + //enabled: false
164 + layout: "vertical",
165 + align: "left",
166 + verticalAlign: "top",
167 + x: 100,
168 + y: 50,
169 + floating: true,
170 + borderWidth: 1,
171 + backgroundColor:
172 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
173 + "#FFFFFF"
174 + },
175 + exporting: {
176 + enabled: false
177 + },
178 +
179 +plotOptions: {
180 + series: {
181 + marker: {
182 + radius: 6
183 + }
184 + }
185 + },
186 +
187 + series: [
188 + {
189 + name: "사망률",
190 + data: (function () {
191 + var deathArr = [],
192 + time = new Date().getTime();
193 + var length = <%=dataLen%>;
194 + var i = -9; //얘는 시간계산용
195 + var j = 0; //얘는 반복문용
196 + for (; j < 10 - length; j++) {
197 + deathArr.push({
198 + x: time + i * 60000,
199 + y: 0
200 + })
201 + i++;
202 + }
203 +
204 + <% probArr.forEach((probArr) => {%>
205 + var temp;
206 + temp = <%=probArr %>;
207 +
208 + // for(;j<10;j++)
209 + // {
210 + // deathArr.push({
211 + // x: time + i * 60000,
212 + // y: temp
213 + // })
214 + // i++;
215 + // }
216 +
217 + deathArr.push({
218 + x: time + i * 60000,
219 + y: temp
220 + })
221 + i++;
222 +
223 + <%}) %>
224 +
225 + return deathArr;
226 + })(),
227 +
228 + color: "#FFFFFF"
229 + }
230 + ]
231 +
232 + });
233 +
234 +
235 + var chart2 = Highcharts.chart("container2", {
236 + chart: {
237 + type: "spline",
238 + animation: Highcharts.svg, // don't animate in old IE
239 + marginRight: 10,
240 + // events: {
241 + // load: function () {
242 + // // set up the updating of the chart each second
243 + // var series = this.series[0];
244 + // setInterval(function () {
245 + // var x = new Date().getTime(), // 현재 시간
246 + // y = Math.random(); //
247 + // series.addPoint([x, y], true, true);
248 + // }, 3000); //1000=1초
249 + // }
250 + // },
251 +
252 + backgroundColor: "rgba(255, 255, 255, 0.0)"
253 + },
254 +
255 + time: {
256 + useUTC: false
257 + },
258 +
259 + title: {
260 + text: "기온",
261 + style: {
262 + color: "#FFFFFF",
263 + fontWeight: "bold",
264 + fontFamily: 'Yeon Sung',
265 + fontSize:'25px'
266 + }
267 +
268 + },
269 + xAxis: {
270 + type: "datetime",
271 + tickPixelInterval: 150,
272 + labels: {
273 + style: {
274 + color: "white"
275 + }
276 + }
277 + },
278 + yAxis: {
279 + title: {
280 + text: "Value",
281 + style: {
282 + color: "white"
283 + }
284 + },
285 + plotLines: [
286 + {
287 + value: 0,
288 + width: 1,
289 + color: "#808080"
290 + }
291 + ],
292 + labels: {
293 + style: {
294 + color: "white"
295 + }
296 + }
297 +
298 + },
299 + tooltip: {
300 + headerFormat: "<b>{series.name}</b><br/>",
301 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 기온 : {point.y:.2f}도"
302 + },
303 + legend: {
304 + //enabled: false
305 + layout: "vertical",
306 + align: "left",
307 + verticalAlign: "top",
308 + x: 100,
309 + y: 50,
310 + floating: true,
311 + borderWidth: 1,
312 + backgroundColor:
313 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
314 + "#FFFFFF"
315 + },
316 + exporting: {
317 + enabled: false
318 + },
319 + series: [
320 + {
321 + name: "기온",
322 + data: (function () {
323 + var tempArr = [],
324 + time = new Date().getTime();
325 + var length = <%=dataLen%>;
326 + var i = -9;
327 + var j = 0;
328 + for (j; j < 10 - length; j++) {
329 + tempArr.push({
330 + x: time + i * 60000,
331 + y: 0
332 + })
333 + i++;
334 + }
335 +
336 + <% ptArr.forEach((ptArr) => {%>
337 + var temp;
338 + temp = <%=ptArr %>;
339 +
340 + // for(j;j<10;j++)
341 + // {
342 + // tempArr.push({
343 + // x: time + i * 60000,
344 + // y: temp
345 + // })
346 + // i++;
347 + // }
348 +
349 + tempArr.push({
350 + x: time + i * 60000,
351 + y: temp
352 + })
353 + i++;
354 +
355 + <%}) %>
356 +
357 + return tempArr;
358 + })(),
359 +
360 + color: "#FFE08C"
361 + }
362 + ]
363 + });
364 +
365 + var chart3 = Highcharts.chart("container3", {
366 + chart: {
367 + type: "spline",
368 + animation: Highcharts.svg, // don't animate in old IE
369 + marginRight: 10,
370 + // events: {
371 + // load: function () {
372 + // // set up the updating of the chart each second
373 + // var series = this.series[0];
374 + // setInterval(function () {
375 + // var x = new Date().getTime(), // 현재 시간
376 + // y = Math.random(); //
377 + // series.addPoint([x, y], true, true);
378 + // }, 3000); //1000=1초
379 + // }
380 + // },
381 + backgroundColor: "rgba(255, 255, 255, 0.0)"
382 + },
383 +
384 + time: {
385 + useUTC: false
386 + },
387 +
388 + title: {
389 + text: "풍속",
390 + style: {
391 + color: "#FFFFFF",
392 + fontWeight: "bold",
393 + fontFamily: 'Yeon Sung',
394 + fontSize:'25px'
395 + }
396 + },
397 + xAxis: {
398 + type: "datetime",
399 + tickPixelInterval: 150,
400 + labels: {
401 + style: {
402 + color: "white"
403 + }
404 + }
405 + },
406 + yAxis: {
407 + title: {
408 + text: "Value",
409 + style: {
410 + color: "white"
411 + }
412 + },
413 + plotLines: [
414 + {
415 + value: 0,
416 + width: 1,
417 + color: "#808080"
418 + }
419 + ],
420 + labels: {
421 + style: {
422 + color: "white"
423 + }
424 + }
425 +
426 + },
427 + tooltip: {
428 + headerFormat: "<b>{series.name}</b><br/>",
429 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 풍속 : {point.y:.2f}m/s"
430 + },
431 + legend: {
432 + //enabled: false
433 + layout: "vertical",
434 + align: "left",
435 + verticalAlign: "top",
436 + x: 100,
437 + y: 50,
438 + floating: true,
439 + borderWidth: 1,
440 + backgroundColor:
441 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
442 + "#FFFFFF"
443 + },
444 + exporting: {
445 + enabled: false
446 + },
447 + series: [
448 + {
449 + name: "풍속",
450 + data: (function () {
451 + var windArr = [],
452 + time = new Date().getTime();
453 + var length = <%=dataLen%>;
454 + var i = -9;
455 + var j = 0;
456 + for (j; j < 10 - length; j++) {
457 + windArr.push({
458 + x: time + i * 60000,
459 + y: 0
460 + })
461 + i++;
462 + }
463 +
464 + <% wsArr.forEach((wsArr) => {%>
465 + var temp;
466 + temp = <%=wsArr %>;
467 +
468 + // for(j;j<10;j++)
469 + // {
470 + // windArr.push({
471 + // x: time + i * 60000,
472 + // y: temp
473 + // })
474 + // i++;
475 + // }
476 +
477 + windArr.push({
478 + x: time + i * 60000,
479 + y: temp
480 + })
481 + i++;
482 +
483 + <%}) %>
484 +
485 + return windArr;
486 + })(),
487 +
488 + color: "#FFE08C"
489 + }
490 + ] });
491 +
492 + var chart4 = Highcharts.chart("container4", {
493 + chart: {
494 + type: "spline",
495 + animation: Highcharts.svg, // don't animate in old IE
496 + marginRight: 10,
497 + // events: {
498 + // load: function () {
499 + // // set up the updating of the chart each second
500 + // var series = this.series[0];
501 + // setInterval(function () {
502 + // var x = new Date().getTime(), // 현재 시간
503 + // y = Math.random(); //
504 + // series.addPoint([x, y], true, true);
505 + // }, 3000); //1000=1초
506 + // }
507 + // },
508 + backgroundColor: "rgba(255, 255, 255, 0.0)"
509 + },
510 +
511 + time: {
512 + useUTC: false
513 + },
514 +
515 + title: {
516 + text: "강수량",
517 + style: {
518 + color: "#FFFFFF",
519 + fontWeight: "bold",
520 + fontFamily: 'Yeon Sung',
521 + fontSize:'25px'
522 + }
523 + },
524 + xAxis: {
525 + type: "datetime",
526 + tickPixelInterval: 150,
527 + labels: {
528 + style: {
529 + color: "white"
530 + }
531 + }
532 + },
533 + yAxis: {
534 + title: {
535 + text: "Value",
536 + style: {
537 + color: "white"
538 + }
539 + },
540 + plotLines: [
541 + {
542 + value: 0,
543 + width: 1,
544 + color: "#808080"
545 + }
546 + ],
547 + labels: {
548 + style: {
549 + color: "white"
550 + }
551 + }
552 +
553 + },
554 + tooltip: {
555 + headerFormat: "<b>{series.name}</b><br/>",
556 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 강수량 : {point.y:.2f}mm"
557 + },
558 + legend: {
559 + //enabled: false
560 + layout: "vertical",
561 + align: "left",
562 + verticalAlign: "top",
563 + x: 100,
564 + y: 50,
565 + floating: true,
566 + borderWidth: 1,
567 + backgroundColor:
568 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
569 + "#FFFFFF"
570 + },
571 + exporting: {
572 + enabled: false
573 + },
574 + series: [
575 + {
576 + name: "강수량",
577 + data: (function () {
578 + var rainArr = [],
579 + time = new Date().getTime();
580 + var length = <%=dataLen%>;
581 + var i = -9;
582 + var j = 0;
583 + for (j; j < 10 - length; j++) {
584 + rainArr.push({
585 + x: time + i * 60000,
586 + y: 0
587 + })
588 + i++;
589 + }
590 +
591 + <% rainArr.forEach((rainArr) => {%>
592 + var temp;
593 + temp = <%=rainArr %>;
594 +
595 + // for(j;j<10;j++)
596 + // {
597 + // rainArr.push({
598 + // x: time + i * 60000,
599 + // y: temp
600 + // })
601 + // i++;
602 + // }
603 +
604 + rainArr.push({
605 + x: time + i * 60000,
606 + y: temp
607 +
608 + })
609 + i++;
610 +
611 + <%}) %>
612 +
613 + return rainArr;
614 + })(),
615 + color: "#FFE08C"
616 +
617 + }
618 + ]
619 +
620 +
621 + });
622 + </script>
623 + </div>
624 +
625 +</body>
626 +
627 +</html> -->
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE html> 1 +<!-- <!DOCTYPE html>
2 <html> 2 <html>
3 3
4 <head> 4 <head>
...@@ -11,13 +11,26 @@ ...@@ -11,13 +11,26 @@
11 <title>Highcharts Example</title> 11 <title>Highcharts Example</title>
12 12
13 <style type="text/css"> 13 <style type="text/css">
14 + html {
15 + margin: 0;
16 + padding: 0;
17 +}
14 body { 18 body {
19 + margin: 0;
20 + padding: 0;
21 +
15 /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */ 22 /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
16 /* background-color:#65799B; */ 23 /* background-color:#65799B; */
17 - background-image: url("2.jpg"); 24 + /* background-image: url("2.jpg");
18 background-repeat: no-repeat; 25 background-repeat: no-repeat;
19 - background-size: cover; 26 + background-size: cover; */
27 + }
28 + #banner {
29 + position: absolute;
30 + top: 0;
31 + width: 100%;
20 } 32 }
33 +
21 </style> 34 </style>
22 </head> 35 </head>
23 36
...@@ -26,7 +39,10 @@ ...@@ -26,7 +39,10 @@
26 <script src="modules/exporting.js"></script> 39 <script src="modules/exporting.js"></script>
27 <script src="modules/export-data.js"></script> 40 <script src="modules/export-data.js"></script>
28 41
29 - <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div> 42 + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
43 +
44 + <div id="banner">
45 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
30 46
31 <div style="width:1275px; margin:0 auto;"> 47 <div style="width:1275px; margin:0 auto;">
32 <div style="display: inline-block;"> 48 <div style="display: inline-block;">
...@@ -41,49 +57,14 @@ ...@@ -41,49 +57,14 @@
41 </div> 57 </div>
42 </div> 58 </div>
43 59
44 -
45 <script src="/socket.io/socket.io.js"></script> 60 <script src="/socket.io/socket.io.js"></script>
46 - <script>
47 - let client_data={
48 - birth : "<%=birth%>",
49 - name : "<%=name%>"
50 - }
51 - var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
52 - socket.emit("connection",client_data);
53 - socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
54 - console.log(info);
55 -
56 - var date = new Date().getTime();
57 -
58 - chart1.series[0].addPoint({
59 - x: date,
60 - y: info.death,
61 - color: "#FFE08C"
62 - })
63 -
64 - chart2.series[0].addPoint({
65 - x: date,
66 - y: info.temperature,
67 - color: "#FFE08C"
68 - })
69 -
70 - chart3.series[0].addPoint({
71 - x: date,
72 - y: info.wind,
73 - color: "#FFE08C"
74 - })
75 -
76 - chart4.series[0].addPoint({
77 - x: date,
78 - y: info.rain,
79 - color: "#FFE08C"
80 - })
81 -
82 - });
83 - </script>
84 -
85 <script type="text/javascript"> 61 <script type="text/javascript">
86 - //사망률 62 + let client_data = {
63 + birth: "<%=birth%>",
64 + name: "<%=name%>"
65 + }
66 +
67 +
87 var chart1 = Highcharts.chart("container1", { 68 var chart1 = Highcharts.chart("container1", {
88 chart: { 69 chart: {
89 type: "spline", 70 type: "spline",
...@@ -95,11 +76,13 @@ ...@@ -95,11 +76,13 @@
95 // var series = this.series[0]; 76 // var series = this.series[0];
96 // setInterval(function () { 77 // setInterval(function () {
97 // var x = new Date().getTime(), // 현재 시간 78 // var x = new Date().getTime(), // 현재 시간
98 - // y = 0; //여기에 새로 넣을 값 79 + // y = Math.random(); //여기에 새로 넣을 값
99 - // series.addPoint([x, y], true, true); 80 + // series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
100 - // }, 60000); //1000=1초 -> 1분=60000 81 + // }, 1000); //1000=1초 -> 1분=60000
101 // } 82 // }
102 - // } 83 + // },
84 +
85 + backgroundColor: "rgba(255, 255, 255, 0.0)"
103 }, 86 },
104 87
105 time: { 88 time: {
...@@ -107,14 +90,13 @@ ...@@ -107,14 +90,13 @@
107 }, 90 },
108 91
109 title: { 92 title: {
110 - text: "<%=name%>님의 실시간 사망률", 93 + text: "<%=name%>님의 실시간 사망 확률",
111 style: { 94 style: {
112 color: "#FFFFFF", 95 color: "#FFFFFF",
113 fontWeight: "bold", 96 fontWeight: "bold",
114 fontFamily: 'Yeon Sung', 97 fontFamily: 'Yeon Sung',
115 - fontSize: '32px' 98 + fontSize:'32px'
116 } 99 }
117 -
118 }, 100 },
119 xAxis: { 101 xAxis: {
120 type: "datetime", 102 type: "datetime",
...@@ -124,7 +106,6 @@ ...@@ -124,7 +106,6 @@
124 color: "white" 106 color: "white"
125 } 107 }
126 } 108 }
127 -
128 }, 109 },
129 yAxis: { 110 yAxis: {
130 title: { 111 title: {
...@@ -133,6 +114,7 @@ ...@@ -133,6 +114,7 @@
133 color: "white" 114 color: "white"
134 } 115 }
135 }, 116 },
117 +
136 plotLines: [ 118 plotLines: [
137 { 119 {
138 value: 0, 120 value: 0,
...@@ -141,10 +123,11 @@ ...@@ -141,10 +123,11 @@
141 } 123 }
142 ], 124 ],
143 labels: { 125 labels: {
144 - style: { 126 + style: {
145 - color: "white" 127 + color: "white"
128 + }
146 } 129 }
147 - } 130 +
148 }, 131 },
149 tooltip: { 132 tooltip: {
150 headerFormat: "<b>{series.name}</b><br/>", 133 headerFormat: "<b>{series.name}</b><br/>",
...@@ -167,61 +150,62 @@ ...@@ -167,61 +150,62 @@
167 enabled: false 150 enabled: false
168 }, 151 },
169 152
170 - plotOptions: { 153 +plotOptions: {
171 series: { 154 series: {
172 - marker: { 155 + marker: {
173 - radius: 6 156 + radius: 6
174 - } 157 + }
175 } 158 }
176 - }, 159 + },
177 -
178 160
179 - series: [ 161 + series: [
180 - { 162 + {
181 - name: "사망률", 163 + name: "사망률",
182 - data: (function () { 164 + data: (function () {
183 - var deathArr = [], 165 + var deathArr = [],
184 - time = new Date().getTime(); 166 + time = new Date().getTime();
185 - var length = <%=dataLen%>; 167 + var length = <%=dataLen%>;
186 - var i = -9; //얘는 시간계산용 168 + var i = -9; //얘는 시간계산용
187 - var j = 0; //얘는 반복문용 169 + var j = 0; //얘는 반복문용
188 - for (; j < 10 - length; j++) { 170 + for (; j < 10 - length; j++) {
189 - deathArr.push({ 171 + deathArr.push({
190 - x: time + i * 60000, 172 + x: time + i * 60000,
191 - y: 0 173 + y: 0
192 - }) 174 + })
193 - i++; 175 + i++;
194 - } 176 + }
195 177
196 <% probArr.forEach((probArr) => {%> 178 <% probArr.forEach((probArr) => {%>
197 var temp; 179 var temp;
198 - temp = <%=probArr %>; 180 + temp = <%=probArr %>;
199 - 181 +
200 - // for(;j<10;j++) 182 + // for(;j<10;j++)
201 - // { 183 + // {
202 - // deathArr.push({ 184 + // deathArr.push({
203 - // x: time + i * 60000, 185 + // x: time + i * 60000,
204 - // y: temp 186 + // y: temp
205 - // }) 187 + // })
206 - // i++; 188 + // i++;
207 - // } 189 + // }
208 - 190 +
209 - deathArr.push({ 191 + deathArr.push({
210 - x: time + i * 60000, 192 + x: time + i * 60000,
211 - y: temp 193 + y: temp
212 - }) 194 + })
213 - i++; 195 + i++;
214 196
215 <%}) %> 197 <%}) %>
216 198
217 return deathArr; 199 return deathArr;
218 - })(), 200 + })(),
201 +
202 + color: "#FFFFFF"
203 + }
204 + ]
219 205
220 - color: "#FFFFFF"
221 - }
222 - ]
223 }); 206 });
224 - //기온 207 +
208 +
225 var chart2 = Highcharts.chart("container2", { 209 var chart2 = Highcharts.chart("container2", {
226 chart: { 210 chart: {
227 type: "spline", 211 type: "spline",
...@@ -233,13 +217,13 @@ ...@@ -233,13 +217,13 @@
233 // var series = this.series[0]; 217 // var series = this.series[0];
234 // setInterval(function () { 218 // setInterval(function () {
235 // var x = new Date().getTime(), // 현재 시간 219 // var x = new Date().getTime(), // 현재 시간
236 - // y = 0; // 220 + // y = Math.random(); //
237 // series.addPoint([x, y], true, true); 221 // series.addPoint([x, y], true, true);
238 - // }, 60000); //1000=1초 222 + // }, 3000); //1000=1초
239 // } 223 // }
240 - // } 224 + // },
241 - backgroundColor: "rgba(255, 255, 255, 0.0)"
242 225
226 + backgroundColor: "rgba(255, 255, 255, 0.0)"
243 }, 227 },
244 228
245 time: { 229 time: {
...@@ -252,7 +236,7 @@ ...@@ -252,7 +236,7 @@
252 color: "#FFFFFF", 236 color: "#FFFFFF",
253 fontWeight: "bold", 237 fontWeight: "bold",
254 fontFamily: 'Yeon Sung', 238 fontFamily: 'Yeon Sung',
255 - fontSize: '25px' 239 + fontSize:'25px'
256 } 240 }
257 241
258 }, 242 },
...@@ -280,14 +264,15 @@ ...@@ -280,14 +264,15 @@
280 } 264 }
281 ], 265 ],
282 labels: { 266 labels: {
283 - style: { 267 + style: {
284 - color: "white" 268 + color: "white"
269 + }
285 } 270 }
286 - } 271 +
287 }, 272 },
288 tooltip: { 273 tooltip: {
289 headerFormat: "<b>{series.name}</b><br/>", 274 headerFormat: "<b>{series.name}</b><br/>",
290 - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%" 275 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 기온 : {point.y:.2f}도"
291 }, 276 },
292 legend: { 277 legend: {
293 //enabled: false 278 //enabled: false
...@@ -306,51 +291,51 @@ ...@@ -306,51 +291,51 @@
306 enabled: false 291 enabled: false
307 }, 292 },
308 series: [ 293 series: [
309 - { 294 + {
310 - name: "기온", 295 + name: "기온",
311 - data: (function () { 296 + data: (function () {
312 - var tempArr = [], 297 + var tempArr = [],
313 - time = new Date().getTime(); 298 + time = new Date().getTime();
314 - var length = <%=dataLen%>; 299 + var length = <%=dataLen%>;
315 - var i = -9; 300 + var i = -9;
316 - var j = 0; 301 + var j = 0;
317 - for (j; j < 10 - length; j++) { 302 + for (j; j < 10 - length; j++) {
318 - tempArr.push({ 303 + tempArr.push({
319 - x: time + i * 60000, 304 + x: time + i * 60000,
320 - y: 0 305 + y: 0
321 - }) 306 + })
322 - i++; 307 + i++;
323 - } 308 + }
324 309
325 <% ptArr.forEach((ptArr) => {%> 310 <% ptArr.forEach((ptArr) => {%>
326 var temp; 311 var temp;
327 - temp = <%=ptArr %>; 312 + temp = <%=ptArr %>;
328 - 313 +
329 - // for(j;j<10;j++) 314 + // for(j;j<10;j++)
330 - // { 315 + // {
331 - // tempArr.push({ 316 + // tempArr.push({
332 - // x: time + i * 60000, 317 + // x: time + i * 60000,
333 - // y: temp 318 + // y: temp
334 - // }) 319 + // })
335 - // i++; 320 + // i++;
336 - // } 321 + // }
337 - 322 +
338 - tempArr.push({ 323 + tempArr.push({
339 - x: time + i * 60000, 324 + x: time + i * 60000,
340 - y: temp 325 + y: temp
341 - }) 326 + })
342 - i++; 327 + i++;
343 328
344 <%}) %> 329 <%}) %>
345 330
346 return tempArr; 331 return tempArr;
347 - })(), 332 + })(),
348 333
349 - color: "#FFE08C" 334 + color: "#FFE08C"
350 - } 335 + }
351 - ] 336 + ]
352 }); 337 });
353 - //풍속 338 +
354 var chart3 = Highcharts.chart("container3", { 339 var chart3 = Highcharts.chart("container3", {
355 chart: { 340 chart: {
356 type: "spline", 341 type: "spline",
...@@ -362,13 +347,12 @@ ...@@ -362,13 +347,12 @@
362 // var series = this.series[0]; 347 // var series = this.series[0];
363 // setInterval(function () { 348 // setInterval(function () {
364 // var x = new Date().getTime(), // 현재 시간 349 // var x = new Date().getTime(), // 현재 시간
365 - // y = 0; // 350 + // y = Math.random(); //
366 // series.addPoint([x, y], true, true); 351 // series.addPoint([x, y], true, true);
367 - // }, 60000); //1000=1초 352 + // }, 3000); //1000=1초
368 // } 353 // }
369 - // } 354 + // },
370 backgroundColor: "rgba(255, 255, 255, 0.0)" 355 backgroundColor: "rgba(255, 255, 255, 0.0)"
371 -
372 }, 356 },
373 357
374 time: { 358 time: {
...@@ -381,9 +365,8 @@ ...@@ -381,9 +365,8 @@
381 color: "#FFFFFF", 365 color: "#FFFFFF",
382 fontWeight: "bold", 366 fontWeight: "bold",
383 fontFamily: 'Yeon Sung', 367 fontFamily: 'Yeon Sung',
384 - fontSize: '25px' 368 + fontSize:'25px'
385 } 369 }
386 -
387 }, 370 },
388 xAxis: { 371 xAxis: {
389 type: "datetime", 372 type: "datetime",
...@@ -393,7 +376,6 @@ ...@@ -393,7 +376,6 @@
393 color: "white" 376 color: "white"
394 } 377 }
395 } 378 }
396 -
397 }, 379 },
398 yAxis: { 380 yAxis: {
399 title: { 381 title: {
...@@ -401,7 +383,6 @@ ...@@ -401,7 +383,6 @@
401 style: { 383 style: {
402 color: "white" 384 color: "white"
403 } 385 }
404 -
405 }, 386 },
406 plotLines: [ 387 plotLines: [
407 { 388 {
...@@ -411,15 +392,15 @@ ...@@ -411,15 +392,15 @@
411 } 392 }
412 ], 393 ],
413 labels: { 394 labels: {
414 - style: { 395 + style: {
415 - color: "white" 396 + color: "white"
397 + }
416 } 398 }
417 - }
418 399
419 }, 400 },
420 tooltip: { 401 tooltip: {
421 headerFormat: "<b>{series.name}</b><br/>", 402 headerFormat: "<b>{series.name}</b><br/>",
422 - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%" 403 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 풍속 : {point.y:.2f}m/s"
423 }, 404 },
424 legend: { 405 legend: {
425 //enabled: false 406 //enabled: false
...@@ -438,51 +419,50 @@ ...@@ -438,51 +419,50 @@
438 enabled: false 419 enabled: false
439 }, 420 },
440 series: [ 421 series: [
441 - { 422 + {
442 - name: "풍속", 423 + name: "풍속",
443 - data: (function () { 424 + data: (function () {
444 - var windArr = [], 425 + var windArr = [],
445 - time = new Date().getTime(); 426 + time = new Date().getTime();
446 - var length = <%=dataLen%>; 427 + var length = <%=dataLen%>;
447 - var i = -9; 428 + var i = -9;
448 - var j = 0; 429 + var j = 0;
449 - for (j; j < 10 - length; j++) { 430 + for (j; j < 10 - length; j++) {
450 - windArr.push({ 431 + windArr.push({
451 - x: time + i * 60000, 432 + x: time + i * 60000,
452 - y: 0 433 + y: 0
453 - }) 434 + })
454 - i++; 435 + i++;
455 - } 436 + }
456 437
457 <% wsArr.forEach((wsArr) => {%> 438 <% wsArr.forEach((wsArr) => {%>
458 var temp; 439 var temp;
459 - temp = <%=wsArr %>; 440 + temp = <%=wsArr %>;
460 - 441 +
461 - // for(j;j<10;j++) 442 + // for(j;j<10;j++)
462 - // { 443 + // {
463 - // windArr.push({ 444 + // windArr.push({
464 - // x: time + i * 60000, 445 + // x: time + i * 60000,
465 - // y: temp 446 + // y: temp
466 - // }) 447 + // })
467 - // i++; 448 + // i++;
468 - // } 449 + // }
469 - 450 +
470 - windArr.push({ 451 + windArr.push({
471 - x: time + i * 60000, 452 + x: time + i * 60000,
472 - y: temp 453 + y: temp
473 - }) 454 + })
474 - i++; 455 + i++;
475 456
476 <%}) %> 457 <%}) %>
477 458
478 return windArr; 459 return windArr;
479 - })(), 460 + })(),
461 +
462 + color: "#FFE08C"
463 + }
464 + ] });
480 465
481 - color: "#FFE08C"
482 - }
483 - ]
484 - });
485 - //강수량
486 var chart4 = Highcharts.chart("container4", { 466 var chart4 = Highcharts.chart("container4", {
487 chart: { 467 chart: {
488 type: "spline", 468 type: "spline",
...@@ -494,13 +474,12 @@ ...@@ -494,13 +474,12 @@
494 // var series = this.series[0]; 474 // var series = this.series[0];
495 // setInterval(function () { 475 // setInterval(function () {
496 // var x = new Date().getTime(), // 현재 시간 476 // var x = new Date().getTime(), // 현재 시간
497 - // y = 0; // 477 + // y = Math.random(); //
498 // series.addPoint([x, y], true, true); 478 // series.addPoint([x, y], true, true);
499 - // }, 60000); //1000=1초 479 + // }, 3000); //1000=1초
500 // } 480 // }
501 - // } 481 + // },
502 backgroundColor: "rgba(255, 255, 255, 0.0)" 482 backgroundColor: "rgba(255, 255, 255, 0.0)"
503 -
504 }, 483 },
505 484
506 time: { 485 time: {
...@@ -513,9 +492,8 @@ ...@@ -513,9 +492,8 @@
513 color: "#FFFFFF", 492 color: "#FFFFFF",
514 fontWeight: "bold", 493 fontWeight: "bold",
515 fontFamily: 'Yeon Sung', 494 fontFamily: 'Yeon Sung',
516 - fontSize: '25px' 495 + fontSize:'25px'
517 } 496 }
518 -
519 }, 497 },
520 xAxis: { 498 xAxis: {
521 type: "datetime", 499 type: "datetime",
...@@ -525,7 +503,6 @@ ...@@ -525,7 +503,6 @@
525 color: "white" 503 color: "white"
526 } 504 }
527 } 505 }
528 -
529 }, 506 },
530 yAxis: { 507 yAxis: {
531 title: { 508 title: {
...@@ -533,7 +510,6 @@ ...@@ -533,7 +510,6 @@
533 style: { 510 style: {
534 color: "white" 511 color: "white"
535 } 512 }
536 -
537 }, 513 },
538 plotLines: [ 514 plotLines: [
539 { 515 {
...@@ -543,15 +519,15 @@ ...@@ -543,15 +519,15 @@
543 } 519 }
544 ], 520 ],
545 labels: { 521 labels: {
546 - style: { 522 + style: {
547 - color: "white" 523 + color: "white"
524 + }
548 } 525 }
549 - }
550 526
551 }, 527 },
552 tooltip: { 528 tooltip: {
553 headerFormat: "<b>{series.name}</b><br/>", 529 headerFormat: "<b>{series.name}</b><br/>",
554 - pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%" 530 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 강수량 : {point.y:.2f}mm"
555 }, 531 },
556 legend: { 532 legend: {
557 //enabled: false 533 //enabled: false
...@@ -570,51 +546,88 @@ ...@@ -570,51 +546,88 @@
570 enabled: false 546 enabled: false
571 }, 547 },
572 series: [ 548 series: [
573 - { 549 + {
574 - name: "강수량", 550 + name: "강수량",
575 - data: (function () { 551 + data: (function () {
576 - var rainArr = [], 552 + var rainArr = [],
577 - time = new Date().getTime(); 553 + time = new Date().getTime();
578 - var length = <%=dataLen%>; 554 + var length = <%=dataLen%>;
579 - var i = -9; 555 + var i = -9;
580 - var j = 0; 556 + var j = 0;
581 - for (j; j < 10 - length; j++) { 557 + for (j; j < 10 - length; j++) {
582 - rainArr.push({ 558 + rainArr.push({
583 - x: time + i * 60000, 559 + x: time + i * 60000,
584 - y: 0 560 + y: 0
585 - }) 561 + })
586 - i++; 562 + i++;
587 - } 563 + }
588 564
589 <% rainArr.forEach((rainArr) => {%> 565 <% rainArr.forEach((rainArr) => {%>
590 var temp; 566 var temp;
591 - temp = <%=rainArr %>; 567 + temp = <%=rainArr %>;
592 - 568 +
593 - // for(j;j<10;j++) 569 + // for(j;j<10;j++)
594 - // { 570 + // {
595 - // rainArr.push({ 571 + // rainArr.push({
596 - // x: time + i * 60000, 572 + // x: time + i * 60000,
597 - // y: temp 573 + // y: temp
598 - // }) 574 + // })
599 - // i++; 575 + // i++;
600 - // } 576 + // }
601 - 577 +
602 - rainArr.push({ 578 + rainArr.push({
603 - x: time + i * 60000, 579 + x: time + i * 60000,
604 - y: temp 580 + y: temp
605 - }) 581 +
606 - i++; 582 + })
583 + i++;
607 584
608 <%}) %> 585 <%}) %>
609 586
610 return rainArr; 587 return rainArr;
611 - })(), 588 + })(),
612 - color: "#FFE08C" 589 + color: "#FFE08C"
590 +
591 + }
592 + ]
593 +
594 +
595 + });
596 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
597 + socket.emit("connection", client_data);
598 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
599 + console.log(info);
600 +
601 + var date = new Date().getTime();
602 +
603 + chart1.series[0].addPoint({
604 + x: date,
605 + y: info.death
606 + });
607 +console.log(chart1.series[0])
608 + chart2.series[0].addPoint({
609 + x: date,
610 + y: info.temperature*1
611 + });
612 +
613 +console.log(chart2.series[0])
614 + chart3.series[0].addPoint({
615 + x: date,
616 + y: info.wind*1
617 + });
618 +
619 +console.log(chart3.series[0])
620 + chart4.series[0].addPoint({
621 + x: date,
622 + y: info.rain*1
623 + });
624 +console.log(chart4.series[0])
613 625
614 - }
615 - ]
616 }); 626 });
627 +
617 </script> 628 </script>
629 + </div>
630 +
618 </body> 631 </body>
619 632
620 -</html>
...\ No newline at end of file ...\ No newline at end of file
633 +</html> -->
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <title>Page Title</title> 7 <title>Page Title</title>
8 8
9 -<!-- font --> 9 + <!-- font -->
10 -<link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet"> 10 + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet">
11 -<link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet"> 11 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet">
12 12
13 <meta name="viewport" content="width=device-width, initial-scale=1"> 13 <meta name="viewport" content="width=device-width, initial-scale=1">
14 <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 14 <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
...@@ -24,10 +24,19 @@ ...@@ -24,10 +24,19 @@
24 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 24 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
25 25
26 <style type="text/css"> 26 <style type="text/css">
27 + html,
28 + {
29 + margin: 0;
30 + padding: 0;
31 + }
32 +
27 body { 33 body {
28 - background-image: url('images/background.jpg'); 34 + margin: 0;
35 + padding: 0;
36 +
37 + /* background-image: url('background.jpg');
29 background-repeat: no-repeat; 38 background-repeat: no-repeat;
30 - background-size: cover; 39 + background-size: cover; */
31 /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */ 40 /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
32 } 41 }
33 42
...@@ -41,6 +50,13 @@ ...@@ -41,6 +50,13 @@
41 font-size: 20px; 50 font-size: 20px;
42 font-family: 'Yeon Sung', cursive; 51 font-family: 'Yeon Sung', cursive;
43 } 52 }
53 +
54 + #banner {
55 + position: absolute;
56 + top: 0;
57 + width: 100%;
58 + }
59 +
44 #footer { 60 #footer {
45 position: absolute; 61 position: absolute;
46 bottom: 0; 62 bottom: 0;
...@@ -48,29 +64,33 @@ ...@@ -48,29 +64,33 @@
48 height: 50px; 64 height: 50px;
49 text-align: center; 65 text-align: center;
50 font-family: 'Yeon Sung', cursive; 66 font-family: 'Yeon Sung', cursive;
51 - color:white; 67 + color: white;
52 } 68 }
53 </style> 69 </style>
54 70
55 </head> 71 </head>
56 72
57 <body> 73 <body>
58 - <div style="width:100%; text-align: center; margin-top:170px;"> 74 + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
59 - <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> 75 + <div id="banner">
60 - </div> 76 + <div style="width:100%; text-align: center; padding-top:170px;">
61 - <br><br><br> 77 + <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
62 - <div style="width:100%; text-align: center;"> 78 + </div>
63 - <form action="/starting" method="post"> 79 + <br><br><br>
64 - <div class="form-inline"> 80 + <div style="width:100%; text-align: center;">
65 - <label>이름</label> 81 + <form action="/starting" method="post">
66 - <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;"> 82 + <div class="form-inline">
67 - &nbsp&nbsp&nbsp&nbsp 83 + <label>이름</label>
68 - <label>생년월일</label> 84 + <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
69 - <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;"> 85 + &nbsp &nbsp&nbsp&nbsp
70 - <br><br><br> 86 + <label>생년월일</label>
71 - <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;"> 87 + <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
72 - </div> 88 + <br><br><br>
73 - </form> 89 + <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
90 + </div>
91 + </form>
92 + </div>
93 +
74 </div> 94 </div>
75 95
76 <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> 96 <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
......
1 +<!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <!-- font -->
6 + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
7 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
8 +
9 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 + <meta name="viewport" content="width=device-width, initial-scale=1" />
11 + <title>Highcharts Example</title>
12 +
13 + <style type="text/css">
14 + html {
15 + margin: 0;
16 + padding: 0;
17 +}
18 + body {
19 + margin: 0;
20 + padding: 0;
21 +
22 + /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
23 + /* background-color:#65799B; */
24 + /* background-image: url("2.jpg");
25 + background-repeat: no-repeat;
26 + background-size: cover; */
27 + }
28 +
29 + #banner {
30 + position: absolute;
31 + top: 0;
32 + width: 100%;
33 + }
34 + </style>
35 +</head>
36 +
37 +<body>
38 + <script src="highcharts.js"></script>
39 + <script src="modules/exporting.js"></script>
40 + <script src="modules/export-data.js"></script>
41 + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
42 +
43 + <div id="banner">
44 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div>
45 +
46 + <div style="width:1275px; margin:0 auto;">
47 + <div style="display: inline-block;">
48 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
49 + </div>
50 + <div style="display: inline-block;">
51 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
52 + </div>
53 +
54 + <div style="display: inline-block;">
55 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
56 + </div>
57 + </div>
58 +
59 +
60 + <script src="/socket.io/socket.io.js"></script>
61 + <script>
62 + let client_data = {
63 + birth: "<%=birth%>",
64 + name: "<%=name%>"
65 + }
66 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
67 + socket.emit("connection", client_data);
68 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
69 + console.log(info);
70 +
71 + var date = new Date().getTime();
72 +
73 + chart1.series[0].addPoint({
74 + x: date,
75 + y: info.death,
76 + color: "#FFE08C"
77 + });
78 +
79 + chart2.series[0] .addPoint({
80 + x: date,
81 + y: info.temperature,
82 + color: "#FFE08C"
83 + });
84 +
85 + chart3.series[0].addPoint({
86 + x: date,
87 + y: info.wind,
88 + color: "#FFE08C"
89 + });
90 +
91 + chart4.series[0].addPoint({
92 + x: date,
93 + y: info.rain,
94 + color: "#FFE08C"
95 + });
96 +
97 + });
98 + </script>
99 +
100 + <script type="text/javascript">
101 + //사망률
102 + var chart1 = Highcharts.chart("container1", {
103 + chart: {
104 + type: "spline",
105 + animation: Highcharts.svg, // don't animate in old IE
106 + marginRight: 10,
107 + // events: {
108 + // load: function () {
109 + // // set up the updating of the chart each second
110 + // var series = this.series[0];
111 + // setInterval(function () {
112 + // var x = new Date().getTime(), // 현재 시간
113 + // y = 0; //여기에 새로 넣을 값
114 + // series.addPoint([x, y], true, true);
115 + // }, 60000); //1000=1초 -> 1분=60000
116 + // }
117 + // }
118 + backgroundColor: "rgba(255, 255, 255, 0.0)"
119 +
120 + },
121 +
122 + time: {
123 + useUTC: false
124 + },
125 +
126 + title: {
127 + text: "<%=name%>님의 실시간 사망 확률",
128 + style: {
129 + color: "#FFFFFF",
130 + fontWeight: "bold",
131 + fontFamily: 'Yeon Sung',
132 + fontSize: '32px'
133 + }
134 +
135 + },
136 + xAxis: {
137 + type: "datetime",
138 + tickPixelInterval: 150,
139 + labels: {
140 + style: {
141 + color: "white"
142 + }
143 + }
144 +
145 + },
146 + yAxis: {
147 + title: {
148 + text: "Value",
149 + style: {
150 + color: "white"
151 + }
152 + },
153 + plotLines: [
154 + {
155 + value: 0,
156 + width: 1,
157 + color: "#808080"
158 + }
159 + ],
160 + labels: {
161 + style: {
162 + color: "white"
163 + }
164 + }
165 + },
166 + tooltip: {
167 + headerFormat: "<b>{series.name}</b><br/>",
168 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
169 + },
170 + legend: {
171 + //enabled: false
172 + layout: "vertical",
173 + align: "left",
174 + verticalAlign: "top",
175 + x: 100,
176 + y: 50,
177 + floating: true,
178 + borderWidth: 1,
179 + backgroundColor:
180 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
181 + "#FFFFFF"
182 + },
183 + exporting: {
184 + enabled: false
185 + },
186 +
187 + plotOptions: {
188 + series: {
189 + marker: {
190 + radius: 6
191 + }
192 + }
193 + },
194 +
195 +
196 + series: [
197 + {
198 + name: "사망률",
199 + data: (function () {
200 + var deathArr = [],
201 + time = new Date().getTime();
202 + var length = <%=dataLen%>;
203 + var i = -9; //얘는 시간계산용
204 + var j = 0; //얘는 반복문용
205 + for (; j < 10 - length; j++) {
206 + deathArr.push({
207 + x: time + i * 60000,
208 + y: 0
209 + })
210 + i++;
211 + }
212 +
213 + <% probArr.forEach((probArr) => {%>
214 + var temp;
215 + temp = <%=probArr %>;
216 +
217 + // for(;j<10;j++)
218 + // {
219 + // deathArr.push({
220 + // x: time + i * 60000,
221 + // y: temp
222 + // })
223 + // i++;
224 + // }
225 +
226 + deathArr.push({
227 + x: time + i * 60000,
228 + y: temp
229 + })
230 + i++;
231 +
232 + <%}) %>
233 +
234 + return deathArr;
235 + })(),
236 +
237 + color: "#FFFFFF"
238 + }
239 + ]
240 + });
241 + //기온
242 + var chart2 = Highcharts.chart("container2", {
243 + chart: {
244 + type: "spline",
245 + animation: Highcharts.svg, // don't animate in old IE
246 + marginRight: 10,
247 + // events: {
248 + // load: function () {
249 + // // set up the updating of the chart each second
250 + // var series = this.series[0];
251 + // setInterval(function () {
252 + // var x = new Date().getTime(), // 현재 시간
253 + // y = 0; //
254 + // series.addPoint([x, y], true, true);
255 + // }, 60000); //1000=1초
256 + // }
257 + // }
258 + backgroundColor: "rgba(255, 255, 255, 0.0)"
259 +
260 + },
261 +
262 + time: {
263 + useUTC: false
264 + },
265 +
266 + title: {
267 + text: "기온",
268 + style: {
269 + color: "#FFFFFF",
270 + fontWeight: "bold",
271 + fontFamily: 'Yeon Sung',
272 + fontSize: '25px'
273 + }
274 +
275 + },
276 + xAxis: {
277 + type: "datetime",
278 + tickPixelInterval: 150,
279 + labels: {
280 + style: {
281 + color: "white"
282 + }
283 + }
284 + },
285 + yAxis: {
286 + title: {
287 + text: "Value",
288 + style: {
289 + color: "white"
290 + }
291 + },
292 + plotLines: [
293 + {
294 + value: 0,
295 + width: 1,
296 + color: "#808080"
297 + }
298 + ],
299 + labels: {
300 + style: {
301 + color: "white"
302 + }
303 + }
304 + },
305 + tooltip: {
306 + headerFormat: "<b>{series.name}</b><br/>",
307 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
308 + },
309 + legend: {
310 + //enabled: false
311 + layout: "vertical",
312 + align: "left",
313 + verticalAlign: "top",
314 + x: 100,
315 + y: 50,
316 + floating: true,
317 + borderWidth: 1,
318 + backgroundColor:
319 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
320 + "#FFFFFF"
321 + },
322 + exporting: {
323 + enabled: false
324 + },
325 + series: [
326 + {
327 + name: "기온",
328 + data: (function () {
329 + var tempArr = [],
330 + time = new Date().getTime();
331 + var length = <%=dataLen%>;
332 + var i = -9;
333 + var j = 0;
334 + for (j; j < 10 - length; j++) {
335 + tempArr.push({
336 + x: time + i * 60000,
337 + y: 0
338 + })
339 + i++;
340 + }
341 +
342 + <% ptArr.forEach((ptArr) => {%>
343 + var temp;
344 + temp = <%=ptArr %>;
345 +
346 + // for(j;j<10;j++)
347 + // {
348 + // tempArr.push({
349 + // x: time + i * 60000,
350 + // y: temp
351 + // })
352 + // i++;
353 + // }
354 +
355 + tempArr.push({
356 + x: time + i * 60000,
357 + y: temp
358 + })
359 + i++;
360 +
361 + <%}) %>
362 +
363 + return tempArr;
364 + })(),
365 +
366 + color: "#FFE08C"
367 + }
368 + ]
369 + });
370 + //풍속
371 + var chart3 = Highcharts.chart("container3", {
372 + chart: {
373 + type: "spline",
374 + animation: Highcharts.svg, // don't animate in old IE
375 + marginRight: 10,
376 + // events: {
377 + // load: function () {
378 + // // set up the updating of the chart each second
379 + // var series = this.series[0];
380 + // setInterval(function () {
381 + // var x = new Date().getTime(), // 현재 시간
382 + // y = 0; //
383 + // series.addPoint([x, y], true, true);
384 + // }, 60000); //1000=1초
385 + // }
386 + // }
387 + backgroundColor: "rgba(255, 255, 255, 0.0)"
388 +
389 + },
390 +
391 + time: {
392 + useUTC: false
393 + },
394 +
395 + title: {
396 + text: "풍속",
397 + style: {
398 + color: "#FFFFFF",
399 + fontWeight: "bold",
400 + fontFamily: 'Yeon Sung',
401 + fontSize: '25px'
402 + }
403 +
404 + },
405 + xAxis: {
406 + type: "datetime",
407 + tickPixelInterval: 150,
408 + labels: {
409 + style: {
410 + color: "white"
411 + }
412 + }
413 +
414 + },
415 + yAxis: {
416 + title: {
417 + text: "Value",
418 + style: {
419 + color: "white"
420 + }
421 +
422 + },
423 + plotLines: [
424 + {
425 + value: 0,
426 + width: 1,
427 + color: "#808080"
428 + }
429 + ],
430 + labels: {
431 + style: {
432 + color: "white"
433 + }
434 + }
435 +
436 + },
437 + tooltip: {
438 + headerFormat: "<b>{series.name}</b><br/>",
439 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
440 + },
441 + legend: {
442 + //enabled: false
443 + layout: "vertical",
444 + align: "left",
445 + verticalAlign: "top",
446 + x: 100,
447 + y: 50,
448 + floating: true,
449 + borderWidth: 1,
450 + backgroundColor:
451 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
452 + "#FFFFFF"
453 + },
454 + exporting: {
455 + enabled: false
456 + },
457 + series: [
458 + {
459 + name: "풍속",
460 + data: (function () {
461 + var windArr = [],
462 + time = new Date().getTime();
463 + var length = <%=dataLen%>;
464 + var i = -9;
465 + var j = 0;
466 + for (j; j < 10 - length; j++) {
467 + windArr.push({
468 + x: time + i * 60000,
469 + y: 0
470 + })
471 + i++;
472 + }
473 +
474 + <% wsArr.forEach((wsArr) => {%>
475 + var temp;
476 + temp = <%=wsArr %>;
477 +
478 + // for(j;j<10;j++)
479 + // {
480 + // windArr.push({
481 + // x: time + i * 60000,
482 + // y: temp
483 + // })
484 + // i++;
485 + // }
486 +
487 + windArr.push({
488 + x: time + i * 60000,
489 + y: temp
490 + })
491 + i++;
492 +
493 + <%}) %>
494 +
495 + return windArr;
496 + })(),
497 +
498 + color: "#FFE08C"
499 + }
500 + ]
501 + });
502 + //강수량
503 + var chart4 = Highcharts.chart("container4", {
504 + chart: {
505 + type: "spline",
506 + animation: Highcharts.svg, // don't animate in old IE
507 + marginRight: 10,
508 + // events: {
509 + // load: function () {
510 + // // set up the updating of the chart each second
511 + // var series = this.series[0];
512 + // setInterval(function () {
513 + // var x = new Date().getTime(), // 현재 시간
514 + // y = 0; //
515 + // series.addPoint([x, y], true, true);
516 + // }, 60000); //1000=1초
517 + // }
518 + // }
519 + backgroundColor: "rgba(255, 255, 255, 0.0)"
520 +
521 + },
522 +
523 + time: {
524 + useUTC: false
525 + },
526 +
527 + title: {
528 + text: "강수량",
529 + style: {
530 + color: "#FFFFFF",
531 + fontWeight: "bold",
532 + fontFamily: 'Yeon Sung',
533 + fontSize: '25px'
534 + }
535 +
536 + },
537 + xAxis: {
538 + type: "datetime",
539 + tickPixelInterval: 150,
540 + labels: {
541 + style: {
542 + color: "white"
543 + }
544 + }
545 +
546 + },
547 + yAxis: {
548 + title: {
549 + text: "Value",
550 + style: {
551 + color: "white"
552 + }
553 +
554 + },
555 + plotLines: [
556 + {
557 + value: 0,
558 + width: 1,
559 + color: "#808080"
560 + }
561 + ],
562 + labels: {
563 + style: {
564 + color: "white"
565 + }
566 + }
567 +
568 + },
569 + tooltip: {
570 + headerFormat: "<b>{series.name}</b><br/>",
571 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
572 + },
573 + legend: {
574 + //enabled: false
575 + layout: "vertical",
576 + align: "left",
577 + verticalAlign: "top",
578 + x: 100,
579 + y: 50,
580 + floating: true,
581 + borderWidth: 1,
582 + backgroundColor:
583 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
584 + "#FFFFFF"
585 + },
586 + exporting: {
587 + enabled: false
588 + },
589 + series: [
590 + {
591 + name: "강수량",
592 + data: (function () {
593 + var rainArr = [],
594 + time = new Date().getTime();
595 + var length = <%=dataLen%>;
596 + var i = -9;
597 + var j = 0;
598 + for (j; j < 10 - length; j++) {
599 + rainArr.push({
600 + x: time + i * 60000,
601 + y: 0
602 + })
603 + i++;
604 + }
605 +
606 + <% rainArr.forEach((rainArr) => {%>
607 + var temp;
608 + temp = <%=rainArr %>;
609 +
610 + // for(j;j<10;j++)
611 + // {
612 + // rainArr.push({
613 + // x: time + i * 60000,
614 + // y: temp
615 + // })
616 + // i++;
617 + // }
618 +
619 + rainArr.push({
620 + x: time + i * 60000,
621 + y: temp
622 +
623 + })
624 + i++;
625 +
626 + <%}) %>
627 +
628 + return rainArr;
629 + })(),
630 + color: "#FFE08C"
631 +
632 + }
633 + ]
634 + });
635 + </script>
636 +
637 + </div>
638 +
639 +</body>
640 +
641 +</html>
...\ No newline at end of file ...\ No newline at end of file