Merge branch 'design' to 'master'

김주희
Commit 1f19f155f8f9d5ccee6c46c394798c15a6efe5ed 1f19f155 2 parents ab7ed828 2a60f128
Showing 2 changed files with 231 additions and 167 deletions
views/index.ejs
views/main.ejs
--- a/views/index.ejs
View file @1f19f15
+++ b/views/index.ejs
View file @1f19f15
@@ -3,12 +3,10 @@
 <head>
   <!-- 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=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
-
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Highcharts Example</title>
-
   <style type="text/css">
   html {
   margin: 0;
@@ -17,10 +15,9 @@
     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; */
     }
@@ -29,20 +26,15 @@
       top: 0;
       width: 100%;
     }
-
   </style>
 </head>
-
 <body>
   <script src="highcharts.js"></script>
   <script src="modules/exporting.js"></script>
   <script src="modules/export-data.js"></script>
-
   <img src="images/newbackground.png" 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;">
       <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
@@ -50,12 +42,13 @@
     <div style="display: inline-block;">
       <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
     </div>
-
     <div style="display: inline-block;">
       <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
     </div>
+	<div style="display: inline-block;">
+      <div id="container5" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
+    </div>
   </div>
-
   <script src="/socket.io/socket.io.js"></script>
   <script type="text/javascript">
       let client_data = {
@@ -63,7 +56,6 @@
       name: "<%=name%>"
     }
-
     var chart1 = Highcharts.chart("container1", {
       chart: {
         type: "spline",
@@ -75,25 +67,22 @@
         //     var series = this.series[0];
         //     setInterval(function () {
         //       var x = new Date().getTime(), // 현재 시간
-        //         y = Math.random(); //여기에 새로 넣을 값
+        //         y = Math.random(); //여기에 새로 넣을 값(실시간 사망률)
         //       series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
         //     }, 1000); //1000=1초 -> 1분=60000
         //   }
         // },
-
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "<%=name%>님의 실시간 사망 확률",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'32px'
         }
       },
@@ -113,7 +102,6 @@
             color: "white"
           }
         },
