New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

200.000 administrators have chosen PRTG to monitor their network. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free PRTG
Download >>

 

What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general. You are invited to get involved by asking and answering questions!

Learn more

 

Top Tags


View all Tags


PRTG MAPs - Auto-cycle

Votes:

6

Your Vote:

Up

Down

Our challenge was to have several PRTG MAPs cycling through a TV in the IT room. We did not want to have just one static MAP at all.

In order to accomplish this - we created a simple HTML file with some JAVASCRIPT code that runs through several URLs you easily can specify. Per URL there is a timeout value. Further is there a company logo that will be displayed while a MAP is loading, that will fade out and actually make the MAP visible.

The HTML code including the JavaScript is below - here are some things I wanted to explain and share about it.

Line 6 - to the end: src="bgpicture.png" This can be replaced by any other file-name - simple use a LOGO here that you want to see while the MAP is loaded - it will fade out

Line 11 - 21 - those lines hold the URLs in var Source=[] Add a line per URL you want to cycle through, each URL has the same format as follows. Please MAKE SURE that the last URL entry is not followed by a comma "," otherwise the script might fail to cycle.

Entry format:

  • 'URL',timeout,showBGfading,'title'
  • URL in text-marks
  • timeout in seconds
  • show background picture/logo fading out - 0 (do not show) or 1 (show and fade)
  • title/description in text-marks

Example: 'https://prtg.company.local/public/mapshow.htm?id=1111&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',60,1,'Network Map', This would mean:

We simply load the HTML file in the browser and display it as full screen - avoiding any browser title-bar etc.

Features:

  • You will see a timeout counter in the upper right - this shows you how much longer the current view will be available.
  • You will see a title/description in the upper left while the element was loaded - it will slowly (slower the bgpicture) fade out - you can use any text there - per URL
  • you might or might not see the BGPicture element - fading out - depending on your URL configuration - we found it worked out nicely cause we didn't want to see a ...load map data... or anything and have a smooth transition between the maps..
  • we set timeouts per MAP like 60 seconds etc. - so we a) cycle quick enough and b) have enough time to look at the data shown to us
  • you can use the RIGHT arrow key on your keyboard to jump to the next URL while you execute the HTML file

For the fun:

  • you can use any file (we use MP4 and GIFs) to be displayed as well - our URL list is rather long - mostly just going through the same URLs but every now and then showing briefly a little IT joke in between - of course it depends a bit on your company - how ever - wanted to mention that we even like to do that for a short 5 seconds period.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body style="margin:0px;padding:0px;overflow:hidden;font-family:Arial;" onclick="javaqscript:onTimer();">
