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


How can I add my own HTML or Javascript block to PRTG maps?

Votes:

1

Your Vote:

Up

Down

I want to show a webcam image on a map. I have a piece of HTML and/or Javascript code that I would like to include into the map. How can I create a map object for this?

html javascript maps prtg

Created on Feb 17, 2010 2:04:28 PM by  Dirk Paessler [Founder Paessler AG] (10,900) 3 4

Last change on Mar 2, 2010 9:06:18 AM by  Daniel Zobel [Paessler Support]



1 Reply

Accepted Answer

Votes:

1

Your Vote:

Up

Down

This applies to PRTG Network Monitor 7.1-7.3

Note: The information given below is not officially covered by Paessler's support offerings. You can use it at your own risk. Our support team will not be able to dig into questions regarding this technique.

In order to include your own HTML and/or Javascript code in a map you must create a "map object" that includes this code.

Step 1: Create a new mapobject file

  • Go to the following folder of your PRTG installation and duplicate a file (e.g. "An Icon A1.htm") \PRTG Network Monitor\website\mapobjects
  • Rename the file to a new name starting with a "z" to move it to the end of alphabetically sorted list, (e.g. zz_MyHTML.htm)

Step 2: Edit the mapobject file

  • Open the file in a text editor
  • Change the first line of the file, it contains the name which will be shown in the web interface (format is "group:name")
  • Delete the HTML code between the <span> and </span> and paste your own HTML and/or JS code
  • Save the file

IMPORTANT LIMITATIONS

The HTML and Javascript code will potentially be loaded multiple times into one webpage, either because the map object is used more than once, or because it is available in the DOM due to usage of the "tabs" on the map/map editor page, or they are loaded multiple times by PRTG's in-page refresh.

This means that

  • you can not use function declarations
  • you may not use "setTimer" and "setInterval" functions as usual, they would run multiple times. The code below shows a "dirty" trick to work around this issue.
  • you may not use document.write, please use DOM manipulation instead, using jQuery is recommended

Also you should not use ActiveX controls or the <object> tag and other performance heavy HTML techniques, they could create problems on maps that are reloaded every 60 seconds for hours.

Step 3: Use the new mapobject in a map

Now go to PRTG's Map Editor and add the new object (don't forget to select one icon from the sensor tree, even though it is not necessary for this object)

Sample Map Object for an AXIS 207 Network Camera with automatic 2 second webcam image refresh

<!--Samples: AXIS 207 Network Camera Webcam-->

<div class="map_object map_graph" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
	<#mapobject type="objectgrip" mode="<@editmode>">
	<#mapobject type="htmlbefore" subid="<@subid>">
	<span>
		<SCRIPT LANGUAGE="JavaScript">

	// Script to download and refresh a webcam image from an AXIS 207 Network Camera

		
	$(document).ready(function() //let's do everything after the page had fully loaded
	{		

		// Set the BaseURL to the URL of your camera, set width and height
		var BaseURL = "http://10.0.0.252/";
		var DisplayWidth = "<@width>";  // @width and @height will be replaced with map object size
		var DisplayHeight = "<@height>";
		
		// This is the path to the image generating file inside the camera itself
		var File = "axis-cgi/jpg/image.cgi?resolution=<@width>x<@height>&";

		var url = BaseURL+File;
	
		// Let's set the image URL and size
		$(".webcam").attr("src",url).attr("height",DisplayHeight).attr("width",DisplayWidth);
		
	});

		// Here we define our refreshing code. This must be done "dirty" because we may not 
		// use "function" etc. in a map object (the HTML of the map object is potentially loaded
		// multiple times because it is used multiple times or because of the in-page refresh of PRTG
		
		// let's test if the variable for the code is already defined. If yes, don't do it again!

		if ((typeof(window["webcamrefreshcode"]) == "undefined"))
		{
			webcamrefreshcode="$('.webcam').each(function(i,a){$(a).attr('src',$(a).attr('src').replace(/\&.*$/, '') + '&' + Math.random())});setTimeout(webcamrefreshcode, 2000);";
			theTimer = setTimeout(webcamrefreshcode, 2000);
		}

		</SCRIPT> 
		<img class="webcam" src="" height="1" width="1" alt="Live Webcam Image">
	</span>
	<#mapobject type="htmlafter" subid="<@subid>">
</div>

Created on Feb 17, 2010 3:01:40 PM by  Dirk Paessler [Founder Paessler AG] (10,900) 3 4

Last change on Feb 17, 2010 4:31:01 PM by  Daniel Zobel [Paessler Support]



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.