EumetCast.de Website
From MyWiki
In order to present various satellite products online the EarthOnline website utilizes JavaScript in combination with CSS and HTML. The JavaScript code written during the development of the website is presented in the following sections. JavaScript provides most of the website's functionality, particularly the dynamic presentation of satellite imagery.
This article aims to help users who think about setting up their own web interface to view up to date data/images received by their reception station and consecutively processed at their computer by various programs. The first part contains the javascript code that should be placed in the header of the html page, i.e. between the <head> ... </head> tags. The second part contains the javascript code that should be placed in the body of the html page, i.e. between the <body> ... </body> tags.
// FIRST PART
<script type="text/javascript">
// GLOBAL VARIABLES
// contains the folders for the various jpg-files
var _rootURL = "http://website-domain.de/PATH_TO_ROOT_DIR_OF_IMGAGES/";
var _sufName = "UTC";
//LOAD MAIN-IMAGE FILE ON CLICK TO THUMBS
function changeImageOnClick(_image, _mainClassname) {
document.getElementById(_mainClassname).src=_image;
};
//LOAD MAIN-IMAGE FILE
function changeImage(_image, _mainClassname) {
var _imgObj = (_mainClassname + "_Obj");
// create an image object
var _imgObj = new Image();
imgObj.src = _image;
// execute when image download is completed
imgObj.onload = function () {
document.getElementById(_mainClassname).src=_image;
};
// execute when image is not available on the server
_imgObj.onerror= function () {
if (_image[0].includes("global")) {
_errImg = ("http://website-domain.de/PATH_TO_IMAGE/daytime_global_avail_large.jpeg");
}
else {
_errImg = ("http://website-domain.de/PATH_TO_IMAGE/not_available_large.jpeg");
}
// select DOM element by its css-ID and assign "_errImg" variable to its "source" tag
document.getElementById(_mainClassname).src= _errImg;
};
};
//LOAD THUMB IMAGES
function loadImage(_filePATH, _imgID) {
// create an image object
var _imgObj = new Image();
_imgObj.src = _filePATH;
// execute when image download is completed
_imgObj.onload = function () {
// select DOM element by its css-ID and assign "_filePATH" variable to its "source" tag
document.getElementById(_imgID).src=_filePATH;
};
// execute when image is not available on the server
_imgObj.onerror= function () {
if (_filePATH[0].includes("global")) {
_errImg = ("http://website-domain.de/PATH_TO_IMAGE/daytime_global_avail_large.jpeg");
}
else {
_errImg = ("http://website-domain.de/PATH_TO_IMAGE/not_available_large.jpeg");
}
// select DOM element by its css-ID and assign "_errImg" variable to its "source" tag
document.getElementById(_imgID).src= _errImg;
};
return _filePATH
};
//URL RETURN
function urlReturn(_rootURL, _shift, _preName, _sufName, _offSet) {
// call function "translateTime" to (depending on time of request) determine
// time of latest available image and store output in variable _refTime
var _refTime = translateTime(getProductTime(new Date().getTime()
+ new Date().getTimezoneOffset()*60*1000, _shift));
// call function "getFileURL()" with current time of request and return output to variable _fileURL
var _fileURL = getFileURL(_refTime, _rootURL, _rootDIR, _preName, _sufName, _offSet);
// write variable _fileURL to console log (see browser development tools)
console.log(_fileURL);
//finally return the determined file URL
return _fileURL;
}
//INITIAL LOAD of MAIN IMAGE and THUMB-IMAGE FILES (used on "COMBINED CHANNEL IMAGES" page)
function initLoad1(_rootURL, _shift, _preName, _sufName, _classname, _mainClassname, _offSet) {
var i = 0;
// call function "translateTime" to (depending on time of request) determine
// time of latest available image and store output in variable _refTime
var _refTime = translateTime(getProductTime(getCurrentTime(), _shift));
// call function "getFileURL()" with current time of request and return output to variable _fileURL
var _fileURL = getFileURL(_refTime, _rootURL, _rootDIR, _preName, _sufName, _offSet);
// call function "changeImage()" with determined file URL
changeImage(_fileURL, _mainClassname);
// loop over css-ID's that need to be updated on initial page request
while (i < 4) {
var _offSet = i;
var _imgID = (_classname + (i));
console.log("CSS ID: ", _imgID);
var _fileURL = getFileURL(_refTime, _rootURL, _rootDIR, _preName, _sufName, _offSet);
loadImage(_fileURL, _imgID);
i++;
}
}
//INITIAL LOAD of SURFACE MAIN IMAGE and SURFACE THUMB-IMAGE FILES
// (used on "SURFACE WEATHER CHARTS" page)
function myfun4(_rootURL, _shift, _preName, _sufName, _classname, _mainClassname, _offSet, _rootDIR) {
// assign counter variable
var i = 0;
// assign legend image url
var _legendimg = ["http://earthonline.hochstaffl.eu/wp-content/uploads/2016/05/lb_airmass.png"];
// call function "translateTime" to (depending on time of request) determine
//time of latest available image and store output in variable _refTime
var _refTime = translateTime(getProductTime(getCurrentTime(), _shift));
// call function "getFileURL()" with current time of request and return output to variable _fileURL
var _fileURL = getFileURL(_refTime, _rootURL, _rootDIR[i], _preName[i], _sufName, _offSet);
// call function changeImage() with determined URL to load the image in css-ID _mainClassname
// changeImage(_fileURL, _mainClassname);
// call function changeImage() with determined URL to load the in css-ID "legend" (static definition)
// changeImage(_legendimg[i], "legend");
// loop over css-ID's that need to be updated on initial page request
while (i < 4) {
var _imgID = (_classname + (i));
console.log("CSS ID: ", _imgID);
var _fileURL = getFileURL(_refTime, _rootURL, _rootDIR[i], _preName[i], _sufName, _offSet);
loadImage(_fileURL, _imgID);
console.log(_preName[i]);
console.log(_imgID);
i++;
}
}
//URL RETURN SURFACE CHARTS FILES
function myfun3(_rootURL, _shift, _preName, _sufName, _offSet, _rootDIR) {
var i = 0;
// check the value (string) of variable
if (_preName == "msg_surface_chart_airmass") {
// assign respective legend URL
var _legendimg = "http://earthonline.hochstaffl.eu/wp-content/uploads/2016/05/lb_airmass.png";
}
else if (_preName == "msg_surface_chart_avhrr") {
var _legendimg = "http://earthonline.hochstaffl.eu/wp-content/uploads/2016/05/lb_avhrr.png";
}
else if (_preName == "msg_surface_chart_irfc") {
var _legendimg = "http://earthonline.hochstaffl.eu/wp-content/uploads/2016/05/lb_thermal_fc2.png";
}
else if (_preName == "msg_surface_chart_rgb") {
var _legendimg = "http://earthonline.hochstaffl.eu/wp-content/uploads/2016/08/lb_rgb.png";
}
// call function changeImage() with determined _legendimg
changeImage(_legendimg, "legend");
// call function "translateTime" to (depending on time of request) determine
// time of latest available image and store output in variable _refTime
var _refTime = translateTime(getProductTime(new Date().getTime()
+ new Date().getTimezoneOffset()*60*1000,_shift));
// call function "getFileURL()" with current time of request and return output to variable _fileURL
var _fileURL = getFileURL(_refTime, _rootURL, _rootDIR, _preName, _sufName, _offSet);
//finally return the determined file URL
return _fileURL;
}
//FILE URL
function getFileURL(_refTime, _rootURL, _rootDIR, _preName, _sufName, offSet) {
// select time values of array _refTime
var _year = _refTime[0];
var _month = _refTime[1];
var _day = _refTime[2];
var _hour = _refTime[3];
var _minute = _refTime[4];
// define a offset and correct time variables for it (this is required because images are only near
// realtime processed, so upon time of webpage request one needs to correct the times depending
// on the products (i.e. some need longer to be processed))
if (offSet == 1) {
if (_minute == 00) {
_hour = ("0" + (_hour-1)).slice(-2)
_minute = '45';
}
else if (_minute == 15) {
_minute = '00';
}
else if (_minute == 30) {
_minute = '15';
}
else if (_minute == 45) {
_minute = '30';
}
}
if (offSet == 2) {
if (_minute == 00) {
_hour = ("0" + (_hour-1)).slice(-2)
_minute = '30';
}
else if (_minute == 15) {
_hour = ("0" + (_hour-1)).slice(-2)
_minute = '45';
}
else if (_minute == 30) {
_minute = '00';
}
else if (_minute == 45) {
_minute = '15';
}
}
if (offSet == 3) {
if (_minute == 00) {
_hour = ("0" + (_hour-1)).slice(-2)
_minute = '15';
}
else if (_minute == 15) {
_hour = ("0" + (_hour-1)).slice(-2)
_minute = '30';
}
else if (_minute == 30) {
_hour = ("0" + (_hour-1)).slice(-2)
_minute = '45';
}
else if (_minute == 45) {
_minute = '00';
}
}
return[(_rootURL + '/' + _rootDIR + '/' + _preName + '_' + _year + '-' + _month + '-'
+ _day + '-' + _hour + _minute + '-' + _sufName + '.jpg')];
}
//DETERMINE CURRENT TIME
function getCurrentTime() {
// get current time and return "Date" object
return new Date(new Date(new Date().getTime()
+ new Date().getTimezoneOffset()*60*1000)).getTime();
}
//GET THE RIGHT TIME FOR THE RESPECTIVE PRODUCT
function getProductTime(_refTime, _shift) {
// call translateTime which returns an array of times
var _date = translateTime(_refTime)
// assign elements of _date array to varibales
var _year = _date[0];
var _month = _date[1];
var _day = _date[2];
var _hour = _date[3];
var _minute = _date[4];
var _second = '00';
// determine time delay of respective product and create corrected request time for respective product
switch(true) {
case (_shift<=15):
if (_minute<15) {
_minute = '30';
_hour = ("0" + (_hour-1)).slice(-2)} else
if (_minute<30) {
_minute = '45';
_hour = ("0" + (_hour-1)).slice(-2)} else
if (_minute<45) {
_minute = '00';} else
if (_minute<60) {
_minute = '15';}
break;
case (_shift<=-15):
if (_minute<15) {
_minute = '30';_hour = ("0" + (_hour-1)).slice(-2)} else
if (_minute<30) {
_minute = '45';_hour = ("0" + (_hour-1)).slice(-2)} else
if (_minute<45) {
_minute = '00';} else
if (_minute<60) {
_minute = '15';}
break;
case (_shift<=30):
if (_minute<30) {
_minute = '00';} else
if (_minute<60) {
_minute = '15';}
break;
case (_shift<=-30):
if (_minute<30) {
_minute = '00';} else
if (_minute<60) {
_minute = '15';}
break;
case (_shift<=60):
if (_minute<60) {
_minute = '00';}
break;
case (_shift<-60):
if (_minute<60) {
_minute = '00';}
break;
case(_shift==360):
_minute = '00';
if (_hour>=00 && _hour<06) {
if (_month == 01 && _day == 01){
_year=_year-1; _month='12';_hour='18';_day='31'} else
if (_day == 01){
if ( _month == 05 || _month == 07 || _month == 08 ||
_month == 10 || _month == 12){
_hour = '18'; _day='30'} else
if (_month == 01 || _month == 02 ||_month == 04 ||
_month == 06 || _month == 09 || _month == 11){
_hour = '18'; _day='31'} else
if (_month == 03){
_hour = '18';_day='29'} else
{ _hour = '18';_day = _day-1}
}
}
if (_hour>=00 && _hour<06) {
_day = _day-1; _hour = '18'} else
if (_hour>=06 && _hour<12) {
_hour = '00';} else
if (_hour>=12 && _hour<18) {
_hour = '06';} else
if (_hour >= 18) {
_hour = '12';}
break;
default:
if (_minute<15) {
_minute = '45'; _hour = ("0" + (_hour-1)).slice(-2)
} else
if (_minute<30) {
_minute = '00';} else
if (_minute<45) {
_minute = '15';} else
if (_minute<60) {_minute = '30';}
break;
}
return new Date(_year, _month, _day, _hour, _minute, _second);
}
//TRANSLATE TIME
function translateTime(_refTime) {
// create new _date object for _refTime
var _date = new Date(_refTime);
var _year = _date.getFullYear();
var _month = ("0" + (_date.getMonth() + 1)).slice(-2);
var _day = ("0" + _date.getDate()).slice(-2);
var _hour = ("0" + _date.getHours()).slice(-2);
var _minute = ("0" + _date.getMinutes()).slice(-2);
var _second = ("0" + _date.getSeconds()).slice(-2);
return [_year,_month,_day,_hour,_minute,_second];
}
</script>
// SECOND PART
<div class="row">
<div class="col-left">
<div id="main_img">
<img id="sub_img" src="http://website-domain.de/PATH_TO_IMAGE/loading_logo_large.jpg"
onerror='return loadImage("http://website-domain.de/PATH_TO_IMAGE/not_available_large.jpeg", "sub_img");'>
</div>
</div>
<div class="col-right">
<div class="thumb_img">
<img id="thumb_img0" src="http://website-domain.de/PATH_TO_IMAGE/loading_logo_thumb.jpg"
onclick='changeImageOnClick(urlReturn(_rootURL, 15, _preName, _sufName, 0), _mainClassname);'>
<img id="thumb_img1" src="http://website-domain.de/PATH_TO_IMAGE/loading_logo_thumb.jpg"
onclick='changeImageOnClick(urlReturn(_rootURL, 15, _preName, _sufName, 1), _mainClassname);'>
<img id="thumb_img2" src="http://website-domain.de/PATH_TO_IMAGE/loading_logo_thumb.jpg"
onclick='changeImageOnClick(urlReturn(_rootURL, 15, _preName, _sufName, 2), _mainClassname);'>
<img id="thumb_img3" src="http://website-domain.de/PATH_TO_IMAGE/loading_logo_thumb.jpg"
onclick='changeImageOnClick(urlReturn(_rootURL, 15, _preName, _sufName, 3), _mainClassname);'>
</div>
</div>
<script>
// directory that actually contains the jpg-files (of a certain product)
var _rootDIR = "name_of_directory_below_root";
var _preName = "first_part_of_filename";
var _shift = 15;
var _mainClassname = "sub_img";
var _classname = "thumb_img";
var _offSet = 0;
// JS function "initLoad1" that is executed on initial page load
window.onload = initLoad1(_rootURL, _shift, _preName, _sufName, _classname, _mainClassname, _offSet);
</script>
