Menu
have some code that I will show below and I want to dynamically load some images using javascript. The images to be loaded are coming from my python script and will be processing some data every 3 hours. After the process from the python is done. The output image is then displayed in a website. So the input of the images needs to be dynamic.
[code]<script>
function playImages(parameter) {
var path = “”;
if(parameter == “precip”) {
path = “path to the precip folder”
}else if(parameter == “temp”) {
path = “path to the temp folder”
} else {
path = “path to the wind folder”
}
let listOfImages = [
“pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00000.png”,
“pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00100.png”,
“pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00200.png”,
“pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00300.png”,
“pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00400.png”,
“pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00500.png”,
“pyqgis-ops/PrecipRate/prate_rpnprate-postwrf_d01_20180923_0600_f00600.png”
];
let currentKey = 0;
let sizeOfImages = listOfImages.length;
setInterval(function(){
let strSplit = listOfImages[currentKey].split(‘-‘);
let removeOtherText = strSplit[1].replace(“postwrf_d01_”,””).replace(“.png”,””);
let dateSplit = removeOtherText.split(‘_’);
$(“#img-container”).attr(‘src’, listOfImages[currentKey]);
$(“#img-container”).attr(‘data-key’, currentKey);
$(“#date”).text(dateSplit[0] + ‘ ‘ + dateSplit[1] + ‘ ‘ + dateSplit[2]);
currentKey = currentKey + 1;
if(currentKey == sizeOfImages) {
currentKey = 0;
}
},1500);
}
playImages(“precip”);
let strSplit = “prate_rpnprate-postwrf_d01_20180923_0600_f00000.png”.split(‘-‘);
let removeOtherText = strSplit[1].replace(“postwrf_d01_”,””).replace(“.png”,””);
let dateSplit = removeOtherText.split(‘_’);
console.log(dateSplit[0]);
console.log(dateSplit[1]);
console.log(dateSplit[2]);
// $(“#select”).change(function() {
// playImages();
// });
</script>
The code above is just a scratch because I have no prior knowledge on how to use javascript. and the let listofImages part is how I “manually” load the images. any help will be greatly appreciated
Edited by site staff: Inserted code tags.
$images = glob("forecast/*.png");
foreach ($images as $img) {
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
echo '<figure><img src="' . $img . '">';
echo '<figcaption>date: ' . $date . ', utc: ' . $utc . ', forecasthour: ' . $forecasthour;
echo '</figcaption></figure>';
}
}
<i>
</i><?php
$images = glob("pyqgis-ops/Temperature/*.png");
foreach ($images as $img) {
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
echo '<figure><img src="' . $img . '">';
echo '<figcaption>date: ' . $date . ', utc: ' . $utc . ', forecasthour: ' . $forecasthour;
echo '</figcaption></figure>';
}
} <br/>
?>
$images = glob("pyqgis-ops/Temperature/*.png");
$forecastdata = [];
foreach ($images as $img) {
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
?>
<figure id="figure-forecast"></figure>;
<script>
var forecastdata = <?php echo json_encode($forecastdata); ?>;
var idx = 0;
var tpl = <span><code>
&lt;img src="{src}"&gt;
&lt;figcaption&gt;date: {date}, utc: {utc}, forecasthour: {forecasthour};
&lt;/figcaption&gt;</code></span>;
var thefigure = document.getElementById('figure-forecast');
setInterval(function() {
var thehtml = tpl
.replace('{src}', forecastdata[idx].img)
.replace('{date}', forecastdata[idx].date)
.replace('{utc}', forecastdata[idx].utc)
.replace('{forecasthour}', forecastdata[idx].forecasthour);
thefigure.innerHTML = thehtml;
idx++;
if (idx == forecastdata.length) idx = 0; <br/>
}, 1500);
</script>
<script>
var forecastdata = <?php echo json_encode($forecastdata); ?>;
<i> </i>// preload images in order to avoid flickering
<i> </i>var imgs = [];
<i> </i>for (var i = 0; i < forecastdata.length; i++) {
<i> </i> var imgs[i] = new Image();
<i> </i> imgs[i].src = forecastdata[idx].img;
<i> </i>}
<i> </i>
<i> </i>var idx = 0;
<i> </i>var tpl = <span><code>
<i> </i> &lt;img src="{src}"&gt;
<i> </i> &lt;figcaption&gt;date: {date}, utc: {utc}, forecasthour: {forecasthour};
<i> </i> &lt;/figcaption&gt;</code></span>;
<i> </i>var thefigure = document.getElementById('figure-forecast');
<i> </i>setInterval(function() {
<i> </i> var thehtml = tpl
<i> </i> .replace('{src}', forecastdata[idx].img)
<i> </i> .replace('{date}', forecastdata[idx].date)
<i> </i> .replace('{utc}', forecastdata[idx].utc)
<i> </i> .replace('{forecasthour}', forecastdata[idx].forecasthour);
<i> </i> thefigure.innerHTML = thehtml;
<i> </i> idx++;
<i> </i> if (idx == forecastdata.length) idx = 0;
<i> </i>}, 1500);
</script>
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$images = glob("forecast/*.png");
$forecastdata = [];
$intv = 3;
$idx = 0;
foreach ($images as $img) {
if ($idx % $intv == 0) {
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
$idx++;
}
?>
// preload images in order to avoid flickering
var imgs = [];
for (var i = 0; i < forecastdata.length; i++) {
imgs[i] = new Image();
imgs[i].src = forecastdata[i].img;
}
<i>
</i> <div class="col-md-2">
<h1>Weather Maps (PyQGIS)</h1>
<span id="jsclock1"></span><br><br>
<h3>Products:</h3>
<select id="select">
<option selected disabled>Select a Forecast Parameter</option>
<option value="prate">Precipitation Rate</option>
<option value="temp">Temperature</option>
<option value="wind">Wind</option>
</select>
</div>
<i> </i> <div class="col-md-9">
<i> </i> <div class="content-area">
<i> </i> **THE CONTENT SUPPOSED TO BE DISPLAYED HERE**
<i> </i> </div>
<i> </i> </div>
<i>
</i>$("#select").on('change', function() {
let jThis = $(this);
let selectVal = jThis.val();
if(selectVal == "prate") {
$(".content-area").get("pyqgis-ops/PrecipRate/prate.php");
} else if(selectVal == "temp") {
$(".content-area").load("/pyqgis-ops/Temperature/temp.html");
} else if(selectVal == "wind") {
$(".content-area").load("/pyqgis-ops/Wind850mb/wind.html");
} else {
$(".content-area").html("No filters");
}
});
load<i>
</i> <?php
$images = glob ("pyqgis-ops/PrecipRate/*.png");
$forecastdata = [];
foreach ($images as $img) {
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result){
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
?>
Uncaught TypeError: Cannot read property 'img' of undefined
at eval (eval at <anonymous> (jquery.js:2), <anonymous>:18:49)<i>
</i> <?php
$images = glob ("*.png");
$forecastdata = [];
foreach ($images as $img) {
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result){
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
?>
Failed to load resource: the server responded with a status of 404 (Not Found)<script>
var forecastdata = <?php echo json_encode($forecastdata); ?>;
var folder = 'somefolder/'; // added
// preload images in order to avoid flickering
var imgs = [];
for (var i = 0; i < forecastdata.length; i++) {
imgs[i] = new Image();
imgs[i].src = folder + forecastdata[i].img; // changed here
}
<i> </i>var idx = 0;
<i> </i>var tpl = <span><code>
<i> </i> &lt;img src="{src}"&gt;
<i> </i> &lt;figcaption&gt;date: {date}, utc: {utc}, forecasthour: {forecasthour};
<i> </i> &lt;/figcaption&gt;</code></span>;
<i> </i>var thefigure = document.getElementById('figure-forecast');
<i> </i>setInterval(function() {
<i> </i> var thehtml = tpl
<i> </i> .replace('{src}', folder + forecastdata[idx].img) // changed here
<i> </i> .replace('{date}', forecastdata[idx].date)
<i> </i> .replace('{utc}', forecastdata[idx].utc)
<i> </i> .replace('{forecasthour}', forecastdata[idx].forecasthour);
<i> </i> thefigure.innerHTML = thehtml;
<i> </i> idx++;
<i> </i> if (idx == forecastdata.length) idx = 0;
<i> </i>}, 1500);
</script>
.replace('{src}', forecastdata[idx].img)/var/www/html/pyqgis-ops/PrecipRate//var/www/html/js//var/www/html/gis.html<i>
</i>VM2849:2 Uncaught SyntaxError: Unexpected token var
at eval (<anonymous>)
at jquery.js:2
at Function.globalEval (jquery.js:2)
at Ha (jquery.js:3)
at n.fn.init.append (jquery.js:3)
at n.fn.init.<anonymous> (jquery.js:3)
at Y (jquery.js:3)
at n.fn.init.html (jquery.js:3)
at Object.<anonymous> (jquery.js:4)
at i (jquery.js:2)
/var/www/html/_gis.html_Is it ok if I have more questions?[/quote]Yes, of course, you're welcome!
gis.html<i>
</i> <div class="col-md-2">
<h1>Weather Maps (PyQGIS)</h1>
<span id="jsclock1"></span><br><br>
<h5>Products:</h5>
<select id="select">
<option selected disabled>Select a Forecast Parameter</option>
<option value="prate">Precipitation Rate</option>
<option value="temp">Temperature</option>
<option value="wind">Wind</option>
<option value="rh">Relative Humidity</option>
<option value="cc">Cloud Cover</option>
</select>
<h5>Animation Interval (hr):</h5>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="optradio">3
</label>
<label class="radio-inline">
<input type="radio" name="optradio">6
</label>
<label class="radio-inline">
<input type="radio" name="optradio">12
</label>
<label class="radio-inline">
<input type="radio" name="optradio">24
</label>
</form>
</div>
<i>
</i>$("#select").on('change', function() {
let jThis = $(this);
let selectVal = jThis.val();
if(selectVal == "prate") {
$(".content-area").load("prate.php");
} else if(selectVal == "temp") {
$(".content-area").load("temp.php");
} else if(selectVal == "wind") {
$(".content-area").load("wind.php");
} else if(selectVal == "rh") {
$(".content-area").load("rh.php");
} else if(selecVal == "cc") {
$(".content-area").load("cc.php");
} else {
$(".content-area").html("error.html");
}
});
say I want the animation to be by 3 then it will skip frames and start the animation on frame 3 then 6, 9 and so on.[/quote]
var idx = 0, step = 3;
var tpl = <span><code>
&lt;img src="{src}"&gt;
&lt;figcaption&gt;date: {date}, utc: {utc}, forecasthour: {forecasthour};
&lt;/figcaption&gt;</code></span>;
var thefigure = document.getElementById('figure-forecast');
setInterval(function() {
var thehtml = tpl
.replace('{src}', folder + forecastdata[idx].img) // changed here
.replace('{date}', forecastdata[idx].date)
.replace('{utc}', forecastdata[idx].utc)
.replace('{forecasthour}', forecastdata[idx].forecasthour);
thefigure.innerHTML = thehtml;
idx += step;
if (idx >= forecastdata.length) idx = 0; <br/>
}, 1500);step = 3step = 3, step=6, step how will I "connect" it with the radio buttons?[/quote]
<label class="radio-inline">
<input type="radio" name="optradio" value="1" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="3">3
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="6">6
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="12">12
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="24">24
</label>
var step = 1;
$("input[name='optradio']").on("change", function () {
step = parseInt($("input[name='optradio']:checked").val());
});
>@Sempervivum#1605398 step = 3;
so I will add here step=1, step=3, step=6, step=12, step=24
>@Sempervivum#1605449 var step = 1;
> $("input[name='optradio']").on("change", function () {
> step = parseInt($("input[name='optradio']:checked").val());
> });
will I put this code here?
>@frncskn#1605387 $("#select").on('change', function() {
> let jThis = $(this);
> let selectVal = jThis.val();
>
> if(selectVal == "prate") {
> $(".content-area").load("prate.php");
> } else if(selectVal == "temp") {
> $(".content-area").load("temp.php");
> } else if(selectVal == "wind") {
> $(".content-area").load("wind.php");
> } else if(selectVal == "rh") {
> $(".content-area").load("rh.php");
> } else if(selecVal == "cc") {
> $(".content-area").load("cc.php");
> } else {
> $(".content-area").html("error.html");
> }
> });
<script>
$("#select").on('change', function () {
let jThis = $(this);
let selectVal = jThis.val();
<i> </i> if (selectVal == "prate") {
<i> </i> $(".content-area").load("thread181-wheather-forecast-2.php");
<i> </i> } else if (selectVal == "temp") {
<i> </i> $(".content-area").load("temp.php");
<i> </i> } else if (selectVal == "wind") {
<i> </i> $(".content-area").load("wind.php");
<i> </i> } else if (selectVal == "rh") {
<i> </i> $(".content-area").load("rh.php");
<i> </i> } else if (selecVal == "cc") {
<i> </i> $(".content-area").load("cc.php");
<i> </i> } else {
<i> </i> $(".content-area").html("error.html");
<i> </i> }
<i> </i> });
<i> </i> var step = 1;
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> });
<i> </i></script>step = 3;
so I will add here step=1, step=3, step=6, step=12, step=24 <script>
$("#select").on('change', function () {
let jThis = $(this);
let selectVal = jThis.val();
<i> </i> if (selectVal == "prate") {
<i> </i> $(".content-area").load("thread181-wheather-forecast-2.php");
<i> </i> } else if (selectVal == "temp") {
<i> </i> $(".content-area").load("temp.php");
<i> </i> } else if (selectVal == "wind") {
<i> </i> $(".content-area").load("wind.php");
<i> </i> } else if (selectVal == "rh") {
<i> </i> $(".content-area").load("rh.php");
<i> </i> } else if (selecVal == "cc") {
<i> </i> $(".content-area").load("cc.php");
<i> </i> } else {
<i> </i> $(".content-area").html("error.html");
<i> </i> }
<i> </i> });
<i> </i> var idx = 0, step = 1;
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
<i> </i></script>
var idx = 0;<i>
</i><div class="col-md-3" style="display: inline;">
<br><br><br><h3>850mb Wind (km/h)</h3>
***THIS IS WHERE THE DATE, UTC AND FORECAST HOUR WILL BE HOPEFULLY PLACED <br/>
</div>
<i> </i><div class="col-md-9" style="display: inline;">
<i> </i> <?php
<i> </i> $images = glob ("pyqgis-ops/Wind850mb/*.png");
<i> </i> $forecastdata = [];
<i> </i> foreach ($images as $img) {
<i> </i> $result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
<i> </i> if ($result){
<i> </i> $date = $matches[1];
<i> </i> $utc = $matches[2];
<i> </i> $forecasthour = $matches[3];
<i> </i> $forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
<i> </i> }
<i> </i> }
<i> </i> ?>
<i> </i> <figure id="figure-forecast"></figure>
<i> </i> <script>
<i> </i> var forecastdata = <?php echo json_encode($forecastdata); ?>;
<i> </i> // preload code to avoid flickering
<i> </i> var imgs = [];
<i> </i> for (var i = 0; i < forecastdata.length; i++) {
<i> </i> imgs[i] = new Image();
<i> </i> imgs[i].src = forecastdata[i].img;
<i> </i> }
<i> </i> step = 1;
<i> </i> var tpl = <span><code>
<i> </i> &lt;img src="{src}"&gt;
<i> </i> &lt;figcaption&gt;date: {date}, utc: {utc}, forecasthour: {forecasthour};
<i> </i> &lt;/figcaption&gt;</code></span>;
<i> </i> var thefigure = document.getElementById('figure-forecast');
<i> </i> setInterval(function () {
<i> </i> var thehtml = tpl
<i> </i> .replace('{src}', forecastdata[idx].img)
<i> </i> .replace('{date}', forecastdata[idx].date)
<i> </i> .replace('{utc}', forecastdata[idx].utc)
<i> </i> .replace('{forecasthour}', forecastdata[idx].forecasthour);
<i> </i> thefigure.innerHTML = thehtml;
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }, 500);
<i> </i> </script>
<i> </i></div>
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$images = glob("forecast/*.png");
$forecastdata = [];
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
?>
<div class="col-md-3" style="display: inline;">
<br><br><br><h3>850mb Wind (km/h)</h3>
<span id="caption-forecast"></span>
</div>
<div class="col-md-9" style="display: inline;">
<img id="img-forecast" src="";
</div>
<script>
var forecastdata = <?php echo json_encode($forecastdata); ?>;
<i> </i>// preload images in order to avoid flickering
<i> </i>var imgs = [];
<i> </i>for (var i = 0; i < forecastdata.length; i++) {
<i> </i> imgs[i] = new Image();
<i> </i> imgs[i].src = forecastdata[i].img;
<i> </i>}
<i> </i>var tplCaption = <span><code>
<i> </i> &lt;p&gt;date: {date}&lt;/p&gt;
<i> </i> &lt;p&gt;utc: {utc}&lt;/p&gt;
<i> </i> &lt;p&gt;forecasthour: {forecasthour}&lt;/p&gt;</code></span>;
<i> </i>var thecaption = document.getElementById('caption-forecast');
<i> </i>var theimg = document.getElementById('img-forecast');
<i> </i>setInterval(function() {
<i> </i> console.log(idx, step);
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> var thehtml = tplCaption
<i> </i> .replace('{src}', forecastdata[idx].img)
<i> </i> .replace('{date}', forecastdata[idx].date)
<i> </i> .replace('{utc}', forecastdata[idx].utc)
<i> </i> .replace('{forecasthour}', forecastdata[idx].forecasthour);
<i> </i> thecaption.innerHTML = thehtml;
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i>}, 1500);
</script>
Uncaught ReferenceError: idx is not definedconsole.log(idx, step);<script>
var forecastdata = <?php echo json_encode($forecastdata); ?>;
<i> </i>// preload code to avoid flickering
<i> </i>var imgs = [];
<i> </i>for (var i = 0; i < forecastdata.length; i++) {
<i> </i> imgs[i] = new Image();
<i> </i> imgs[i].src = forecastdata[i].img;
<i> </i>}
<i> </i>var idx = 0, step = 1;
<i> </i>var tpl = <?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$images = glob("forecast/*.png");
$forecastdata = [];
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
echo json_encode($forecastdata);
?><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wheather Forecast</title>
<i> </i><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<i> </i><style>
<i> </i> img {
<i> </i> width: 300px;
<i> </i> }
<i> </i></style>
</head>
<body>
<div class="content-area"></div>
<div class="col-md-2">
<h1>Weather Maps (PyQGIS)</h1>
<span id="jsclock1"></span><br><br>
<h5>Products:</h5>
<select id="select">
<option selected disabled>Select a Forecast Parameter</option>
<option value="prate">Precipitation Rate</option>
<option value="temp">Temperature</option>
<option value="wind">Wind</option>
<option value="rh">Relative Humidity</option>
<option value="cc">Cloud Cover</option>
</select>
<h5>Animation Interval (hr):</h5>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" value="1" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="3">3
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="6">6
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="12">12
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="24">24
</label>
</form>
<button id="start-stop-btn">Stop</button>
<button id="first-btn">First</button>
<button id="last-btn">Last</button>
</div>
<div class="col-md-3" style="display: inline;">
<br><br><br>
<h3>850mb Wind (km/h)</h3>
<p>Date: <span id="forecast-date"></span></p>
<p>UTC: <span id="forecast-utc"></span></p>
<p>Hour: <span id="forecast-hour"></span></p>
</div>
<i> </i><div class="col-md-9" style="display: inline;">
<i> </i> <img id="forecast-img" src="">
<i> </i></div>
<i> </i><script>
<i> </i> var theimg = document.getElementById('forecast-img'),
<i> </i> thedate = document.getElementById('forecast-date'),
<i> </i> theUTC = document.getElementById('forecast-utc'),
<i> </i> thehour = document.getElementById('forecast-hour');
<i> </i> var idx = 0, step = 1, stopped = false;
<i> </i> var forecastdata = [];
<i> </i> setInterval(getUrlAndLoad, 60000);
<i> </i> setInterval(function () {
<i> </i> console.log(idx, step);
<i> </i> if (forecastdata.length > 0 && !stopped) {
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }
<i> </i> }, 1500);
<i> </i> function loadForecast(url) {
<i> </i> $.getJSON(url, function (data) {
<i> </i> forecastdata = data;
<i> </i> });
<i> </i> }
<i> </i> function getUrlAndLoad() {
<i> </i> var val = $("#select").val();
<i> </i> switch (val) {
<i> </i> case "prate":
<i> </i> loadForecast("thread181-wheather-forecast-4.php");
<i> </i> break;
<i> </i> case "temp":
<i> </i> loadForecast("temp.php");
<i> </i> break;
<i> </i> case "wind":
<i> </i> loadForecast("wind.php");
<i> </i> break;
<i> </i> case "rh":
<i> </i> loadForecast("rh.php");
<i> </i> break;
<i> </i> case "cc":
<i> </i> loadForecast("cc.php");
<i> </i> break;
<i> </i> default:
<i> </i> $(".content-area").html("error.html");
<i> </i> }
<i> </i> }
<i> </i> $("#select").on('change', getUrlAndLoad);
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
<i> </i> $("#start-stop-btn").on("click", function () {
<i> </i> if (!stopped) {
<i> </i> stopped = true;
<i> </i> $(this).text("Start");
<i> </i> } else {
<i> </i> stopped = false;
<i> </i> $(this).text("Stop");
<i> </i> }
<i> </i> });
<i> </i> $("#first-btn").on("click", function () {
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#last-btn").on("click", function () {
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i></script>
</body>
</html><i>
</i> $("#last-btn").on("click", function () {
stopped = true;
$("#start-stop-btn").text("Start");
idx = forecastdata.length - 1;
theimg.src = forecastdata[idx].img;
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
});
$("#next-btn").on("click", function () {
stopped = true;
$("#start-stop-btn").text("Start");
idx += step;
if (idx >= forecastdata.length) idx = 0;
theimg.src = forecastdata[idx].img;
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
}); theimg.src = forecastdata[idx].img;
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;>@Sempervivum#1605522 Unfortunately this code:
> theimg.src = forecastdata[idx].img;
> thedate.innerHTML = forecastdata[idx].date;
> theUTC.innerHTML = forecastdata[idx].utc;
> thehour.innerHTML = forecastdata[idx].forecasthour;if("undefined"!==typeof hljs)hljs._ha();else if("undefined"===typeof hljsLoading){hljsLoading=1;var a=document.getElementsByTagName("head")[0],e=document.createElement("link");e.type="text/css";e.rel="stylesheet";e.href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css";a.appendChild(e);e=document.createElement("script");e.type="text/javascript";e.onload=function(){var d={},f=0;hljs._hb=function(b){b.removeAttribute("data-hljs");var c=b.innerHTML;c in d?b.innerHTML=d[c]:(7<++f&&(d={},f=0),hljs.highlightBlock(b.firstChild),d[c]=b.innerHTML)};hljs._ha=function(){for(var b=document.querySelectorAll("pre[data-hljs]"),c=b.length;0<c;)hljs._hb(b.item(--c))};hljs._ha()};e.async=!0;e.src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js";a.appendChild(e)}occurs multiplely. You might put it into a function.
When I click "next" it the selected parameter becomes deselected. I have to reselect the forecast parameter.Is ther some automatic reloading?
Its like the button is "crashing"[/quote]
<i>
</i> <div class="row" style="background-color: #f4f4f4;">
<br/>
<i> </i> <div class="col-md-3">
<i> </i> <h1>Weather Maps (PyQGIS)</h1>
<i> </i> <span id="jsclock1"></span><br><br>
<i> </i> <h5>Products:</h5>
<i> </i> <select id="select">
<i> </i> <option selected disabled>Select a Forecast Parameter</option>
<i> </i> <option value="prate">Surface Precipitation Rate</option>
<i> </i> <option value="3HrAccum">3-Hr Accumulated Precipitation</option>
<i> </i> <option value="temp">Surface Temperature</option>
<i> </i> <option value="wind">850mb Wind</option>
<i> </i> <option value="10mwind">10m Wind</option>
<i> </i> <option value="rh">Relative Humidity</option>
<i> </i> <option value="cc">Surface Cloud Cover</option>
<i> </i> </select><br><br>
<i> </i> <h5>Animation Interval (hr):</h5>
<i> </i> <form>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="1" checked>1
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="3">3
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="6">6
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="12">12
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="24">24
<i> </i> </label><br><br>
<i> </i> <p>Duration: 144.0h</p>
<i> </i> </form><br>
<i> </i> </div>
<i> </i> <div class="col-md-6" style="padding: 25px;">
<i> </i> <form style="display: block; float: left;font-size: 20px;">
<i> </i> <p>Date Initialized: <span id="forecast-date"></span></p>
<i> </i> <p>UTC: <span id="forecast-utc"></span></p>
<i> </i> <p>Forecast Hour: <span id="forecast-hour"></span></p>
<i> </i> </form>
<i> </i> <form>
<i> </i> <button id="first-btn">First<<</button>
<i> </i> <button id="next-btn">Next</button>
<i> </i> <button id="start-stop-btn">Stop</button>
<i> </i> <button id="prev-btn">Previous</button>
<i> </i> <button id="last-btn">Last>></button>
<i> </i> </form>
<i> </i> <img id="forecast-img" src="">
<i> </i> </div>
<i> </i> </div>
<i> </i> <script>
<i> </i> var theimg = document.getElementById('forecast-img'),
<i> </i> thedate = document.getElementById('forecast-date'),
<i> </i> theUTC = document.getElementById('forecast-utc'),
<i> </i> thehour = document.getElementById('forecast-hour');
<i> </i> var idx = 0, step = 1, stopped = false;
<i> </i> var forecastdata = [];
<i> </i> setInterval(getUrlAndLoad, 60000);
<i> </i> setInterval(function () {
<i> </i> console.log(idx, step);
<i> </i> if (forecastdata.length > 0 && !stopped) {
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }
<i> </i> }, 500);
<i> </i> function loadForecast(url) {
<i> </i> $.getJSON(url, function (data) {
<i> </i> forecastdata = data;
<i> </i> });
<i> </i> }
<i> </i> function getUrlAndLoad() {
<i> </i> var val = $("#select").val();
<i> </i> switch (val) {
<i> </i> case "prate":
<i> </i> loadForecast("prate.php");
<i> </i> break;
<i> </i> case "temp":
<i> </i> loadForecast("temp.php");
<i> </i> break;
<i> </i> case "wind":
<i> </i> loadForecast("wind.php");
<i> </i> break;
<i> </i> case "rh":
<i> </i> loadForecast("rh.php");
<i> </i> break;
<i> </i> case "cc":
<i> </i> loadForecast("cc.php");
<i> </i> break;
<i> </i> case "3HrAccum":
<i> </i> loadForecast("3HrAccum.php");
<i> </i> break;
<i> </i> case "10mwind":
<i> </i> loadForecast("10mwind.php");
<i> </i> break;
<i> </i> }
<i> </i> }
<i> </i> $("#select").on('change', getUrlAndLoad);
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
<i> </i> $("#start-stop-btn").on("click", function() {
<i> </i> if (!stopped) {
<i> </i> stopped = true;
<i> </i> $(this).text("Start");
<i> </i> } else {
<i> </i> stopped = false;
<i> </i> $(this).text("Stop");
<i> </i> }
<i> </i> });
<i> </i> $("#first-btn").on("click", function() {
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#last-btn").on("click", function() {
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#next-btn").on("click", function () {
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> </script>
<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIS Mapping</title>
<i> </i><link href="css/bootstrap.css" rel="stylesheet">
<i> </i><link href="css/home.css" rel="stylesheet">
<i> </i><script src="js/jquery.js"></script>
<i> </i><script src="js/jsclock.js"></script>
<i> </i><script src="js/bootstrap.min.js"></script>
<i> </i><link rel="shortcut icon" href="img/pagasafavicon.png" type="image/x-icon">
</head>
$("#start-stop-btn").on("click", function (event) {
event.preventDefault();
if (!stopped) {
stopped = true;
$(this).text("Start");
} else {
stopped = false;
$(this).text("Stop");
}
});
<select id="select">
<option selected disabled>Select a Forecast Parameter</option>
<option value="prate" data-colgradimg="images/colgrad1.png">Surface Precipitation Rate</option>
<option value="3HrAccum" data-colgradimg="images/colgrad2.png">3-Hr Accumulated Precipitation</option>
<!-- and so on -->
function getUrlAndLoad() {
var val = $("#select").val();
var colgradimg = $("#select option:selected").data("colgradimg");
$("#colgrad-img").attr("src", colgradimg);
switch (val) {
case "prate":
<div class="row" style="background-color: #f4f4f4;">
<i> </i> <div class="col-md-3">
<i> </i> <h1>Weather Maps (PyQGIS)</h1>
<i> </i> <span id="jsclock1"></span><br><br>
<i> </i> <h5>Products:</h5>
<i> </i> <select id="select">
<i> </i> <option selected disabled>Select a Forecast Parameter</option>
<i> </i> <option value="prate" data-colgradimg="images/colgrad1.png">Surface Precipitation Rate</option>
<i> </i> <option value="3HrAccum" data-colgradimg="images/colgrad2.png">3-Hr Accumulated Precipitation</option>
<i> </i> <option value="temp" data-colgradimg="images/colgrad3.png">Surface Temperature</option>
<i> </i> <option value="wind">850mb Wind</option>
<i> </i> <option value="10mwind">10m Wind</option>
<i> </i> <option value="rh">Relative Humidity</option>
<i> </i> <option value="cc">Surface Cloud Cover</option>
<i> </i> </select><br><br>
<i> </i> <h5>Animation Interval (hr):</h5>
<i> </i> <form>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="1" checked>1
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="3">3
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="6">6
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="12">12
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="24">24
<i> </i> </label><br><br>
<i> </i> <p>Duration: 144.0h</p>
<i> </i> </form><br>
<i> </i> </div>
<i> </i> <div class="col-md-6" style="padding: 25px;">
<i> </i> <form style="display: block; float: left;font-size: 20px;">
<i> </i> <p>Date Initialized: <span id="forecast-date"></span></p>
<i> </i> <p>UTC: <span id="forecast-utc"></span></p>
<i> </i> <p>Forecast Hour: <span id="forecast-hour"></span></p>
<i> </i> </form>
<i> </i> <form>
<i> </i> <button id="first-btn">First<<</button> <button id="next-btn">Next</button>
<i> </i> <button id="start-stop-btn">Stop</button>
<i> </i> <button id="prev-btn">Previous</button>
<i> </i> <button id="last-btn">Last>></button>
<i> </i> </form>
<i> </i> <img id="forecast-img" src="">
<i> </i> <img id="colgrad-img" src="">
<i> </i> </div>
<i> </i></div>
<i> </i><script>
<i> </i> var theimg = document.getElementById('forecast-img'),
<i> </i> thedate = document.getElementById('forecast-date'),
<i> </i> theUTC = document.getElementById('forecast-utc'),
<i> </i> thehour = document.getElementById('forecast-hour');
<i> </i> var idx = 0, step = 1, stopped = false;
<i> </i> var forecastdata = [];
<i> </i> setInterval(getUrlAndLoad, 60000);
<i> </i> setInterval(function () {
<i> </i> console.log(idx, step);
<i> </i> if (forecastdata.length > 0 && !stopped) {
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }
<i> </i> }, 500);
<i> </i> function loadForecast(url) {
<i> </i> $.getJSON(url, function (data) {
<i> </i> forecastdata = data;
<i> </i> });
<i> </i> }
<i> </i> function getUrlAndLoad() {
<i> </i> var val = $("#select").val();
<i> </i> var colgradimg = $("#select option:selected").data("colgradimg");
<i> </i> $("#colgrad-img").attr("src", colgradimg);
<i> </i> switch (val) {
<i> </i> case "prate":
<i> </i> loadForecast("thread181-wheather-forecast-4.php");
<i> </i> break;
<i> </i> case "temp":
<i> </i> loadForecast("temp.php");
<i> </i> break;
<i> </i> case "wind":
<i> </i> loadForecast("wind.php");
<i> </i> break;
<i> </i> case "rh":
<i> </i> loadForecast("rh.php");
<i> </i> break;
<i> </i> case "cc":
<i> </i> loadForecast("cc.php");
<i> </i> break;
<i> </i> case "3HrAccum":
<i> </i> loadForecast("3HrAccum.php");
<i> </i> break;
<i> </i> case "10mwind":
<i> </i> loadForecast("10mwind.php");
<i> </i> break;
<i> </i> }
<i> </i> }
<i> </i> $("#select").on('change', getUrlAndLoad);
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
<i> </i> $("#start-stop-btn").on("click", function (event) {
<i> </i> event.preventDefault();
<i> </i> if (!stopped) {
<i> </i> stopped = true;
<i> </i> $(this).text("Start");
<i> </i> } else {
<i> </i> stopped = false;
<i> </i> $(this).text("Stop");
<i> </i> }
<i> </i> });
<i> </i> $("#first-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#last-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#next-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#prev-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx -= step;
<i> </i> if (idx < 0) idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i></script>
the designs are misarranged the font is different. Can you recommend some settings in css for it to be cross platform?[/quote]One had to view the CSS in order to analyse this precisely. However I can give some general recommendations: Often the reason for layout issues is the use of absolute positioning or the outdated float. Use flex layout instead.
<div id="forecast-container">
<div id="labels-left-container">
<div class="label-left">30&deg;N</div>
<div class="label-left">25&deg;N</div>
<div class="label-left">20&deg;N</div>
<div class="label-left">15&deg;N</div>
<div class="label-left">10&deg;N</div>
<div class="label-left">5&deg;N</div>
</div>
<div id="img-container">
<img id="forecast-img">
</div>
</div> #img-container {
<i> </i> /* dimensions of the image
<i> </i> excluding white borders */
<i> </i> width: 277px;
<i> </i> height: 378px;
<i> </i> border: 2px solid black;
<i> </i> overflow: hidden;
<i> </i> box-sizing: border-box;
<i> </i> }
<i> </i> #forecast-img {
<i> </i> vertical-align: top;
<i> </i> /* dimensions of the complete image
<i> </i> including white borders */
<i> </i> width: 377px;
<i> </i> height: 478px;
<i> </i> /* size of the white border at the left */
<i> </i> margin-left: -50px;
<i> </i> /* size of the white border on top */
<i> </i> margin-top: -50px;
<i> </i> }
<i> </i> #forecast-container {
<i> </i> display: flex;
<i> </i> padding-top: 10px;
<i> </i> }
<i> </i> #labels-left-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> .label-left {
<i> </i> text-align: right;
<i> </i> /* the vertical distance between the labels */
<i> </i> margin-top: 45px;
<i> </i> padding-left: 5px;
<i> </i> padding-right: 5px;
<i> </i> }
<i> </i> .label-left:first-child {
<i> </i> /* amount the first label is shifted upwards */
<i> </i> margin-top: -7px;
<i> </i> }WIDTH:550 x HEIGHT:600<i>
</i> <div class="row" style="background-color: #f4f4f4;">
<br/>
<i> </i> <div class="col-md-3">
<i> </i> <h1>Weather Maps (PyQGIS)</h1>
<i> </i> <span id="jsclock1"></span><br><br>
<i> </i> <h5>Products:</h5>
<i> </i> <select id="select">
<i> </i> <option selected disabled>Select a Forecast Parameter</option>
<i> </i> <option value="prate" data-colgradimg="img/prate.png">Surface Precipitation Rate</option>
<i> </i> <option value="3HrAccum" data-colgradimg="img/3HrlyAccu.png">3-Hr Accumulated Precipitation</option>
<i> </i> <option value="temp" data-colgradimg="img/temp.png">Surface Temperature</option>
<i> </i> <option value="wind" data-colgradimg="img/wind.png">850mb Wind</option>
<i> </i> <option value="10mwind" data-colgradimg="img/wind10.png">10m Wind</option>
<i> </i> <option value="rh" data-colgradimg="img/rh.png">Relative Humidity</option>
<i> </i> <option value="cc" data-colgradimg="img/cc.png">Surface Cloud Cover</option>
<i> </i> </select><br><br>
<i> </i> <h5>Animation Interval (hr):</h5>
<i> </i> <form>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="1" checked>1
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="3">3
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="6">6
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="12">12
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="24">24
<i> </i> </label><br><br>
<i> </i> <p>Duration: 144.0h</p>
<i> </i> </form><br>
<i> </i> </div>
<i> </i> <div class="col-md-2" style="padding: 25px;">
<i> </i> <form style="display: block; float: left;font-size: 20px;">
<i> </i> <p>Date Initialized:<span id="forecast-date"></span></p>
<i> </i> <p>UTC:<span id="forecast-utc"></span></p>
<i> </i> <p>Forecast Hour:<span id="forecast-hour"></span></p>
<i> </i> </form>
<i> </i> </div>
<i> </i> <div class="col-md-6">
<i> </i> <form style="display: block;">
<i> </i> <button id="first-btn">First<<</button>
<i> </i> <button id="last-btn">Last>></button>
<i> </i> <button id="prev-btn">Previous</button>
<i> </i> <button id="next-btn">Next</button>
<i> </i> <button id="start-stop-btn">Stop</button>
<i> </i> </form>
<i> </i> <div id="forecast-container">
<i> </i> <div id="labels-left-container">
<i> </i> <div class="label-left">30&deg;N</div>
<i> </i> <div class="label-left">25&deg;N</div>
<i> </i> <div class="label-left">20&deg;N</div>
<i> </i> <div class="label-left">15&deg;N</div>
<i> </i> <div class="label-left">10&deg;N</div>
<i> </i> <div class="label-left">5&deg;N</div>
<i> </i> </div>
<i> </i> <div id="img-container">
<i> </i> <img id="forecast-img" src="">
<i> </i> </div>
<i> </i> <img id="colgrad-img" src="">
<i> </i> </div>
<i> </i> </div>
<i> </i> </div>
<i>
</i>/*IMAGE CONTAINER FOR FORECASTS*/
#img-container {
/*dimensions of the image excluding the white borders*/
width: 550px;
height: 600px;
border: 1px solid black;
overflow: hidden;
box-sizing: border-box;
}
#forecast-img {
vertical-align: top;
/* dimensions of the complete image including the white borders*/
height: 450px;
width: 500px;
/* size of the white border at the left*/
margin-left: -50px;
/*size of the white border on the top*/
margin-top: -50px;
}
#forecast-container {
display: flex;
padding-top: 10px;
}
#labels-left-container {
display: flex;
flex-direction: column;
}
.label-left {
text-align: right;
/* the vertical distance between the labels */
margin-top: 45px;
padding-left: 5px;
padding-right: 5px;
}
.label-left:first-child {
/* amount the first label is shifted upwards */
margin-top: 0px;
}
/*END OF LABELS HERE */
#img-container {
<i> </i> /* dimensions of the inner image
<i> </i> excluding white borders */
<i> </i> width: 460px;
<i> </i> height: 540px;
<i> </i> border: 2px solid black;
<i> </i> overflow: hidden;
<i> </i> box-sizing: border-box;
<i> </i> }
<i> </i> #forecast-img {
<i> </i> vertical-align: top;
<i> </i> /* dimensions of the complete image
<i> </i> including white borders */
<i> </i> width: 550px;
<i> </i> height: 600px;
<i> </i> /* size of the white border at the left */
<i> </i> margin-left: -45px;
<i> </i> /* size of the white border on top */
<i> </i> margin-top: -30px;
<i> </i> }
<i> </i> #forecast-container {
<i> </i> display: flex;
<i> </i> padding-top: 10px;
<i> </i> }
<i> </i> #labels-left-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> .label-left {
<i> </i> text-align: right;
<i> </i> /* the vertical distance between the labels */
<i> </i> margin-top: 74px;
<i> </i> padding-left: 5px;
<i> </i> padding-right: 5px;
<i> </i> }
<i> </i> .label-left:first-child {
<i> </i> /* amount the first label is shifted upwards */
<i> </i> margin-top: -7px;
<i> </i> }
<div id="forecast-container">
<div id="labels-left-container">
<div class="label-left">30&deg;N</div>
<div class="label-left">25&deg;N</div>
<div class="label-left">20&deg;N</div>
<div class="label-left">15&deg;N</div>
<div class="label-left">10&deg;N</div>
<div class="label-left">5&deg;N</div>
</div>
<div id="right-container">
<div id="img-container">
<img id="forecast-img">
</div>
<div id="labels-bottom-container">
<div class="label-bottom">115&deg;E</div>
<div class="label-bottom">120&deg;E</div>
<div class="label-bottom">125&deg;E</div>
<div class="label-bottom">130&deg;E</div>
<div class="label-bottom">135&deg;E</div>
<div class="label-bottom">140&deg;E</div>
</div>
</div>
</div>
#img-container {
<i> </i> /* dimensions of the inner image
<i> </i> excluding white borders */
<i> </i> width: 460px;
<i> </i> height: 540px;
<i> </i> border: 2px solid black;
<i> </i> overflow: hidden;
<i> </i> box-sizing: border-box;
<i> </i> }
<i> </i> #forecast-img {
<i> </i> vertical-align: top;
<i> </i> /* dimensions of the complete image
<i> </i> including white borders */
<i> </i> width: 550px;
<i> </i> height: 600px;
<i> </i> /* size of the white border at the left */
<i> </i> margin-left: -45px;
<i> </i> /* size of the white border on top */
<i> </i> margin-top: -30px;
<i> </i> }
<i> </i> #forecast-container {
<i> </i> display: flex;
<i> </i> padding-top: 10px;
<i> </i> }
<i> </i> #labels-left-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> .label-left {
<i> </i> text-align: right;
<i> </i> /* the vertical distance between the labels */
<i> </i> margin-top: 74px;
<i> </i> padding-left: 5px;
<i> </i> padding-right: 5px;
<i> </i> }
<i> </i> .label-left:first-child {
<i> </i> /* amount the first label is shifted upwards */
<i> </i> margin-top: -7px;
<i> </i> }
<i> </i> #right-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> #labels-bottom-container {
<i> </i> display: flex;
<i> </i> }
<i> </i> .label-bottom {
<i> </i> text-align: center;
<i> </i> /* the horizontal distance between the labels */
<i> </i> margin-left: 52px;
<i> </i> padding-top: 2px;
<i> </i> }
<i> </i> .label-bottom:first-child {
<i> </i> /* amount the first label is shifted left */
<i> </i> margin-left: -20px;
<i> </i> }
<div id="forecast-container" class="hidden">
<div id="labels-left-container">
<div class="label-left">30&deg;N</div>
<div class="label-left">25&deg;N</div>
<div class="label-left">20&deg;N</div>
<div class="label-left">15&deg;N</div>
<div class="label-left">10&deg;N</div>
<div class="label-left">5&deg;N</div>
</div>
<div id="right-container">
<div id="img-container">
<img id="forecast-img">
</div>
<div id="labels-bottom-container">
<div class="label-bottom">115&deg;E</div>
<div class="label-bottom">120&deg;E</div>
<div class="label-bottom">125&deg;E</div>
<div class="label-bottom">130&deg;E</div>
<div class="label-bottom">135&deg;E</div>
<div class="label-bottom">140&deg;E</div>
</div>
</div>
<div id="colgrad-img-container">
<img id="colgrad-img">
</div>
</div>
</div> #img-container {
<i> </i> /* dimensions of the inner image
<i> </i> excluding white borders */
<i> </i> width: 460px;
<i> </i> height: 540px;
<i> </i> border: 2px solid black;
<i> </i> overflow: hidden;
<i> </i> box-sizing: border-box;
<i> </i> }
<i> </i> #forecast-img {
<i> </i> vertical-align: top;
<i> </i> /* dimensions of the complete image
<i> </i> including white borders */
<i> </i> width: 550px;
<i> </i> height: 600px;
<i> </i> /* size of the white border at the left */
<i> </i> margin-left: -45px;
<i> </i> /* size of the white border on top */
<i> </i> margin-top: -30px;
<i> </i> }
<i> </i> #forecast-container {
<i> </i> display: flex;
<i> </i> padding-top: 10px;
<i> </i> }
<i> </i> #forecast-container.hidden {
<i> </i> visibility: hidden;
<i> </i> }
<i> </i> #labels-left-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> .label-left {
<i> </i> text-align: right;
<i> </i> /* the vertical distance between the labels */
<i> </i> margin-top: 74px;
<i> </i> padding-left: 5px;
<i> </i> padding-right: 5px;
<i> </i> }
<i> </i> .label-left:first-child {
<i> </i> /* amount the first label is shifted upwards */
<i> </i> margin-top: -7px;
<i> </i> }
<i> </i> #right-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> #labels-bottom-container {
<i> </i> display: flex;
<i> </i> }
<i> </i> .label-bottom {
<i> </i> text-align: center;
<i> </i> /* the horizontal distance between the labels */
<i> </i> margin-left: 52px;
<i> </i> padding-top: 2px;
<i> </i> }
<i> </i> .label-bottom:first-child {
<i> </i> /* amount the first label is shifted left */
<i> </i> margin-left: -20px;
<i> </i> }
<i> </i> #colgrad-img-container {
<i> </i> width: 120px;
<i> </i> height: 740px;
<i> </i> margin-top: -7px;
<i> </i> transform: scale(0.747);
<i> </i> transform-origin: left top;
<i> </i> }
<i> </i> #colgrad-img {
<i> </i> width: 300px;
<i> </i> height: 900px;
<i> </i> margin-left: -125px;
<i> </i> margin-top: -80px;
<i> </i> } function loadForecast(url) {
$.getJSON(url, function (data) {
forecastdata = data;
$("#forecast-container").removeClass("hidden");
});
}<div id="forecast-container" class="hidden">class="hidden"The colgrad images sometimes gets a bit blurred[/quote]Scaling an image as it is done by the CSS will always result in a loss of quality. A solution might be to create the image in the dimensions that are finally needed but I don't know if this is possilble for you.
Say for example the output images I've been showing you is domain 1 (it covers the philippine area of responsibilty).I don't understand this yet. Are the regions the images are displaying different and need different labels?
My boss wants to add a domain 2 (it covers just the map of the philippines)
In the website I've already added a 2 radio buttons to select either d01 or d02. All the process remains the same. Just additional images.[/quote]
WIDTH:550 x HEIGHT:600I finally figured out the process in domain 2.[/quote]That's fine! Does this mean that everything is done or do you need further assistance?
<i>
</i> function getUrlAndLoad() {
var val = $("#select").val();
var colgradimg = $("#select option:selected").data("colgradimg");
$("#colgrad-img").attr("src", colgradimg);
switch (val) {
case "prate":
loadForecast("d01-prate.php");
break;
case "temp":
loadForecast("d01-temp.php");
break;
case "wind":
loadForecast("d01-wind.php");
break;
case "rh":
loadForecast("d01-rh.php");
break;
case "cc":
loadForecast("d01-cc.php");
break;
case "3HrAccum":
loadForecast("d01-3HrAccum.php");
break;
case "10mwind":
loadForecast("d01-10mwind.php");
break;
}
}
<i>
</i> <?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$images = glob("pyqgis-ops/3HrlyAccuRain/d01/*.png");
$forecastdata = [];
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
echo json_encode($forecastdata);
?>
<i>
</i> $images = glob("pyqgis-ops/3HrlyAccuRain/d02/*.png");
<i>
</i><h5>Domain: </h5>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" value="1" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="2">2
</label><br><br>
</form>
<i>
</i>function getUrlAndLoad() {
var val = $("#select").val();
var colgradimg = $("#select option:selected").data("colgradimg");
$("#colgrad-img").attr("src", colgradimg);
switch (val) {
case "prate":
loadForecast("d01-prate.php");
break;
case "temp":
loadForecast("d01-temp.php");
break;
case "wind":
loadForecast("d01-wind.php");
break;
case "rh":
loadForecast("d01-rh.php");
break;
case "cc":
loadForecast("d01-cc.php");
break;
case "3HrAccum":
loadForecast("d01-3HrAccum.php");
break;
case "10mwind":
loadForecast("d01-10mwind.php");
break;
}
}
function loadForecast(url, dmn) {
$.getJSON(url, {domain: dmn}, function (data) {
forecastdata = data;
$("#forecast-container").removeClass("hidden");
});
}
<i> </i> function getUrlAndLoad() {
<i> </i> var val = $("#select").val();
<i> </i> var colgradimg = $("#select option:selected").data("colgradimg");
<i> </i> $("#colgrad-img").attr("src", colgradimg);
<i> </i> var domain = $("input[name='optradio']:checked").val();
<i> </i> switch (val) {
<i> </i> case "prate":
<i> </i> loadForecast("prate.php", domain);
<i> </i> break;
<i> </i> case "temp":
<i> </i> loadForecast("temp.php", domain);
<i> </i> break;
<i> </i> case "wind":
<i> </i> loadForecast("wind.php", domain);
<i> </i> break;
<i> </i> // and so on
<i> </i> }
<i> </i> }and lastly since the image of the domain 2 is smaller the "box" is different. so will there be another "box" assigned for the domain 1 (w/c is already done by you). and another box for the domain 2.[/quote]I considered to create a second box either in the beginning but now I think it would be easier to use the same box and switch the dimensions by CSS.
<i>
</i><h5>Domain: </h5>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" value="1" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="2">2
</label><br><br>
</form>
function loadForecast(url, dmn) {
$.getJSON(url, {domain: dmn}, function (data) {
forecastdata = data;
$("#forecast-container").removeClass("hidden");
});
}
<i>
</i><?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$domain=$_GET('domain');
$images = glob("pyqgis-ops/PrecipRate/d01/*.png");
$forecastdata = [];
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
echo json_encode($forecastdata);
?>
$domain=$_GET('domain');
$images = glob("pyqgis-ops/PrecipRate/" . domain . "/*.png"); <form>
<label class="radio-inline">
<input type="radio" name="optradio" value="1" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="optradio" value="2">2
</label><br><br>
</form> <form>
<label class="radio-inline">
<input type="radio" name="optradio-domain" value="1" checked>1
</label>
<label class="radio-inline">
<input type="radio" name="optradio-domain" value="2">2
</label><br><br>
</form> function getUrlAndLoad() {
var val = $("#select").val();
var colgradimg = $("#select option:selected").data("colgradimg");
$("#colgrad-img").attr("src", colgradimg);
var domain = $("input[name='optradio-domain']:checked").val();
switch (val) {<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$domain = $_GET['domain'];
$path = $_GET['path'];
$completepath = "pyqgis-ops/" . $domain . "/" . $path . "/*.png";
$images = glob($completepath);
$forecastdata = [];
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
$result = preg_match('/-([^-]+)-([^-]+)-([^-]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
echo json_encode($forecastdata);
?> <div class="row" style="background-color: #f4f4f4;">
<i> </i> <div class="col-md-3">
<i> </i> <h1>Weather Maps (PyQGIS)</h1>
<i> </i> <span id="jsclock1"></span><br><br>
<i> </i> <h5>Products:</h5>
<i> </i> <select id="select">
<i> </i> <option selected disabled>Select a Forecast Parameter</option>
<i> </i> <option value="prate" data-colgradimg="images/1561968575-548979-prate.png">
<i> </i> Surface Precipitation Rate
<i> </i> </option>
<i> </i> <option value="3HrAccum" data-colgradimg="images/colgrad2.png">3-Hr Accumulated Precipitation</option>
<i> </i> <option value="temp" data-colgradimg="images/colgrad3.png">Surface Temperature</option>
<i> </i> <option value="wind">850mb Wind</option>
<i> </i> <option value="10mwind">10m Wind</option>
<i> </i> <option value="rh">Relative Humidity</option>
<i> </i> <option value="cc">Surface Cloud Cover</option>
<i> </i> </select><br><br>
<i> </i> <h5>Domain:</h5>
<i> </i> <form>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio-domain" value="d01" checked>1
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio-domain" value="d02">2
<i> </i> </label><br><br>
<i> </i> </form>
<i> </i> <h5>Animation Interval (hr):</h5>
<i> </i> <form>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="1" checked>1
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="3">3
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="6">6
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="12">12
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="24">24
<i> </i> </label><br><br>
<i> </i> <p>Duration: 144.0h</p>
<i> </i> </form><br>
<i> </i> </div>
<i> </i> <div class="col-md-6" style="padding: 25px;">
<i> </i> <form style="display: block; float: left;font-size: 20px;">
<i> </i> <p>Date Initialized: <span id="forecast-date"></span></p>
<i> </i> <p>UTC: <span id="forecast-utc"></span></p>
<i> </i> <p>Forecast Hour: <span id="forecast-hour"></span></p>
<i> </i> </form>
<i> </i> <form>
<i> </i> <button id="first-btn">First<<</button> <button id="next-btn">Next</button>
<i> </i> <button id="start-stop-btn">Stop</button>
<i> </i> <button id="prev-btn">Previous</button>
<i> </i> <button id="last-btn">Last>></button>
<i> </i> </form>
var basicdata = {
"prate": {
"path": "3HrlyAccuRain",
"colgradimg": "1561968575-548979-prate.png"
},
"temp": {
"path": "path-for-temp",
"colgradimg": "colgrad2.png"
}
}
var theimg = document.getElementById('forecast-img'),
thedate = document.getElementById('forecast-date'),
theUTC = document.getElementById('forecast-utc'),
thehour = document.getElementById('forecast-hour');
var idx = 0, step = 1, stopped = false;
var forecastdata = [];
<i> </i> setInterval(getUrlAndLoad, 60000);
<i> </i> setInterval(function () {
<i> </i> console.log(idx, step);
<i> </i> if (forecastdata.length > 0 && !stopped) {
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }
<i> </i> }, 500);
<i> </i> function getUrlAndLoad() {
<i> </i> var val = $("#select").val();
<i> </i> var colgradimg = "images/" + basicdata[val].colgradimg;
<i> </i> $("#colgrad-img").attr("src", colgradimg);
<i> </i> var domain = $("input[name='optradio-domain']:checked").val();
<i> </i> $.getJSON("getforecast.php",
<i> </i> { path: basicdata[val].path, domain: domain },
<i> </i> function (data) {
<i> </i> forecastdata = data;
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<i> </i> $("#select").on('change', getUrlAndLoad);
<i> </i> $("input[name='optradio-domain']").on("change", getUrlAndLoad);
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
<i> </i> $("#start-stop-btn").on("click", function (event) {
<i> </i> event.preventDefault();
<i> </i> if (!stopped) {
<i> </i> stopped = true;
<i> </i> $(this).text("Start");
<i> </i> } else {
<i> </i> stopped = false;
<i> </i> $(this).text("Stop");
<i> </i> }
<i> </i> });
<i> </i> $("#first-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#last-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#next-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#prev-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx -= step;
<i> </i> if (idx < 0) idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> }); var basicdata = {
"prate": {
"path": "3HrlyAccuRain",
"colgradimg": "1561968575-548979-prate.png"
},
"temp": {
"path": "path-for-temp",
"colgradimg": "colgrad2.png"
}
} var basicdata = {
<i> </i> "prate": {
<i> </i> "path": "3HrlyAccuRain",
<i> </i> "colgradimg": "1561968575-548979-prate.png"
<i> </i> },
<i> </i> "temp": {
<i> </i> "path": "path-for-temp",
<i> </i> "colgradimg": "colgrad2.png"
<i> </i> }
<i> </i> }"pyqgis-ops/3HrlyAccuRain/d02/*.png"3HrlyAccuRain</C> is inserted based on the field "path" in the object above.<br/>
<C>d02</C> is the value of the select for the domains.
When writing this I noticed that I mixed up domain and path in my configuration. When the domain is placed below the PHP has to be changed like this:<br/>
<C>$completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png";`<i>
</i>Uncaught TypeError: Cannot read property 'colgradimg' of undefined
at HTMLSelectElement.getUrlAndLoad (gis.html:218)
at HTMLSelectElement.dispatch (jquery.js:3)
at HTMLSelectElement.q.handle (jquery.js:3)
<i>
</i>Uncaught TypeError: Cannot read property 'colgradimg' of undefined
at getUrlAndLoad (gis.html:218)
<i>
</i>var colgradimg = "img/" + basicdata[val].colgradimg;
<i>
</i><?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$domain = $_GET['domain'];
$path = $_GET['path'];
$completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png";
$images = glob($completepath);
$forecastdata = [];
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
echo json_encode($forecastdata);
?>
<i>
</i><script>
var basicdata = {
"prate": {
"pyqgis-ops/PrecipRate/d01/*.png": "prate",
"colgradimg": "prate.png"
},
"temp": {
"ppyqgis-ops/PrecipRate/d01/*.png": "temp",
"colgradimg": "temp.png"
}
}
var theimg = document.getElementById('forecast-img'),
thedate = document.getElementById('forecast-date'),
theUTC = document.getElementById('forecast-utc'),
thehour = document.getElementById('forecast-hour');
var idx = 0, step = 1, stopped = false;
var forecastdata = [];
<i> </i> setInterval(getUrlAndLoad, 60000);
<i> </i> setInterval(function () {
<i> </i> console.log(idx, step);
<i> </i> if (forecastdata.length > 0 && !stopped) {
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }
<i> </i> }, 500);
<i> </i> //function loadForecast(url, dmn) {
<i> </i> //$.getJSON(url, {domain: dmn}, function (data) {
<i> </i> // forecastdata = data;
<i> </i> // $("#forecast-container").removeClass("hidden");
<i> </i> // });
<i> </i> //}
<i> </i> function getUrlAndLoad() {
<i> </i> var val = $("#select").val();
<i> </i> var colgradimg = "img/" + basicdata[val].colgradimg;
<i> </i> $("#colgrad-img").attr("src", colgradimg);
<i> </i> var domain = $("input[name='optradio-domain']:checked").val();
<i> </i> $.getJSON("d01-prate.php",
<i> </i> { path: basicdata[val].path, domain: domain },
<i> </i> function (data) {
<i> </i> forecastdata = data;
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<i> </i>
<i> </i> $("#select").on('change', getUrlAndLoad);
<i> </i> $("input[name='optradio-domain']").on("change", getUrlAndLoad);
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
var basicdata = {
"prate": {
"path": "PrecipRate",
"colgradimg": "prate.png"
},
"3HrAccum": {
"path": "3HrlyAccuRain",
"colgradimg": "3HrlyAccuRain.png"
},
"temp": {
"path": "Temperature",
"colgradimg": "temp.png"
}
}$completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png"; var val = $("#select").val();
var colgradimg = "images/" + basicdata[val].colgradimg;>@Sempervivum#1605822 $completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png";
<i>
</i>gis.html:285 Uncaught TypeError: Cannot read property 'img' of undefined
at HTMLButtonElement.<anonymous> (gis.html:285)
at HTMLButtonElement.dispatch (jquery.js:3)
at HTMLButtonElement.q.handle (jquery.js:3)
(anonymous) @ gis.html:285
dispatch @ jquery.js:3
q.handle @ jquery.js:3
gis.html:297 Uncaught TypeError: Cannot read property 'img' of undefined
at HTMLButtonElement.<anonymous> (gis.html:297)
at HTMLButtonElement.dispatch (jquery.js:3)
at HTMLButtonElement.q.handle (jquery.js:3)
(anonymous) @ gis.html:297
dispatch @ jquery.js:3
q.handle @ jquery.js:3
gis.html:309 Uncaught TypeError: Cannot read property 'img' of undefined
at HTMLButtonElement.<anonymous> (gis.html:309)
at HTMLButtonElement.dispatch (jquery.js:3)
at HTMLButtonElement.q.handle (jquery.js:3)
(anonymous) @ gis.html:309
dispatch @ jquery.js:3
q.handle @ jquery.js:3
gis.html:274 Uncaught TypeError: Cannot read property 'img' of undefined
at HTMLButtonElement.<anonymous> (gis.html:274)
at HTMLButtonElement.dispatch (jquery.js:3)
at HTMLButtonElement.q.handle (jquery.js:3)
(anonymous) @ gis.html:274
dispatch @ jquery.js:3
q.handle @ jquery.js:3
gis.html:285 Uncaught TypeError: Cannot read property 'img' of undefined
at HTMLButtonElement.<anonymous> (gis.html:285)
at HTMLButtonElement.dispatch (jquery.js:3)
at HTMLButtonElement.q.handle (jquery.js:3)
<i>
</i>gis.html:285
$("#first-btn").on("click", function() {
event.preventDefault();
stopped = true;
$("#start-stop-btn").text("Start");
idx = 0;
**theimg.src = forecastdata[idx].img;**
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
});
<i> </i> $("#last-btn").on("click", function() {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = forecastdata.length - 1;
<i> </i> **theimg.src = forecastdata[idx].img;**
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#next-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> **theimg.src = forecastdata[idx].img;**
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#prev-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx -= step;
<i> </i> if (idx < 0) idx = forecastdata.length - 1;
<i> </i> **theimg.src = forecastdata[idx].img;**
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
function getUrlAndLoad() {
var val = $("#select").val();
var colgradimg = "img/" + basicdata[val].colgradimg;
$("#colgrad-img").attr("src", colgradimg);
var domain = $("input[name='optradio-domain']:checked").val();
console.log(basicdata[val].path, domain);
$.getJSON("d01-prate.php",
{ path: basicdata[val].path, domain: domain },
function (data) {
console.log(data);
forecastdata = data;
$("#forecast-container").removeClass("hidden");
});
}<i>
</i>function getUrlAndLoad() {
var val = $("#select").val();
var colgradimg = "img/" + basicdata[val].colgradimg;
$("#colgrad-img").attr("src", colgradimg);
var domain = $("input[name='optradio-domain']:checked").val();
console.log(basicdata[val].path, domain);
$.getJSON("d01-prate.php",
{ path: basicdata[val].path, domain: domain },
function (data) {
console.log(data);
forecastdata = data;
$("#forecast-container").removeClass("hidden");
});
}
<i>
</i> var basicdata = {
"prate": {
"path": "prate",
"colgradimg": "colgrad-img/prate.png"
},
"temp": {
"path": "temp",
"colgradimg": "colgrad-img/temp.png"
},
"wind": {
"path": "wind",
"colgradimg": "colgrad-img/wind.png"
},
"3HrAccum": {
"path": "3HrAccum",
"colgradimg": "colgrad-img/3HrlyAccu.png"
},
"10mwind": {
"path": "10mwind",
"colgradimg": "colgrad-img/wind10.png"
},
"rh": {
"path": "rh",
"colgradimg": "colgrad-img/rh.png"
},
"cc": {
"path": "cc",
"colgradimg": "colgrad-img/cc.png"
}
}
<i>
</i>var basicdata = {
"prate": {
"path": "PrecipRate",
"colgradimg": "colgrad-img/prate.png"
},
"temp": {
"path": "Temperature",
"colgradimg": "colgrad-img/temp.png"
},
"wind": {
"path": "Wind850mb",
"colgradimg": "colgrad-img/wind.png"
},
"3HrAccum": {
"path": "3HrlyAccuRain",
"colgradimg": "colgrad-img/3HrlyAccu.png"
},
"10mwind": {
"path": "10mwind",
"colgradimg": "colgrad-img/wind10.png"
},
"rh": {
"path": "RelativeHumidity",
"colgradimg": "colgrad-img/rh.png"
},
"cc": {
"path": "CloudCover",
"colgradimg": "colgrad-img/cc.png"
}
}
<i>
</i><?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$domain = $_GET['domain'];
$path = $_GET['path'];
$completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png";
$images = glob($completepath);
$forecastdata = [];
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
echo json_encode($forecastdata);
?>
<i>
</i> <script>
var basicdata = {
"prate": {
"path": "PrecipRate",
"colgradimg": "colgrad-img/prate.png"
},
"temp": {
"path": "Temperature",
"colgradimg": "colgrad-img/temp.png"
},
"wind": {
"path": "Wind850mb",
"colgradimg": "colgrad-img/wind.png"
},
"3HrAccum": {
"path": "3HrlyAccuRain",
"colgradimg": "colgrad-img/3HrlyAccu.png"
},
"10mwind": {
"path": "10mwind",
"colgradimg": "colgrad-img/wind10.png"
},
"rh": {
"path": "RelativeHumidity",
"colgradimg": "colgrad-img/rh.png"
},
"cc": {
"path": "CloudCover",
"colgradimg": "colgrad-img/cc.png"
}
}
var theimg = document.getElementById('forecast-img'),
thedate = document.getElementById('forecast-date'),
theUTC = document.getElementById('forecast-utc'),
thehour = document.getElementById('forecast-hour');
var idx = 0, step = 1, stopped = false;
var forecastdata = [];
<i> </i> setInterval(getUrlAndLoad, 60000);
<i> </i> setInterval(function () {
<i> </i> console.log(idx, step);
<i> </i> if (forecastdata.length > 0 && !stopped) {
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }
<i> </i> }, 500);
<i> </i> function loadForecast(url, dmn) {
<i> </i> $.getJSON(url, {domain: dmn}, function (data) {
<i> </i> forecastdata = data;
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<i> </i> function getUrlAndLoad() {
<i> </i> var val = $("#select").val();
<i> </i> var colgradimg = "img/" + basicdata[val].colgradimg;
<i> </i> $("#colgrad-img").attr("src", colgradimg);
<i> </i> var domain = $("input[name='optradio-domain']:checked").val();
<i> </i> console.log(basicdata[val].path, domain);
<i> </i> $.getJSON("d01-prate.php",
<i> </i> { path: basicdata[val].path, domain: domain },
<i> </i> function (data) {
<i> </i> console.log(data);
<i> </i> forecastdata = data;
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<i> </i>
<i> </i> $("#select").on('change', getUrlAndLoad);
<i> </i> $("input[name='optradio-domain']").on("change", getUrlAndLoad);
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
<i> </i> $("#start-stop-btn").on("click", function (event) {
<i> </i> event.preventDefault();
<i> </i> if (!stopped) {
<i> </i> stopped = true;
<i> </i> $(this).text("Start");
<i> </i> } else {
<i> </i> stopped = false;
<i> </i> $(this).text("Stop");
<i> </i> }
<i> </i> });
<i> </i> $("#first-btn").on("click", function() {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#last-btn").on("click", function() {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#next-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> $("#prev-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx -= step;
<i> </i> if (idx < 0) idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> </script>
<i>
</i><?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$domain = $_GET['domain'];
$path = $_GET['path'];
$completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png";
$images = glob ($completepath);
$forecastdata = [];
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
echo json_encode($forecastdata);
?>
var basicdata = {
// "prate" is the ID of the forecast or value in the select
"prate": {
// "path" is the key, don't change it
// "PrecipRate" is the value, one level in the complete path
// of the files
// This is the complete path:
// pyqgis-ops/3HrlyAccuRain/d02/*.png
// +------------
// |
// the path to be entered here
"path": "PrecipRate",
// the color gradient image at the right
"colgradimg": "colgrad-img/prate.png"
},
"temp": {
"path": "Temperature",
"colgradimg": "colgrad-img/temp.png"
},
"wind": {
"path": "Wind850mb",
"colgradimg": "colgrad-img/wind.png"
},
"3HrAccum": {
"path": "3HrlyAccuRain",
"colgradimg": "colgrad-img/3HrlyAccu.png"
},
"10mwind": {
"path": "10mwind",
"colgradimg": "colgrad-img/wind10.png"
},
"rh": {
"path": "RelativeHumidity",
"colgradimg": "colgrad-img/rh.png"
},
"cc": {
"path": "CloudCover",
"colgradimg": "colgrad-img/cc.png"
}
}
// Prepare some DOM elements
var theimg = document.getElementById('forecast-img'),
thedate = document.getElementById('forecast-date'),
theUTC = document.getElementById('forecast-utc'),
thehour = document.getElementById('forecast-hour');
// idx is the index of the image that is currently display
// step is the amount the index is increased in each cycle
// stopped indicates if the animation is running or stopped
var idx = 0, step = 1, stopped = false;
// the list of images, in the beginning it is empty
var forecastdata = [];
// update list of images every 60 seconds
setInterval(getUrlAndLoad, 60000);
// timer that repeats the function every 500 ms
setInterval(function () {
console.log(idx, step);
// change image only
// 1. if forecastdata is not empty
// 2. if the animation is not stopped by the corresponding button
if (forecastdata.length > 0 && !stopped) {
// display image
theimg.src = forecastdata[idx].img;
// display additional information date, utc, forecasthour
// in the corresponding DOM elements
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
// increase index by step so that in the next cycle
// the next image will be displayed
idx += step;
// if the end of the list of images is exceeded:
// start from the beginning
if (idx >= forecastdata.length) idx = 0;
}
}, 500);
// currently obsolete
function loadForecast(url, dmn) {
$.getJSON(url, { domain: dmn }, function (data) {
forecastdata = data;
$("#forecast-container").removeClass("hidden");
});
}
// this function is called everytimes when any parameter
// (step, domain, type of forecast) is changed
function getUrlAndLoad() {
// get value of select
// it contains the ID of the forecast that has been selected
var val = $("#select").val();
// get path of colgrad image and display it
// in the corresponding DOM element
var colgradimg = "img/" + basicdata[val].colgradimg;
$("#colgrad-img").attr("src", colgradimg);
// get domain
// it is the value of the radio button that is currently selected
var domain = $("input[name='optradio-domain']:checked").val();
console.log(basicdata[val].path, domain);
// read list of images by executing the PHP script
$.getJSON("d01-prate.php",
// object containing the URL parameters that will
// be handed over to the PHP script
{ path: basicdata[val].path, domain: domain },
// this funktion is called when the PHP script has been
// executed successfully
function (data) {
// the parameter data contains the list of images
console.log(data);
// transfer the list to the corresponding variable
forecastdata = data;
// make the container that keeps the forecast visible
$("#forecast-container").removeClass("hidden");
});
}
// add eventhandler to the select
// all necessary actions will be done by the function getUrlAndLoad
$("#select").on('change', getUrlAndLoad);
// add eventhandler to the radiobuttons for the domain
// all necessary actions will be done by the function getUrlAndLoad
$("input[name='optradio-domain']").on("change", getUrlAndLoad);
// add eventhandler to the radiobuttons for the step or speed
// of the animation
$("input[name='optradio']").on("change", function () {
step = parseInt($("input[name='optradio']:checked").val());
idx = 0;
});
// add eventhandler to the start/stop button
$("#start-stop-btn").on("click", function (event) {
event.preventDefault();
// toggle variable "stopped" und text of the button
// the variable "stopped" is used in the cyclical callback
// of the timer
if (!stopped) {
stopped = true;
$(this).text("Start");
} else {
stopped = false;
$(this).text("Stop");
}
});
// add eventhandler to the "first" button
$("#first-btn").on("click", function () {
event.preventDefault();
// stop animation so that the user can view
// the first forecast
stopped = true;
$("#start-stop-btn").text("Start");
// set index to 0
// when the animation is started again it will start
// at this index
idx = 0;
// update image and additional fields
theimg.src = forecastdata[idx].img;
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
});
// add eventhandler to the "first" button
// similar to the "first" button but
// index is set to the last element in the list of images
$("#last-btn").on("click", function () {
event.preventDefault();
stopped = true;
$("#start-stop-btn").text("Start");
idx = forecastdata.length - 1;
theimg.src = forecastdata[idx].img;
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
});
// add eventhandler to the "first" button
// similar to the "first" button but
// index is set to the next element in the list of images
$("#next-btn").on("click", function () {
event.preventDefault();
stopped = true;
$("#start-stop-btn").text("Start");
idx += step;
// take into account overflow at the end
if (idx >= forecastdata.length) idx = 0;
theimg.src = forecastdata[idx].img;
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
});
// add eventhandler to the "first" button
// similar to the "first" button but
// index is set to the previous element in the list of images
$("#prev-btn").on("click", function () {
event.preventDefault();
stopped = true;
$("#start-stop-btn").text("Start");
idx -= step;
// take into account overflow at the beginning
if (idx < 0) idx = forecastdata.length - 1;
theimg.src = forecastdata[idx].img;
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
});
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// get domain and path from GET parameters
$domain = $_GET['domain'];
$path = $_GET['path'];
// create the complete path from these values
$completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png";
// read the list of images based on the complete path
$images = glob($completepath);
$forecastdata = [];
// loop over the images
// $step is obsolete as it is set to 1 and not changed later
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
// get additional parameters from the path of the current image
$result = preg_match('/-([^-]+)-([^-]+)-([^-]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
// add image and additional parameters to the array
// that will be output
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
// encode array in JSON format and output it
echo json_encode($forecastdata);
?>but the d02 box needs some adjustment and that is it.[/quote]
// this function is called everytimes when any parameter
// (step, domain, type of forecast) is changed
function getUrlAndLoad() {
// get value of select
// it contains the ID of the forecast that has been selected
var val = $("#select").val();
// get path of colgrad image and display it
// in the corresponding DOM element
var colgradimg = "img/" + basicdata[val].colgradimg;
$("#colgrad-img").attr("src", colgradimg);
// get domain
// it is the value of the radio button that is currently selected
var domain = $("input[name='optradio-domain']:checked").val();
// radio buttons for the domains
<i> </i> // *** This section was added
<i> </i> thedomains = $("input[name='optradio-domain']");
<i> </i> // container for the forecast
<i> </i> thecontainer = $("#forecast-container");
<i> </i> // remove all domain classes from the container
<i> </i> thedomains.each(function (idx, ele) {
<i> </i> thecontainer.removeClass($(this).val());
<i> </i> });
<i> </i> // add current domain as a class to the container
<i> </i> thecontainer.addClass(domain);
<i> </i> // *** end of added section
<i> </i> // read list of images by executing the PHP script
<i> </i> $.getJSON("getforecast.php",
<i> </i> // object containing the URL parameters that will
<i> </i> // be handed over to the PHP script
<i> </i> { path: basicdata[val].path, domain: domain },
<i> </i> // this funktion is called when the PHP script has been
<i> </i> // executed successfully
<i> </i> function (data) {
<i> </i> // the parameter data contains the list of images
<i> </i> console.log(data);
<i> </i> // transfer the list to the corresponding variable
<i> </i> forecastdata = data;
<i> </i> // make the container that keeps the forecast visible
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<div id="forecast-container" class="hidden">
<div class="labels-left-container d01">
<div class="label-left">30&deg;N</div>
<div class="label-left">25&deg;N</div>
<div class="label-left">20&deg;N</div>
<div class="label-left">15&deg;N</div>
<div class="label-left">10&deg;N</div>
<div class="label-left">5&deg;N</div>
</div>
<div class="labels-left-container d02">
<div class="label-left">25&deg;N</div>
<div class="label-left">20&deg;N</div>
<div class="label-left">15&deg;N</div>
<div class="label-left">10&deg;N</div>
</div>
<div id="right-container">
<div id="img-container">
<img id="forecast-img">
</div>
<div class="labels-bottom-container d01">
<div class="label-bottom">115&deg;E</div>
<div class="label-bottom">120&deg;E</div>
<div class="label-bottom">125&deg;E</div>
<div class="label-bottom">130&deg;E</div>
<div class="label-bottom">135&deg;E</div>
<div class="label-bottom">140&deg;E</div>
</div>
<div class="labels-bottom-container d02">
<div class="label-bottom">115&deg;E</div>
<div class="label-bottom">120&deg;E</div>
<div class="label-bottom">125&deg;E</div>
<div class="label-bottom">130&deg;E</div>
<div class="label-bottom">135&deg;E</div>
<div class="label-bottom">140&deg;E</div>
</div>
</div>
<div id="colgrad-img-container">
<img id="colgrad-img">
</div>
</div>
<style>
#forecast-container.hidden {
visibility: hidden;
}
<i> </i> #forecast-container {
<i> </i> display: flex;
<i> </i> padding-top: 10px;
<i> </i> }
<i> </i> #img-container {
<i> </i> border: 2px solid black;
<i> </i> overflow: hidden;
<i> </i> box-sizing: border-box;
<i> </i> }
<i> </i> #forecast-container.d01 #img-container {
<i> </i> /* dimensions of the inner image
<i> </i> excluding white borders */
<i> </i> width: 460px;
<i> </i> height: 540px;
<i> </i> }
<i> </i> #forecast-container.d02 #img-container {
<i> </i> /* dimensions of the inner image
<i> </i> excluding white borders */
<i> </i> width: 330px;
<i> </i> height: 540px;
<i> </i> }
<i> </i> #forecast-img {
<i> </i> vertical-align: top;
<i> </i> /* dimensions of the complete image
<i> </i> including white borders */
<i> </i> width: 550px;
<i> </i> height: 600px;
<i> </i> }
<i> </i> #forecast-container.d01 #forecast-img {
<i> </i> /* size of the white border at the left */
<i> </i> margin-left: -45px;
<i> </i> /* size of the white border on top */
<i> </i> margin-top: -30px;
<i> </i> }
<i> </i> #forecast-container.d02 #forecast-img {
<i> </i> /* size of the white border at the left */
<i> </i> margin-left: -110px;
<i> </i> /* size of the white border on top */
<i> </i> margin-top: -30px;
<i> </i> }
<i> </i> .labels-left-container {
<i> </i> display: none;
<i> </i> }
<i> </i> #forecast-container.d01 .labels-left-container.d01 {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> #forecast-container.d02 .labels-left-container.d02 {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> .label-left {
<i> </i> text-align: right;
<i> </i> padding-left: 5px;
<i> </i> padding-right: 5px;
<i> </i> }
<i> </i> .labels-left-container.d01 .label-left {
<i> </i> /* the vertical distance between the labels */
<i> </i> margin-top: 74px;
<i> </i> }
<i> </i> .labels-left-container.d01 .label-left:first-child {
<i> </i> /* the amount the first label is shifted upwards */
<i> </i> margin-top: -7px;
<i> </i> }
<i> </i> .labels-left-container {
<i> </i> display: none;
<i> </i> }
<i> </i> .labels-bottom-container {
<i> </i> display: none;
<i> </i> }
<i> </i> #forecast-container.d01 .labels-bottom-container.d01 {
<i> </i> display: flex;
<i> </i> flex-direction: row;
<i> </i> }
<i> </i> #forecast-container.d02 .labels-bottom-container.d02 {
<i> </i> display: flex;
<i> </i> flex-direction: row;
<i> </i> }
<i> </i> .label-bottom {
<i> </i> text-align: center;
<i> </i> padding-top: 2px;
<i> </i> }
<i> </i> .labels-bottom-container.d01 .label-bottom {
<i> </i> /* the horizontal distance between the labels */
<i> </i> margin-left: 52px;
<i> </i> }
<i> </i> .labels-bottom-container.d01 .label-bottom:first-child {
<i> </i> /* the amount the first label is shifted left */
<i> </i> margin-left: -20px;
<i> </i> }
<i> </i> #right-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> #labels-bottom-container {
<i> </i> display: flex;
<i> </i> }
<i> </i> #colgrad-img-container {
<i> </i> width: 120px;
<i> </i> height: 740px;
<i> </i> margin-top: -7px;
<i> </i> transform: scale(0.747);
<i> </i> transform-origin: left top;
<i> </i> }
<i> </i> #colgrad-img {
<i> </i> width: 300px;
<i> </i> height: 900px;
<i> </i> margin-left: -125px;
<i> </i> margin-top: -80px;
<i> </i> }
<i> </i> </style>
.labels-left-container {
display: none;
}
<i> </i> .labels-bottom-container {
<i> </i> display: none;
<i> </i> }
My bad I changed the id to class.[/quote]Does this mean it works now?
<i>
</i> <div id="controls-d01" class="hidden"> <br/>
<button id="first-btn">First<<</button>
<button id="last-btn">Last>></button>
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="start-stop-btn">Stop</button>
</div>
<div id="controls-d02" class="hidden"> <br/>
<button id="first-btn">First<<</button>
<button id="last-btn">Last>></button>
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="start-stop-btn">Stop</button>
</div>
<i>
</i>#controls-d01.hidden {
visibility: hidden;
}
#controls-d01 {
**I'm stuck in this part
}
#controls-d02.hidden {
visibility: hidden;
}
#controls-d02 {
**I'm stuck in this part
}
<i>
</i> <div id="controls-d01" class="hidden"> <br/>
<button id="first-btn">First<<</button>
<button id="last-btn">Last>></button>
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="start-stop-btn">Stop</button>
</div>
<div id="controls-d02" class="hidden"> <br/>
<button id="first-btn">First<<</button>
<button id="last-btn">Last>></button>
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="start-stop-btn">Stop</button>
</div>
<i>
</i>#controls-d01.hidden {
visibility: hidden;
}
#controls-d01 {
**I'm stuck in this part
}
#controls-d02.hidden {
visibility: hidden;
}
#controls-d02 {
**I'm stuck in this part
}
<i>
</i><form style="padding-right: 450px; padding-bottom: 20px;"> <br/>
<button id="first-btn">First<<</button>
<button id="last-btn">Last>></button>
<button id="prev-btn">Previous</button>
<button id="next-btn">Next</button>
<button id="start-stop-btn">Stop</button>
</form> <br/>
setInterval(function () {
console.log(idx, step);
<i>
</i> theimg.src = forecastdata[idx].img;
?ver=3.2.1?v=1.1 // add eventhandler to the select
// all necessary actions will be done by the function getUrlAndLoad
$("#select").on('change', function () {
getUrlAndLoad();
// reset idx
idx = 0;
});
<i>
</i>//add event handler to the #select
//all necessary actions will be done by the function getUrlAndLoad
$("#select").on('change', function () {
getUrlAndLoad();
// this resets the idx
idx = 0;
});
// add eventhandler to the radiobuttons for the domain
// all necessary actions will be done by the function getUrlAndLoad
$("input[name='optradio-domain']").on("change", function () {
getUrlAndLoad();
// reset idx
idx = 0;
});
>@Sempervivum#1605975 I created a rough demo where the controls are centered relative to the main image. Check if this meets your requirement. Details, e. g. margin/padding between controls and image can be adjusted later.
<div id="forecast-container" class="hidden">
<div class="labels-left-container d01">
<div class="label-left">30&deg;N</div>
<div class="label-left">25&deg;N</div>
<div class="label-left">20&deg;N</div>
<div class="label-left">15&deg;N</div>
<div class="label-left">10&deg;N</div>
<div class="label-left">5&deg;N</div>
</div>
<div class="labels-left-container d02">
<div class="label-left">25&deg;N</div>
<div class="label-left">20&deg;N</div>
<div class="label-left">15&deg;N</div>
<div class="label-left">10&deg;N</div>
</div>
<div id="right-container">
<div id="controls">
<button id="first-btn">First<<</button> <button id="next-btn">Next</button>
<button id="start-stop-btn">Stop</button>
<button id="prev-btn">Previous</button>
<button id="last-btn">Last>></button>
</div>
<div id="img-container">
<img id="forecast-img">
</div>
<div class="labels-bottom-container d01">
<div class="label-bottom">115&deg;E</div>
<div class="label-bottom">120&deg;E</div>
<div class="label-bottom">125&deg;E</div>
<div class="label-bottom">130&deg;E</div>
<div class="label-bottom">135&deg;E</div>
<div class="label-bottom">140&deg;E</div>
</div>
<div class="labels-bottom-container d02">
<div class="label-bottom">115&deg;E</div>
<div class="label-bottom">120&deg;E</div>
<div class="label-bottom">125&deg;E</div>
<div class="label-bottom">130&deg;E</div>
<div class="label-bottom">135&deg;E</div>
<div class="label-bottom">140&deg;E</div>
</div>
</div>
<div id="colgrad-img-container">
<img id="colgrad-img">
</div>
</div>
#forecast-container.hidden {
visibility: hidden;
}
<i> </i> #forecast-container {
<i> </i> display: flex;
<i> </i> padding-top: 10px;
<i> </i> }
<i> </i> #forecast-container #controls {
<i> </i> display: flex;
<i> </i> justify-content: center;
<i> </i> }
<i> </i> #forecast-container #forecast-lower {
<i> </i> display: flex;
<i> </i> justify-content: center;
<i> </i> }
<i> </i> #img-container {
<i> </i> border: 2px solid black;
<i> </i> overflow: hidden;
<i> </i> box-sizing: border-box;
<i> </i> }
<i> </i> #forecast-container.d01 #img-container {
<i> </i> /* dimensions of the inner image
<i> </i> excluding white borders */
<i> </i> width: 460px;
<i> </i> height: 540px;
<i> </i> }
<i> </i> #forecast-container.d02 #img-container {
<i> </i> /* dimensions of the inner image
<i> </i> excluding white borders */
<i> </i> width: 330px;
<i> </i> height: 540px;
<i> </i> }
<i> </i> #forecast-img {
<i> </i> vertical-align: top;
<i> </i> /* dimensions of the complete image
<i> </i> including white borders */
<i> </i> width: 550px;
<i> </i> height: 600px;
<i> </i> }
<i> </i> #forecast-container.d01 #forecast-img {
<i> </i> /* size of the white border at the left */
<i> </i> margin-left: -45px;
<i> </i> /* size of the white border on top */
<i> </i> margin-top: -30px;
<i> </i> }
<i> </i> #forecast-container.d02 #forecast-img {
<i> </i> /* size of the white border at the left */
<i> </i> margin-left: -110px;
<i> </i> /* size of the white border on top */
<i> </i> margin-top: -30px;
<i> </i> }
<i> </i> .labels-left-container {
<i> </i> display: none;
<i> </i> }
<i> </i> #forecast-container.d01 .labels-left-container.d01 {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> #forecast-container.d02 .labels-left-container.d02 {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> }
<i> </i> .label-left {
<i> </i> text-align: right;
<i> </i> padding-left: 5px;
<i> </i> padding-right: 5px;
<i> </i> }
<i> </i> .labels-left-container.d01 .label-left {
<i> </i> /* the vertical distance between the labels */
<i> </i> margin-top: 74px;
<i> </i> }
<i> </i> .labels-left-container.d01 .label-left:first-child {
<i> </i> /* the amount the first label is shifted upwards */
<i> </i> margin-top: 14px;
<i> </i> }
<i> </i> .labels-left-container {
<i> </i> display: none;
<i> </i> }
<i> </i> .labels-bottom-container {
<i> </i> display: none;
<i> </i> }
<i> </i> #forecast-container.d01 .labels-bottom-container.d01 {
<i> </i> display: flex;
<i> </i> flex-direction: row;
<i> </i> }
<i> </i> #forecast-container.d02 .labels-bottom-container.d02 {
<i> </i> display: flex;
<i> </i> flex-direction: row;
<i> </i> }
<i> </i> .label-bottom {
<i> </i> text-align: center;
<i> </i> padding-top: 2px;
<i> </i> }
<i> </i> .labels-bottom-container.d01 .label-bottom {
<i> </i> /* the horizontal distance between the labels */
<i> </i> margin-left: 52px;
<i> </i> }
<i> </i> .labels-bottom-container.d01 .label-bottom:first-child {
<i> </i> /* the amount the first label is shifted left */
<i> </i> margin-left: -20px;
<i> </i> }
<i> </i> #forecast-container.d01 #right-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> width: 460px;
<i> </i> }
<i> </i> #forecast-container.d02 #right-container {
<i> </i> display: flex;
<i> </i> flex-direction: column;
<i> </i> width: 330px;
<i> </i> }
<i> </i> #labels-bottom-container {
<i> </i> display: flex;
<i> </i> }
<i> </i> #colgrad-img-container {
<i> </i> width: 120px;
<i> </i> height: 740px;
<i> </i> margin-top: -7px;
<i> </i> transform: scale(0.747);
<i> </i> transform-origin: left top;
<i> </i> margin-top: 15px;
<i> </i> }
<i> </i> #colgrad-img {
<i> </i> width: 300px;
<i> </i> height: 900px;
<i> </i> margin-left: -125px;
<i> </i> margin-top: -80px;
<i> </i> }
<i>
</i>gis.html:275 Uncaught TypeError: Cannot read property 'colgradimg' of undefined
at getUrlAndLoad (gis.html:275)
getUrlAndLoad @ gis.html:275
setInterval (async)
(anonymous) @ gis.html:240
function getUrlAndLoad() {
// get value of select
// it contains the ID of the forecast that has been selected
var val = $("#select").val();
// get path of colgrad image and display it
// in the corresponding DOM element
var colgradimg = "img/" + basicdata[val].colgradimg; // <---
$("#colgrad-img").attr("src", colgradimg);
// timer that repeats the function every 500 ms
setInterval(function () {
console.log(idx, step);
// change image only
// 1. if forecastdata is not empty
// 2. if the animation is not stopped by the corresponding button
if (forecastdata.length > 0 && !stopped) {
if (forecastdata[idx]) {
// display image
theimg.src = forecastdata[idx].img;
} else {
// get new forecast data
getUrlAndLoad();
idx = 0;
}
// display additional information date, utc, forecasthour
// in the corresponding DOM elements
thedate.innerHTML = forecastdata[idx].date;
theUTC.innerHTML = forecastdata[idx].utc;
thehour.innerHTML = forecastdata[idx].forecasthour;
// increase index by step so that in the next cycle
// the next image will be displayed
idx += step;
// if the end of the list of images is exceeded:
// start from the beginning
if (idx >= forecastdata.length) idx = 0;
}
}, 500);
basicdata[val]</C><br/>
doesn't exist. <C>val`getUrlAndLoad()`<i>
</i>var datad01 = {
cropLeft: 50px,
cropRight: 40px,
cropTop: 30px,
cropBottom: 45px,
paddingLeft: 40px, // space for labels
paddingBottom: 40px, // space for labels
startVerticalLabelPos: 0px,
startVerticalLabelNumber: 120,
stepVerticalLabelPos: 50px,
stepVerticalLabelNumber: 10,
// the same for horizontal labels and grid lines
}var datad01 = {
cropLeft: 50px,
cropRight: 40px,
cropTop: 30px,
cropBottom: 45px,
paddingLeft: 40px, // space for labels
paddingBottom: 40px, // space for labels
startVerticalLabelPos: 0px,
startVerticalLabelNumber: 120,
startVerticalGridLine: 0px;
stepVerticalLabelPos: 50px,
stepVerticalLabelNumber: 10,
stepVerticalGridLine: 25px,
// the same for horizontal labels and grid lines
}<i>
</i> <div class="col-md-7"> <br/>
<div id="forecast-container" class="hidden">
<i> </i> <div class="labels-left-container d01" style="font-size: 13px;">
<i> </i> <div class="label-left">25&deg;N</div>
<i> </i> <div class="label-left">20&deg;N</div>
<i> </i> <div class="label-left">15&deg;N</div>
<i> </i> <div class="label-left">10&deg;N</div>
<i> </i> <div class="label-left">5&deg;N</div>
<i> </i> </div>
<i> </i> <div class="labels-left-container d02" style="font-size: 12px;">
<i> </i> <div class="label-left">20&deg;N</div>
<i> </i> <div class="label-left">18&deg;N</div>
<i> </i> <div class="label-left">16&deg;N</div>
<i> </i> <div class="label-left">14&deg;N</div>
<i> </i> <div class="label-left">12&deg;N</div>
<i> </i> <div class="label-left">10&deg;N</div>
<i> </i> <div class="label-left">8&deg;N</div>
<i> </i> <div class="label-left">6&deg;N</div>
<i> </i> </div>
<i> </i> <div id="right-container">
<i> </i> <div class="controls" style="padding-bottom: 5px;">
<i> </i> <button id="first-btn">First<<</button>
<i> </i> <button id="last-btn">Last>></button>
<i> </i> <button id="prev-btn">Previous</button>
<i> </i> <button id="next-btn">Next</button>
<i> </i> <button id="start-stop-btn">Stop</button>
<i> </i> </div>
<i> </i> <div id="img-container">
<i> </i> <img id="forecast-img" src="">
<i> </i> </div>
<i> </i> <div class="labels-bottom-container d01" style="font-size: 13px;">
<i> </i> <div class="label-bottom">115&deg;E</div>
<i> </i> <div class="label-bottom">120&deg;E</div>
<i> </i> <div class="label-bottom">125&deg;E</div>
<i> </i> <div class="label-bottom">130&deg;E</div>
<i> </i> <div class="label-bottom">135&deg;E</div>
<i> </i> </div>
<i> </i> <div class="labels-bottom-container d02" style="font-size: 12px;">
<i> </i> <div class="label-bottom">118&deg;E</div>
<i> </i> <div class="label-bottom">120&deg;E</div>
<i> </i> <div class="label-bottom">122&deg;E</div>
<i> </i> <div class="label-bottom">124&deg;E</div>
<i> </i> <div class="label-bottom">126&deg;E</div>
<i> </i> </div>
<i> </i> </div>
<i> </i> <div id="colgrad-img-container">
<i> </i> <img id="colgrad-img" src="">
<i> </i> </div>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wheather Forecast</title>
<i> </i><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<i> </i><script src="js/jcanvas.js"></script>
<i> </i><style>
<i> </i> body {
<i> </i> margin: 0;
<i> </i> }
<i> </i></style>
</head>
<body>
<canvas id="cv-forecast"></canvas>
<script>
var datad01 = {
cropLeft: 45,
cropRight: 43,
cropTop: 30,
cropBottom: 27,
paddingLeft: 60, // space for labels
paddingBottom: 20, // space for labels
startVerticalLabelPos: 0,
startVerticalLabelNumber: 30,
stepVerticalLabelPos: 100,
stepVerticalLabelNumber: 5,
startHorizontalGridLine: 0,
stepHorizontalGridLine: 100,
startHorizontalLabelPos: 60,
startHorizontalLabelNumber: 60,
stepHorizontalLabelPos: 200,
stepHorizontalLabelNumber: 10,
startVerticalGridLine: 0,
stepVerticalGridLine: 100,
}
var marginText = 5,
suffixVertical = '°N',
suffixHorizontal = '°E',
strokeWidthGrid = 1,
strokeWidthBorder = 2;
var cv = $("#cv-forecast");
var dataCv = datad01;
var forecastImg = new Image();
forecastImg.onload = createForecast;
forecastImg.src = 'pyqgis-ops/3HrlyAccuRain/d01/1566548258-141258-d01-rpn3hrlyaccum-postwrf-d01-20181118-0600-f00600.png';
function createForecast() {
function drawVerticalLabels() {
var x = dataCv.paddingLeft - dataCv.marginText;
for (var y = dataCv.startVerticalLabelPos,
nr = dataCv.startVerticalLabelNumber;
y < hCv - dataCv.paddingBottom;
y += dataCv.stepVerticalLabelPos, nr -= dataCv.stepVerticalLabelNumber) {
var text = nr + suffixVertical;
cv.drawText({
layer: true,
name: text,
x: 0, y: y,
fillStyle: '#36c', strokeWidth: 2,
text: text,
fromCenter: false
});
var wText = cv.measureText(text).width;
cv.setLayer(text, {
x: dataCv.paddingLeft - wText - marginText
});
}
}
function drawHorizontalLabels() {
var y = hCv - dataCv.paddingBottom + marginText;
for (var x = dataCv.startHorizontalLabelPos,
nr = dataCv.startHorizontalLabelNumber;
x < wCv;
x += dataCv.stepHorizontalLabelPos, nr += dataCv.stepHorizontalLabelNumber) {
var text = nr + suffixHorizontal;
cv.drawText({
layer: true,
name: text,
x: x, y: y,
fillStyle: '#36c', strokeWidth: 2,
text: text,
fromCenter: false
});
var wText = cv.measureText(text).width;
// cv.setLayer(text, { x: dataCv.paddingLeft - wText - marginText });
}
}
function drawHorizontalLines() {
var x1 = dataCv.paddingLeft, x2 = wCv;
for (var y = dataCv.startHorizontalGridLine - strokeWidthGrid / 2;
y < hCv - dataCv.paddingBottom;
y += dataCv.stepHorizontalGridLine) {
cv.drawLine({
layer: true,
strokeStyle: '#000', strokeWidth: strokeWidthGrid,
x1: x1, y1: y, x2: x2, y2: y,
fromCenter: false
});
}
}
function drawVerticalLines() {
var y1 = 0, y2 = hCv - dataCv.paddingBottom;
for (var x = dataCv.paddingLeft + dataCv.startVerticalGridLine - strokeWidthGrid / 2;
x < wCv;
x += dataCv.stepVerticalGridLine) {
cv.drawLine({
layer: true,
strokeStyle: '#000', strokeWidth: strokeWidthGrid,
x1: x, x2: x, y1: y1, y2: y2,
fromCenter: false
});
}
}
var wImg = this.width, hImg = this.height;
var wCv = wImg - dataCv.cropLeft - dataCv.cropRight + dataCv.paddingLeft,
hCv = hImg - dataCv.cropTop - dataCv.cropBottom + dataCv.paddingBottom;
cv.attr('width', wCv + 500);
cv.attr('height', hCv + 500);
cv.drawImage({
layer: true,
source: forecastImg,
x: dataCv.paddingLeft, y: 0,
sWidth: wImg - dataCv.cropRight - dataCv.cropLeft,
sHeight: hImg - dataCv.cropBottom - dataCv.cropTop,
sx: dataCv.cropLeft, sy: dataCv.cropTop,
fromCenter: false, cropFromCenter: false
}).drawRect({
layer: true,
strokeStyle: '#000', strokeWidth: strokeWidthBorder,
x: dataCv.paddingLeft, y: 0,
width: wImg - dataCv.cropRight - dataCv.cropLeft,
height: hImg - dataCv.cropBottom - dataCv.cropTop,
fromCenter: false
});
drawVerticalLabels();
drawHorizontalLabels();
drawVerticalLines();
drawHorizontalLines();
cv.drawLayers();
}
</script>
</body>
</html>Can I ask if its possible to reduce the grid lines inside the box?[/quote]Do you mean that the distance between the grid lines should be larger or that there should be less lines? This is possible, the paramter
stepVerticalLabelPos</C> defines the distance in pixels.
I didn't include the colgraph image in the canvas yet and I'm unsure if I shoud do. Pro: The current <C>basicdata` var datad01 = {
cropLeft: 45,
cropRight: 43,
cropTop: 30,
cropBottom: 27,
paddingLeft: 60, // space for labels
paddingBottom: 20, // space for labels
<i> </i> // start position of the vertical labels in pixels,
<i> </i> // i. e. the position of the first label
<i> </i> startVerticalLabelPos: 0,
<i> </i> // start for the vertical label numbers
<i> </i> startVerticalLabelNumber: 30,
<i> </i> // step for the position of the vertical labels in pixels
<i> </i> // i. e. the distance between the labels
<i> </i> stepVerticalLabelPos: 100,
<i> </i> // step for the vertical label numbers
<i> </i> stepVerticalLabelNumber: 5,
<i> </i> // start position for the horizontal grid lines in pixels,
<i> </i> // i. e. the position of the first line
<i> </i> startHorizontalGridLine: 0,
<i> </i> // step for the horizontal grid lines,
<i> </i> // i. e. the distance between the horizontal lines
<i> </i> stepHorizontalGridLine: 100,
<i> </i> startHorizontalLabelPos: 60,
<i> </i> // horizontal labels at the bottom and vertical grid lines
<i> </i> // are configured like the ones above
<i> </i> startHorizontalLabelNumber: 60,
<i> </i> stepHorizontalLabelPos: 200,
<i> </i> stepHorizontalLabelNumber: 10,
<i> </i> startVerticalGridLine: 0,
<i> </i> stepVerticalGridLine: 100,
<i> </i> }
var datad01 = {
cropLeft: 45,
cropRight: 43,
cropTop: 30,
cropBottom: 27,
paddingTop: 15,
paddingLeft: 60, // space for labels
paddingBottom: 20, // space for labels
<i> </i>// start position of the vertical labels in pixels,
<i> </i>// i. e. the position of the first label
<i> </i>startVerticalLabelPos: 0,
<i> </i>// start for the vertical label numbers
<i> </i>startVerticalLabelNumber: 30,
<i> </i>// step for the position of the vertical labels in pixels
<i> </i>// i. e. the distance between the labels
<i> </i>stepVerticalLabelPos: 100,
<i> </i>// step for the vertical label numbers
<i> </i>stepVerticalLabelNumber: 5,
<i> </i>// start position for the horizontal grid lines in pixels,
<i> </i>// i. e. the position of the first line
<i> </i>startHorizontalGridLine: 0,
<i> </i>// step for the horizontal grid lines,
<i> </i>// i. e. the distance between the horizontal lines
<i> </i>stepHorizontalGridLine: 100,
<i> </i>startHorizontalLabelPos: 60,
<i> </i>// horizontal labels at the bottom and vertical grid lines
<i> </i>// are configured like the ones above
<i> </i>startHorizontalLabelNumber: 60,
<i> </i>stepHorizontalLabelPos: 200,
<i> </i>stepHorizontalLabelNumber: 10,
<i> </i>startVerticalGridLine: 0,
<i> </i>stepVerticalGridLine: 100,
}
var datad02 = {
cropLeft: 45,
cropRight: 43,
cropTop: 30,
cropBottom: 27,
paddingTop: 15,
paddingLeft: 60, // space for labels
paddingBottom: 20, // space for labels
<i> </i>// start position of the vertical labels in pixels,
<i> </i>// i. e. the position of the first label
<i> </i>startVerticalLabelPos: 0,
<i> </i>// start for the vertical label numbers
<i> </i>startVerticalLabelNumber: 30,
<i> </i>// step for the position of the vertical labels in pixels
<i> </i>// i. e. the distance between the labels
<i> </i>stepVerticalLabelPos: 100,
<i> </i>// step for the vertical label numbers
<i> </i>stepVerticalLabelNumber: 5,
<i> </i>// start position for the horizontal grid lines in pixels,
<i> </i>// i. e. the position of the first line
<i> </i>startHorizontalGridLine: 0,
<i> </i>// step for the horizontal grid lines,
<i> </i>// i. e. the distance between the horizontal lines
<i> </i>stepHorizontalGridLine: 100,
<i> </i>startHorizontalLabelPos: 60,
<i> </i>// horizontal labels at the bottom and vertical grid lines
<i> </i>// are configured like the ones above
<i> </i>startHorizontalLabelNumber: 60,
<i> </i>stepHorizontalLabelPos: 200,
<i> </i>stepHorizontalLabelNumber: 10,
<i> </i>startVerticalGridLine: 0,
<i> </i>stepVerticalGridLine: 100,
}
var marginText = 5,
suffixVertical = '°N',
suffixHorizontal = '°E',
strokeWidthGrid = 1,
strokeWidthBorder = 2;
function drawForecast(imgpath, domain) {
var cv = $("#cv-forecast");
var forecastImg = new Image();
if (domain == 'd01') var dataCv = datad01;
else var dataCv = datad02;
var dataCv = datad01;
forecastImg.onload = createForecast;
forecastImg.src = imgpath;
function createForecast() {
function drawVerticalLabels() {
var x = dataCv.paddingLeft - dataCv.marginText;
for (var y = dataCv.paddingTop + dataCv.startVerticalLabelPos,
nr = dataCv.startVerticalLabelNumber;
y < hCv - dataCv.paddingBottom;
y += dataCv.stepVerticalLabelPos, nr -= dataCv.stepVerticalLabelNumber) {
var text = nr + suffixVertical;
cv.drawText({
layer: true,
name: text,
x: 0, y: y,
fillStyle: '#36c', strokeWidth: 2,
text: text,
fromCenter: false
});
var wText = cv.measureText(text).width,
hText = cv.measureText(text).height;
cv.setLayer(text, {
x: dataCv.paddingLeft - wText - marginText,
y: y - hText / 2
});
}
}
function drawHorizontalLabels() {
var y = hCv - dataCv.paddingBottom + marginText;
for (var x = dataCv.startHorizontalLabelPos,
nr = dataCv.startHorizontalLabelNumber;
x < wCv;
x += dataCv.stepHorizontalLabelPos, nr += dataCv.stepHorizontalLabelNumber) {
var text = nr + suffixHorizontal;
cv.drawText({
layer: true,
name: text,
x: x, y: y,
fillStyle: '#36c', strokeWidth: 2,
text: text,
fromCenter: false
});
var wText = cv.measureText(text).width;
cv.setLayer(text, { x: x - wText / 2 });
}
}
function drawHorizontalLines() {
var x1 = dataCv.paddingLeft, x2 = wCv;
for (var y = dataCv.paddingTop + dataCv.startHorizontalGridLine - strokeWidthGrid / 2;
y < hCv - dataCv.paddingBottom;
y += dataCv.stepHorizontalGridLine) {
cv.drawLine({
layer: true,
strokeStyle: '#000', strokeWidth: strokeWidthGrid,
x1: x1, y1: y, x2: x2, y2: y,
fromCenter: false
});
}
}
function drawVerticalLines() {
var y1 = dataCv.paddingTop, y2 = hCv - dataCv.paddingBottom;
for (var x = dataCv.paddingLeft + dataCv.startVerticalGridLine - strokeWidthGrid / 2;
x < wCv;
x += dataCv.stepVerticalGridLine) {
cv.drawLine({
layer: true,
strokeStyle: '#000', strokeWidth: strokeWidthGrid,
x1: x, x2: x, y1: y1, y2: y2,
fromCenter: false
});
}
}
var wImg = this.width, hImg = this.height;
var wCv = wImg - dataCv.cropLeft - dataCv.cropRight + dataCv.paddingLeft,
hCv = hImg - dataCv.cropTop - dataCv.cropBottom + dataCv.paddingTop + dataCv.paddingBottom;
cv.attr('width', wCv);
cv.attr('height', hCv);
cv.drawImage({
layer: true,
source: forecastImg,
x: dataCv.paddingLeft, y: dataCv.paddingTop,
sWidth: wImg - dataCv.cropRight - dataCv.cropLeft,
sHeight: hImg - dataCv.cropBottom - dataCv.cropTop,
sx: dataCv.cropLeft, sy: dataCv.cropTop,
fromCenter: false, cropFromCenter: false
}).drawRect({
layer: true,
strokeStyle: '#000', strokeWidth: strokeWidthBorder,
x: dataCv.paddingLeft, y: dataCv.paddingTop,
width: wImg - dataCv.cropRight - dataCv.cropLeft,
height: hImg - dataCv.cropBottom - dataCv.cropTop,
fromCenter: false
});
drawVerticalLabels();
drawHorizontalLabels();
drawVerticalLines();
drawHorizontalLines();
cv.drawLayers();
}
} <div id="forecast-container" class="hidden">
<canvas id="cv-forecast"></canvas>
<div id="colgrad-img-container">
<img id="colgrad-img">
</div>
</div>
#forecast-container.hidden {
visibility: hidden;
}
<i> </i> #forecast-container {
<i> </i> display: flex;
<i> </i> align-items: flex-start;
<i> </i> padding-top: 10px;
<i> </i> }
<i> </i> #forecast-container #controls {
<i> </i> display: flex;
<i> </i> justify-content: center;
<i> </i> }
<i> </i> #forecast-container #forecast-lower {
<i> </i> display: flex;
<i> </i> justify-content: center;
<i> </i> }
<i> </i> #colgrad-img-container {
<i> </i> width: 120px;
<i> </i> height: 740px;
<i> </i> margin-top: -7px;
<i> </i> transform: scale(0.754);
<i> </i> transform-origin: left top;
<i> </i> margin-top: 8px;
<i> </i> }
<i> </i> #colgrad-img {
<i> </i> width: 300px;
<i> </i> height: 900px;
<i> </i> margin-left: -125px;
<i> </i> margin-top: -80px;
<i> </i> } var basicdata = {
// "prate" is the ID of the forecast or value in the select
"prate": {
// "path" is the key, don't change it
// "PrecipRate" is the value, one level in the complete path
// of the files
// This is the complete path:
// pyqgis-ops/3HrlyAccuRain/d02/*.png
// +------------
// |
// the path to be entered here
"path": "PrecipRate",
// the color gradient image at the right
"colgradimg": "colgrad-img/prate.png"
},
"temp": {
"path": "Temperature",
"colgradimg": "colgrad-img/temp.png"
},
"wind": {
"path": "Wind850mb",
"colgradimg": "colgrad-img/wind.png"
},
"3HrAccum": {
"path": "3HrlyAccuRain",
"colgradimg": "colgrad-img/3HrlyAccu.png"
},
"10mwind": {
"path": "10mwind",
"colgradimg": "colgrad-img/wind10.png"
},
"rh": {
"path": "RelativeHumidity",
"colgradimg": "colgrad-img/rh.png"
},
"cc": {
"path": "CloudCover",
"colgradimg": "colgrad-img/cc.png"
}
}
<i> </i> // Prepare some DOM elements
<i> </i> var theimg = document.getElementById('forecast-img'),
<i> </i> thedate = document.getElementById('forecast-date'),
<i> </i> theUTC = document.getElementById('forecast-utc'),
<i> </i> thehour = document.getElementById('forecast-hour');
<i> </i> // idx is the index of the image that is currently display
<i> </i> // step is the amount the index is increased in each cycle
<i> </i> // stopped indicates if the animation is running or stopped
<i> </i> var idx = 0, step = 1, stopped = false;
<i> </i> // the domain that is currently set <---
<i> </i> var domain; // <---
<i> </i> // the list of images, in the beginning it is empty
<i> </i> var forecastdata = [];
<i> </i> // update list of images every 60 seconds
<i> </i> setInterval(getUrlAndLoad, 60000);
<i> </i> // timer that repeats the function every 500 ms
<i> </i> setInterval(function () {
<i> </i> console.log(idx, step);
<i> </i> // change image only
<i> </i> // 1. if forecastdata is not empty
<i> </i> // 2. if the animation is not stopped by the corresponding button
<i> </i> if (forecastdata.length > 0 && !stopped) {
<i> </i> if (forecastdata[idx]) {
<i> </i> // draw forecast image on canvas <---
<i> </i> drawForecast(forecastdata[idx].img, domain); // <---
<i> </i> } else {
<i> </i> // get new forecast data
<i> </i> getUrlAndLoad();
<i> </i> }
<i> </i> // display additional information date, utc, forecasthour
<i> </i> // in the corresponding DOM elements
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> // increase index by step so that in the next cycle
<i> </i> // the next image will be displayed
<i> </i> idx += step;
<i> </i> // if the end of the list of images is exceeded:
<i> </i> // start from the beginning
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }
<i> </i> }, 500);
<i> </i> // currently obsolete
<i> </i> function loadForecast(url, dmn) {
<i> </i> $.getJSON(url, { domain: dmn }, function (data) {
<i> </i> forecastdata = data;
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<i> </i> // this function is called everytimes when any parameter
<i> </i> // (step, domain, type of forecast) is changed
<i> </i> function getUrlAndLoad() {
<i> </i> // get value of select
<i> </i> // it contains the ID of the forecast that has been selected
<i> </i> var val = $("#select").val();
<i> </i> // get path of colgrad image and display it
<i> </i> // in the corresponding DOM element
<i> </i> var colgradimg = "img/" + basicdata[val].colgradimg;
<i> </i> $("#colgrad-img").attr("src", colgradimg);
<i> </i> // get domain
<i> </i> // it is the value of the radio button that is currently selected
<i> </i> domain = $("input[name='optradio-domain']:checked").val(); // <--- removed var in order to make it global
<i> </i> // radio buttons for the domains
<i> </i> thedomains = $("input[name='optradio-domain']");
<i> </i> // container for the forecast
<i> </i> thecontainer = $("#forecast-container");
<i> </i> // remove all domain classes from the container
<i> </i> thedomains.each(function (idx, ele) {
<i> </i> thecontainer.removeClass($(this).val());
<i> </i> });
<i> </i> // add current domain as a class to the container
<i> </i> thecontainer.addClass(domain);
<i> </i> // read list of images by executing the PHP script
<i> </i> $.getJSON("getforecast.php",
<i> </i> // object containing the URL parameters that will
<i> </i> // be handed over to the PHP script
<i> </i> { path: basicdata[val].path, domain: domain },
<i> </i> // this funktion is called when the PHP script has been
<i> </i> // executed successfully
<i> </i> function (data) {
<i> </i> // the parameter data contains the list of images
<i> </i> console.log(data);
<i> </i> // transfer the list to the corresponding variable
<i> </i> forecastdata = data;
<i> </i> // make the container that keeps the forecast visible
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<i> </i> // add eventhandler to the select
<i> </i> // all necessary actions will be done by the function getUrlAndLoad
<i> </i> $("#select").on('change', function () {
<i> </i> getUrlAndLoad();
<i> </i> // reset idx
<i> </i> idx = 0;
<i> </i> });
<i> </i> // add eventhandler to the radiobuttons for the domain
<i> </i> // all necessary actions will be done by the function getUrlAndLoad
<i> </i> $("input[name='optradio-domain']").on("change", function () {
<i> </i> getUrlAndLoad();
<i> </i> // reset idx
<i> </i> idx = 0;
<i> </i> });
<i> </i> // add eventhandler to the radiobuttons for the step or speed
<i> </i> // of the animation
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
<i> </i> // add eventhandler to the start/stop button
<i> </i> $("#start-stop-btn").on("click", function (event) {
<i> </i> event.preventDefault();
<i> </i> // toggle variable "stopped" und text of the button
<i> </i> // the variable "stopped" is used in the cyclical callback
<i> </i> // of the timer
<i> </i> if (!stopped) {
<i> </i> stopped = true;
<i> </i> $(this).text("Start");
<i> </i> } else {
<i> </i> stopped = false;
<i> </i> $(this).text("Stop");
<i> </i> }
<i> </i> });
<i> </i> // add eventhandler to the "first" button
<i> </i> $("#first-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> // stop animation so that the user can view
<i> </i> // the first forecast
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> // set index to 0
<i> </i> // when the animation is started again it will start
<i> </i> // at this index
<i> </i> idx = 0;
<i> </i> // update image and additional fields
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> // add eventhandler to the "first" button
<i> </i> // similar to the "first" button but
<i> </i> // index is set to the last element in the list of images
<i> </i> $("#last-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> // add eventhandler to the "first" button
<i> </i> // similar to the "first" button but
<i> </i> // index is set to the next element in the list of images
<i> </i> $("#next-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx += step;
<i> </i> // take into account overflow at the end
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> // add eventhandler to the "first" button
<i> </i> // similar to the "first" button but
<i> </i> // index is set to the previous element in the list of images
<i> </i> $("#prev-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx -= step;
<i> </i> // take into account overflow at the beginning
<i> </i> if (idx < 0) idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
forecastdata</C>:<br/>
<C>drawForecast(forecastdata[idx].img, domain);</C><br/>
And <C>forecastdata` $.getJSON("getforecast.php",
// object containing the URL parameters that will
// be handed over to the PHP script
{ path: basicdata[val].path, domain: domain },
// this funktion is called when the PHP script has been
// executed successfully
function (data) {
// the parameter data contains the list of images
console.log(data);
// transfer the list to the corresponding variable
forecastdata = data;
// make the container that keeps the forecast visible
$("#forecast-container").removeClass("hidden");
});// get domain and path from GET parameters
$domain = $_GET['domain'];
$path = $_GET['path'];
// create the complete path from these values
$completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png";
// read the list of images based on the complete path
$images = glob($completepath);
$forecastdata = [];
// loop over the images
// $step is obsolete as it is set to 1 and not changed later
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
// get additional parameters from the path of the current image
$result = preg_match('/-([^-]+)-([^-]+)-([^-]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
// add image and additional parameters to the array
// that will be output
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
// encode array in JSON format and output it
echo json_encode($forecastdata);
<i>
</i>var colgradimg = "img/" + basicdata[val].colgradimg;
var colgradimg = "img/" + basicdata[val].colgradimg;Uncaught TypeError: Cannot read property 'colgradimg' of undefined
at getUrlAndLoadvar colgradimg = "img/" + basicdata[val].colgradimg;Uncaught TypeError: Cannot read property 'colgradimg' of undefined
at getUrlAndLoad<i>
</i><!--
Created By : Francis Kane D. Balmores
For : Numerical Modeling Section
Research & Development and Training Division
Philippine Atmospheric, Geophysical and Astronomical Services Administration
<i> </i> This is a site designed to show several NWP products made by the Numerical Modeling Section.
<i> </i> Made using Sublime Text and VSCode.
Date Started : 2018 November 08
HTML5 Version : 2015 December 3
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIS Mapping</title>
<i> </i><script src="js/jquery.js?ver=3.2.1"></script>
<i> </i><script src="js/bootstrap.min.js?"></script>
<i> </i><script src="js/jsclock.js"></script>
<i> </i><link href="css/bootstrap.css?v=1.1" rel="stylesheet">
<i> </i><link href="css/home.css?v=1.1" rel="stylesheet">
<i> </i>
<i> </i><link rel="shortcut icon" href="img/pagasafavicon.png" type="image/x-icon">
</head>
<body onLoad = "setClock('utclocalsec')">
<!--NAVIGATION BAR-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="padding-left: 5px;" class="navbar-brand" href="home.html"><img src="img/logo.png"><span>Weather Research Portal</span></a>
</div>
<!--LEFT MENU-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="login.php">Log Out</a></li>
</ul>
</li>
</ul>
<!--END OF LEFT MENU-->
<!--RIGHT MENU-->
<ul class="nav navbar-nav navbar-right">
<li><a href="home.html">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="tctracker.html">Typhoon Tracker</a></li>
<li><a href="gis.html">PyQGIS Weather Maps</a></li>
<li><a href="#">Statistical Post-Processing</a></li>
<li><a href="#">Grads Weather Maps</a></li>
</ul>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects and Guides<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="scriptexec.php">Script Execution Test</a></li>
<li><a href="Gitlab.html">Beginner's Guide to Gitlab</a></li>
<li><a href="forecastguide.html">Description of Forecast Products</a></li>
</ul>
<li><a href="#">Contact Us</a></li>
</ul><!--END OF RIGHT MENU-->
</div>
</nav>
<!--END OF NAVIGATION BAR-->
<center>
<div class="row" style="background-color: #f4f4f4;">
<br/>
<i> </i> <div class="col-md-3">
<i> </i>
<i> </i> <h3>Weather Maps (PyQGIS)</h3>
<i> </i> <span id="jsclock1"></span><br><br>
<i> </i> <h5>Products:</h5>
<i> </i> <select id="select">
<i> </i> <option selected disabled>Select a Forecast Parameter</option>
<i> </i> <option value="prate" data-colgradimg="img/colgrad-img/prate.png">Surface Precipitation Rate</option>
<i> </i> <option value="3HrAccum" data-colgradimg="img/colgrad-img/3HrlyAccu.png">3-Hr Accumulated Rainfall</option>
<i> </i> <option value="temp" data-colgradimg="img/colgrad-img/temp.png">Surface Temperature</option>
<i> </i> <option value="wind" data-colgradimg="img/colgrad-img/wind.png">850 millibar Wind</option>
<i> </i> <option value="10mwind" data-colgradimg="img/colgrad-img/wind10.png">10 meter Wind</option>
<i> </i> <option value="rh" data-colgradimg="img/colgrad-img/rh.png">2 meter Relative Humidity</option>
<i> </i> <option value="cc" data-colgradimg="img/colgrad-img/cc.png">Total Cloud Cover</option>
<i> </i> </select><br><br>
<i> </i> <h5>Domain:</h5>
<i> </i> <form>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio-domain" value="d01" checked>1
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio-domain" value="d02">2
<i> </i> </label><br><br>
<i> </i> </form>
<i> </i> <h5>Animation Interval (hr):</h5>
<i> </i> <form>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="1" checked>1
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="3">3
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="6">6
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="12">12
<i> </i> </label>
<i> </i> <label class="radio-inline">
<i> </i> <input type="radio" name="optradio" value="24">24
<i> </i> </label><br><br>
<i> </i> <p>For domain 1 forecasts: 144.0h<br>For domain 2 forecasts: 048.0h</p>
<i> </i> </form><br>
<i> </i>
<i> </i> </div>
<i> </i> <div class="col-md-2">
<i> </i> <form id="forecast-label">
<i> </i> <p>Date Initialized:<span id="forecast-date"></span></p>
<i> </i> <p>UTC:<span id="forecast-utc"></span></p>
<i> </i> <p>Forecast Hour:<span id="forecast-hour"></span></p>
<i> </i> </form>
<i> </i> </div>
<i> </i> <div class="col-md-7">
<i> </i> <div id="forecast-container" class="hidden">
<i> </i> <div class="labels-left-container d01" style="font-size: 13px;">
<i> </i> <div class="label-left">25&deg;N</div>
<i> </i> <div class="label-left">20&deg;N</div>
<i> </i> <div class="label-left">15&deg;N</div>
<i> </i> <div class="label-left">10&deg;N</div>
<i> </i> <div class="label-left">5&deg;N</div>
<i> </i> </div>
<i> </i> <div class="labels-left-container d02" style="font-size: 12px;">
<i> </i> <div class="label-left">20&deg;N</div>
<i> </i> <div class="label-left">18&deg;N</div>
<i> </i> <div class="label-left">16&deg;N</div>
<i> </i> <div class="label-left">14&deg;N</div>
<i> </i> <div class="label-left">12&deg;N</div>
<i> </i> <div class="label-left">10&deg;N</div>
<i> </i> <div class="label-left">8&deg;N</div>
<i> </i> <div class="label-left">6&deg;N</div>
<i> </i> </div>
<i> </i> <div id="right-container">
<i> </i> <div class="controls" style="padding-bottom: 5px;">
<i> </i> <button id="first-btn">First<<</button>
<i> </i> <button id="last-btn">Last>></button>
<i> </i> <button id="prev-btn">Previous</button>
<i> </i> <button id="next-btn">Next</button>
<i> </i> <button id="start-stop-btn">Stop</button>
<i> </i> </div>
<i> </i> <div id="img-container">
<i> </i> <img id="forecast-img" src="">
<i> </i> </div>
<i> </i> <div class="labels-bottom-container d01" style="font-size: 13px;">
<i> </i> <div class="label-bottom">115&deg;E</div>
<i> </i> <div class="label-bottom">120&deg;E</div>
<i> </i> <div class="label-bottom">125&deg;E</div>
<i> </i> <div class="label-bottom">130&deg;E</div>
<i> </i> <div class="label-bottom">135&deg;E</div>
<i> </i> </div>
<i> </i> <div class="labels-bottom-container d02" style="font-size: 12px;">
<i> </i> <div class="label-bottom">118&deg;E</div>
<i> </i> <div class="label-bottom">120&deg;E</div>
<i> </i> <div class="label-bottom">122&deg;E</div>
<i> </i> <div class="label-bottom">124&deg;E</div>
<i> </i> <div class="label-bottom">126&deg;E</div>
<i> </i> </div>
<i> </i> </div>
<i> </i> <div id="colgrad-img-container">
<i> </i> <img id="colgrad-img" src="">
<i> </i> </div>
<i> </i> </div>
<i> </i> </div>
<i> </i></div>
<i> </i> <script>
<i> </i> var basicdata = {
<i> </i> //"prate" is the ID of the forecast parameter, the value in the #select.
<i> </i> //the same logic is applied to all of the forecast parameters below.
<i> </i> "prate": {
<i> </i> "path": "PrecipRate",
<i> </i> //"path" is constant
<i> </i> //"PrecipRate" is the value, one level in the complete path of the files
<i> </i> "colgradimg": "colgrad-img/prate.png"
<i> </i> //colgradimg is the color bar image and its path
<i> </i> },
<i> </i> "temp": {
<i> </i> "path": "Temperature",
<i> </i> "colgradimg": "colgrad-img/temp.png"
<i> </i> },
<i> </i> "wind": {
<i> </i> "path": "Wind850mb",
<i> </i> "colgradimg": "colgrad-img/wind.png"
<i> </i> },
<i> </i> "3HrAccum": {
<i> </i> "path": "3HrlyAccuRain",
<i> </i> "colgradimg": "colgrad-img/3HrlyAccu.png"
<i> </i> },
<i> </i> "10mwind": {
<i> </i> "path": "10mwind",
<i> </i> "colgradimg": "colgrad-img/wind10.png"
<i> </i> },
<i> </i> "rh": {
<i> </i> "path": "RelativeHumidity",
<i> </i> "colgradimg": "colgrad-img/rh.png"
<i> </i> },
<i> </i> "cc": {
<i> </i> "path": "CloudCover",
<i> </i> "colgradimg": "colgrad-img/cc.png"
<i> </i> }
<i> </i> }
<i> </i> //Preparing some DOM elements
<i> </i> var theimg = document.getElementById('forecast-img'),
<i> </i> thedate = document.getElementById('forecast-date'),
<i> </i> theUTC = document.getElementById('forecast-utc'),
<i> </i> thehour = document.getElementById('forecast-hour');
<i> </i> //idx is the index of the image that is currently displayed
<i> </i> //step is the amount the index increments in each cycle
<i> </i> //stopped indicates if the animation is running or stopped
<i> </i> var idx = 0, step = 1, stopped = false;
<i> </i> //the list of images, in the beginning is empty
<i> </i> var forecastdata = [];
<i> </i> //update the list of images every 60 seconds
<i> </i> setInterval(getUrlAndLoad, 10);
<i> </i> //timer that repeats the function every 50ms
<i> </i> setInterval(function () {
<i> </i> console.log(idx, step);
<i> </i> //change image only
<i> </i> //1. if the forecastdata is not empty
<i> </i> //2. if the animation is not stopped by any of the corresponding buttons
<i> </i> if (forecastdata.length > 0 && !stopped) {
<i> </i> if (forecastdata[idx]) {
<i> </i> //display the images
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> } else {
<i> </i> //get new forecastdata
<i> </i> getUrlAndLoad();
<i> </i> idx=0;
<i> </i> }
<i> </i> //display the additional information (the date, utc, and forecasthour) in the corresponding DOM Elements
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> //increase index by step so that in the next cycle the next image will be displayed
<i> </i> //then start from the beginning
<i> </i> idx += step;
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> }
<i> </i> }, 450);
<i> </i> function loadForecast(url, dmn) {
<i> </i> $.getJSON(url, {domain: dmn}, function (data) {
<i> </i> forecastdata = data;
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<i> </i> //this function is called anytime a parameter (step, domain, forecast parameter) is changed
<i> </i> function getUrlAndLoad() {
<i> </i> //get value of the #select
<i> </i> //it contains the ID of the forecast parameter that has been selected
<i> </i> var val = $("#select").val();
<i> </i> //get the path of the colgrad image and display it on the corresponding DOM element
<i> </i> var colgradimg = "img/" + basicdata[val].colgradimg;
<i> </i> $("#colgrad-img").attr("src", colgradimg);
<i> </i> //get domain
<i> </i> //it is the value of the radio button that is currently selected
<i> </i> var domain = $("input[name='optradio-domain']:checked").val();
<i> </i> thedomains = $("input[name='optradio-domain']");
<i> </i> //container for the forecasts
<i> </i> thecontainer = $("#forecast-container");
<i> </i> //remove all domain classes from the container
<i> </i> thedomains.each(function (idx, ele) {
<i> </i> thecontainer.removeClass($(this).val());
<i> </i> });
<i> </i> //add current domain as a class to the container
<i> </i> thecontainer.addClass(domain);
<i> </i> console.log(basicdata[val].path, domain);
<i> </i> //read the list of images by executing the PHP Script
<i> </i> $.getJSON("main.php",
<i> </i> //object containing the URL parameters that will be handed over to the PHP Script
<i> </i> { path: basicdata[val].path, domain: domain },
<i> </i> //this function is called when the PHP script has been executed successfully
<i> </i> function (data) {
<i> </i> //the parameter data contains the list of images
<i> </i> console.log(data);
<i> </i> //transer the list of the corresponding variable
<i> </i> forecastdata = data;
<i> </i> //make the container that keeps the forecast visible
<i> </i> $("#forecast-container").removeClass("hidden");
<i> </i> });
<i> </i> }
<i> </i>
<i> </i> //add event handler to the #select
<i> </i> //all necessary actions will be done by the function getUrlAndLoad
<i> </i> $("input[name='optradio-domain']").on("change", function () {
<i> </i> getUrlAndLoad();
<i> </i> // reset idx
<i> </i> idx = 0;
<i> </i> });
<i> </i> //add eventhandler to the radiobuttons for the domain
<i> </i> //all necessary actions will be done by the getUrlAndLoad
<i> </i> $("input[name='optradio-domain']").on("change", getUrlAndLoad);
<i> </i> //add eventhandler to the radiobuttons for the step or speed of the animation
<i> </i> $("input[name='optradio']").on("change", function () {
<i> </i> step = parseInt($("input[name='optradio']:checked").val());
<i> </i> idx = 0;
<i> </i> });
<i> </i> //add eventhandler to the start/stop button
<i> </i> $("#start-stop-btn").on("click", function (event) {
<i> </i> event.preventDefault();
<i> </i> //toggle variable "stopped" and text of the button
<i> </i> //the variable "stopped" is used in the cyclical callback of the timer
<i> </i> if (!stopped) {
<i> </i> stopped = true;
<i> </i> $(this).text("Start");
<i> </i> } else {
<i> </i> stopped = false;
<i> </i> $(this).text("Stop");
<i> </i> }
<i> </i> });
<i> </i> //add event handler to the "first" button
<i> </i> $("#first-btn").on("click", function() {
<i> </i> event.preventDefault();
<i> </i> //stop the animation so that the user can view the first forecast
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> //set index to 0
<i> </i> //when the animation is started again it will start at this index
<i> </i> idx = 0;
<i> </i> //update image and additional fields
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> //add eventhandler to the "first" button
<i> </i> //similar to the first button but the index is set to the last element in the list of images.
<i> </i> $("#last-btn").on("click", function() {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i>
<i> </i> //add eventhandler to the "first" button
<i> </i> //similar to the first button but the index is set to the next element in the list of images.
<i> </i> $("#next-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx += step;
<i> </i> //take into account the overflow at the end
<i> </i> if (idx >= forecastdata.length) idx = 0;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> //add eventhandler to the "first" button
<i> </i> //similar to the first button but index is set to the previous element in the list of images.
<i> </i> $("#prev-btn").on("click", function () {
<i> </i> event.preventDefault();
<i> </i> stopped = true;
<i> </i> $("#start-stop-btn").text("Start");
<i> </i> idx -= step;
<i> </i> //take into account the overflow at the end
<i> </i> if (idx < 0) idx = forecastdata.length - 1;
<i> </i> theimg.src = forecastdata[idx].img;
<i> </i> thedate.innerHTML = forecastdata[idx].date;
<i> </i> theUTC.innerHTML = forecastdata[idx].utc;
<i> </i> thehour.innerHTML = forecastdata[idx].forecasthour;
<i> </i> });
<i> </i> </script>
<i> </i><!--ABOUT US-->
<i> </i><div class="row">
<i> </i> <div class="col-md-6">
<i> </i> <img class="pagasa-icon" src="img/icon.png">
<i> </i> </div>
<i> </i> <div class="col-md-6">
<i> </i> <p class="section-title">ABOUT US</p>
<i> </i> <span>
<i> </i> <br><p style="font-size:20px">The Numerical Modeling Section undertakes researches on the application of Numerical Weather Prediction in understanding unusual weather patterns and extreme rainfall events</p>
<i> </i> </span>
<i> </i> </div>
<i> </i></div>
<i> </i><!--PRODUCTS-->
<i> </i><div style="background-color: #f4f4f4">
<i> </i> <div class="row">
<i> </i> <p class="section-title" >PRODUCTS</p>
<i> </i> <br>
<i> </i>
<i> </i> <div class="col-md-2 col-md-offset-2">
<i> </i> <a href="tctracker.html"><img src="img/1.png" style="height: 150px; width: 150px;"><br>
<i> </i> <p class="font-15">TROPICAL CYCLONE TRACKER</p></a>
<i> </i> </div>
<i> </i> <div class="col-md-2">
<i> </i> <a href="#"><img src="img/3.png" style="height: 150px; width: 150px;"><br>
<i> </i> <p class="font-15">STATISTICAL POST-PROCESSING</p></a>
<i> </i> </div>
<i> </i> <div class="col-md-2">
<i> </i> <a href="gis.html"><img src="img/2.png" style="height: 150px; width: 150px;"><br>
<i> </i> <p class="font-15">PyQGIS WEATHER MAPS</p></a>
<i> </i> </div>
<i> </i> <div class="col-md-2">
<i> </i> <a href="#"><img src="img/4.png" style="height: 150px; width: 150px;"><br>
<i> </i> <p class="font-15">GRADS WEATHER MAPS</p></a>
<i> </i> </div>
<i> </i> </div>
<i> </i></div>
<i> </i><!--FOOTER-->
<i> </i>
<i> </i> <!--SOCIAL MEDIA FOOTER-->
<i> </i><div class="footer" style="background-color: #00d2d3">
<i> </i> <a href="https://www.facebook.com/PAGASA.DOST.GOV.PH/?ref=br_rs" target="_blank"><img src="img/social media/fb.png" width="50px"></a>
<i> </i> <a href="https://twitter.com/dost_pagasa?lang=en" target="_blank"><img src="img/social media/twit.png" width="50px"></a>
<i> </i> <a href="https://www.youtube.com/channel/UCpyLikj1x70S8UPxVqsPr6g" target="_blank"><img src="img/social media/youtube.png" width="50px"></a>
<i> </i></div>
<i> </i> <!--END OF SOCIAL MEDIA FOOTER-->
<i> </i><div style="background-color: #1e1c1b">
<i> </i> <div class="row">
<i> </i> <div class="col-md-4">
<i> </i> <span class="footer-content">
<i> </i> <b>Address</b>
<i> </i> <hr class="style1">
<i> </i> Philippine Atmospheric Geophysical and Astronomical Services Administration
<i> </i> <br>Weather and Flood Forecasting Center
<i> </i> <br>BIR Road, Diliman, Quezon City
<i> </i> <br>Metro Manila 1100
<i> </i> <br>(632)4342696
<i> </i> <br>[email protected]
<i> </i> </span>
<i> </i> </div>
<i> </i> <div class="col-md-4">
<i> </i> <span class="footer-content">
<i> </i> <b>ABOUT GOV.PH</b>
<i> </i> <hr class="style1">
<i> </i> <br><a class="footer-links" href="https://www.gov.ph/">GOV.PH</a>
<i> </i> <hr class="style1">
<i> </i> <br><a class="footer-links" href="https://www.officialgazette.gov.ph/">Official Gazette</a>
<i> </i> </span>
<i> </i> </div>
<i> </i> <div class="col-md-4">
<i> </i> <span class="footer-content">
<i> </i> <b>Government Links</b>
<i> </i> <hr class="style1">
<i> </i> <br><a class="footer-links" href="http://bagong.pagasa.dost.gov.ph/">Philippine Atmospheric Geophysical and Astronomical Services Administration</a>
<i> </i> <hr class="style1">
<i> </i> <br><a class="footer-links" href="http://www.dost.gov.ph/">Department of Science and Technology</a>
<i> </i> </span>
<i> </i> </div>
<i> </i> </div>
<i> </i></div>
<i> </i><!--END OF FOOTER-->
</center>
</body>
</html>
<i>
</i>/*{
border-style: solid;
border-width: 0.1px;
}*/
* {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
.box {
border: 1px solid black;
}
.site-header {
background-image: url(img/bg.jpg);
background-size: 100%;
margin-top: 50px;
padding-top: 20%;
padding-bottom: 20%;
}
.site-title {
font-size: 50px;
font-weight: bold;
color: #fff;
}
.section-title {
font-size: 50px;
font-weight: bold;
}
.site-description {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-style: italic;
font-size:30px;
color:#fff;
}
/*.col-md-2 {
border: 0px solid black;
padding: 10px;
}*/
.font-15 {
font-size: 15px;
font-weight: bold;
}
.footer {
padding-top: 25px;
padding-bottom: 25px;
}
div.footer > a {
padding-left: 5px;
padding-right: 5px;
}
.footer-content {
color: #dfe6e9;
}
hr.style1 {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(154, 154, 154, 0), rgba(154, 154, 154, 0.75), rgba(154, 154, 154, 0));
}
.footer-links {
color: #dfe6e9;
}
.button-run {
cursor: pointer;
background: #33b5e5;
width: 25%;
border: 0;
margin: 30px;
padding: 15px 15px;
color: #ffffff;
transition: 0.3s ease;
}
.button-run:hover {
background: #dfe6e9;
color: #ffffff;
}
.pagasa-icon {
width: 20%;
}
/* FORM SPAN FOR THE FORECAST LABEL: (UTC, DATE, FORECAST HOUR)*/
#forecast-label {
text-align: left;
padding-top: 20px;
font-size: 18px;
}
#select, #option, #label {
cursor: pointer;
width: 230px;
}
/* END FOR SPAN FOR THE FORECAST LABEL */
/* START FOR THE LABELS OF THE BOUNDING BOX, COLGRAD AND BUTTONS */
#forecast-container.hidden {
visibility: hidden;
}
#forecast-container {
display: flex;
padding-top: 10px;
}
#forecast-container #controls {
display: flex;
justify-content: center;
}
.controls #first-btn, #last-btn,
#prev-btn, #next-btn, #start-stop-btn {
background-color: white;
color: black;
border: 1px solid black;
border-radius: 1.5px;
transition-duration: 0.3s;
cursor: pointer;
}
#first-btn:hover, #last-btn:hover,
#prev-btn:hover, #next-btn:hover, #start-stop-btn:hover {
background-color: #555555;
color: white;
}
#img-container {
border: 2px solid black;
overflow: hidden;
box-sizing: border-box;
}
#forecast-container.d01 #img-container {
/* dimensions of the inner image
excluding white borders */
width: 460px;
height: 540px;
}
#forecast-container.d02 #img-container {
/* dimensions of the inner image
excluding white borders */
width: 330px;
height: 540px;
}
#forecast-img {
vertical-align: top;
/* dimensions of the complete image
including white borders */
width: 550px;
height: 600px;
}
#forecast-container.d01 #forecast-img {
/* size of the white border at the left */
margin-left: -45px;
/* size of the white border on top */
margin-top: -30px;
}
#forecast-container.d02 #forecast-img {
/* size of the white border at the left */
margin-left: -110px;
/* size of the white border on top */
margin-top: -30px;
}
.labels-left-container {
display: none;
}
#forecast-container.d01 .labels-left-container.d01 {
display: flex;
flex-direction: column;
}
#forecast-container.d02 .labels-left-container.d02 {
display: flex;
flex-direction: column;
}
.label-left {
text-align: right;
padding-left: 5px;
padding-right: 5px;
}
.labels-left-container.d01 .label-left {
/* the vertical distance between the labels */
margin-top: 105px;
}
.labels-left-container.d01 .label-left:first-child {
/* the amount the first label is shifted upwards */
margin-top: 25px;
}
.labels-left-container.d02 .label-left {
/* the vertical distance between the labels */
margin-top: 50px;
}
<br/>
.labels-left-container.d02 .label-left:first-child {
/* the amount the first label is shifted upwards */
margin-top: 50px;
}
.labels-left-container {
display: none;
}
.labels-bottom-container {
display: none;
}
#forecast-container.d01 .labels-bottom-container.d01 {
display: flex;
flex-direction: row;
}
#forecast-container.d02 .labels-bottom-container.d02 {
display: flex; <br/>
flex-direction: row;
}
.label-bottom {
text-align: center;
padding-top: 2px;
}
.labels-bottom-container.d01 .label-bottom {
/* the horizontal distance between the labels */
margin-left: 77px;
}
.labels-bottom-container.d01 .label-bottom:first-child {
/* the amount the first label is shifted left */
margin-left: -17px;
}
.labels-bottom-container.d02 .label-bottom {
/* the horizontal distance between the labels */
margin-left: 35px;
}
<br/>
.labels-bottom-container.d02 .label-bottom:first-child {
/* the amount the first label is shifted left */
margin-left: 15px;
}
#forecast-container.d01 #right-container {
display: flex;
flex-direction: column;
width: 460px;
}
#forecast-container.d02 #right-container {
display: flex;
flex-direction: column;
width: 330px;
}
#labels-bottom-container {
display: flex;
}
#colgrad-img-container {
width: 100px;
height: 750px;
margin-top: 5px;
transform: scale(0.747);
transform-origin: left top;
margin-top: 45px;
}
#colgrad-img {
width: 300px;
height: 750px;
margin-left: -125px;
margin-top: -40px;
}
h5, form {
font-size: 15px; <br/>
}
/*END OF LABELS HERE */
/*TABLE FOR DESCRIPTION OF FORECAST PARAMETERS*/
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: white;
}
/* END FOR TABLE STYLE*/
<i>
</i><?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
//getting the domain and path from the GET parameters
$domain = $_GET['domain'];
$path = $_GET['path'];
//create the complete path from these values
$completepath = "pyqgis-ops/" . $path . "/" . $domain . "/*.png";
//read the list of images based on the complete path
$images = glob ($completepath);
$forecastdata = [];
//loop over the images
//$step is obsolete as it is set to 1 and not changed later
$step = 1;
for ($i = 0; $i < count($images); $i+=$step) {
$img = $images[$i];
//getting additional parameters from the path of the current image
$result = preg_match('/_([^_]+)_([^_]+)_([^_]+).png/', $img, $matches);
if ($result) {
$date = $matches[1];
$utc = $matches[2];
$forecasthour = $matches[3];
//add image and additional parameters to the array. that will be the output
$forecastdata[] = ['img' => $img, 'date' => $date, 'utc' => $utc, 'forecasthour' => $forecasthour];
}
}
//encode array in JSON format and output it
echo json_encode($forecastdata);
?>
var datad02 = {
cropLeft: 45,
cropRight: 43,
cropTop: 30,
cropBottom: 27,var datad02 = {
cropLeft: 45,
cropRight: 43,
cropTop: 30,
cropBottom: 27,
paddingTop: 15,
paddingLeft: 60, // space for labels
paddingBottom: 20, // space for labels
<i> </i>// start position of the vertical labels in pixels,
<i> </i>// i. e. the position of the first label
<i> </i>startVerticalLabelPos: 0,
<i> </i>// start for the vertical label numbers
<i> </i>startVerticalLabelNumber: 30,
<i> </i>// step for the position of the vertical labels in pixels
<i> </i>// i. e. the distance between the labels
<i> </i>stepVerticalLabelPos: 100,
<i> </i>// step for the vertical label numbers
<i> </i>stepVerticalLabelNumber: 5,startVerticalLabelNumber</C> is the first label and <C>stepVerticalLabelNumber`<i>
</i>Uncaught RangeError: Maximum call stack size exceeded
at new jCanvasObject (jcanvas.js:82)
at r.fn.init.drawImage (jcanvas.js:3996)
at _drawLayer (jcanvas.js:1225)
at r.fn.init.drawLayers (jcanvas.js:1503)
at jcanvas.js:3980
at r.fn.init.drawImage (jcanvas.js:4028)
at _drawLayer (jcanvas.js:1225)
at r.fn.init.drawLayers (jcanvas.js:1503)
at jcanvas.js:3980
at r.fn.init.drawImage (jcanvas.js:4028)
How can I edit the number of coordinates?
for d01 I need just 5 for the N: 25, 20, 15, 10 and 5 and for the E: 115, 120, 125, 130 and 135
for d02 I need 8 for the N: 6, 8, 10, 12, 14, 16, 18 and 20 and for the E: 118, 120, 122, 124 and 126[/quote]
var datad01 = {
cropLeft: 45,
cropRight: 43,
cropTop: 30,
cropBottom: 27,
paddingTop: 15,
paddingLeft: 60, // space for labels
paddingBottom: 20, // space for labels
<i> </i>// start position of the vertical labels in pixels,
<i> </i>// i. e. the position of the first label
<i> </i>startVerticalLabelPos: 0,
<i> </i>// start for the vertical label numbers
<i> </i>startVerticalLabelNumber: 25, // <--
<i> </i>// step for the position of the vertical labels in pixels
<i> </i>// i. e. the distance between the labels
<i> </i>stepVerticalLabelPos: 100,
<i> </i>// step for the vertical label numbers
<i> </i>stepVerticalLabelNumber: 5, // <--
<i> </i>// start position for the horizontal grid lines in pixels,
<i> </i>// i. e. the position of the first line
<i> </i>startHorizontalGridLine: 0,
<i> </i>// step for the horizontal grid lines,
<i> </i>// i. e. the distance between the horizontal lines
<i> </i>stepHorizontalGridLine: 100,
<i> </i>startHorizontalLabelPos: 60,
<i> </i>// horizontal labels at the bottom and vertical grid lines
<i> </i>// are configured like the ones above
<i> </i>startHorizontalLabelNumber: 135, // <--
<i> </i>stepHorizontalLabelPos: 200,
<i> </i>stepHorizontalLabelNumber: 5, // <--
<i> </i>startVerticalGridLine: 0,
<i> </i>stepVerticalGridLine: 100,
}
var datad02 = {
cropLeft: 45,
cropRight: 43,
cropTop: 30,
cropBottom: 27,
paddingTop: 15,
paddingLeft: 60, // space for labels
paddingBottom: 20, // space for labels
<i> </i>// start position of the vertical labels in pixels,
<i> </i>// i. e. the position of the first label
<i> </i>startVerticalLabelPos: 0,
<i> </i>// start for the vertical label numbers
<i> </i>startVerticalLabelNumber: 20, // <--
<i> </i>// step for the position of the vertical labels in pixels
<i> </i>// i. e. the distance between the labels
<i> </i>stepVerticalLabelPos: 100,
<i> </i>// step for the vertical label numbers
<i> </i>stepVerticalLabelNumber: 2, // <--
<i> </i>// start position for the horizontal grid lines in pixels,
<i> </i>// i. e. the position of the first line
<i> </i>startHorizontalGridLine: 0,
<i> </i>// step for the horizontal grid lines,
<i> </i>// i. e. the distance between the horizontal lines
<i> </i>stepHorizontalGridLine: 100,
<i> </i>startHorizontalLabelPos: 60,
<i> </i>// horizontal labels at the bottom and vertical grid lines
<i> </i>// are configured like the ones above
<i> </i>startHorizontalLabelNumber: 120, // <--
<i> </i>stepHorizontalLabelPos: 200,
<i> </i>stepHorizontalLabelNumber: 2, // <--
<i> </i>startVerticalGridLine: 0,
<i> </i>stepVerticalGridLine: 100,
} // step for the position of the vertical labels in pixels
// i. e. the distance between the labels
stepVerticalLabelPos: 100,setInterval(getUrlAndLoad, 10);>@Sempervivum#1608418 Regarding the error: Did you modify the code I sent you in some way?
> In the code you posted recently this line may cause an overload of the browser:
> setInterval(getUrlAndLoad, 10);
Uncaught TypeError: Cannot read property 'date' of undefined
at test.html:228thedate.innerHTML = forecastdata[idx].date;<i>
</i>jcanvas.js:3964 Uncaught RangeError: Maximum call stack size exceeded
at jcanvas.js:3964
at r.fn.init.drawImage (jcanvas.js:4028)
at _drawLayer (jcanvas.js:1225)
at r.fn.init.drawLayers (jcanvas.js:1503)
at jcanvas.js:3980
at r.fn.init.drawImage (jcanvas.js:4028)
at _drawLayer (jcanvas.js:1225)
at r.fn.init.drawLayers (jcanvas.js:1503)
at jcanvas.js:3980
at r.fn.init.drawImage (jcanvas.js:4028)
another error appears:makes me suspect that there is something wrong about the images. Is the complete structure of folders (starting from pyqgis-ops) where the images are located available in your test configuration?
Uncaught TypeError: Cannot read property 'date' of undefined
at test.html:228
when I trace it. This line is the culprit:
thedate.innerHTML = forecastdata[idx].date;[/quote]
When I select for a domain. the previous domain's label still shows up. What happens then is that it overlaps.[/quote]I see. I'm gonna check this during the weekend.
Did you receive the file draw-forecast.txt, renamed it back to draw-forecast.js and copied it to the js folder?[/quote]
Create a script element.
Set the src , async , and type attributes.
Append the script element to the body.
Check if the file loaded or not in the load event.0.1.9 — BETA 4.23