View Categories

Días sin Accidentes

El servicio de días sin accidentes le permite calcular la cantidad de días que han pasado desde una fecha en específico. Además, si se proporciona el parámetro récord, entrega el número mayor como resultado.

La URL de este servicio es la siguiente:

https://muralelectronico.cl/services/accidentes/?fecha-ultimo-accidente=DD-MM-AAAA&record=N

En donde se envían los siguientes parámetros:

  • fecha-ultimo-accidente: Fecha del último accidente (U otro tipo de indicador) en formato DD-MM-AAAA, por ejemplo 25-08-2023.
  • record (opcional): Récord de cantidad máxima de días sin accidentes (U otro tipo de indicador).

La respuesta debería ser un RSS (archivo plano XML) con solo un ítem de resultado:

  • [Title]: Titulo por defecto que no se utiliza en este caso
  • [mural_actual|mural]: Cantidad de días desde el último accidente
  • [mural_record|mural]: Récord actual (puede ser el valor enviado o la cantidad de días desde el último accidente)

Agregando a una Diapositiva #

Para configurar este servicio, debemos ingresar un «TICKER» en nuestra diapositiva, como se indica en esta sección. Una vez agregado, se debe configurar la URL del canal que sería la descrita en el inicio y luego en número de elementos se escribe «1», ya que solo regresa un ítem este servicio:

Con esta configuración, ahora pasaremos a la sección de «Plantillas», para poder darle estilo a la respuesta que entrega el servicio.

Visualización #

Una vez en el menú de «Plantillas» de la configuración, en preset seleccionamos «sobrescribir preset» y pasamos al sub menú «Principal», mostrándonos un código HTML similar a este:

<p><span class="title"><strong>[Title]</strong></span></p>

Si ingresamos los otros parámetros que nos entrega el servicio de la misma forma que «Title», nos quedará este código:

<p><span class="title"><strong>[Title]</strong></span></p>
<p><span class="title"><strong>[mural_actual|mural]</strong></span></p>
<p><span class="title"><strong>[mural_record|mural]</strong></span></p>

Presionamos «Guardar» y luego en la visualización deberían aparecer los datos de la siguiente forma:

Como es código HTML, se puede editar de la forma que más sea conveniente para la visualización. Ahora dejamos un ejemplo de como se podría desplegar esta información.

HTML #

<div class="container">
  <section class="dias-sin-accidentes">
    <div class="titulo"><h2>DÍAS SIN ACCIDENTES</h2><p>Days without lost time accident</p></div>
    <div class="valor"><div>[mural_actual|mural]</div></div>
    <div class="titulo"><h2>RECORD A SUPERAR</h2><p>Current record</p></div>
    <div class="valor"><div>[mural_record|mural]</div></div>
  </section>
</div>

Y el resultado en la visualización sería:

CSS #

Para dar un estilo a la visualización, se debe ingresar al submenú «Hojas de estilo». En nuestro ejemplo borraremos el actual e ingresaremos lo siguiente:

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
}
.dias-sin-accidentes{
  padding: 10px;
  background-color: #005c7b;
  color: white;
  max-width: 450px;
  width: 100%;
  display: grid;
  column-gap: 10px;
  grid-template-columns: 1fr auto;

  
}
.dias-sin-accidentes > .titulo {
    text-align: left;
    font-family: Verdana, Geneva, Tahoma, sans-serif
  }
  .dias-sin-accidentes > .titulo > h2, .dias-sin-accidentes > .titulo > p {
    line-height: 0;
    text-transform: uppercase;
    margin-block-start: 1em;
    margin-block-end: 1em;
  }
.dias-sin-accidentes > .valor {
  display: flex;
  justify-content: end;
  align-items: center;
  }
  .dias-sin-accidentes > .valor > div {
    width: 80px;
    height: 40px;
    display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  background-color: rgb(35, 35, 35);
  color: rgb(255, 81, 81);
  font-size: larger;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  }

Una vez ingresada la hoja de estilo, se presiona el botón «Guardar» y se desplegará lo siguiente en la visualización:

Scroll al inicio