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>&nbsp;

    <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

  
Categorías: PRTG

2 commentarios

[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. […]

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Current day month ye@r *

ecofirma

Visita Nuestro Gestor Documental Ecofirma.

Visita ecofirma

Pasantía en Desarrollo de Software. 

Envia tu curriculum a la dirección:  talento@rolosa.com

Descripción de la pasantía

Esta pasantía se caracteriza por incrementar las capacidades de programación de la persona, y perfeccionamiento de lenguajes con el tinte de incursión en desarrollo de software, páginas web y mantenimiento de las mismas. 

Conocimientos y requisitos

Beneficios y Compensación
Una pasantía en ROLOSA le permite al/la pasante no solo ganar experiencia sino desarrollar habilidades para mejorar confianza, seguridad y comunicación necesarias en los primeros años de actividad profesional, además de desarrollar las destrezas técnicas.

La pasantía en ROLOSA es de 6 meses, horario de 8 am a 5pm, NO renovable y tiene una asistencia económica de 100.000 colones mensuales. Al finalizar la pasantía, cabe la posibilidad de obtener una plaza fija, sujeta a disponibilidad.

ROLOSA se dedica al desarrollo y distribución de diferentes tecnologías.