New Question
 
 
PRTG Network Monitor

Intuitive to Use.
Easy to manage.

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


Map Circle Object with Status Related Background

Votes:

1

Your Vote:

Up

Down

How can I create monitoring objects in a circle format and status colors to use in creating maps.

http://i.imgur.com/bY1xsJV.png

https://kb.paessler.com/en/topic/25613-how-to-create-a-custom-map-icon

custom-map custom-object map-designer map-objects mapobject maps

Created on Aug 15, 2016 7:08:42 PM by  Zarate Max (1,663) 5 5



Best Answer

Accepted Answer

Votes:

2

Your Vote:

Up

Down

Thanks for the answers and would like to see how you Mattk developed your map object.

I edited the map object (trafficlight.htm) and added the function (tooltip) to shows a popup with more sensor information.

https://www.paessler.com/manuals/prtg/maps_designer

https://kb.paessler.com/en/topic/61263-where-can-i-find-custom-map-objects-and-other-map-customizations


The following custom map object code.

C:\Program Files (x86)\PRTG Network Monitor\webroot\mapobjects

custom_object_circle.html

code:

<!--Custom: circle with black border Status Related Background-->

<div class="map_object map_table map_icon2 map_icon_large" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="overflow:hidden;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">
  <a href="/sensor.htm?id=<@objectid>" show="linklong">
   
   <div  data-toggle="tooltip"  data-placement="top"
  title=" <b> Device: &nbsp; <#objectproperty  name="ParentDevice" show="text" id="<@objectid>">
  <p>
   Sensor: &nbsp; <#objectproperty name="Name" id="<@objectid>">
  <p>
   Status: &nbsp; <#objectstatus name="lastvalue" id="<@objectid>"><p>"> 

 	<#mapobject type="htmlafter" subid="<@subid>"> 
    <#mapobject type="htmlafter" subid="<@subid>">

     
  <#sensor type="colorclassofstate" id="<@objectid>" var="status">
  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#if value="@nodename" is="sensor" then="sensr" else="hasred" varexpand="value" var="containsred">
  <#if value="@nodename" is="sensor" then="sensy" else="hasyellow hasnored" varexpand="value" var="containsyellow">
  <#if value="@nodename" is="sensor" then="sensg" else="hasgreen hasnoyellow hasnored" varexpand="value" var="containsgreen">
   <svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0"
  width="100%"
  height="100%"
  viewBox="0 0 100 100">
    <defs>
      <rect x="0" y="0" width="1px" height="1px" fill="#ECECEC" id="a" />
    </defs>
	<use xlink:href="#a" />
    <g class="trafficlight" transform="translate(0,0)">
      <use xlink:href="#a" />
	  <circle r="40" fill="#DADADA" cx="50" cy="50" />
	  <circle style="<#if value="@status" contains="@containsgreen" then="" else="opacity:0" varexpand="value,contains">"  r="40" fill="#98BD1D"  cx="50" cy="50" />
	  <circle style="<#if value="@status" contains="@containsred" then="" else="opacity:0" varexpand="value,contains">"    r="40" fill="#D21925"  cx="50"  cy="50" />
      <circle style="<#if value="@status" contains="@containsyellow" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#EECE00"  cx="50" cy="50" /> 
    </g>
	</svg> </a>
	
 
  <div style="position:relative;margin-top:-20px">
  
    <#mapobject type="htmlafter" subid="<@subid>">
  </div>
  
</div>
</div>

Zarate Max

Created on Aug 26, 2016 2:54:34 PM by  Zarate Max (1,663) 5 5

Last change on Aug 29, 2016 7:53:46 AM by  Torsten Lindner [Paessler Support]



3 Replies

Votes:

0

Your Vote:

Up

Down

Hello,

Thank you very much for your KB-Post. I'm very much afraid such a circular map object will have to be custom built with html/css/js. We don't have presets for I'm afraid.

best regards.

Created on Aug 17, 2016 10:47:09 AM by  Torsten Lindner [Paessler Support]



Votes:

1

Your Vote:

Up

Down

If you post your e-mail I will share you the one I made, I can't offer any kind of support but I did make it work and have been using it for quite a while.

Created on Aug 25, 2016 8:56:13 PM by  mattk (70) 1 1



Accepted Answer

Votes:

2

Your Vote:

Up

Down

Thanks for the answers and would like to see how you Mattk developed your map object.

I edited the map object (trafficlight.htm) and added the function (tooltip) to shows a popup with more sensor information.

https://www.paessler.com/manuals/prtg/maps_designer

https://kb.paessler.com/en/topic/61263-where-can-i-find-custom-map-objects-and-other-map-customizations


The following custom map object code.

C:\Program Files (x86)\PRTG Network Monitor\webroot\mapobjects

custom_object_circle.html

code:

<!--Custom: circle with black border Status Related Background-->

<div class="map_object map_table map_icon2 map_icon_large" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="overflow:hidden;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">
  <a href="/sensor.htm?id=<@objectid>" show="linklong">
   
   <div  data-toggle="tooltip"  data-placement="top"
  title=" <b> Device: &nbsp; <#objectproperty  name="ParentDevice" show="text" id="<@objectid>">
  <p>
   Sensor: &nbsp; <#objectproperty name="Name" id="<@objectid>">
  <p>
   Status: &nbsp; <#objectstatus name="lastvalue" id="<@objectid>"><p>"> 

 	<#mapobject type="htmlafter" subid="<@subid>"> 
    <#mapobject type="htmlafter" subid="<@subid>">

     
  <#sensor type="colorclassofstate" id="<@objectid>" var="status">
  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#if value="@nodename" is="sensor" then="sensr" else="hasred" varexpand="value" var="containsred">
  <#if value="@nodename" is="sensor" then="sensy" else="hasyellow hasnored" varexpand="value" var="containsyellow">
  <#if value="@nodename" is="sensor" then="sensg" else="hasgreen hasnoyellow hasnored" varexpand="value" var="containsgreen">
   <svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0"
  width="100%"
  height="100%"
  viewBox="0 0 100 100">
    <defs>
      <rect x="0" y="0" width="1px" height="1px" fill="#ECECEC" id="a" />
    </defs>
	<use xlink:href="#a" />
    <g class="trafficlight" transform="translate(0,0)">
      <use xlink:href="#a" />
	  <circle r="40" fill="#DADADA" cx="50" cy="50" />
	  <circle style="<#if value="@status" contains="@containsgreen" then="" else="opacity:0" varexpand="value,contains">"  r="40" fill="#98BD1D"  cx="50" cy="50" />
	  <circle style="<#if value="@status" contains="@containsred" then="" else="opacity:0" varexpand="value,contains">"    r="40" fill="#D21925"  cx="50"  cy="50" />
      <circle style="<#if value="@status" contains="@containsyellow" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#EECE00"  cx="50" cy="50" /> 
    </g>
	</svg> </a>
	
 
  <div style="position:relative;margin-top:-20px">
  
    <#mapobject type="htmlafter" subid="<@subid>">
  </div>
  
</div>
</div>

Zarate Max

Created on Aug 26, 2016 2:54:34 PM by  Zarate Max (1,663) 5 5

Last change on Aug 29, 2016 7:53:46 AM by  Torsten Lindner [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.