-
         plotLines: [
           {
             value: 0,
@@ -126,7 +114,6 @@
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -148,7 +135,6 @@
       exporting: {
         enabled: false
       },
-
 plotOptions: {
         series: {
             marker: {
@@ -156,7 +142,6 @@ plotOptions: {
             }
         }
     },
-
         series: [
           {
             name: "사망률",
@@ -173,11 +158,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% probArr.forEach((probArr) => {%>
                 var temp;
                 temp = <%=probArr %>;
-
                 // for(;j<10;j++)
                 // {
                 //   deathArr.push({
@@ -186,25 +169,18 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 deathArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return deathArr;
             })(),
-
             color: "#FFFFFF"
           }
         ]
-
     });
-
-
     var chart2 = Highcharts.chart("container2", {
       chart: {
         type: "spline",
@@ -221,23 +197,19 @@ plotOptions: {
         //     }, 3000); //1000=1초
         //   }
         // },
-
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "기온",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
-
       },
       xAxis: {
         type: "datetime",
@@ -267,7 +239,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -305,11 +276,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% ptArr.forEach((ptArr) => {%>
                 var temp;
                 temp = <%=ptArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   tempArr.push({
@@ -318,23 +287,18 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 tempArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return tempArr;
             })(),
-
             color: "#FFE08C"
           }
         ]
     });
-
     var chart3 = Highcharts.chart("container3", {
       chart: {
         type: "spline",
@@ -353,17 +317,15 @@ plotOptions: {
         // },
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "풍속",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
       },
@@ -395,7 +357,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -433,11 +394,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% wsArr.forEach((wsArr) => {%>
                 var temp;
                 temp = <%=wsArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   windArr.push({
@@ -446,22 +405,17 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 windArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return windArr;
             })(),
-
             color: "#FFE08C"
           }
         ]    });
-
     var chart4 = Highcharts.chart("container4", {
       chart: {
         type: "spline",
@@ -480,17 +434,15 @@ plotOptions: {
         // },
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "강수량",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
       },
@@ -522,7 +474,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -560,11 +511,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% rainArr.forEach((rainArr) => {%>
                 var temp;
                 temp = <%=rainArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   rainArr.push({
@@ -573,32 +522,141 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 rainArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return rainArr;
             })(),
             color: "#FFE08C"
-
           }
         ]
-
-
     });
+	var chart5 = Highcharts.chart("container5", {
+      chart: {
+        type: "spline",
+        animation: Highcharts.svg, // don't animate in old IE
+        marginRight: 10,
+        // events: {
+        //   load: function () {
+        //     // set up the updating of the chart each second
+        //     var series = this.series[0];
+        //     setInterval(function () {
+        //       var x = new Date().getTime(), // 현재 시간
+        //         y = Math.random(); //
+        //       series.addPoint([x, y], true, true);
+        //     }, 3000); //1000=1초
+        //   }
+        // },
+        backgroundColor: "rgba(255, 255, 255, 0.0)"
+      },
+      time: {
+        useUTC: false
+      },
+      title: {
+        text: "교통사고",
+        style: {
+          color: "#FFFFFF",
+          //fontWeight: "bold",
+          fontFamily: 'Do Hyeon',
+          fontSize:'25px'
+        }
+      },
+      xAxis: {
+        type: "datetime",
+        tickPixelInterval: 150,
+        labels: {
+          style: {
+            color: "white"
+          }
+        }
+      },
+      yAxis: {
+        title: {
+          text: "교통사고발생횟수(번)",
+          style: {
+            color: "white"
+          }
+        },
+        plotLines: [
+          {
+            value: 0,
+            width: 1,
+            color: "#808080"
+          }
+        ],
+        labels: {
+            style: {
+              color: "white"
+            }
+          }
+      },
+      tooltip: {
+        headerFormat: "<b>{series.name}</b><br/>",
+        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 교통사고 발생 수 : {point.y:.2f}m/s"
+      },
+      legend: {
+        //enabled: false
+        layout: "vertical",
+        align: "left",
+        verticalAlign: "top",
+        x: 100,
+        y: 50,
+        floating: true,
+        borderWidth: 1,
+        backgroundColor:
+          (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
+          "#FFFFFF"
+      },
+      exporting: {
+        enabled: false
+      },
+      series: [
+          {
+            name: "교통사고 발생수",
+            data: (function () {
+              var trafficArr = [], //windArr
+                time = new Date().getTime();
+              var length = <%=dataLen%>;
+              var i = -9;
+              var j = 0;
+              for (j; j < 10 - length; j++) {
+                trafficArr.push({
+                  x: time + i * 60000,
+                  y: 0
+                })
+                i++;
+              }
+              <% occurArr.forEach((occurArr) => {%>
+                var temp;
+                temp = <%=occurArr %>;
+                // for(j;j<10;j++)
+                // {
+                //   trafficArr.push({
+                //   x: time + i * 60000,
+                //   y: temp
+                // }) 
+                // i++;
+                // }
+                trafficArr.push({
+                  x: time + i * 60000,
+                  y: temp
+                })
+                i++;
+              <%}) %>
+              return trafficArr;
+            })(),
+            color: "#FFE08C"
+          }
+        ]    });
     var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
     socket.emit("connection", client_data);
-    socket.on("weatherInfo_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
+    socket.on("weather_and_traffic_Info_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
       console.log(info);
-
         var date = new Date().getTime();
-
       chart1.series[0].addPoint({
         x: date,
         y: info.death,
@@ -609,24 +667,23 @@ plotOptions: {
         y: info.temperature*1,
         color:"#FFE08C"
       });
-
       chart3.series[0].addPoint({
         x: date,
         y: info.wind*1,
         color:"#FFE08C"
       });
-
       chart4.series[0].addPoint({
         x: date,
         y: info.rain*1,
         color:"#FFE08C"
       });
-
+	  chart5.series[0].addPoint({
+        x: date,
+        y: info.occurence*1,
+        color:"#FFE08C"
+      });
     });
-
   </script>
   </div>
-
 </body>
-
 </html>
\ No newline at end of file
--- a/views/main.ejs
View file @1f19f15
+++ b/views/main.ejs
View file @1f19f15
-<!DOCTYPE <!DOCTYPE html>
+<!DOCTYPE 
+
+<!DOCTYPE html>
 <html>
-<head>
+  <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Page Title</title>
+      <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">
-
+          <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+            <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+              <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
-    <script src="main.js"></script>
+              <script src="main.js"></script>
-
+
-    <!-- 합쳐지고 최소화된 최신 CSS -->
+              <!-- 합쳐지고 최소화된 최신 CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
-
+
-    <!-- 부가적인 테마 -->
+                <!-- 부가적인 테마 -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
-
+
-    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
+                  <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
-
+
-    <style type="text/css">
+                  <style type="text/css">
-      html,
+                    html,
-      {
+                    {
-      margin: 0;
+                    margin: 0;
-      padding: 0;
+                    padding: 0;
-      }
+                    }
-
+
-      body {
+                    body {
-      margin: 0;
+                    margin: 0;
-      padding: 0;
+                    padding: 0;
-
+
-      /* background-image: url('newbackground.png');
+                    /* background-image: url('newbackground.png');
-      background-repeat: no-repeat;
+                    background-repeat: no-repeat;
-      background-size: cover; */
+                    background-size: cover; */
-      /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
+                    /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
-      }
+                    }
-
+
-      h1 {
+                    h1 {
-      color: white;
+                    color: white;
-      font-family: 'Nanum Brush Script', cursive;
+                    font-family: 'Do Hyeon', sans-serif;
-      }
+                    //font-family: 'Nanum Brush Script', cursive;
-
+                    }
-      label {
+
-      color: white;
+                    label {
-      font-size: 20px;
+                    color: white;
-      font-family: 'Yeon Sung', cursive;
+                    font-size: 20px;
-      }
+                    font-family: 'Do Hyeon', sans-serif;
-
+                    }
-      #banner {
+
-      position: absolute;
+                    #banner {
-      top: 0;
+                    position: absolute;
-      width: 100%;
+                    top: 0;
-      }
+                    width: 100%;
-
+                    }
-      #footer {
+
-      position: absolute;
+                    #footer {
-      bottom: 0;
+                    position: absolute;
-      width: 100%;
+                    bottom: 0;
-      height: 50px;
+                    width: 100%;
-      text-align: center;
+                    height: 50px;
-      font-family: 'Yeon Sung', cursive;
+                    text-align: center;
-      color: white;
+                    font-family: 'Do Hyeon', sans-serif;
-      }
+                    color: white;
-    </style>
+                    }
-
+                  </style>
-</head>
+
-
+                </head>
-<body>
+
-    <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
+  <body>
-    <div id="banner">
+    <img src="images/newbackground.png" 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>
+          <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
         </div>
-        <br><br><br>
+        <br>
-        <div style="width:100%; text-align: center;">
+          <br>
-            <form action="/starting" method="post">
+            <br>
-                <div class="form-inline">
+              <div style="width:100%; text-align: center;">
+                <form action="/starting" method="post">
+                  <div class="form-inline">
                     <label>이름</label>
-                    <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
+                    <input type="text" name="name" class="form-control" placeholder="조인화" style="width:200px;">
-                    &nbsp &nbsp&nbsp&nbsp
+                      &nbsp &nbsp&nbsp&nbsp
-                    <label>생년월일</label>
+                      <label>생년월일</label>
-                    <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
+                      <input type="text" name="birth" class="form-control" placeholder="991025" style="width:200px;">
-                    <br><br><br>
+                        <br>
-                    <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;">
+                          <br>
+                            <br>
+                              <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Do Hyeon', sans-serif; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
                 </div>
-            </form>
+                </form>
-        </div>
+              </div>
-    </div>
+            </div>
-    <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
+      <div id="footer">오픈소스SW개발 김주희 김윤지 조인화</div>
-</body>
+    </body>
 </html>
\ No newline at end of file