Skip to content

H
hitachi-weather
Commit 1d893e80 by Kornkitt Poolsup
Options

forecast fixed

parent 55704d36
Showing with 60 additions and 45 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
...@@ -13,48 +13,54 @@ ...@@ -13,48 +13,54 @@
<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;" >
<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 class="container-fluid">
<p id="showtime" onload="startTime()" style="color: #6A6F7D;">-</p>
</div> </div>
<div class="container-fluid" id="showtime" onload="startTime()" style="color: #6A6F7D;"></div>
<hr> <hr>
<div class="container"> <div class="container-fluid">
<div class="row" style="width: 100%;"> <div class="container-fluid">
<div class="col-4"> <div class="row" style="width: 100%;">
<button class="active-headertab" id="home-menu-tab" type="button" onclick="navigate('home')" style="display: inline-block;" disabled> <div class="col-4">
<!-- <svg id="home-icon" data-name="Home Icon" width=24 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M91.06,49.88,48,10,4.94,49.88,9,54.28l3-2.78V86H42V56.88H54V86H84V51.5l3,2.78ZM78,80.08H60V50.93H36V80.08H18V46L48,18.16,78,46Z"/></svg> --> <button class="active-headertab" id="home-menu-tab" type="button" onclick="navigate('home')" style="display: inline-block;" disabled>
<img id="home-icon" src="images/home-active.png" width="24" > <!-- <svg id="home-icon" data-name="Home Icon" width=24 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M91.06,49.88,48,10,4.94,49.88,9,54.28l3-2.78V86H42V56.88H54V86H84V51.5l3,2.78ZM78,80.08H60V50.93H36V80.08H18V46L48,18.16,78,46Z"/></svg> -->
<span style="display: block;">Home</span> <img id="home-icon" src="images/home-active.png" width="24" >
</button> <span style="display: block;">Home</span>
<div id="home-tab-line" class="tab-line" style="visibility: visible;"></div> </button>
</div> <div id="home-tab-line" class="tab-line" style="visibility: visible;"></div>
<div class="col-4"> </div>
<button class="inactive-headertab" id="camera-menu-tab" type="button" onclick="navigate('camera')" style="display: inline-block;"> <div class="col-4">
<!-- <svg id="camera-icon" data-name="Camera Icon" width=24 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M82,14.75H14A5,5,0,0,0,9,19.7V34.47a5,5,0,0,0,5,5h.72v8.83a33,33,0,0,0,33,33h.62a33,33,0,0,0,33-33V39.42H82a5,5,0,0,0,5-5V19.7A5,5,0,0,0,82,14.75Zm-1,5.9V32.78H14.92V20.65ZM47.69,75.25a26.88,26.88,0,0,1-9.44-1.7V61.05a9.52,9.52,0,0,1,9.5-9.5h.5a9.52,9.52,0,0,1,9.5,9.5v12.5a26.88,26.88,0,0,1-9.44,1.7Zm27.62-27A27,27,0,0,1,63.75,70.39V61.05a15.52,15.52,0,0,0-15.5-15.5h-.5a15.52,15.52,0,0,0-15.5,15.5v9.34A27,27,0,0,1,20.69,48.25V39.42H75.31Z"/><circle cx="47.96" cy="60.02" r="3"/></svg> --> <button class="inactive-headertab" id="camera-menu-tab" type="button" onclick="navigate('camera')" style="display: inline-block;">
<img id="camera-icon" src="images/camera.png" width="24" > <!-- <svg id="camera-icon" data-name="Camera Icon" width=24 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><path d="M82,14.75H14A5,5,0,0,0,9,19.7V34.47a5,5,0,0,0,5,5h.72v8.83a33,33,0,0,0,33,33h.62a33,33,0,0,0,33-33V39.42H82a5,5,0,0,0,5-5V19.7A5,5,0,0,0,82,14.75Zm-1,5.9V32.78H14.92V20.65ZM47.69,75.25a26.88,26.88,0,0,1-9.44-1.7V61.05a9.52,9.52,0,0,1,9.5-9.5h.5a9.52,9.52,0,0,1,9.5,9.5v12.5a26.88,26.88,0,0,1-9.44,1.7Zm27.62-27A27,27,0,0,1,63.75,70.39V61.05a15.52,15.52,0,0,0-15.5-15.5h-.5a15.52,15.52,0,0,0-15.5,15.5v9.34A27,27,0,0,1,20.69,48.25V39.42H75.31Z"/><circle cx="47.96" cy="60.02" r="3"/></svg> -->
<span style="display: block;">Camera</span> <img id="camera-icon" src="images/camera.png" width="24" >
</button> <span style="display: block;">Camera</span>
<div id="camera-tab-line" class="tab-line" style="visibility: hidden;"></div> </button>
</div> <div id="camera-tab-line" class="tab-line" style="visibility: hidden;"></div>
<div class="col-4"> </div>
<button class="inactive-headertab" id="forecast-menu-tab" type="button" onclick="navigate('forecast')" style="display: inline-block;"> <div class="col-4">
<!-- <svg id="forecast-icon" data-name="Forecast Icon" width=24 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><defs><style>.cls-1{fill:none;}</style></defs><polyline points="58.42 54.02 48.92 71.5 58.93 71.5 48.65 90.26 39.87 90.26 46.84 77.5 33.95 77.5 46.75 53.95"/><path class="cls-1" d="M27.53,36.87a16.53,16.53,0,0,1,4.2-1.32,17.17,17.17,0,0,1,9.55-14.89,14.5,14.5,0,0,0-14.07-1.08h0a14.45,14.45,0,0,0-5.38,21.91A17.25,17.25,0,0,1,27.53,36.87Z"/><path d="M89.08,46.72A17.09,17.09,0,0,0,72.72,24.65a17.25,17.25,0,0,0-4,.47,17.12,17.12,0,0,0-9.25-10.39L57,20.19a11.16,11.16,0,0,1,6.5,9.18l.37,4.36L67.8,31.8l.25-.13A11.13,11.13,0,0,1,83.83,41.76a10.91,10.91,0,0,1-1.14,4.86l-1.28,2.62L84,50.59a11.11,11.11,0,0,1-5.11,21H65.16v6H78.89A17.1,17.1,0,0,0,89.08,46.72Z"/><path d="M17.11,71.56a11.12,11.12,0,0,1-4.67-21.2L9.92,44.92a17.11,17.11,0,0,0,7.19,32.64h12v-6Z"/><path d="M20.27,48.45,23,50.69l1.78-3c.64-1.11,2.84-4.22,5.27-5.34a11.08,11.08,0,0,1,4.61-1l3.79.06-.57-3.53A10.87,10.87,0,0,1,37.72,36a11.1,11.1,0,0,1,9.72-11l5.22-.65-3-3.84,9-9.06L54.49,7.2l-9.06,9.06a20.24,20.24,0,0,0-9.16-3.78V0h-6V12.48a20.09,20.09,0,0,0-5.59,1.66h0A20.27,20.27,0,0,0,21,16.38L11.78,7.2,7.54,11.44l9.23,9.23A20.48,20.48,0,0,0,13,30H.58v6H13.11A20.38,20.38,0,0,0,20.27,48.45Zm6.94-28.87h0a14.5,14.5,0,0,1,14.07,1.08,17.17,17.17,0,0,0-9.55,14.89,16.53,16.53,0,0,0-4.2,1.32,17.25,17.25,0,0,0-5.7,4.62,14.45,14.45,0,0,1,5.38-21.91Z"/></svg> --> <button class="inactive-headertab" id="forecast-menu-tab" type="button" onclick="navigate('forecast')" style="display: inline-block;">
<img id="forecast-icon" src="images/forecast.png" width="24" > <!-- <svg id="forecast-icon" data-name="Forecast Icon" width=24 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><defs><style>.cls-1{fill:none;}</style></defs><polyline points="58.42 54.02 48.92 71.5 58.93 71.5 48.65 90.26 39.87 90.26 46.84 77.5 33.95 77.5 46.75 53.95"/><path class="cls-1" d="M27.53,36.87a16.53,16.53,0,0,1,4.2-1.32,17.17,17.17,0,0,1,9.55-14.89,14.5,14.5,0,0,0-14.07-1.08h0a14.45,14.45,0,0,0-5.38,21.91A17.25,17.25,0,0,1,27.53,36.87Z"/><path d="M89.08,46.72A17.09,17.09,0,0,0,72.72,24.65a17.25,17.25,0,0,0-4,.47,17.12,17.12,0,0,0-9.25-10.39L57,20.19a11.16,11.16,0,0,1,6.5,9.18l.37,4.36L67.8,31.8l.25-.13A11.13,11.13,0,0,1,83.83,41.76a10.91,10.91,0,0,1-1.14,4.86l-1.28,2.62L84,50.59a11.11,11.11,0,0,1-5.11,21H65.16v6H78.89A17.1,17.1,0,0,0,89.08,46.72Z"/><path d="M17.11,71.56a11.12,11.12,0,0,1-4.67-21.2L9.92,44.92a17.11,17.11,0,0,0,7.19,32.64h12v-6Z"/><path d="M20.27,48.45,23,50.69l1.78-3c.64-1.11,2.84-4.22,5.27-5.34a11.08,11.08,0,0,1,4.61-1l3.79.06-.57-3.53A10.87,10.87,0,0,1,37.72,36a11.1,11.1,0,0,1,9.72-11l5.22-.65-3-3.84,9-9.06L54.49,7.2l-9.06,9.06a20.24,20.24,0,0,0-9.16-3.78V0h-6V12.48a20.09,20.09,0,0,0-5.59,1.66h0A20.27,20.27,0,0,0,21,16.38L11.78,7.2,7.54,11.44l9.23,9.23A20.48,20.48,0,0,0,13,30H.58v6H13.11A20.38,20.38,0,0,0,20.27,48.45Zm6.94-28.87h0a14.5,14.5,0,0,1,14.07,1.08,17.17,17.17,0,0,0-9.55,14.89,16.53,16.53,0,0,0-4.2,1.32,17.25,17.25,0,0,0-5.7,4.62,14.45,14.45,0,0,1,5.38-21.91Z"/></svg> -->
<span style="display: block;">Forecast</span> <img id="forecast-icon" src="images/forecast.png" width="24" >
</button> <span style="display: block;">Forecast</span>
<div id="forecast-tab-line" class="tab-line" style="visibility: hidden;"></div> </button>
<div id="forecast-tab-line" class="tab-line" style="visibility: hidden;"></div>
</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();
...@@ -211,4 +208,11 @@ function init() { ...@@ -211,4 +208,11 @@ function init() {
showtime(); showtime();
} }
init(); init();
\ No newline at end of file
// 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