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 @@
<head>
<meta charset="utf-8">
<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>
<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" />
......@@ -11,7 +11,7 @@
<link href="./css/main.css" rel="stylesheet" />
<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">
<span class="navbar-brand mb-0 h1" style="color: #36455A;"><b>Good Morning</b></span>
</div>
......@@ -20,8 +20,7 @@
</div>
<hr>
<div class="container-fluid">
<div class="container-fluid">
<div class="row" style="width: 100%;">
<div class="col-4">
......@@ -50,29 +49,28 @@
</div>
</div>
</div>
</div>
</nav>
</head>
<body>
<div class="container-fluid">
<!-- <div class="container-fluid"> -->
<!-- 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="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">
<i class="bi bi-wind"></i>
<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>
<div style="text-align: center;">
<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>
<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>
......@@ -113,92 +111,98 @@
<!-- Camera page -->
<div class="container-fluid mt-3" id="camerapage" style="display: none;">
<div class="row row-flex" style="width: 100%;" onload="getCamera()">
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large; color: #A1A8B9;">Camera 01</p></b>
<p id="camera01-time"></p>
<div class="row row-flex" style="width: 100%;">
<div class="col">
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 01</p></b>
<p id="camera01-time" style=" color: #A1A8B9;"></p>
</div>
</div>
</div>
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large; color: #A1A8B9;">Camera 02</p></b>
<p id="camera02-time"></p>
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 02</p></b>
<p id="camera02-time" style=" color: #A1A8B9;"></p>
</div>
</div>
</div>
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large; color: #A1A8B9;">Camera 03</p></b>
<p id="camera03-time"></p>
<div class="card shadow-sm p-3 mb-1 bg-body rounded" style="border-width: 0px;">
<img id="cam03" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 03</p></b>
<p id="camera03-time" style=" color: #A1A8B9;"></p>
</div>
</div>
</div>
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large; color: #A1A8B9;">Camera 04</p></b>
<p id="camera04-time"></p>
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 04</p></b>
<p id="camera04-time" style=" color: #A1A8B9;"></p>
</div>
</div>
</div>
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large; color: #A1A8B9;">Camera 05</p></b>
<p id="camera05-time"></p>
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 05</p></b>
<p id="camera05-time" style=" color: #A1A8B9;"></p>
</div>
</div>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<img id="cam06" class="card-img-top" width="100%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large; color: #A1A8B9;">Camera 06</p></b>
<p id="camera06-time"></p>
<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%">
<div class="card-body" style="display: flex; justify-content: space-between;">
<b><p style="font-size: large;">Camera 06</p></b>
<p id="camera06-time" style=" color: #A1A8B9;"></p>
</div>
</div>
</div>
</div>
</div>
<!-- Forecast page -->
<div class="container-fluid mt-3" id="forecastpage" style="display: none;">
<div class="row row-flex" style="width: 100%;">
<i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i>
<br><p id="forecasttime" style="color: #6A6F7D;">-</p>
<div id="forcastplain" style="text-align: center; display: inline-block;">
<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
<p id="forecast-description" style="display: block;"></p>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/rain.png" width="24">
<br> <b><p id="forecast-precip" style="color: #36455A; font-size: large;">-</p></b>
<p>Precipitation</p>
</div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/droplet.png" width="24">
<br> <b><p id="forecast-humid" style="color: #36455A; font-size: large;">-</p></b>
<p>Humidity</p>
</div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/cloud-wind.png" width="24">
<br> <b><p id="forecast-ws" style="color: #36455A; font-size: large;">-</p></b>
<p>Wind Speed</p>
<div class="col" style="width: 100%;">
<i class="bi bi-geo" style="color: #36455A; font-size: large;"> Bangkok</i>
<br><p id="forecasttime" style="color: #6A6F7D;">-</p>
<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
<p id="forecast-description" style="display: block;"></p>
</div>
<div class="card shadow-sm p-3 mb-2 bg-body rounded" style="border-width: 0px;">
<div class="card-body">
<div class="container-fluid">
<div class="row">
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/rain.png" width="24">
<br> <b><p id="forecast-precip" style="color: #36455A; font-size: large;">-</p></b>
<p>Precipitation</p>
</div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/droplet.png" width="24">
<br> <b><p id="forecast-humid" style="color: #36455A; font-size: large;">-</p></b>
<p>Humidity</p>
</div>
<div class="col-4" style="color: #6A6F7D; text-align: center; align-items: center;">
<img src="./images/cloud-wind.png" width="24">
<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> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
......
index.js
......@@ -86,11 +86,11 @@ function getData() {
}).done(function( data ) {
var obj = jQuery.parseJSON(data);
if (obj.success == 1){
$("#home-temperature").text(JSON.stringify(obj.data.temperature));
$("#home-humidity").text(JSON.stringify(obj.data.humidity));
$("#home-pm10").text(JSON.stringify(obj.data.pm10dot0));
$("#home-temperature").text(JSON.stringify(Math.round(obj.data.temperature)));
$("#home-humidity").text(JSON.stringify(Math.round(obj.data.humidity)));
$("#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_name = ["Good", "Moderate", "Unhealthy for Sensitive Groups", "Unhealthy", "Very Unhealthy", "Hazardous"];
......@@ -132,6 +132,7 @@ function getCamera() {
$("#cam06").attr('src','https://occ-hitachi.nexpie.com/data/z1/cam6.png?time='+new Date().getTime());
var date_show = new Date().toLocaleString();
console.log(date_show);
$("#camera01-time").text(date_show);
$("#camera02-time").text(date_show);
......@@ -211,10 +212,12 @@ function showtime() {
}
function init() {
getData();
getCamera();
getData();
getForecast();
showtime();
console.log("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