ejs errrorrrrrr

조민지
Commit 036e2a64e2ff0dc7cf6c86efdef5d53c95cee2b6 036e2a64 1 parent 7882825a
Showing 10 changed files with 138 additions and 96 deletions
app.js
graph/main.html
public/1.jpg → public/images/1.jpg
public/2.jpg → public/images/2.jpg
public/background.jpg → public/images/background.jpg
views/2.jpg
views/index - 복사본.ejs
views/index.ejs
views/main.ejs
views/re.ejs
--- a/app.js
View file @036e2a6
+++ b/app.js
View file @036e2a6
@@ -18,8 +18,8 @@ app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
+app.use('/',express.static(path.join(__dirname, 'public')));
-app.use(express.static(path.join(__dirname, 'code')));
+app.use('/',express.static(path.join(__dirname, 'code')));
 app.use('/name/:name/birth',express.static(path.join(__dirname, 'public')));
 app.use('/name/:name/birth',express.static(path.join(__dirname, 'code')));
--- a/graph/main.html
View file @036e2a6
+++ b/graph/main.html
View file @036e2a6
@@ -25,9 +25,9 @@
     <style type="text/css">
         body {
-            background-image: url('background.jpg');
+            /* background-image: url('background.jpg');
             background-repeat: no-repeat;
-            background-size: cover;
+            background-size: cover; */
             /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
         }
@@ -41,6 +41,11 @@
             font-size: 20px;
             font-family: 'Yeon Sung', cursive;
         }
+        #banner {
+            position: absolute;
+            top: 0;
+            width: 100%;
+        }
         #footer {
             position: absolute;
             bottom: 0;
@@ -55,7 +60,9 @@
 </head>
 <body>
-    <div style="width:100%; text-align: center; margin-top:170px;">
+    <img src="./background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
+    <div id="banner">
+            <div style="width:100%; text-align: center; padding-top:170px;">
                     <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
                 </div>
                 <br><br><br>
@@ -73,6 +80,8 @@
                     </form>
                 </div>
+    </div>
+
     <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
 </body>
--- a/public/1.jpg → public/images/1.jpg
View file @036e2a6
+++ b/public/1.jpg → public/images/1.jpg
View file @036e2a6
--- a/public/2.jpg → public/images/2.jpg
View file @036e2a6
+++ b/public/2.jpg → public/images/2.jpg
View file @036e2a6
--- a/public/background.jpg → public/images/background.jpg
View file @036e2a6
+++ b/public/background.jpg → public/images/background.jpg
View file @036e2a6
--- a/views/2.jpg 0 → 100644
View file @036e2a6
+++ b/views/2.jpg 0 → 100644
View file @036e2a6
--- a/views/index - 복사본.ejs 0 → 100644
View file @036e2a6
+++ b/views/index - 복사본.ejs 0 → 100644
View file @036e2a6
--- a/views/index.ejs
View file @036e2a6
+++ b/views/index.ejs
View file @036e2a6
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html>
 <head>
@@ -11,13 +11,26 @@
   <title>Highcharts Example</title>
   <style type="text/css">
+  html {
+  margin: 0;
+  padding: 0;
+}
     body {
+      margin: 0;
+      padding: 0;
+
       /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
       /* background-color:#65799B; */
-      background-image: url("2.jpg");
+      /* background-image: url("2.jpg");
       background-repeat: no-repeat;
-      background-size: cover;
+      background-size: cover; */
+    }
+    #banner {
+      position: absolute;
+      top: 0;
+      width: 100%;
     }
+
   </style>
 </head>
@@ -26,7 +39,10 @@
   <script src="modules/exporting.js"></script>
   <script src="modules/export-data.js"></script>
-  <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div>
+  <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
+
+  <div id="banner">
+        <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
   <div style="width:1275px;  margin:0 auto;">
     <div style="display: inline-block;">
@@ -41,49 +57,14 @@
     </div>
   </div>
-
   <script src="/socket.io/socket.io.js"></script>
