<!--Status Icons: Traffic light (Black Background)-->

<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">
<style>
.trafficLight {
    position: absolute;
    display:block;
    background-color: #333;
    width:90px;
    height:230px;
    border-radius:30px;
}

  .trafficLight span {
    left: 50%;
    width:50px;
    height:50px;
    margin-top: 20px;
    margin-left:20px;
    border-radius: 100%;
    display: block;
    
    
}

.redlightflash {
  background-color: red;
    animation: redlightflash 1.5s step-end infinite;
}

.yellowlightflash {
    background-color: yellow;
    animation: yellowlightflash 1.5s step-end infinite;
}

.greenlightflash {
    background-color: #00FF00;
    
}

.redlight {
    background-color: red;
    filter: brightness(45%);
}

.yellowlight {
    background-color: yellow;
    filter: brightness(45%);
}

.greenlight {
    background-color: #00FF00;
    filter: brightness(45%);
}

@keyframes redlightflash {
    0%{
        filter: brightness(110%);
        box-shadow: 0 0 6em red;
    }
    50% {
      
      filter: brightness(55%);
      box-shadow: 0 0 0em transparent;
    }
}

@keyframes yellowlightflash {
    0% {
        filter: brightness(110%);
        box-shadow: 0 0 6em yellow;
    }
    50% {
        filter: brightness(45%);
        box-shadow: 0 0 0em transparent;
    }

}


</style>  
  

  <div class="trafficLight">
      <span class="<#if value="@status" contains="@containsred" then="redlightflash" else="redlight" varexpand="value,contains">"></span>
      <span class="<#if value="@status" contains="@containsyellow" then="yellowlightflash" else="yellowlight" varexpand="value,contains">"></span>
      <span class="<#if value="@status" contains="@containsgreen" then="greenlightflash" else="greenlight" varexpand="value,contains">"></span>
    </div>
 
  <div style="position:relative;margin-top:-20px">
    <#mapobject type="htmlafter" subid="<@subid>">
  </div>
</div>

Note: The map object (.htm file) must be created under "C:\Program Files (x86)\PRTG Network Monitor\webroot\mapobjects" on the PRTG Server.

Article Comments

Can't seem to edit the original as it gives me a server error.

The inbuilt traffic light in PRTG is great but I wanted a way of making it more prominent on my map. So I converted it into a flashing traffic light with a darker background. When a sensor is in warning or alarm, the red or yellow lights will flash. It's combined completely into a single map object and although you'd be defining the style multiple times, you can put multiples on the map for different sensors. Hope it helps others!


Jun, 2022 - Permalink

Hello,

Thank you very much for sharing your custom map object with the community.

Have you made a few modifications? If so, can you please provide me the code again (if you still can't update it), so I can do it for you.

Regards.


Jun, 2022 - Permalink

Hi,
This traffic light is exactly what I am looking for. Very nice. :-D
Thank you for sharing the code.
Is there a way to resize this traffic light, analogous to the standard traffic light (i.e. by dragging it with the mouse)?
Thanks and regards,
Alain


Mar, 2023 - Permalink