Skip to content

H
hitachi-weather
Commit 88530b45 by Kornkitt Poolsup
Options

change title from HitaChi to One City Center Building

parent d2c8b53f
Showing with 88 additions and 81 deletions
index.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>HitaChi</title> <title>One City Center Building</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet" />
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<link href="./css/main.css" rel="stylesheet" /> <link href="./css/main.css" rel="stylesheet" />
<script src="index.js"></script> <script src="index.js"></script>
<nav class="navbar shadow-sm p-3 bg-body rounded" style="background-color: #FFFFFF;" > <nav class="navbar shadow-sm p-3 bg-body rounded" style="background-color: #FFFFFF; width: 100%;" >
<div class="container-fluid"> <div class="container-fluid">
<span class="navbar-brand mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span> <span class="navbar-brand mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span>
</div> </div>
...@@ -20,8 +20,7 @@ ...@@ -20,8 +20,7 @@
</div> </div>
<hr> <hr>
<div class="container-fluid">
<div class="container-fluid"> <div class="container-fluid">
<div class="row" style="width: 100%;"> <div class="row" style="width: 100%;">
<div class="col-4"> <div class="col-4">
...@@ -50,29 +49,28 @@ ...@@ -50,29 +49,28 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</nav> </nav>
</head> </head>
<body> <body>
<div class="container-fluid"> <!-- <div class="container-fluid"> -->
<!-- Homepage --> <!-- Homepage -->
<div class="container-fluid mt-3" id="homepage"> <div class="container-fluid mt-3" id="homepage" style="display: inline-block;">
<div class="row row-flex" style="width: 100%; color: #36455A;"> <div class="row row-flex" style="width: 100%; color: #36455A;">
<div class="col-6"> <div class="col-6">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center;"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px; display: flex; justify-content: center; height: 100%;">
<div class="card-body"> <div class="card-body">
<i class="bi bi-wind"></i> <i class="bi bi-wind"></i>
<p class="card-title" style="font-size: medium;"><b>Air Quality</b></p> <p class="card-title" style="font-size: medium;"><b>Air Quality</b></p>
<p class="card-subtitle mb-2 text-muted" style="font-size: x-small;">PM2.5 (μg./m<sup>3</sup>)</p> <p class="card-subtitle mb-2 text-muted" style="font-size: x-small;">PM2.5 (μg./m<sup>3</sup>)</p>
<div style="text-align: center;"> <div style="text-align: center;">
<img id="home-pm25-pic" src="icon/pm1.png" width="48"> <img id="home-pm25-pic" src="icon/pm1.png" width="48">
<b><p id="home-pm25" style="font-size: 3rem; color: #36455A;">-</p></b> <b><p id="home-pm25" style="font-size: 3rem; color: #36455A; position: relative;">-</p></b>
<p>US AQI</p> <p>US AQI</p>
<span id="pm25state" class="badge rounded-pill text-light" style="background-color: #A1A8B9;">Moderate</span> <span id="pm25state" class="badge rounded-pill text-light" style="background-color: #A1A8B9;">Moderate</span>
<p id="pm25describe" class="text-on-card mt-2" style="font-size: 10px;">Take a walk or play outside, the air is great today.</p> <p id="pm25describe" class="text-on-card mt-2" style="font-size: 10px; margin-top: auto;">Take a walk or play outside, the air is great today.</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -113,92 +111,98 @@ ...@@ -113,92 +111,98 @@
<!-- Camera page --> <!-- Camera page -->
<div class="container-fluid mt-3" id="camerapage" style="display: none;"> <div class="container-fluid mt-3" id="camerapage" style="display: none;">
<div class="row row-flex" style="width: 100%;" onload="getCamera()"> <div class="row row-flex" style="width: 100%;">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <div class="col">
<img id="cam01" class="card-img-top" width="100%"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="card-body" style="display: flex; justify-content: space-between;"> <img id="cam01" class="card-img-top" width="100%">
<b><p style="font-size: large; color: #A1A8B9;">Camera 01</p></b> <div class="card-body" style="display: flex; justify-content: space-between;">
<p id="camera01-time"></p> <b><p style="font-size: large;">Camera 01</p></b>
<p id="camera01-time" style=" color: #A1A8B9;"></p>
</div>
</div> </div>
</div> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <img id="cam02" class="card-img-top" width="100%">
<img id="cam02" class="card-img-top" width="100%"> <div class="card-body" style="display: flex; justify-content: space-between;">
<div class="card-body" style="display: flex; justify-content: space-between;"> <b><p style="font-size: large;">Camera 02</p></b>
<b><p style="font-size: large; color: #A1A8B9;">Camera 02</p></b> <p id="camera02-time" style=" color: #A1A8B9;"></p>
<p id="camera02-time"></p> </div>
</div> </div>
</div> <div class="card shadow-sm p-3 mb-1 bg-body rounded" style="border-width: 0px;">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <img id="cam03" class="card-img-top" width="100%">
<img id="cam03" class="card-img-top" width="100%"> <div class="card-body" style="display: flex; justify-content: space-between;">
<div class="card-body" style="display: flex; justify-content: space-between;"> <b><p style="font-size: large;">Camera 03</p></b>
<b><p style="font-size: large; color: #A1A8B9;">Camera 03</p></b> <p id="camera03-time" style=" color: #A1A8B9;"></p>
<p id="camera03-time"></p> </div>
</div> </div>
</div> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <img id="cam04" class="card-img-top" width="100%">
<img id="cam04" class="card-img-top" width="100%"> <div class="card-body" style="display: flex; justify-content: space-between;">
<div class="card-body" style="display: flex; justify-content: space-between;"> <b><p style="font-size: large;">Camera 04</p></b>
<b><p style="font-size: large; color: #A1A8B9;">Camera 04</p></b> <p id="camera04-time" style=" color: #A1A8B9;"></p>
<p id="camera04-time"></p> </div>
</div> </div>
</div> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <img id="cam05" class="card-img-top" width="100%">
<img id="cam05" class="card-img-top" width="100%"> <div class="card-body" style="display: flex; justify-content: space-between;">
<div class="card-body" style="display: flex; justify-content: space-between;"> <b><p style="font-size: large;">Camera 05</p></b>
<b><p style="font-size: large; color: #A1A8B9;">Camera 05</p></b> <p id="camera05-time" style=" color: #A1A8B9;"></p>
<p id="camera05-time"></p> </div>
</div> </div>
</div> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> <img id="cam06" onloadstart="getCamera()" class="card-img-top" width="100%">
<img id="cam06" class="card-img-top" width="100%"> <div class="card-body" style="display: flex; justify-content: space-between;">
<div class="card-body" style="display: flex; justify-content: space-between;"> <b><p style="font-size: large;">Camera 06</p></b>
<b><p style="font-size: large; color: #A1A8B9;">Camera 06</p></b> <p id="camera06-time" style=" color: #A1A8B9;"></p>
<p id="camera06-time"></p> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Forecast page --> <!-- Forecast page -->
<div class="container-fluid mt-3" id="forecastpage" style="display: none;"> <div class="container-fluid mt-3" id="forecastpage" style="display: none;">
<div class="row row-flex" style="width: 100%;"> <div class="row row-flex" style="width: 100%;">
<i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i> <div class="col" style="width: 100%;">
<br><p id="forecasttime" style="color: #6A6F7D;">-</p> <i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i>
<div id="forcastplain" style="text-align: center; display: inline-block;"> <br><p id="forecasttime" style="color: #6A6F7D;">-</p>
<img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem"> <div id="forcastplain" style="text-align: center; display: inline-block; width: 100%;">
<img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem">
<br>
<b><p id="forecast-temperature" style="font-size: 5rem; display: inline; color: #36455A; text-align: center;">-</p></b> °C <br>
<p id="forecast-description" style="display: block;"></p> <b><p id="forecast-temperature" style="font-size: 5rem; display: inline; color: #36455A; text-align: center;">-</p></b> °C
</div> <p id="forecast-description" style="display: block;"></p>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;"> </div>
<div class="card-body"> <div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="container"> <div class="card-body">
<div class="row"> <div class="container-fluid">
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;"> <div class="row">
<img src="./images/rain.png" width="24"> <div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<br> <b><p id="forecast-precip" style="color: #36455A; font-size: large;">-</p></b> <img src="./images/rain.png" width="24">
<p>Precipitation</p> <br> <b><p id="forecast-precip" style="color: #36455A; font-size: large;">-</p></b>
</div> <p>Precipitation</p>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;"> </div>
<img src="./images/droplet.png" width="24"> <div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<br> <b><p id="forecast-humid" style="color: #36455A; font-size: large;">-</p></b> <img src="./images/droplet.png" width="24">
<p>Humidity</p> <br> <b><p id="forecast-humid" style="color: #36455A; font-size: large;">-</p></b>
</div> <p>Humidity</p>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;"> </div>
<img src="./images/cloud-wind.png" width="24"> <div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<br> <b><p id="forecast-ws" style="color: #36455A; font-size: large;">-</p></b> <img src="./images/cloud-wind.png" width="24">
<p>Wind Speed</p> <br> <b><p id="forecast-ws" style="color: #36455A; font-size: large;">-</p></b>
<p>Wind Speed</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- </div> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body> </body>
......
index.js
...@@ -86,11 +86,11 @@ function getData() { ...@@ -86,11 +86,11 @@ function getData() {
}).done(function( data ) { }).done(function( data ) {
var obj = jQuery.parseJSON(data); var obj = jQuery.parseJSON(data);
if (obj.success == 1){ if (obj.success == 1){
$("#home-temperature").text(JSON.stringify(obj.data.temperature)); $("#home-temperature").text(JSON.stringify(Math.round(obj.data.temperature)));
$("#home-humidity").text(JSON.stringify(obj.data.humidity)); $("#home-humidity").text(JSON.stringify(Math.round(obj.data.humidity)));
$("#home-pm10").text(JSON.stringify(obj.data.pm10dot0)); $("#home-pm10").text(JSON.stringify(Math.round(obj.data.pm10dot0)));
$("#home-pm25").text(JSON.stringify(obj.data.pm2dot5)); $("#home-pm25").text(JSON.stringify(Math.round(obj.data.pm2dot5)));
var pm25state_color = ["#80C355", "#F5EC43", "#F9941B", "#E92026", "#B1498E", "#994544"]; var pm25state_color = ["#80C355", "#F5EC43", "#F9941B", "#E92026", "#B1498E", "#994544"];
var pm25state_name = ["Good", "Moderate", "Unhealthy for Sensitive Groups", "Unhealthy", "Very Unhealthy", "Hazardous"]; var pm25state_name = ["Good", "Moderate", "Unhealthy for Sensitive Groups", "Unhealthy", "Very Unhealthy", "Hazardous"];
...@@ -132,6 +132,7 @@ function getCamera() { ...@@ -132,6 +132,7 @@ function getCamera() {
$("#cam06").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam6.png?time='+new Date().getTime()); $("#cam06").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam6.png?time='+new Date().getTime());
var date_show = new Date().toLocaleString(); var date_show = new Date().toLocaleString();
console.log(date_show);
$("#camera01-time").text(date_show); $("#camera01-time").text(date_show);
$("#camera02-time").text(date_show); $("#camera02-time").text(date_show);
...@@ -211,10 +212,12 @@ function showtime() { ...@@ -211,10 +212,12 @@ function showtime() {
} }
function init() { function init() {
getData();
getCamera(); getCamera();
getData();
getForecast(); getForecast();
showtime(); showtime();
console.log("init")
} }
init(); init();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment