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

Is it possible that Map Icons adapt to the status?

Votes:

0

I want to buid up a Map with smileys. So is it possible that the icon change, when the status of the object changes?

I'm imagine something like: Everything is good = good Smiley Warning and Unusual = normal smiley Error = bad smiley

I can find in the mapobjects htm-files this line <img src="<@iconpath>" style="max-width:<@width>px;max-height:<@height>px" alt="<@iconpath>">

So is it possible to build in a query like:

if Status = Error then
  <img src="<@iconpath>_err.img" style="max-width:<@width>px;max-height:<@height>px" alt="<@iconpath>">
Else
  <img src="<@iconpath>_good.img" style="max-width:<@width>px;max-height:<@height>px" alt="<@iconpath>">

You have other suggestions? Tell me.

customize icons map-objects

Created on May 27, 2013 3:54:11 PM



6 Replies

Votes:

0

  • First copy your icons to <Path to PRTG>\PRTG Network Monitor\webroot\icons.
  • (Note the icon size ( e.g. 100 x 73)
  • Create a new CSS file in <Path to PRTG>\PRTG Network Monitor\webroot\CSS. You can use the following as a template. Name it something distict like smiley.css.
  • Go into the css file and adapt it your smileys: change url icon paths, add padding for the icon size, etc. (sensg is green, sensr is red, etc)
  • Change every instance of the word map_icon_meter" to "map_icon_smiley" 
body.mapshow
body.mapshow
{
	background-color: #fff;
	background-image: none;
}

div.map_object
{
  border:1px solid transparent;
  z-index:1;
}
div.map_icon_meter,div.map_icon_meter div,div.map_icon_meter span,td.map_icon_meter
{
	font-size:14px;
	font-weight: bold;
}
.map_icon_meter .sensg:before, .map_icon_meter .sensr:before, .map_icon_meter .sensq:before, .map_icon_meter .senso:before, .map_icon_meter .sensb:before, .map_icon_meter .sensy:before, .map_icon_meter .sensp:before, .map_icon_meter .sensx:before 
{
    background-image: none !important;
    width: auto;
    height: auto;
    margin: 0;
    display: inline;
    content: "";
}
.map_icon_meter div.sensg,.map_icon_meter div.sensr,.map_icon_meter div.sensq,.map_icon_meter div.senso,.map_icon_meter div.sensb,.map_icon_meter div.sensy,.map_icon_meter div.sensp,.map_icon_meter div.sensx
{
	background-position: 0px 0px;
	background-repeat: no-repeat;
	display: inline !important;
	padding-left: 22px;
}
.map_icon_meter div.sensg
{
	background-image: url(/icons/metergreen.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
.map_icon_meter div.sensy
{
	background-image: url(/icons/meteryellow.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
.map_icon_meter div.sensr
{
	background-image: url(/icons/meter_red.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
.map_icon_meter div.sensb
{
	background-image: url(/icons/meteryellow.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
.map_icon_meter div.sensp
{
	background-image: url(/icons/meteryellow.png);
	padding-bottom:73px!important; 
    padding-left:100px!important;
}
div.map_object,div.map_objectsizer
{
	position: absolute;
}

div.map_object.ui-draggable-dragging
{
	filter: alpha(opacity=50);
	opacity: 0.5;
}
div.map_object.ui-draggable-dragging  .overlay
{
	filter: alpha(opacity=30);
	opacity: 0.3;
	background:#aaa;
}

.map_object .overlay
{
  display:block;
  position:absolute;
  cursor: move !important;
}

div.map_objectsizer
{
	height: 16px;
	width: 16px;
	cursor: se-resize !important;
	z-index:1;
}
div.map_objecttools,div.map_objectsettings
{
	border:1px solid #D3D3D3;
	height: 16px;
	margin: 0px;
	padding: 0;
	position:absolute;
	background: url("images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% #E6E6E6;
	top:2px;
	left:2px;
	opacity: 0.9;
	-moz-box-shadow:0 0 2px #aaa;
	width: 16px;
	display:none;
	cursor: pointer;
	z-index:1;
}

div.map_objecttools a,div.map_objectsettings a
{
	height: 16px;
	margin: 0;
	padding: 0;
	width: 16px;
	background: url("images/ui-icons_222222_256x240.png") no-repeat scroll 50% 50% #E6E6E6;
	background-position: -176px -112px;
	display:block;
}
.map_object_buttonbar:hover div.map_objecttools,
.map_object_buttonbar:hover div.map_objectsettings,
.map_object:hover div.map_objecttools,
.map_object:hover div.map_objectsettings
{
    display:block;
}

.map_object_buttonbar
{
	display:block;
	height:43px;
	width:99px;
	position:absolute;
	left:0px;
	top:0px;
}
div.map_objecttools.delete
{
	left:65px;
}
div.map_objecttools a
{
    background-position: -176px -96px;
}
div.map_objecttools.moveup
{
    left:23px;
}
div.map_objecttools.moveup a
{
    background-position:-192px -48px;
}
div.map_objecttools.movedown
{
    left:44px;
}
div.map_objecttools.movedown a
{
	background-position:-224px -48px;
}
div.map_objecttools.dropconnectors
{
    left:86px;
}
div.map_objecttools.dropconnectors a
{
	background-position:-144px -128px;
}
div.map_objecttools a:link,
div.map_objectsettings a:link,
div.map_objecttools a:visited,
div.map_objectsettings a:visited,
div.map_objecttools a:active,
div.map_objectsettings a:active
{
	color: #000;
}
div.map_objecttools img,div.map_objectsizer img,div.map_objectsettings img
{
	height: 14px;
	width: 14px;
}
div.map_objectbox
{
	position: relative;
}
div.map_background
{
	background-repeat: no-repeat;
}
div.map_editor div.map_object
{
	border: 1px solid #ddd;
}
div.map_editor div.map_object:hover
{
	border: 1px solid #888;
	box-shadow: 1px 1px 3px #333;
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 0px 0px 7px #333;
}
div.map_editor div.map_background
{
	box-shadow: 0px 0px 5px #0060B6;
	-moz-box-shadow: inset 0px 0px 3px #0060B6;
	-webkit-box-shadow: 0px 0px 5px #0060B6;
	border:1px solid #eee;
}
div.map_editor
{
	background-image: url(/images/mapdots.png);
	background-repeat: repeat;
	border: 2px solid #CDE2F8;
}
div.map_objectgrip
{
	display: none;
}
div.map_object div.sensg,div.map_object div.sensr,div.map_object div.senso,div.map_object div.sensb,div.map_object div.sensy,div.map_object div.sensp,div.map_object div.sensx,div.map_object div.sensq
{
	display: inline;
	padding-right: 0px;
}
div.map_icon
{
	min-width: 50px;
}
div.map_icon div.sensr,div.map_icon div.sensq,div.map_icon div.senso
{
	background-color: #FFE3E7;
}
div.map_icon span
{
	background-color: white;
	white-space: nowrap;
	width: 100%;
}
div#maprefreshlink
{
	background-color: #444;
	border: 1px solid #888;
	bottom: 0px;
	color: #fff;
	filter: alpha(opacity=30);
	margin: 2px;
	-moz-box-shadow: 1px 1px 1px #888;
	opacity: 0.3;
	padding: 2px;
	position: fixed;
	right: 0px;
	-webkit-box-shadow: 1px 1px 1px #888;
	z-index: 7998;
}
div#maprefreshlink:hover
{
	filter: alpha(opacity=80);
	opacity: 0.8;
}
div#maprefreshlink span
{
	display: none;
}
div#maprefreshlink:hover span
{
	display: inline;
}
#maprefreshlink a,
#maprefreshlink a:hover,
#maprefreshlink a:link,
#maprefreshlink a:visited
{
	color: #fff;
}

#mapobjectpreview
{
	background-color: #fff;
	display: block;
	
}
#mapobjectpreview .container
{
  background:#eee;
  height:auto;
  width:auto;
}
#mapobjectpreview .container.loading
{
  background:none;
  min-height: 0px;
  min-width: 0px;
}
.mapobjectpreviewcontainer
{
	border: 2px solid #ddd;
	float: left;
	height: 167px;
	margin: 1px;
	padding:0;
	margin-right:1px;
	width: 208px;
	overflow:hidden;
	position:relative;
    background:#fff;
}

#minitab-1 .mapobjectpreviewcontainer,
#minitab-3 .mapobjectpreviewcontainer,
#minitab-5 .mapobjectpreviewcontainer
{
  height:121px;
  width:92px;
}
#minitab-2 .mapobjectpreviewcontainer,
#minitab-4 .mapobjectpreviewcontainer,
#minitab-6 .mapobjectpreviewcontainer
{
  width:92px;
  height:90px;
}

.mapobjectpreviewcontainer.selected
{
  border:2px solid #4A86BE;
  background-color: #CDE2F8;
  opacity: 1;
}
.mapobjectpreviewcontainer .overlay
{
	display: block;
	height: 98%;
	position: absolute;
	width: 98%;
	z-index: 2;
	cursor:pointer;
}
.mapobjectpreviewcontainer:hover
{
  opacity: 1;
}
.mapobjectpreviewcontainer .overlay:hover
{
	border:1px solid #4A86BE;
}
.mapobjectpreviewcontainer .chartlegend
{
	display: none;
}
.mapobjectpreviewcontainer>p
{
	font-weight: bold!important;
	color:#000!important;
	margin:0;
}
.mapobjectpreviewcontainer p span
{
	display: inline-block;
	vertical-align: bottom;
}
.mapobjectpreviewcontainer .objectisincompatible
{
	font-weight: normal;
	margin: 0;
	text-align: left;
	width: 190px;
}


._jsPlumb_endpoint
{
  display:none;
  z-index:-100;
}

._jsPlumb_connector
{
  z-index:0;
}
.plumbpointer
{
  display:block;
  width:6px;
  height:6px;
  border-radius: 6px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background:#aaa;
  border:1px solid #888;
  position:absolute;
  cursor:alias;

}
.plumbpointer:hover
{
  background:#CDE2F8;
}
div.map_object.drophover
{
  background:#CDE2F8!important;

}
div.map_object.drophover .overlay
{
  border:2px solid #6697C4!important;

}
.map_object.drophover:hover div.map_objecttools,
.map_object.drophover:hover div.map_objectsettings
{
    display:none;
}
.graphicalmapicon
{
	background:none;
	display:block;
	position:absolute;
}
.graphicalmapicon .label
{
	background:#fff;
	padding:2px;
	display:inline-block
}
.graphicalmapicon.sensr .label,.graphicalmapicon.hasred .label,
.graphicalmapicon.sensq .label,.graphicalmapicon.hasredok .label
{
  background:#FDD5D7;
}
.map_object.master
{
  font-weight:bold;
}

.dependencyreplacer
{
  display:block;
  border:1px solid #aaa;
  padding:3px;
  margin-top:4px;
  overflow:hidden;
}

#mapeditsettingsform>table
{
	width:100%;
}
#mapeditsettingsform table td,
#addobjecttomapform table td
{
	padding: 2px;
}
#mapeditsettingsform div.sensorselect,
#addobjecttomapform div.sensorselect
{
	height: 360px;
}
#mapeditsettingsform select,
#mapeditsettingsform option,
#mapeditsettingsform input,
#addobjecttomapform select,
#addobjecttomapform option,
#addobjecttomapform input
{
	width: 370px;
}

Now you need to tell PRTG to load this custom CSS ; to do this , edit prtg.css file and go to the end of the file and add include smileys.css.

  • Next step is to actually create a group that shows these customized status icons in PRTG interface.
  • Go to <Path to PRTG>\webroot\mapobjects. Make a copy of an existing .htm like StatusXL.htm.
  • Give it the same name as your css (e.g. smiley.htm)
  • Edit the htm. Change map_icon_(whatever) to map_icon_smiley (in this example)
  • Change the header from Whatever icons to Smiley icons :
  • Login to PRTG and make sure you refresh it by pressing CTRL+F5
  • you should be able to see a new group called “Smiley” that has those customized icons.

Created on May 28, 2013 8:50:05 PM

Last change on May 29, 2013 8:43:54 AM by Daniel Zobel [Product Manager]



Votes:

0

Nice!

Feedback is welcome.

Created on May 29, 2013 12:26:08 PM by Aurelio Lombardi [Paessler Support]



Votes:

0

Thats really nice!

But you have to ensure, that the icons have the right size. Otherwise the icons overlaps. I needed a couple of attemps. At least i've taken the same size as the "led....png"-icons.

Now i want to build up a map for my users. Where they can see one smiley only. I've seen that the backroundcolor of an mapobject changes, when the status of some sensors changes. So is it possible to take a picture as backround for a mapobject, that changes when one of the sensors changes? I just want a mapobject which contains only the name and a "status-smiley" of the selected sensor/device/group. I think my users could not understand, when the mapobject has a red, a yellow and a green smile. This happens when i'm selecting a device that has more than one sensor, and one sensor has an error.

I hope you understand what i mean. (i'm sorry my english is not very well :-) )

Created on Jun 3, 2013 2:55:12 PM



Votes:

0

Hello Daniel, Thank you so much for the answer, but i have any questions about the .htm step.

Idk about version of PRTG, but i can't find for example "StatusXL.htm" at version 15.2.16.2229, so, I can not make it work :/

Can you update that answer please?

Thank you!!!

Created on May 7, 2015 12:01:27 PM



Votes:

0

Hello Erick,

If the "statusXL.htm" is not available, you can the the "An icon" files like "An icon A1.htm" or "An icon A2_XL.htm"

Created on May 11, 2015 7:52:41 AM by [email protected]



Votes:

0

There's a more recent guide to icons that can adapt to the status, here's the link:

Created on May 11, 2015 2:57:03 PM by Luciano Lingnau [Paessler]

Last change on May 11, 2015 2:57:49 PM by Luciano Lingnau [Paessler]




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.