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

Can custom status-aware icons be used within maps?

Votes:

0

Is it possible to create icons that will change to reflect the group's or sensor's status, similar to what the "Sizeable Icon on Status Related Background" does but using custom icons?

css custom-map device-icon map-objects maps maps-editor prtg

Created on May 11, 2015 9:20:44 AM by  Luciano Lingnau [Paessler]

Last change on Mar 10, 2017 9:05:13 AM by  Luciano Lingnau [Paessler]



Best Answer

Accepted Answer

Votes:

0

Hello there,

Please note: We cannot provide you with a solution here, since cusomization is not supported.

Maybe other customers are able to help you here.


Kind regards,
Birk Guttmann, Tech Support Team

Created on Feb 11, 2019 12:51:29 PM by  Birk Guttmann [Paessler Support]



14 Replies

Votes:

3

This article applies to PRTG Network Monitor 15 or later

Custom Status-Related Icons/Objects for Maps


A word of caution

This post contains information about internals of PRTG that may change in future versions. Please note that we provide this information without warranty and that we cannot officially support you with this. Please make sure you keep a proper backup of your configuration and data files.


You can create custom status-related icons by editing map objects, creating a custom CSS class and placing your own images on the server. All changes are performed on subfolders of the webroot folder on the PRTG Core Server under the Program Files folder (by default, C:\Program Files (x86)\PRTG Network Monitor\webroot).

Note: This is not an official feature and as such it is not officially supported. It may or may not work for you.

The image below illustrates the end-result of custom status-aware map-objects within a map.

Example Custom Device Icon

Full Resolution Image

  • Place your custom images on the webroot folder, under mapicons\iconset7. They can be any browser-compatible image type (PNG, JPG or GIF). For this tutorial we use transparent PNG images with 128x128 pixels. Other resolutions may require additional editing of CSS classes.
  • Create a new map-object in the mapobjects folder. Use the following or copy a pre-existing file (this sample file is based on An Icon A9.htm).
    • Provide a filename (for example, Added Objects StatusTest.htm) and a name within the file, on the first line.
<!-- Added Objects: StatusTest -->

<div class="map_object map_icon2 map_icon_large <#sensor type="colorclassofstate" prefix="map_iconcolornew_" id="<@objectid>">" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">

  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#objectstatus name="lastvalue" id="<@objectid>" var="lastvalue">
  <#objectstatus name="message" show="textraw" id="<@objectid>" var="message">

  <span>
    <#objectstatus name="downsens" id="<@objectid>">
    <#objectstatus name="partialdownsens" id="<@objectid>">
    <#objectstatus name="downacksens" id="<@objectid>">
    <#objectstatus name="warnsens" id="<@objectid>">
    <#objectstatus name="upsens" id="<@objectid>">
    <#objectstatus name="pausedsens" id="<@objectid>">
    <#objectstatus name="unusualsens" id="<@objectid>">
    <#objectstatus name="undefinedsens" id="<@objectid>">
    <br>
    <#objectproperty name="Name" id="<@objectid>">
    <!-- <br><#if value="@nodename" is="sensor" then="@lastvalue" varexpand="value,then"> Remove last Value from Sensors-->
    <br>&nbsp;
    <br><#if value="@nodename" is="sensor" then="@message" varexpand="value,then">
  </span>
    <#mapobject type="htmlafter" subid="<@subid>">
</div>

  • The main change that you have to do is renaming the prefix= to a custom one. In this case we use map_iconcolornew_, that will be the prefix for the CSS class.
  • In the css folder, edit the provided styles_custom_v2.css file:
    • We create a CSS class for each possible sensor/device status for that object and relate that status to a different background image. Please use the code below as a reference.
