EumetCast.de Website

From MyWiki
Jump to: navigation, search

In order to present various satellite products online the website eumetcast.de utilizes javascript in combination with css and html. The javascript code written in course of creating the website is presented in the following lines. Javascript provides most of the websites functionality in terms of dynamic image presentation.

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>