• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Icons für PRTG Monitoring Software anpassen

iC_Flare

Neues Mitglied
Hallo,
vorab ich habe nur grob Ahnung von HTML und CSS, falls das Thema falsch kategorisiert ist o.Ä. bitte verschieben.

Jetzt zur Frage:
Ich würde gerne für Monitoringzwecke ein Icon anpassen um den Status anzuzeigen.
Im Anhang befindet sich einmal als .svg das anzupassende Icon und ein .htm wo man ein Beispiel für die Statusänderung sieht.
Gedacht ist es so, dass sich die Farbe des, in der .svg dargestellten, Switches je nach Status des Gerätes in Rot, Gelb oder Grün verändert, das heißt wenn man den Switch anpingen kann ist dieser Grün eingefärbt und wenn man dies nicht kann ist dieser Rot eingefärbt.

Ich hoffe ihr könnt mir weiterhelfen, falls ihr noch Informationen benötigt kann ich euch die natürlich liefern.

"Anhang"
C1 switch2.svg (grauer Switch der eingefärbt werden soll)

Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
    <path fill="#FFFFFF" d="M16.2,51c0,0-2.2-0.1-2.2,1.8v22.4c0,0,0.2,1.8,2.2,1.8h96.1c0,0,1.7,0.1,1.7-1.8V52.8c0,0,0.2-1.8-1.7-1.8
        H16.2z"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="5" d="M16.2,50.5c0,0-2.7,0.4-2.7,2.3v22.4c0,0,0.7,2.3,2.7,2.3h96.1
        c0,0,1.2-0.4,1.2-2.3V52.8c0,0,0.8-2.3-1.2-2.3H16.2z"/>
    <path fill="#A7A9AC" d="M16.2,51c0,0-2.2-0.1-2.2,1.8v22.4c0,0,0.2,1.8,2.2,1.8h96.1c0,0,1.7,0.1,1.7-1.8V52.8c0,0,0.2-1.8-1.7-1.8
        H16.2z"/>
    <rect x="22" y="58" fill="#FFFFFF" width="84" height="12"/>
    <polygon fill="#A7A9AC" points="41,68 41,62 43,62 43,61 44,61 44,60 49,60 49,61 50,61 50,62 52,62 52,68     "/>
    <polygon fill="#A7A9AC" points="24,68 24,62 25,62 25,61 27,61 27,60 32,60 32,61 33,61 33,62 35,62 35,68     "/>
    <polygon fill="#A7A9AC" points="59,68 59,62 60,62 60,61 62,61 62,60 67,60 67,61 68,61 68,62 69,62 69,68     "/>
    <polygon fill="#A7A9AC" points="76,68 76,62 77,62 77,61 79,61 79,60 83,60 83,61 85,61 85,62 86,62 86,68     "/>
    <polygon fill="#A7A9AC" points="93,68 93,62 95,62 95,61 96,61 96,60 101,60 101,61 103,61 103,62 104,62 104,68     "/>
</g>
</svg>

trafficlight.htm (Beispiel für eine Statusänderung in dem Programm, eine Ampel wo oben in Rot der Downstatus und unten in Grün der Upstatus und in der Mitte in Gelb wo Warnungen (falls vorhanden) dargestellt werden)

Code:
<div class="map_object map_table map_icon_large" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="overflow:hidden;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">

  <#sensor type="colorclassofstate" id="<@objectid>" var="status">
  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#if value="@nodename" is="sensor" then="sensr" else="hasred" varexpand="value" var="containsred">
  <#if value="@nodename" is="sensor" then="sensy" else="hasyellow hasnored" varexpand="value" var="containsyellow">
  <#if value="@nodename" is="sensor" then="sensg" else="hasgreen hasnoyellow hasnored" varexpand="value" var="containsgreen">
  <svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0"
  width="100%"
  height="100%"
  viewBox="0 0 100 280">
    <defs>
      <rect x="0" y="0" width="100px" height="280px" fill="#ECECEC" id="a" />
    </defs>
    <use xlink:href="#a" />
    <g class="trafficlight" transform="translate(0,0)">
      <use xlink:href="#a" />
      <circle r="40" fill="#DADADA" cx="50" cy="50" />
      <circle r="40" fill="#DADADA" cx="50" cy="140" />
      <circle r="40" fill="#DADADA" cx="50" cy="230" />
      <circle style="<#if value="@status" contains="@containsred" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#E6005F" cx="50" cy="50" />
      <circle style="<#if value="@status" contains="@containsyellow" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#F59C00" cx="50" cy="140" />
      <circle style="<#if value="@status" contains="@containsgreen" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#C0CC19" cx="50" cy="230" />
    </g>
  </svg>
  <div style="position:relative;margin-top:-20px">
    <#mapobject type="htmlafter" subid="<@subid>">
  </div>
</div>
 
Werbung:
Zurück
Oben