-  <script>
+  <script type="text/javascript">
-       let client_data={
+      let client_data = {
-     birth : "<%=birth%>",
+      birth: "<%=birth%>",
-     name : "<%=name%>"
+      name: "<%=name%>"
     }
-    var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
-    socket.emit("connection",client_data);
-    socket.on("weatherInfo_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
-      console.log(info);
-
-      var date = new Date().getTime();
-
-      chart1.series[0].addPoint({
-        x: date,
-        y: info.death,
-        color: "#FFE08C"
-      })
-
-      chart2.series[0].addPoint({
-        x: date,
-        y: info.temperature,
-        color: "#FFE08C"
-      })
-
-      chart3.series[0].addPoint({
-        x: date,
-        y: info.wind,
-        color: "#FFE08C"
-      })
-
-      chart4.series[0].addPoint({
-        x: date,
-        y: info.rain,
-        color: "#FFE08C"
-      })
-    });
-  </script>
-  <script type="text/javascript">
-    //사망률
     var chart1 = Highcharts.chart("container1", {
       chart: {
         type: "spline",
@@ -95,11 +76,13 @@
         //     var series = this.series[0];
         //     setInterval(function () {
         //       var x = new Date().getTime(), // 현재 시간
-        //         y = 0; //여기에 새로 넣을 값
+        //         y = Math.random(); //여기에 새로 넣을 값
-        //       series.addPoint([x, y], true, true);
+        //       series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
-        //     }, 60000); //1000=1초 -> 1분=60000
+        //     }, 1000); //1000=1초 -> 1분=60000
-        //   }
         //   }
+        // },
+
+        backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
       time: {
@@ -107,14 +90,13 @@
       },
       title: {
-        text: "<%=name%>님의 실시간 사망률",
+        text: "<%=name%>님의 실시간 사망 확률",
         style: {
           color: "#FFFFFF",
           fontWeight: "bold",
           fontFamily: 'Yeon Sung',
-          fontSize: '32px'
+          fontSize:'32px'
         }
-
       },
       xAxis: {
         type: "datetime",
@@ -124,7 +106,6 @@
             color: "white"
           }
         }
-
       },
       yAxis: {
         title: {
@@ -133,6 +114,7 @@
             color: "white"
           }
         },
+
         plotLines: [
           {
             value: 0,
@@ -145,6 +127,7 @@
               color: "white"
             }
           }
+
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -167,7 +150,7 @@
         enabled: false
       },
-      plotOptions: {
+plotOptions: {
         series: {
             marker: {
                 radius: 6
@@ -175,7 +158,6 @@
         }
     },
-
         series: [
           {
             name: "사망률",
@@ -220,8 +202,10 @@
             color: "#FFFFFF"
           }
         ]
+
     });
-    //기온
+
+
     var chart2 = Highcharts.chart("container2", {
       chart: {
         type: "spline",
@@ -233,13 +217,13 @@
         //     var series = this.series[0];
         //     setInterval(function () {
         //       var x = new Date().getTime(), // 현재 시간
-        //         y = 0; //
+        //         y = Math.random(); //
         //       series.addPoint([x, y], true, true);
-        //     }, 60000); //1000=1초
+        //     }, 3000); //1000=1초
-        //   }
         //   }
-        backgroundColor: "rgba(255, 255, 255, 0.0)"
+        // },
+        backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
       time: {
@@ -252,7 +236,7 @@
           color: "#FFFFFF",
           fontWeight: "bold",
           fontFamily: 'Yeon Sung',
-          fontSize: '25px'
+          fontSize:'25px'
         }
       },
@@ -284,10 +268,11 @@
               color: "white"
             }
           }
+
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
-        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
+        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 기온 : {point.y:.2f}도"
       },
       legend: {
         //enabled: false
@@ -350,7 +335,7 @@
           }
         ]
     });
-    //풍속
+
     var chart3 = Highcharts.chart("container3", {
       chart: {
         type: "spline",
@@ -362,13 +347,12 @@
         //     var series = this.series[0];
         //     setInterval(function () {
         //       var x = new Date().getTime(), // 현재 시간
-        //         y = 0; //
+        //         y = Math.random(); //
         //       series.addPoint([x, y], true, true);
-        //     }, 60000); //1000=1초
+        //     }, 3000); //1000=1초
-        //   }
         //   }
+        // },
         backgroundColor: "rgba(255, 255, 255, 0.0)"
-
       },
       time: {
@@ -381,9 +365,8 @@
           color: "#FFFFFF",
           fontWeight: "bold",
           fontFamily: 'Yeon Sung',
-          fontSize: '25px'
+          fontSize:'25px'
         }
-
       },
       xAxis: {
         type: "datetime",
@@ -393,7 +376,6 @@
             color: "white"
           }
         }
