조민지

ejs errrorrrrrr

...@@ -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,7 +60,9 @@ ...@@ -55,7 +60,9 @@
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%">
64 + <div id="banner">
65 + <div style="width:100%; text-align: center; padding-top:170px;">
59 <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> 66 <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
60 </div> 67 </div>
61 <br><br><br> 68 <br><br><br>
...@@ -73,6 +80,8 @@ ...@@ -73,6 +80,8 @@
73 </form> 80 </form>
74 </div> 81 </div>
75 82
83 + </div>
84 +
76 <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> 85 <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
77 </body> 86 </body>
78 87
......

204 KB

This diff is collapsed. Click to expand it.
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> 61 + <script type="text/javascript">
47 - let client_data={ 62 + let client_data = {
48 - birth : "<%=birth%>", 63 + birth: "<%=birth%>",
49 - name : "<%=name%>" 64 + name: "<%=name%>"
50 } 65 }
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 66
82 - });
83 - </script>
84 67
85 - <script type="text/javascript">
86 - //사망률
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 - // }
102 // } 82 // }
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,
...@@ -145,6 +127,7 @@ ...@@ -145,6 +127,7 @@
145 color: "white" 127 color: "white"
146 } 128 }
147 } 129 }
130 +
148 }, 131 },
149 tooltip: { 132 tooltip: {
150 headerFormat: "<b>{series.name}</b><br/>", 133 headerFormat: "<b>{series.name}</b><br/>",
...@@ -167,7 +150,7 @@ ...@@ -167,7 +150,7 @@
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
...@@ -175,7 +158,6 @@ ...@@ -175,7 +158,6 @@
175 } 158 }
176 }, 159 },
177 160
178 -
179 series: [ 161 series: [
180 { 162 {
181 name: "사망률", 163 name: "사망률",
...@@ -220,8 +202,10 @@ ...@@ -220,8 +202,10 @@
220 color: "#FFFFFF" 202 color: "#FFFFFF"
221 } 203 }
222 ] 204 ]
205 +
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 - // }
240 // } 223 // }
241 - backgroundColor: "rgba(255, 255, 255, 0.0)" 224 + // },
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 },
...@@ -284,10 +268,11 @@ ...@@ -284,10 +268,11 @@
284 color: "white" 268 color: "white"
285 } 269 }
286 } 270 }
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
...@@ -350,7 +335,7 @@ ...@@ -350,7 +335,7 @@
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 - // }
369 // } 353 // }
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 {
...@@ -419,7 +400,7 @@ ...@@ -419,7 +400,7 @@
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
...@@ -480,9 +461,8 @@ ...@@ -480,9 +461,8 @@
480 461
481 color: "#FFE08C" 462 color: "#FFE08C"
482 } 463 }
483 - ] 464 + ] });
484 - }); 465 +
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 - // }
501 // } 480 // }
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 {
...@@ -551,7 +527,7 @@ ...@@ -551,7 +527,7 @@
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
...@@ -602,6 +578,7 @@ ...@@ -602,6 +578,7 @@
602 rainArr.push({ 578 rainArr.push({
603 x: time + i * 60000, 579 x: time + i * 60000,
604 y: temp 580 y: temp
581 +
605 }) 582 })
606 i++; 583 i++;
607 584
...@@ -613,8 +590,44 @@ ...@@ -613,8 +590,44 @@
613 590
614 } 591 }
615 ] 592 ]
593 +
594 +
616 }); 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])
625 +
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,14 +64,16 @@ ...@@ -48,14 +64,16 @@
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%">
75 + <div id="banner">
76 + <div style="width:100%; text-align: center; padding-top:170px;">
59 <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1> 77 <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
60 </div> 78 </div>
61 <br><br><br> 79 <br><br><br>
...@@ -64,7 +82,7 @@ ...@@ -64,7 +82,7 @@
64 <div class="form-inline"> 82 <div class="form-inline">
65 <label>이름</label> 83 <label>이름</label>
66 <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;"> 84 <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
67 - &nbsp&nbsp&nbsp&nbsp 85 + &nbsp &nbsp&nbsp&nbsp
68 <label>생년월일</label> 86 <label>생년월일</label>
69 <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;"> 87 <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
70 <br><br><br> 88 <br><br><br>
...@@ -73,6 +91,8 @@ ...@@ -73,6 +91,8 @@
73 </form> 91 </form>
74 </div> 92 </div>
75 93
94 + </div>
95 +
76 <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div> 96 <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
77 </body> 97 </body>
78 98
......
This diff is collapsed. Click to expand it.