How can I create monitoring objects in a circle format and status colors to use in creating maps.
https://helpdesk.paessler.com/en/support/solutions/articles/25613-how-to-create-a-custom-map-icon
Article Comments
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.
Aug, 2016 - Permalink
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
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: <#objectproperty name="ParentDevice" show="text" id="<@objectid>">
<p>
Sensor: <#objectproperty name="Name" id="<@objectid>">
<p>
Status: <#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
Aug, 2016 - Permalink
Hi everyone!
Someone managed to get the ACKNOWLEDGED light red color and the blue color for paused states?
Best, Eduardo
May, 2021 - Permalink
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: <#objectproperty name="ParentDevice" show="text" id="<@objectid>">
<p>
Sensor: <#objectproperty name="Name" id="<@objectid>">
<p>
Status: <#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
May, 2021 - Permalink
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: <#objectproperty name="ParentDevice" show="text" id="<@objectid>">
<p>
Sensor: <#objectproperty name="Name" id="<@objectid>">
<p>
Status: <#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
May, 2021 - Permalink
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.
Aug, 2016 - Permalink