-
       },
       yAxis: {
         title: {
@@ -401,7 +383,6 @@
           style: {
             color: "white"
           }
-
         },
         plotLines: [
           {
@@ -419,7 +400,7 @@
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
-        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
+        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 풍속 : {point.y:.2f}m/s"
       },
       legend: {
         //enabled: false
@@ -480,9 +461,8 @@
             color: "#FFE08C"
           }
-      ]
+        ]    });
-    });
+
-    //강수량 
     var chart4 = Highcharts.chart("container4", {
       chart: {
         type: "spline",
@@ -494,13 +474,12 @@
         //     var series = this.series[0];
         //     setInterval(function () {
         //       var x = new Date().getTime(), // 현재 시간
-        //         y = 0; //
+        //         y = Math.random(); //
         //       series.addPoint([x, y], true, true);
-        //     }, 60000); //1000=1초
+        //     }, 3000); //1000=1초
-        //   }
         //   }
+        // },
         backgroundColor: "rgba(255, 255, 255, 0.0)"
-
       },
       time: {
@@ -513,9 +492,8 @@
           color: "#FFFFFF",
           fontWeight: "bold",
           fontFamily: 'Yeon Sung',
-          fontSize: '25px'
+          fontSize:'25px'
         }
-
       },
       xAxis: {
         type: "datetime",
@@ -525,7 +503,6 @@
             color: "white"
           }
         }
-
       },
       yAxis: {
         title: {
@@ -533,7 +510,6 @@
           style: {
             color: "white"
           }
-
         },
         plotLines: [
           {
@@ -551,7 +527,7 @@
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
-        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
+        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 강수량 : {point.y:.2f}mm"
       },
       legend: {
         //enabled: false
@@ -602,6 +578,7 @@
                 rainArr.push({
                   x: time + i * 60000,
                   y: temp
+              
                 })
                 i++;
@@ -613,8 +590,44 @@
           }
         ]
+
+
     });
+    var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
+    socket.emit("connection", client_data);
+    socket.on("weatherInfo_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
+      console.log(info);
+
+        var date = new Date().getTime();
+
+      chart1.series[0].addPoint({
+        x: date,
+        y: info.death
+      });
+console.log(chart1.series[0])
+      chart2.series[0].addPoint({
+        x: date,
+        y: info.temperature*1
+      });
+
+console.log(chart2.series[0])
+      chart3.series[0].addPoint({
+        x: date,
+        y: info.wind*1
+      });
+
+console.log(chart3.series[0])
+      chart4.series[0].addPoint({
+        x: date,
+        y: info.rain*1
+      });
+console.log(chart4.series[0])
+
+    });
+
   </script>
+  </div>
+
 </body>
-</html>
\ No newline at end of file
+</html> -->
\ No newline at end of file
--- a/views/main.ejs
View file @036e2a6
+++ b/views/main.ejs
View file @036e2a6
@@ -6,9 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Page Title</title>
-<!-- font -->
+    <!-- font -->
-<link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
@@ -24,10 +24,19 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
     <style type="text/css">
+        html,
+            {
+            margin: 0;
+            padding: 0;
+        }
+
         body {
-            background-image: url('images/background.jpg');
+            margin: 0;
+            padding: 0;
+
+            /* background-image: url('background.jpg');
             background-repeat: no-repeat;
-            background-size: cover;
+            background-size: cover; */
             /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
         }
@@ -41,6 +50,13 @@
             font-size: 20px;
             font-family: 'Yeon Sung', cursive;
         }
+
+        #banner {
+            position: absolute;
+            top: 0;
+            width: 100%;
+        }
+
         #footer {
             position: absolute;
             bottom: 0;
@@ -48,14 +64,16 @@
             height: 50px;
             text-align: center;
             font-family: 'Yeon Sung', cursive;
-            color:white;
+            color: white;
         }
     </style>
 </head>
 <body>
-    <div style="width:100%; text-align: center; margin-top:170px;">
+    <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
+    <div id="banner">
+        <div style="width:100%; text-align: center; padding-top:170px;">
             <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
         </div>
         <br><br><br>
@@ -64,7 +82,7 @@
                 <div class="form-inline">
                     <label>이름</label>
                     <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
-                &nbsp&nbsp&nbsp&nbsp
+                    &nbsp &nbsp&nbsp&nbsp
                     <label>생년월일</label>
                     <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
                     <br><br><br>
@@ -73,6 +91,8 @@
             </form>
         </div>
+    </div>
+
     <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
 </body>
--- a/views/re.ejs 0 → 100644
View file @036e2a6
+++ b/views/re.ejs 0 → 100644
View file @036e2a6