javascript

Our challenge was to have several Paessler/PRTG MAPs (www.paessler.com) cycling through a TV in the IT room. We did not want to have just one static MAP at all. This was originally posted by myself here: https://kb.paessler.com/en/topic/79668-prtg-maps-auto-cycle

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 LEFT and RIGHT arrow key on your keyboard to jump to the previous or next URL while you execute the HTML file (if not randomized)
• the up/down arrow keys allow you to show/hide a menu of all links available, this then allows you to click on a specific item in the list and show this specifically – the list is always generated on the fly – this prepares for future adjustments like showing where you are right now…
• added a feature for to PAUSE the script – press P to stop the cycle any time
• added a randomization – you can activate it and any of the URLs will be accessed randomly – if it is disabled, the script will cycle through the URLs as defined
  • var bolRandomize=true;

For fun – or how to add a few Easter Eggs:

• 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.

Updated – December 2018: This is version 2.0 of the script. Updates are some minor bug fixes and mainly the ability to scroll forward and backward through the URLs while using the left and right arrow keys on you keyboard. Additionally do the up/down keys show or hide a complete menu of all links that are cycled through.This then allows you to click on a specific link to show the content.

Updated – April 2019: Version 3.0 of the script has now a PAUSE feature and a randomization feature that you can enable/disable.

Notes as per May 2022: Did not change the script but wanted to make you all aware that you might run in to issues with X-FRAME-OPTIONS set to SAMEORIGIN. This can be investigated while using your browsers developer tools (F12), you should see script errors revealing this issue. Eventually it boils down to some pages not loading (e.g., https://www.google.com) due to them not allowing to be embedded. You can see if the page offers special embedded links/URLs or try to use a proxy-script that feeds to page to the iFrame. At this point I can not offer a good working solution, the script was designed to load Paessler PRTG MAPS and this is still working just fine. Using the script beyond this purpose might work or not due to the target page settings and configurations.