<div id="bgPicture" style="position: absolute;opacity: 0.4;width: 100%; height: 100%;background-color:white;"><img style="position:fixed;top: 50%; left: 50%;transform: translate(-50%, -50%);" src="bgpicture.png"></div>
<div id="TitleBar" style="position: absolute;opacity: 1;width: 100%; height: 100%;"><div id="ShowName" style="top: 2; left: 2; text-shadow: 2px 2px white;"></div></div>
<div id="CountDownMaster" style="position: absolute;top: 2; right: 0;"><div id="CountDownCounter" style="color:grey;text-shadow: 2px 2px white;"></div></div>
<iframe src="about:blank" id="myframe" style="overflow:hidden;height:100vH;width:100%" frameborder="2" scrolling=no></iframe>
<script type="text/javascript">
// URL section starts here
//FORMAT:
//'URL - any possible URL like a MP4 video, GIF, web-url, etc..',timeout in seconds,show fade out bgpicture,'current title/description of the website'
var Source=[
	'FunnyVideo.mp4',5,0,'Just an IT joke video - place in same directory as the HTML file',
	'https://prtg.company.local/public/mapshow.htm?id=1111&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',60,1,'Network Map',
	'https://prtg.company.local/public/mapshow.htm?id=2222&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',60,1,'Make sure you make them available without a logon',
	'https://prtg.company.local/public/mapshow.htm?id=3333&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',30,1,'in PRTG - so you can have this running in your NOC',
	'FunnyVideo.gif',5,0,'Just an IT joke GIF - animated picture - place in same directory as the HTML file'
]
// URL section ends here - MAKE SURE the last entry is not followed by a ending COMMA
iSources = Source.length - 1;
var iSource=-1;
document.getElementById('myframe').src = Source[iSource];
function fadeBG()
{
	var myDIV = document.getElementById('bgPicture');
	if (myDIV.style.opacity > 0) 
	{
		myDIV.style.opacity = myDIV.style.opacity-0.01;
		
	}
	
	myDIV2 = document.getElementById("TitleBar");
	if (myDIV2.style.opacity > 0) 
	{
		myDIV2.style.opacity = myDIV2.style.opacity-0.005;
		
	}
}
var DoFadeBG = window.setInterval(fadeBG, 30);
var CountDownValue=0;
function ExecuteCountdown()
{
	if (CountDownValue > 0)
	{
		CountDownValue=CountDownValue-1;
		document.getElementById("CountDownCounter").innerHTML = CountDownValue;
	}
}
var DoCountDown = window.setInterval(ExecuteCountdown, 1000);
function onTimer()
{
	window.clearTimeout(myTimeOut);
	if (iSource >= iSources)
	{
		iSource = -1;
	}	
	
	iSource = iSource + 1;
	document.getElementById('myframe').src = Source[iSource];
	iSource = iSource + 1;	
	myTimeOut = window.setTimeout(onTimer, parseInt(Source[iSource])*1000);
	CountDownValue=Source[iSource];
	iSource = iSource + 1;
	document.getElementById('bgPicture').style.opacity=Source[iSource];
	iSource = iSource + 1;
	document.getElementById('ShowName').innerHTML=Source[iSource];
	document.getElementById('TitleBar').style.opacity=1;
}
myTimeOut = window.setTimeout(onTimer, 100);

var Key = {
  LEFT:   37,
  UP:     38,
  RIGHT:  39,
  DOWN:   40
}; 
function checkKey(e) {
	e = e || window.event;
	switch (e.keyCode) {
		case Key.RIGHT:
			onTimer ();
			break;
		default:
			break;
	}
}
document.onkeydown = checkKey;
</script>
</body>
</html>

cycle map maps prtg url

Created on May 29, 2018 8:29:34 PM by  Florian Rossmark (4,110) 3 2

Last change on May 30, 2018 6:27:46 AM by  Erhard Mikulik [Paessler Support]



9 Replies

Votes:

1

Your Vote:

Up

Down

Hi Florian,

First of all, thank you for this, we appreciate it. Though....well, how do I tell you this now? Thing is, there is already such a feature in PRTG, it's called Map Rotation.

Nevertheless I appreciate what you did there, because your solution makes it more flexible, because you can basically integrate any url you like (not to forget the funny pics and videos ^^) and are not limited to only maps from the particular PRTG installation, which I'm pretty sure some users will find useful, I recently even had an inquiry regarding this and will dig the ticket out to inform the customer like "Hey, funny story, look what we just got here" :)

Thanks again & kind regards,

Erhard

Created on May 30, 2018 6:35:52 AM by  Erhard Mikulik [Paessler Support]

