Resumen
En este artículo se presenta las configuraciones necesarias para crear íconos personalizados representando los colores de los estados en el mapa, para llevar un orden y control de los estados de sensores y dispositivos específicos, sin necesidad de ingresar hasta el árbol de dispositivos (Device Tree), ayudando a la optimización de sensores o dispositivos necesarios para su manejo y presentación mediante los mapas para un público específico.
Detalles
Puede crear iconos personalizados relacionados con el estado editando objetos de mapa, creando una clase CSS personalizada y colocando sus propias imágenes en el servidor. Todos los cambios se realizan en las subcarpetas de la carpeta webroot en el servidor central: C: \ Archivos de programa (x86) \ PRTG Network Monitor\ webroot.
Se debe de realizar los siguientes pasos y configuraciones:
1. Coloque sus imágenes personalizadas en la siguiente ruta: C:\ Program Files (x86) \ PRTG Network Monitor\ webroot\ mapicons\ iconset7. Pueden ser de cualquier tipo de imagen compatible con el navegador (PNG, JPG o GIF). Otras resoluciones mayores a 128×128 píxeles pueden requerir la edición adicional de las clases de CSS.
2. Crear un nuevo objeto de mapa en la carpeta de objetos de mapa. Utilice un archivo nuevo o copie un archivo preexistente.
a. Para ello se dirige a la carpeta mapobjects, con la dirección C:\Program Files (x86)\PRTG Network Monitor\webroot\mapobjects.
b. Añade un nuevo archivo o copie uno existente de tipo .htm y le asigna un nombre. En este caso, el archivo se llamará: Added Objects StatusTest.
c. Con el archivo creado, se añade el siguiente código en él y guarde los cambios. Para ello abrimos el archivo con NotePad o NotePad++:
| <!– 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> <br><#if value=»@nodename» is=»sensor» then=»@message» varexpand=»value,then»> </span> <#mapobject type=»htmlafter» subid=»<@subid>»> </div> |
3. Edite el archivo css que se encuentra en la carpeta css. Para ello nos dirigimos a la ruta: C:\Program Files (x86)\PRTG Network Monitor\webroot\css. Creamos una clase CSS para cada posible sensor / estado del dispositivo para ese objeto y relacionamos ese estado con una imagen de fondo diferente. Utilizar el código de abajo:
| .map_iconcolornew_hasblack, .map_iconcolornew_sensb { background-image: url(/mapicons/iconset7/black.png); background-repeat: no-repeat; background-position: center; }.map_iconcolornew_hasgreen, .map_iconcolornew_sensg { background-image: url(/mapicons/iconset7/green.png); background-repeat: no-repeat; background-position: center; }.map_iconcolornew_hasblue, .map_iconcolornew_sensb { background-image: url(/mapicons/iconset7/blue.png); background-repeat: no-repeat; background-position: center; }.map_iconcolornew_hasorange, .map_iconcolornew_senso { background-image: url(/mapicons/iconset7/orange.png); background-repeat: no-repeat; background-position: center; }.map_iconcolornew_hasyellow, .map_iconcolornew_sensy { background-image: url(/mapicons/iconset7/yellow.png); background-repeat: no-repeat; background-position: center; }.map_iconcolornew_hasack, .map_iconcolornew_senso { background-image: url(/mapicons/iconset7/redlight.png); background-repeat: no-repeat; background-position: center; }.map_iconcolornew_hasred, .map_iconcolornew_haspartialred, .map_iconcolornew_sensr { background-image: url(/mapicons/iconset7/red.png); background-repeat: no-repeat; background-position: center; } |
4. Nos dirigimos al editor de mapas dentro de PRTG.
a. Seleccione un objeto en el árbol de dispositivos, ya sea un dispositivo o sensor.
b. Seleccione el objeto personalizado dentro del editor en Propiedades, aparece como » Added Objects».
c. Agregamos varios objetos del árbol de dispositivos con la nueva propiedad agregada.
Ambiente
- PC con Sistema Operativo Windows 10 Pro y 4 GB de RAM
- Navegador Firefox
- PRTG Network Monitor
Limitaciones
Los íconos personalizados solo pueden mostrar los estados de sensores o dispositivos específicos, no muestra el estado de bibliotecas ni grupos de dispositivos.
Artículos Relacionados
Agregar Bibliotecas en mapas PRTG.
Agrupar sensores con el sensor Business Process.
Para mayor información contactar a servicio@rolosa.com
2 comentarios
[NP] Agregar Bibliotecas a mapas personalizados de PRTG. | Academia Rolosa · abril 8, 2019 a las 10:08 am
[…] Creación de íconos personalizados en PRTG. […]
Agregar grupos de sensores a mapas personalizados en PRTG. | Academia Rolosa · abril 17, 2019 a las 12:56 pm
[…] Cómo crear íconos personalizados. […]