Scribd
Upload
10 views6 pages

Manual Book Iot4

The document contains code for displaying water level data from different stations on an interactive map. It retrieves water level records from a database and displays them on individual chart pages for each station, and uses JavaScript to toggle popup information windows on the map.

Uploaded by

sdakotapro2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views6 pages

Manual Book Iot4

The document contains code for displaying water level data from different stations on an interactive map. It retrieves water level records from a database and displays them on individual chart pages for each station, and uses JavaScript to toggle popup information windows on the map.

Uploaded by

sdakotapro2024
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

/* Toggle this class - hide and show the popup */

.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */


@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}

</style>
</head>
<body>

<div id="div1">

<img src="petapro.gif" alt="Workplace" usemap="#workmap" >

<div class="overlay">

<div class="popup" onclick="myFunction_umbul()">


<div Id="csvg_umbul">
<svg width="40" height="40">
<circle cx="20" cy="20" r="15" stroke="white" stroke-width="4" fill="
<?php
include_once ('connect.php');
$ha = mysqli_query($dbc, "SELECT ha FROM debit WHERE
nba='ubl' order by tgl asc");
while ($p = mysqli_fetch_array($ha)) { $nh= $p['ha'];}
if ($p = ""){$nh = 0;}
if ($nh >= 100){$wrn = "red"; $pt = "Hight";}
if ($nh < 100) {$wrn = "yellow"; $pt = "Medium";}
if ($nh <= 50) {$wrn = "green"; $pt = "Low";}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-umbul" id="myPopup_umbul" ><p>Sta.
Umbul<br><?php echo ($pt) ?><br><a href="vchart/sta_umbul.php">H<?php echo
($nh)?>CM</a></p></span>
</div>
<div class="popup" onclick="myFunction_kasbah()">
<div Id="csvg_kasbah">
<svg width="40" height="40">
<circle cx="20" cy="20" r="15" stroke="white" stroke-width="4"
fill="<?php
include_once ('connect.php');
$ha = mysqli_query($dbc, "SELECT ha FROM debit WHERE
nba='kbh' order by tgl asc");
while ($p = mysqli_fetch_array($ha)) { $nh= $p['ha'];}
if ($p = ""){$nh = 0;}
if ($nh >= 100){$wrn = "red"; $pt = "Hight";}
if ($nh < 100) {$wrn = "yellow"; $pt = "Medium";}
if ($nh <= 50) {$wrn = "green"; $pt = "Low";}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-kasbah" id="myPopup_kasbah"><p>Sta.
Kasbah<br><?php echo ($pt) ?><br><a href="vchart/sta_kasbah.php"> H<?php echo
($nh)?>CM</a></p></span>
</div>

<div class="popup" onclick="myFunction_merpati()">


<div Id="csvg_merpati">
<svg width="40" height="40">
<circle cx="20" cy="20" r="15" stroke="white" stroke-width="4"
fill="<?php
include_once ('connect.php');
$ha = mysqli_query($dbc, "SELECT ha FROM debit WHERE
nba='mpt'order by tgl asc");
while ($p = mysqli_fetch_array($ha)) { $nh= $p['ha'];}
if ($p = ""){$nh = 0;}
if ($nh >= 100){$wrn = "red"; $pt = "Hight";}
if ($nh < 100) {$wrn = "yellow"; $pt = "Medium";}
if ($nh <= 50) {$wrn = "green"; $pt = "Low";}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-merpati" id="myPopup_merpati"><p>Sta.
Merpati<br><?php echo ($pt) ?><br><a href="vchart/sta_merpati.php"> H<?php
echo ($nh)?>CM</a></p></span>
</div>

<div class="popup" onclick="myFunction_kedunggaleng()">


<div Id="csvg_kedunggaleng">
<svg width="40" height="40">
<circle cx="20" cy="20" r="15" stroke="white" stroke-width="4"
fill="<?php
include_once ('connect.php');
$ha = mysqli_query($dbc, "SELECT ha FROM debit WHERE
nba='bkg' order by tgl asc");
while ($p = mysqli_fetch_array($ha)) { $nh= $p['ha'];}
if ($p = ""){$nh = 0;}
if ($nh >= 100){$wrn = "red"; $pt = "Hight";}
if ($nh < 100) {$wrn = "yellow"; $pt = "Medium";}
if ($nh <= 50) {$wrn = "green"; $pt = "Low";}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-kedunggaleng"
id="myPopup_kedunggaleng"><p>Sta. Kedunggaleng<br><?php echo ($pt) ?><br><a
href="vchart/sta_kedunggaleng.php"> H<?php echo ($nh)?>CM</a></p></span>
</div>

<div class="popup" onclick="myFunction_legundi()">


<div Id="csvg_legundi">
<svg width="40" height="40">
<circle cx="20" cy="20" r="15" stroke="white" stroke-width="4"
fill="<?php
include_once ('connect.php');
$ha = mysqli_query($dbc, "SELECT ha FROM debit WHERE
nba='lgd' order by tgl asc");
while ($p = mysqli_fetch_array($ha)) { $nh= $p['ha'];}
if ($p = ""){$nh = 0;}
if ($nh >= 100){$wrn = "red"; $pt = "Hight";}
if ($nh < 100) {$wrn = "yellow"; $pt = "Medium";}
if ($nh <= 50) {$wrn = "green"; $pt = "Low";}
echo ("$wrn");
?>"/>
</svg>
</div>
<span class="popuptext-legundi" id="myPopup_legundi"><p>Sta.
Legundi<br><?php echo ($pt) ?><br><a href="vchart/sta_legundi.php"> H<?php
echo ($nh)?>CM</a></p></span>
</div>
</div>
</div>

<script>

var x = "<?php echo $_POST["pemakai"]; ?>, <?php echo $_POST["password"]; ?>";


var y = "a, a";

if ( y != x) {
document.getElementById("div1").style.opacity = "0";
}
else
{
document.getElementById("div1").style.opacity = "1";
}

function myFunction_umbul() {
var popup = document.getElementById("myPopup_umbul");
popup.classList.toggle("show");
}

function myFunction_kasbah() {
var popup = document.getElementById("myPopup_kasbah");
popup.classList.toggle("show");
}

function myFunction_merpati() {
var popup = document.getElementById("myPopup_merpati");
popup.classList.toggle("show");
}

function myFunction_kedunggaleng() {
var popup = document.getElementById("myPopup_kedunggaleng");
popup.classList.toggle("show");
}

function myFunction_legundi() {
var popup = document.getElementById("myPopup_legundi");
popup.classList.toggle("show");
}
</script>
<h2>by sdapro</h2>
</body>
</html>
e. File peta “petapro.gif”
File peta kota probolinggo dengan format GIF. Dengan ukuran 1,25 MB
f. Folder dengan nama “Vchart” yang berisi:
1. Chart.bundle.JSscript
2. Chart.bundle.min. JSscript
3. Chart. JSscript
4. Chart.min. JSscript
(download di internet)
5. file shp untuk masing masing Stasiun contoh untuk “sta_umbul.php”
yaitu.
//--------------------------------------------------------

<?php
include_once ('connect.php');
$hariini = date("'Y-m-d'", time());
$tm = mysqli_query($dbc, "SELECT tgl FROM debit WHERE nba='ubl' and tgl >
$hariini order by tgl asc");
$ha = mysqli_query($dbc, "SELECT ha FROM debit WHERE nba='ubl' and tgl >
$hariini order by tgl asc");
?>

<html>
<head>
<title>chart umbul</title>
<script src="Chart.bundle.js"></script>

<style type="text/css">
.container {
width: 50%;
margin: 5px auto;
}
</style>
</head>
<body>
<h3>sta. Umbul</h3>

<div class="container">
<canvas Id="myChart" width="100" height="70"></canvas>
</div>

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<?php while ($b = mysqli_fetch_array($tm)){ echo '"' . $b['tgl'].
'",';}?>],

datasets: [{
label: '= Tinggi air (cm)',
data: [<?php while ($p = mysqli_fetch_array($ha)) { echo '"' . $p['ha']
. '",';}?>],
backgroundColor: [
'rgba(54, 162, 235, 0.2)'],

borderColor: [
'rgba(54, 162, 235, 1)'],

borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>

You might also like