Last change on May 30, 2018 11:56:41 AM by  Erhard Mikulik [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hi Erhard,

No worries - I admit I did not know that - this is almost too hidden of a function - and it is as well very simple and does really not provide a lot of control or functionality.

The script that I posted above did not cost me more then 2 hours and is rather variable and you could even implement more features in it.. like originally I had a watermark logo in there instead of the fade-out feature with the logo... same DIV just not configured as fade out or you would fade it only to let's say 20% - so it stays a watermark..

In any way - the reason I share stuff on PRTGs website is simple - I like to share stuff and knowledge as well as creating a way to keep my stuff online and if I would ever need it again I can simply use a search engine and find it..

Would have way more stuff, some of it related to PRTG and sensors etc.. when ever I think it is really worth sharing and I find the time to do so, I will continue... as long guys don't mind me doing so :-)

Hope all is right in good old Bavaria (und in Franken), Regards Florian

Created on May 30, 2018 3:03:45 PM by  Florian Rossmark (4,110) 3 2



Votes:

0

Your Vote:

Up

Down

Thank you, Florian, we appreciate it. I also informed that other user I've mentioned about this and he was very happy about it, as expected :)

Yes, all is well in Franken, thank you :D

Keep up the good work & kind regards,

Erhard

Created on May 30, 2018 3:10:20 PM by  Erhard Mikulik [Paessler Support]



Votes:

2

Your Vote:

Up

Down

An FYI here - I updated the script - this here is the latest version - you always will find it here as well: https://www.it-admins.com/auto-cycle-through-urls/

New features:

  • navigate through the cycled URLs with the left/right arrow key - forward and backward
  • use the up arrow key to show a menu of all URLs on the left - you can click any to jump to it
  • use the down arrow key to hide the menu again
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body style="margin:0px;padding:0px;overflow:hidden;font-family:Arial;" onclick="javaqscript:onTimer();">
<div id="bgPicture" style="position: absolute; opacity: 0.4; width: 100%; height: 100%; background-color:white;"><img style="position:fixed;top: 50%; left: 50%;transform: translate(-50%, -50%);" src="bgpicture.png"></div>
<div id="TitleBar" style="position: absolute; opacity: 1; width: 100%; height: 100%;"><strong><div id="ShowName" style="top: 2; left: 2; text-shadow: 2px 2px white;"></div></strong></div>
<div id="CountDownMaster" style="position: absolute;top: 2; right: 0;"><strong><div id="CountDownCounter" style="text-shadow: 2px 2px white;"></div></strong></div>
<div id="Menu" style="opacity: 0.8; display: none; position: absolute; background-color: white; overflow-y: scroll; height: 100%"><h3><u>Menu</u></h3></div>
<iframe src="about:blank" id="myframe" style="overflow:hidden;height:100vH;width:100%" frameborder="2" scrolling=no></iframe>
<script type="text/javascript">
// URL section starts here
//FORMAT:
//'URL - any possible URL like a MP4 video, GIF, web-url, etc..',timeout in seconds,show fade out bgpicture,'current title/description of the website'
var Source=[
	'FunnyVideo.mp4',5,0,'Just an IT joke video - place in same directory as the HTML file',
	'https://prtg.company.local/public/mapshow.htm?id=1111&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',60,1,'Network Map',
	'https://prtg.company.local/public/mapshow.htm?id=2222&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',60,1,'Make sure you make them available without a logon',
	'https://prtg.company.local/public/mapshow.htm?id=3333&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',30,1,'in PRTG - so you can have this running in your NOC',
	'FunnyVideo.gif',5,0,'Just an IT joke GIF - animated picture - place in same directory as the HTML file'
	'https://prtg.company.local/public/mapshow.htm?id=1111&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',60,1,'Network Map',
	'https://prtg.company.local/public/mapshow.htm?id=2222&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',60,1,'Make sure you make them available without a logon',
	'https://prtg.company.local/public/mapshow.htm?id=3333&mapid=ABCDEFGH-1234-ABCD-1234-123456789000',30,1,'in PRTG - so you can have this running in your NOC'
]
// URL section ends here - MAKE SURE the last entry is not followed by a ending COMMA
iSources = Source.length - 1;
var iSource=-1;
document.getElementById('myframe').src = Source[iSource];
function fadeBG()
{
	var myDIV = document.getElementById('bgPicture');
	if (myDIV.style.opacity > 0) 
	{
		myDIV.style.opacity = myDIV.style.opacity-0.01;
		
	}
	
	myDIV2 = document.getElementById("TitleBar");
	if (myDIV2.style.opacity > 0) 
	{
		myDIV2.style.opacity = myDIV2.style.opacity-0.0025;
		
	}
}
var DoFadeBG = window.setInterval(fadeBG, 30);
var CountDownValue=0;
function ExecuteCountdown()
{
	if (CountDownValue > 0)
	{
		CountDownValue=CountDownValue-1;
		document.getElementById("CountDownCounter").innerHTML = CountDownValue;
	}
}
var DoCountDown = window.setInterval(ExecuteCountdown, 1000);
function onTimer()
{
	window.clearTimeout(myTimeOut);
	if (iSource >= iSources)
	{
		iSource = -1;
	}	
	
	iSource = iSource + 1;
	document.getElementById('myframe').src = Source[iSource];
	iSource = iSource + 1;
	myTimeOut = window.setTimeout(onTimer, parseInt(Source[iSource])*1000);
	CountDownValue=Source[iSource];
	iSource = iSource + 1;
	document.getElementById('bgPicture').style.opacity=Source[iSource];
	iSource = iSource + 1;
	document.getElementById('ShowName').innerHTML=Source[iSource];
	document.getElementById('TitleBar').style.opacity=1;
}
myTimeOut = window.setTimeout(onTimer, 100);

function ShowMenu()
{
	myList = document.createElement('ul');
	myList.id= "MenuList";
	
	for (i = 0; i < iSources;){
		tmpListItem = document.createElement('li');
	
		tmpLink = document.createElement('a');
		tmpLink.href = "javascript:iSource=" + (i-1) + ";onTimer();";
		tmpLink.textContent = Source[(i+3)];
		
		tmpListItem.appendChild(tmpLink);

		myList.appendChild(tmpListItem);
		
		i = i+4;
	}
	myMenu = document.getElementById("Menu");
	myMenu.appendChild(myList);
	document.getElementById("Menu").style.display="block";
}

function HideMenu()
{
	myList = document.getElementById("MenuList");
	myList.parentNode.removeChild(myList);
	document.getElementById("Menu").style.display="none";
}

var Key = {
  LEFT:   37,
  UP:     38,
  RIGHT:  39,
  DOWN:   40
}; 
function checkKey(e) {
	e = e || window.event;
	switch (e.keyCode) {
		case Key.LEFT:
			//info.value += "LEFT ";
			if (iSource>=1)
			{
				iSource = iSource - (2*4);
			}
			else
			{
				iSource = -1;
			}
			onTimer();
			break;
		case Key.UP:
			//info.value += "UP ";
			ShowMenu();
			break;
		case Key.RIGHT:
			//info.value += "RIGHT ";
			onTimer();
			break;
		case Key.DOWN:
			HideMenu();
			//info.value += "DOWN ";
			break;
		default:
			//info.value += "SOMEKEY ";
	}
}
document.onkeydown = checkKey;
</script>
</body>
</html>

Regards

Florian Rossmark

www.it-admins.com

Created on Dec 5, 2018 4:35:34 PM by  Florian Rossmark (4,110) 3 2



Votes:

0

Your Vote:

Up

Down

What is the difference of this script and standard solution for maps rotation: https://www.paessler.com/manuals/prtg/maps#rotation ?

Created on Dec 6, 2018 6:43:49 AM by  Vasiliy (12) 1



Votes:

0

Your Vote:

Up

Down

Hi Vasiliy,

Florian's script is more flexible as you can integrate any url you want in the rotation if needed, not just PRTG maps.

Kind regards,

Erhard

Created on Dec 6, 2018 7:10:03 AM by  Erhard Mikulik [Paessler Support]



Votes:

4

Your Vote:

Up

Down

Thanks to Florian for this great Script :-)