.map_iconcolornew_hasblack,
.map_iconcolornew_sensx {
  background-image: url(/mapicons/iconset7/Custom_black.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasgreen,
.map_iconcolornew_sensg {
  background-image: url(/mapicons/iconset7/Custom_ok.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasblue,
.map_iconcolornew_sensb {
  background-image: url(/mapicons/iconset7/Custom_blue.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasorange,
.map_iconcolornew_sensp {
  background-image: url(/mapicons/iconset7/Custom_yellow.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasyellow,
.map_iconcolornew_sensy {
  background-image: url(/mapicons/iconset7/Custom_yellow.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasack,
.map_iconcolornew_senso {
  background-image: url(/mapicons/iconset7/Custom_red.png);
  background-repeat: no-repeat;
  background-position: center;
}

.map_iconcolornew_hasred,
.map_iconcolornew_haspartialred,
.map_iconcolornew_sensr {
  background-image: url(/mapicons/iconset7/Custom_red.png);
  background-repeat: no-repeat;
  background-position: center;
}

  • Use the map editor within PRTG. Place the newly created object for a group or sensor. The result will look like below (Custom Sensors on top, standard one on the bottom).
    • You can find the custom object within the editor under "Added Objects" if you preserved all the code from the above examples.

Map Editor

Full Resolution Image

  • You’re done. Please note that you’ll have to create a new css class and map object for each status-aware icon that you create. For example, you could create a map_iconcolornew2, map_iconcolornew3, and so on…

You can find the example custom map-object, css, and images under the following link: https://media.paessler.com/kb/2015/64436_webroot.zip


For further map-related customizations, please see:
Where can I find custom map objects and other map customizations?

Created on May 11, 2015 9:29:29 AM by  Luciano Lingnau [Paessler]

Last change on May 2, 2018 1:20:56 PM by  Luciano Lingnau [Paessler]



Votes:

0

Hi, Our organisation is configuring something very similar. However, we need to remove the old status icons and only have our images as status icons.

E.g. with your example, we would only have the computer image, but not the name and green, yellow, red or blue checkboxes with associated number of sensors. We need to only have our images as status icons.

This will allow us to have a map of Europe with our 20 something sites each indicated by a circle colored by status.

Thanks

Created on May 12, 2016 7:35:34 AM



Votes:

0

Hello LaurentB,
thank you for your post.

You may be able to further customize the map-object to your specific needs, but please be aware that this is not an officially supported usage/configuration.

Best Regards,

Created on May 12, 2016 12:23:21 PM by  Luciano Lingnau [Paessler]



Votes:

0

Oh well. An example on how to do this would have been nice.

Guess we'll have to find another way to have a quick view of all our sites without cluthering the map with every type of status sensors.

Thank you for your answer.

Created on May 12, 2016 12:54:08 PM



Votes:

0

We used this code and it worked until we updated to version version 18.2.39.1661+ Are there any changes we can make to get our cool animated status images back? They have become an integral part of our map design.

Created on May 2, 2018 12:32:24 PM



Votes:

2

Update to this issue after upgrading to 18.2.39.1661+
Dariusz from support got back to me with the following which fixed it all up!

"Please note that we introduced a new styles_custom file for custom CSS code. The reason is that old CSS code might break the new interface. Therefore please copy the content of the "styles_custom.css" to the new "styles_custom_v2.css" on the Core Server under "C:\Program Files (x86)\PRTG Network Monitor\webroot\css\".

Now very happy to have my animated status images back making reading the map a little more pleasant.

Created on May 2, 2018 1:12:38 PM

Last change on May 2, 2018 1:20:00 PM by  Luciano Lingnau [Paessler]



Votes:

0

Hi

I am new to PRTG monitoring system, I did all the steps above described to create custom icons that will be 'responsive' and change the color according to the status of a single sensor, but all i got was static custom icons without the status icon for the sensor.

Can anyone help me if I need to do some other adjustments or if I am doing something wrong?

PRTG version: 18.2.41.1652 .

https://ibb.co/cWgZgd

Created on Jul 5, 2018 1:26:24 PM

Last change on Jul 6, 2018 8:35:23 AM by  Luciano Lingnau [Paessler]



Votes:

0

Hello Mirche,
thank you for your reply.

As you may be aware, we do not officially support the custom map objects shared here. However, by the looks of your screenshot you've created the object multiple times, instead of having only a single object and modify the CSS to allow the object to change color based on it's state.

I encourage you to carefully follow the steps of the guide again, as this should work out just fine.

Best Regards,
Luciano Lingnau [Paessler Support]

Created on Jul 6, 2018 7:49:14 AM by  Luciano Lingnau [Paessler]



Votes:

0

Hi,

I've tried using the code as used above but unfortunately the object on the map just comes empty with some status symbols.

https://imgur.com/B1RFoCY

I would appreciate any help you can provide.

Created on Feb 8, 2019 1:19:22 AM



Accepted Answer

Votes:

0

Hello there,

Please note: We cannot provide you with a solution here, since cusomization is not supported.

Maybe other customers are able to help you here.


Kind regards,
Birk Guttmann, Tech Support Team

Created on Feb 11, 2019 12:51:29 PM by  Birk Guttmann [Paessler Support]



Votes:

0

I have the same problem than avogiatzis, the object on the map just comes empty.

https://imgur.com/B1RFoCY

Someone has a solution for this.

Created on Apr 3, 2019 4:58:25 PM



Votes:

0

Hello,

Does anyone have a solution for the empty map object problem? We're trying to create a custom mapobject which changes the color of the icon when the status changes.

Bit out of our styles_custom_v2.css:

.map_object.map_iconcolor_wifi_hasgreen,
.map_object.map_iconcolor_wifi_sensg {
  background-image: url(/mapicons/iconset7/wifi-ok.gif);
  background-repeat: no-repeat;
  background-position: center;
}

The .htm file was copied from An Icon A9.htm and only the prefix is edited:

<!-- Added Objects: Status-Wifi -->

<div class="map_object map_icon2 map_icon_large <#sensor type="colorclassofstate" prefix="map_iconcolor_wifi_" id="<@objectid>">" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">

  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#objectstatus name="lastvalue" id="<@objectid>" var="lastvalue">
  <#objectstatus name="message" show="textraw" id="<@objectid>" var="message">

  <span>
    <#objectstatus name="downsens" id="<@objectid>">
    <#objectstatus name="partialdownsens" id="<@objectid>">
    <#objectstatus name="downacksens" id="<@objectid>">
    <#objectstatus name="warnsens" id="<@objectid>">
    <#objectstatus name="upsens" id="<@objectid>">
    <#objectstatus name="pausedsens" id="<@objectid>">
    <#objectstatus name="unusualsens" id="<@objectid>">
    <#objectstatus name="undefinedsens" id="<@objectid>">
    <br>
    <#objectproperty name="Name" id="<@objectid>">
    <br><#if value="@nodename" is="sensor" then="@lastvalue" varexpand="value,then">
    <br>&nbsp;
    <br><#if value="@nodename" is="sensor" then="@message" varexpand="value,then">
  </span>
    <#mapobject type="htmlafter" subid="<@subid>">
</div>

I'm having the same issue as Ant-PJ and avogiatzis, the mapobject is available but no image is displayed, only the name and sensor state are displayed.

Does anyone know what's wrong?

Regards Kevin

Created on Nov 23, 2020 1:53:39 PM

Last change on Nov 24, 2020 12:17:25 PM by  Marijan Horsky [Paessler Support]



Votes:

0

Hi, this ist a great How-To and works fine. Thanks for this! Is there a chance to combine the use of custom icons with a library? What I mean is: I want to tag some sensors and create a library, displaying only these sensors. In the map, i want to use the library-id to display a custom icon with changing color (dependig of the state) for this library. Does anyone have an idea? Best Regards Matthias

Created on Dec 21, 2022 7:16:13 AM



Votes:

0

Hello,

except for a custom sunburst object, libraries are not supported by the map editor. The reason is that libraries are not a device-tree object and most map-objects have no alternative method to access a library.

Created on Dec 23, 2022 10:47:39 AM by  Arne Seifert [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.