What is this?

This knowledgebase contains questions and answers about PRTG Network Monitor and network monitoring in general.

Learn more

PRTG Network Monitor

Intuitive to Use. Easy to manage.
More than 500,000 users rely on Paessler PRTG every day. Find out how you can reduce cost, increase QoS and ease planning, as well.

Free Download

Top Tags


View all Tags

Map Circle Object with Status Related Background

Votes:

1

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



Best Answer

Accepted Answer

Votes:

3

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

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



6 Replies

Votes:

0

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

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



Accepted Answer

Votes:

3

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

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



Votes:

1

Hi everyone!

Someone managed to get the ACKNOWLEDGED light red color and the blue color for paused states?

Best, Eduardo

Created on May 12, 2021 6:20:11 PM



Votes:

0

Custom: circle with Status Related Background - Device

The following custom device map object code.

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

<!--Custom: circle with Status Related Background - Device-->

<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="/tablewithstyles.htm?tableid=devicesensortable&content=sensors&columns=position%3Dtextshort%2Csensor%3Dhtmllong%2Clastvalue%2Cminigraph%2Ccheckbox&tools=edit%2Cacknowledge%2Cpause%2Cfave%2Cprio%2Cscan%2Cdelete%2Cposition&sortby=position&sortable=true&links=true&refreshable=true&_=1488911570226&id=<@objectid>&hidezoomlink=true&count=50#" target="_blank" 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> 
	
 
  <div style="position:relative;margin-top:-20px">
  
    <#mapobject type="htmlafter" subid="<@subid>">
    </p>
	</center><#objectstatus name="downsens"  id="<@objectid>" show="textraw"> <center>
	</center><#objectstatus name="warnsens"  id="<@objectid>" show="textraw"> <center>

  </div>
  
    </a>
	
</div>

</div>

Zarate Max

Created on May 13, 2021 4:31:02 AM

Last change on May 13, 2021 10:52:46 AM by Felix Wiesneth [Paessler Support]



Votes:

0

Custom: circle with Status Related Background - Sensor

The following custom device map object code.

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

<!--Custom: circle with Status Related Background - Sensor-->

<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>" target="_blank" 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 May 13, 2021 3:05:34 PM

Last change on May 13, 2021 5:32:36 PM by Felix Wiesneth [Paessler Support]




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.