We're using it on a raspberry pi (chromium in kiosk-mode) together with HDMI-CEC to control a tv in our office as a replacement for the PRTG built-in maprotation mechanism which is - specifically in adding some URL's which where not part of PRTG maps - not very flexible at all.

I've added another keystroke ("p") to stop the timer which could be useful for example if you're standing in front of the display / tv with your entire team discussing any values which where actually displayed.

Unfortunately my javascript knowledge is very, very poor so i bet there would be way better approaches to archive that. Nontheless here's what i have:

To pause the rotation just press "p" (the counter would still count down, but the displayed website wouldn't change if the timer is on "0"). To resume the rotation, just use the right (or left) arrow key.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body style="margin:0px;padding:0px;overflow:hidden;font-family:Arial;" onclick="javaqscript:onTimer();">
<div id="bgPicture" style="position: absolute; opacity: 0.4; width: 100%; height: 100%; background-color:white;"><img style="position:fixed;top: 50%; left: 50%;transform: translate(-50%, -50%);" src="bgpicture.png"></div>
<div id="TitleBar" style="position: absolute; opacity: 1; width: 100%; height: 100%;"><strong><div id="ShowName" style="top: 2; left: 2; text-shadow: 2px 2px white;"></div></strong></div>
<div id="CountDownMaster" style="position: absolute;top: 2; right: 0;"><strong><div id="CountDownCounter" style="text-shadow: 2px 2px white;"></div></strong></div>
<div id="Menu" style="opacity: 0.8; display: none; position: absolute; background-color: white; overflow-y: scroll; height: 100%"><h3><u>Menu</u></h3></div>
<iframe src="about:blank" id="myframe" style="overflow:hidden;height:100vH;width:100%" frameborder="2" scrolling=no></iframe>
<script type="text/javascript">
// URL section starts here
//FORMAT:
//'URL - any possible URL like a MP4 video, GIF, web-url, etc..',timeout in seconds,show fade out bgpicture,'current title/description of the website'
var Source=[
		'https://firsturl.com',10,1,'First',
		'https://secondurl.com',10,0,'Second',
		'https://thirdurl.com',10,0,'Third'
]
// URL section ends here - MAKE SURE the last entry is not followed by a ending COMMA
iSources = Source.length - 1;
var iSource=-1;
document.getElementById('myframe').src = Source[iSource];
function fadeBG()
{
	var myDIV = document.getElementById('bgPicture');
	if (myDIV.style.opacity > 0) 
	{
		myDIV.style.opacity = myDIV.style.opacity-0.01;
		
	}
	
	myDIV2 = document.getElementById("TitleBar");
	if (myDIV2.style.opacity > 0) 
	{
		myDIV2.style.opacity = myDIV2.style.opacity-0.0025;
		
	}
}
var DoFadeBG = window.setInterval(fadeBG, 30);
var CountDownValue=0;
function ExecuteCountdown()
{
	if (CountDownValue > 0)
	{
		CountDownValue=CountDownValue-1;
		document.getElementById("CountDownCounter").innerHTML = CountDownValue;
	}
}
var DoCountDown = window.setInterval(ExecuteCountdown, 1000);
function onTimer()
{
	window.clearTimeout(myTimeOut);
	if (iSource >= iSources)
	{
		iSource = -1;
	}	
	
	iSource = iSource + 1;
	document.getElementById('myframe').src = Source[iSource];
	iSource = iSource + 1;
	myTimeOut = window.setTimeout(onTimer, parseInt(Source[iSource])*1000);
	CountDownValue=Source[iSource];
	iSource = iSource + 1;
	document.getElementById('bgPicture').style.opacity=Source[iSource];
	iSource = iSource + 1;
	document.getElementById('ShowName').innerHTML=Source[iSource];
	document.getElementById('TitleBar').style.opacity=1;
}
myTimeOut = window.setTimeout(onTimer, 100);

function ShowMenu()
{
	myList = document.createElement('ul');
	myList.id= "MenuList";
	
	for (i = 0; i < iSources;){
		tmpListItem = document.createElement('li');
	
		tmpLink = document.createElement('a');
		tmpLink.href = "javascript:iSource=" + (i-1) + ";onTimer();";
		tmpLink.textContent = Source[(i+3)];
		
		tmpListItem.appendChild(tmpLink);

		myList.appendChild(tmpListItem);
		
		i = i+4;
	}
	myMenu = document.getElementById("Menu");
	myMenu.appendChild(myList);
	document.getElementById("Menu").style.display="block";
}

function HideMenu()
{
	myList = document.getElementById("MenuList");
	myList.parentNode.removeChild(myList);
	document.getElementById("Menu").style.display="none";
}

var Key = {
  LEFT:   37,
  UP:     38,
  RIGHT:  39,
  PAUSE:  80,
  DOWN:   40
}; 
function checkKey(e) {
	e = e || window.event;
	switch (e.keyCode) {
		case Key.LEFT:
			//info.value += "LEFT ";
			if (iSource>=1)
			{
				iSource = iSource - (2*4);
			}
			else
			{
				iSource = -1;
			}
			onTimer();
			break;
		case Key.UP:
			//info.value += "UP ";
			ShowMenu();
			break;
		case Key.RIGHT:
			//info.value += "RIGHT ";
			onTimer();
			break;
		case Key.DOWN:
			HideMenu();
			//info.value += "DOWN ";
			break;
		case Key.PAUSE:
			clearTimeout(myTimeOut);
			//info.value += "PAUSE ";
			break;
		default:
			//info.value += "SOMEKEY ";
	}
}
document.onkeydown = checkKey;
</script>
</body>
</html>

Created on Apr 30, 2019 1:06:28 PM by  ll4mat (40)

Last change on Apr 30, 2019 1:23:28 PM by  Erhard Mikulik [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Thanks for contributing, ll4mat, we appreciate it.

Kind regards,

Erhard

Created on Apr 30, 2019 1:27:10 PM by  Erhard Mikulik [Paessler Support]



Votes:

0

Your Vote:

Up

Down

Hi ll4mat,

I love great ideas, so I took this one and made it even better...

What is new in this revision of the script:

  • your PAUSE feature while pressing P was integrated including to switch the TITLE to show in the left and FREEZE the countdown as well as having another centered indicator (water mark) that the script is paused
    • pressing P again, switches to the next map
  • a while ago I changed the script a bit to randomize the MAP cycle instead of going straight forward through it - the is a line var bolRandomize=true/false in the script that actually controls this
  • bug fixed the menu control a bit a while ago as well... was something minor...

Here is the current version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body style="margin:0px;padding:0px;overflow:hidden;font-family:Arial;" onload="javaqscript:onTimer();">
<div id="bgPicture" style="position: absolute; opacity: 0.4; width: 100%; height: 100%; background-color:white;"><img style="position:fixed;top: 50%; left: 50%;transform: translate(-50%, -50%);" src="bgpicture.png"></div>
<div id="TitleBar" style="position: absolute; opacity: 1; width: 100%; height: 100%;"><strong><div id="ShowName" style="top: 2; left: 2; text-shadow: 2px 2px white;"></div></strong></div>
<div id="CountDownMaster" style="position: absolute;top: 2; right: 0;"><strong><div id="CountDownCounter" style="text-shadow: 2px 2px white;"></div></strong></div>
<div id="Menu" style="opacity: 0.8; display: none; position: absolute; background-color: white; overflow-y: scroll; height: 100%"><h3><u>Menu</u></h3></div>
<div id="Pause" style="opacity: 0.2; display: none; position: absolute; background-color: transparent; height: 100%; color: white; text-shadow: 2px 2px black; width: 100%; text-align: center; font-size: xx-large"><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br><h1>PAUSED</h1><br></div>
<iframe src="about:blank" id="myframe" style="overflow:hidden;height:100vH;width:100%" frameborder="2" scrolling=no></iframe>
<script type="text/javascript">
var Source=[
	'https://prtg.domain.com/public/mapshow.htm?id=3528&mapid=4A2F3F55-8565',60,1,'Title 1',
	'https://prtg.domain.com/public/mapshow.htm?id=9587&mapid=C09AF100-A9D6',30,1,'Titel 2',
	'https://prtg.domain.com/public/mapshow.htm?id=8689&mapid=DC030F11-3A1D',90,1,'Title 3',
	'https://prtg.domain.com/public/mapshow.htm?id=8688&mapid=6401B136-D8D9',60,1,'Title 4'
]
iSources = Source.length - 1;
var iSource=-1;
var iMenu=-1;
var bolPause=false;
var bolRandomize=true; //change this to TRUE to have a randomized map cycle or change it to FALSE to go step by step through the defined URLs
document.getElementById('myframe').src = Source[iSource];
function fadeBG()
{
	if (!bolPause) {
		var myDIV = document.getElementById('bgPicture');
		if (myDIV.style.opacity > 0) 
		{
			myDIV.style.opacity = myDIV.style.opacity-0.01;
			
		}
		
		myDIV2 = document.getElementById("TitleBar");
		if (myDIV2.style.opacity > 0) 
		{
			myDIV2.style.opacity = myDIV2.style.opacity-0.0025;
			
		}
	}
}
var DoFadeBG = window.setInterval(fadeBG, 30);
var CountDownValue=0;
function ExecuteCountdown()
{
	if (CountDownValue > 0)
	{
		CountDownValue=CountDownValue-1;
		document.getElementById("CountDownCounter").innerHTML = CountDownValue;
	}
}
var DoCountDown = window.setInterval(ExecuteCountdown, 1000);
function onTimer()
{
	window.clearTimeout(myTimeOut);
	
	if (iMenu > -1) {
		iSource = iMenu;
		iMenu = -1;
	} else {
		if (!bolRandomize) {
			if (iSource >= iSources)
			{
				iSource = -1;
			}	
			iSource = iSource + 1;
		} else {
			iSource = Math.round((Math.floor(Math.random() * (+iSources - +0)) + +0) / 4) * 4;
		}
	}
	document.getElementById('myframe').src = Source[iSource];
	iSource = iSource + 1;
	myTimeOut = window.setTimeout(onTimer, parseInt(Source[iSource])*1000);
	CountDownValue=Source[iSource];
	iSource = iSource + 1;
	document.getElementById('bgPicture').style.opacity=Source[iSource];
	iSource = iSource + 1;
	document.getElementById('ShowName').innerHTML=Source[iSource];
	document.getElementById('TitleBar').style.opacity=1;
}
myTimeOut = window.setTimeout(onTimer, 100);

function ShowMenu()
{
	myList = document.createElement('ul');
	myList.id= "MenuList";
	
	for (i = 0; i < iSources;){
		tmpListItem = document.createElement('li');
	
		tmpLink = document.createElement('a');
		tmpLink.href = "javascript:iMenu=" + (i) + ";onTimer();";//Source[i];
		tmpLink.textContent = Source[(i+3)];
		
		tmpListItem.appendChild(tmpLink);

		myList.appendChild(tmpListItem);
		
		i = i+4;
	}
	myMenu = document.getElementById("Menu");
	myMenu.appendChild(myList);
	document.getElementById("Menu").style.display="block";
}

function HideMenu()
{
	myList = document.getElementById("MenuList");
	myList.parentNode.removeChild(myList);
	document.getElementById("Menu").style.display="none";
}

var Key = {
  LEFT:   37,
  UP:     38,
  RIGHT:  39,
  DOWN:   40,
  PAUSE:  80
}; 
function checkKey(e) {
	e = e || window.event;
	switch (e.keyCode) {
		case Key.LEFT:
			//info.value += "LEFT ";		
			if (iSource>3)
			{
				iSource = iSource - (2*4);
			}
			else
			{
				iSource = (iSources-4);
			}
			onTimer();
			break;
		case Key.UP:
			//info.value += "UP ";
			ShowMenu();
			break;
		case Key.RIGHT:
			//info.value += "RIGHT ";			
			onTimer();
			break;
		case Key.DOWN:
			HideMenu();
			//info.value += "DOWN ";
			break;
		case Key.PAUSE:
			bolPause = !bolPause;
			if (bolPause) {
				window.clearTimeout(myTimeOut);
				document.getElementById("Pause").style.display="block";
				CountDownValue=0;
				document.getElementById("CountDownCounter").innerHTML = "Paused"
				document.getElementById('TitleBar').style.opacity=1;
				document.getElementById('bgPicture').style.opacity=0;
			} else {
				myTimeOut = window.setTimeout(onTimer, 100);
				document.getElementById("Pause").style.display="none";
			}
			break;
		default:
			//info.value += "SOMEKEY ";
	}
}
document.onkeydown = checkKey;
</script>
</body>
</html>

Regards Florian

Created on Apr 30, 2019 2:32:47 PM by  Florian Rossmark (4,110) 3 2



Please log in or register to enter your reply.


Disclaimer: The information in the Paessler Knowledge Base comes without warranty of any kind. Use at your own risk. Before applying any instructions please exercise proper system administrator housekeeping. You must make sure that a proper backup of all your data is available.