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:
- URL = https://prtg.company.local/public/mapshow.htm?id=1111&mapid=ABCDEFGH-1234-ABCD-1234-123456789000
- timeout = 60 seconds
- bgpicture = 1 - start with BGPicture from the HTML code and let it fade out (fades the map in)
- Title/Description = Network Map
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>
Last change on May 30, 2018 6:27:46 AM by
Add comment