Skip to content

H
hitachi-weather
Commit 1d893e80 by Kornkitt Poolsup
Options

forecast fixed

parent 55704d36
Showing with 34 additions and 18 deletions
css/main.css
...@@ -2,6 +2,12 @@ ...@@ -2,6 +2,12 @@
box-sizing: border-box; box-sizing: border-box;
} }
head {
max-width: 100%;
display: flex;
flex-direction: column;
}
body { body {
font-size: 14px; font-size: 14px;
font-family: 'Poppins'; font-family: 'Poppins';
......
index.html
...@@ -15,11 +15,14 @@ ...@@ -15,11 +15,14 @@
<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>
<div class="container-fluid" id="showtime" onload="startTime()" style="color: #6A6F7D;"></div> <div class="container-fluid">
<p id="showtime" onload="startTime()" style="color: #6A6F7D;">-</p>
</div>
<hr> <hr>
<div class="container"> <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">
<button class="active-headertab" id="home-menu-tab" type="button" onclick="navigate('home')" style="display: inline-block;" disabled> <button class="active-headertab" id="home-menu-tab" type="button" onclick="navigate('home')" style="display: inline-block;" disabled>
...@@ -47,14 +50,17 @@ ...@@ -47,14 +50,17 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</nav> </nav>
</head> </head>
<body> <body>
<div class="container-fluid">
<!-- Homepage --> <!-- Homepage -->
<div class="container mt-3" id="homepage"> <div class="container mt-3" id="homepage">
<div class="row" 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;">
<div class="card-body"> <div class="card-body">
...@@ -107,7 +113,7 @@ ...@@ -107,7 +113,7 @@
<!-- Camera page --> <!-- Camera page -->
<div class="container mt-3" id="camerapage" style="display: none;"> <div class="container mt-3" id="camerapage" style="display: none;">
<div class="row" style="width: 100%;"> <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="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam01" class="card-img-top" width="100%"> <img id="cam01" class="card-img-top" width="100%">
<div class="card-body" style="display:inline-block;"> <div class="card-body" style="display:inline-block;">
...@@ -155,9 +161,9 @@ ...@@ -155,9 +161,9 @@
<!-- Forecast page --> <!-- Forecast page -->
<div class="container mt-3" id="forecastpage" style="display: none;"> <div class="container mt-3" id="forecastpage" style="display: none;">
<div class="row" style="width: 100%;"> <div class="row row-flex" style="width: 100%;">
<i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i> <i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i>
<br><p id="forecasttime" style="color: #6A6F7D;"> </p> <br><p id="forecasttime" style="color: #6A6F7D;">-</p>
<div id="forcastplain" style="text-align: center; display: inline-block;"> <div id="forcastplain" style="text-align: center; display: inline-block;">
<img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem"> <img id="forecast-pic" class="mt-5" style="align-items: center;" width="200rem">
...@@ -192,7 +198,7 @@ ...@@ -192,7 +198,7 @@
</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
...@@ -159,10 +159,10 @@ function getForecast() { ...@@ -159,10 +159,10 @@ function getForecast() {
var now = Date.now(); var now = Date.now();
var temperature, precip, humid, ws, pic, description; var temperature, precip, humid, ws, pic, description;
for (let d in obj.data.list) { for (let d in obj.data.list) {
console.log(now, obj.data.list[d].dt * 1000); console.log(obj.data.list[d].dt * 1000, now);
if (obj.data.list[d].dt * 1000 > now) { if (obj.data.list[d].dt * 1000 > now) {
temperature = obj.data.list[d].main["temp"] - 273.15; temperature = obj.data.list[d].main["temp"] - 273.15;
precip = obj.data.list[d].rain["3h"]; precip = obj.data.list[d].clouds["all"];
humid = obj.data.list[d].main["humidity"] humid = obj.data.list[d].main["humidity"]
ws = obj.data.list[d].wind["speed"]; ws = obj.data.list[d].wind["speed"];
...@@ -179,7 +179,7 @@ function getForecast() { ...@@ -179,7 +179,7 @@ function getForecast() {
$("#forecast-description").text(capitalize(description)); $("#forecast-description").text(capitalize(description));
$("#forecast-temperature").text(Math.round(temperature).toString()); $("#forecast-temperature").text(Math.round(temperature).toString());
$("#forecast-precip").text(precip.toString() + " mm"); $("#forecast-precip").text(precip.toString() + " %");
$("#forecast-humid").text(humid.toString() + " %"); $("#forecast-humid").text(humid.toString() + " %");
$("#forecast-ws").text(ws.toString() + " km/h"); $("#forecast-ws").text(ws.toString() + " km/h");
} }
...@@ -193,16 +193,13 @@ function showtime() { ...@@ -193,16 +193,13 @@ function showtime() {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
document.getElementById("forecasttime").innerHTML = day[now.getDay()] + " " + now.getDate() + ", " + month[now.getMonth()]; var date_show = day[now.getDay()] + " " + now.getDate().toString() + ", " + month[now.getMonth()];
document.getElementById("showtime").innerHTML = day[now.getDay()] + " " + now.getDate() + ", " + month[now.getMonth()]; console.log(date_show);
} document.getElementById("forecasttime").innerHTML = date_show;
document.getElementById("showtime").innerHTML = date_show;
// Update the count down every 1 second }
setInterval(showtime, 1000);
setInterval(getData, 5000);
setInterval(getCamera, 5000);
setInterval(getForecast, 3600000);
function init() { function init() {
getData(); getData();
...@@ -212,3 +209,10 @@ function init() { ...@@ -212,3 +209,10 @@ function init() {
} }
init(); init();
// Update the count down every 1 second
setInterval(showtime, 1000);
setInterval(getData, 5000);
setInterval(getCamera, 5000);
setInterval(getForecast, 3600000);
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