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


Can custom status-aware icons be used within maps?

Votes:

0

Your Vote:

Up

Down

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 Support]

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



Best Answer

Accepted Answer

Votes:

0

Your Vote:

Up

Down

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]



11 Replies

Votes:

3

Your Vote:

Up

Down

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: http://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 Support]

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



Votes:

0

Your Vote:

Up

Down

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 by  LaurentB (0) 1



Votes:

0

Your Vote:

Up

Down

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 Support]



Votes:

0

Your Vote:

Up

Down

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 by  LaurentB (0) 1



Votes:

0

Your Vote:

Up

Down

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 by  Aaron RFG (20)



Votes:

2

Your Vote:

Up

Down

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 by  Aaron RFG (20)

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



Votes:

0

Your Vote:

Up

Down

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 by  Mirche (0) 1

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



Votes:

0

Your Vote:

Up

Down

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 Support]



Votes:

0

Your Vote:

Up

Down

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 by  avogiatzis (0) 1



Accepted Answer

Votes:

0

Your Vote:

Up

Down

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

Your Vote:

Up

Down

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 by  Ant-PJ (0)



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.