Personalizar avisos de AEMET en nuestra web

[jmviper]

Hola Carlos.

Según veo en tu web no has puesto bien el enlace al script:

jscripts/jquery.popupoverlay.js

Debes de poner bien la ruta si es otra o no saldrá el popup de los avisos cuando hayan.

[CarlosLSev]

Valla pensé que era algo opcional. Lo mirare.
Una duda podría configurarse para que cuando no haya avisos no muestre nada y cuando haya avisos si.

[jmviper]

Valla pensé que era algo opcional. Lo mirare.

Si no lo quieres quita los enlaces a los scripts:

Código: [Seleccionar]

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="jscripts/jquery.popupoverlay.js"></script>
<script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#tabla_avisos').popup({
horizontal: 'center'
  });

    });
</script>

Una duda podría configurarse para que cuando no haya avisos no muestre nada y cuando haya avisos si.

Edita el script y en la salida en vez de esto:

Código: [Seleccionar]

if ($exit == 3 or $exit == 2 && $sinavisos) $resulavisos = '<div id="sin_riesgo">Avisos AEMET '.$nombrezona.'<span style="color: black; background-color: #32CD32; padding: 5px; font-size: 14px; margin-left: 15px;">Sin Avisos</span><a href="http://www.aemet.es/es/eltiempo/prediccion/avisos?l='.$codigozona.'" target="_blank" style="color:white;margin-left:15px;font-size:12px;">+ INFO</a></div>';
else $resulavisos = '<div style="border: 5px solid red;"><div id="riesgo">Avisos AEMET '.$nombrezona.$filaavisos.'<a class="tabla_avisos_open" style="color:white; cursor: pointer; margin-left:15px; font-size: 12px;">+ INFO</a></div><table id="tabla_avisos">'.$res.'</table></div>';

echo $resulavisos;
Déjalo así:

Código: [Seleccionar]

if ($exit == 3 or $exit == 2 && $sinavisos) exit;
else $resulavisos = '<div style="border: 5px solid red;"><div id="riesgo">Avisos AEMET '.$nombrezona.$filaavisos.'<a class="tabla_avisos_open" style="color:white; cursor: pointer; margin-left:15px; font-size: 12px;">+ INFO</a></div><table id="tabla_avisos">'.$res.'</table></div>';

echo $resulavisos;

[CarlosLSev]

Edita el script y en la salida en vez de esto:

Código: [Seleccionar]

if ($exit == 3 or $exit == 2 && $sinavisos) $resulavisos = '<div id="sin_riesgo">Avisos AEMET '.$nombrezona.'<span style="color: black; background-color: #32CD32; padding: 5px; font-size: 14px; margin-left: 15px;">Sin Avisos</span><a href="http://www.aemet.es/es/eltiempo/prediccion/avisos?l='.$codigozona.'" target="_blank" style="color:white;margin-left:15px;font-size:12px;">+ INFO</a></div>';
else $resulavisos = '<div style="border: 5px solid red;"><div id="riesgo">Avisos AEMET '.$nombrezona.$filaavisos.'<a class="tabla_avisos_open" style="color:white; cursor: pointer; margin-left:15px; font-size: 12px;">+ INFO</a></div><table id="tabla_avisos">'.$res.'</table></div>';

echo $resulavisos;
Déjalo así:

Código: [Seleccionar]

if ($exit == 3 or $exit == 2 && $sinavisos) exit;
else $resulavisos = '<div style="border: 5px solid red;"><div id="riesgo">Avisos AEMET '.$nombrezona.$filaavisos.'<a class="tabla_avisos_open" style="color:white; cursor: pointer; margin-left:15px; font-size: 12px;">+ INFO</a></div><table id="tabla_avisos">'.$res.'</table></div>';

echo $resulavisos;

Eres un artista!! Eso si de la primera linea si no quito el exit ultimo no me carga la pagina web.
Al final lo he dejado siempre visible, con tu permiso he modificado el script tanto para la.web como para la version movil y básicamente esta tal y como lo tengo en la web(diseño parecido a los script de Leuven)
Si no hay aviso sale la banda verde completamente. Si hay avisos amarillo, naranja o rojo se muestra la banda del color correspondiente. Aunque esta a falta de probarlo, pero en toda España hoy esta sin avisos así que no puedo probar cambiando el código de la zona a otro con avisos.
De todas formas me parecen increíbles los script que eres capaz de crear....
Hoy mismo me he apañado uno (copy and paste con alguna modificación)  para que si la raspberry no responde al ping por el puerto 22 , (se bloquee, me quede sin internet en casa etc...) me avisa en este caso por telegram (eso si ejecutando el script desde el vps)

[jmviper]

Código: [Seleccionar]

Eso si de la primera linea si no quito el exit ultimo no me carga la pagina web.
Está mal puesto por mi parte sí, el exit termina el script y éste está insertado en el de tu página por lo que a partir de él no saldría ya lo siguiente. Lo mejor sería poner una salida sin texto pero si lo has dejado así mejor. Yo lo tengo así y queda bien avisando de que no hay avisos  .

Que lo disfrutes, y si ves algún fallo no dudes en decirlo  .

Saludos

[kocher]

Saludos jmviper

Aunque tarde, te agradezco muchísimo el trabajo que has realizado para todos los aficionados Españoles que nos habíamos quedado sin el útil servicio de las alarmas de Meteoalarm (en España: AEMET).

No quiero ni imaginarme lo que has tenido que hacer para personalizar los avisos de todas las regiones Españolas.

Además, el diseño está muy logrado:

                    http://kocher.es

Nos has dado una lección magistral.

Muchísimas gracias y saludos desde San Sebastián

[CarlosLSev]

Hola jmviper ¿alguna explicación porque los segundos van de dos en dos y en números impares en mi versión móvil?
Es algo que he tocado en el script.  Si lo quito va bien (//<?php   include ('avisosaemetmobile.php');   ?>)
En la versión normal lo incluí en header.php. En la versión móvil lo añadí directamente en las primeras lineas de mobile.php
Actualizado:  03/05/21 16:27:33 hace 5 segundos
Ya no se que puede ser

Código: [Seleccionar]

<?php
########### Configuración ###########

$codigozona = '';  // Código de la zona de avisos. Se puede ver en el pdf de AEMET: //http://www.aemet.es/documentos/es/eltiempo/prediccion/avisos/plan_meteoalerta/detalle_municipios_zonas_meteorologicas.pdf
/detalle_municipios_zonas_meteorologicas.pdf

$nombrezona = '';  // Nombre de la zona del aviso.
$provincia = '';
#####################################

if (!$codigozona) exit('Hay que poner el código de la zona');

date_default_timezone_set('Europe/Madrid');

function icono_aviso($icono, $nivel){
$res = "";
global $res1;
$res1 = "";
if (strstr($icono, 'PR')) {$res = 'PR'; $res1 = 'Lluvias';}
elseif (strstr($icono, 'TO')) {$res = 'TO'; $res1 = 'Tormentas';}
elseif (strstr($icono, 'VI')) {$res = 'VI'; $res1 = 'Viento';}
elseif (strstr($icono, 'AT')) {$res = 'AT'; $res1 = 'Temperaturas máximas';}
elseif (strstr($icono, 'BT')) {$res = 'BT'; $res1 = 'Temperaturas mínimas';}
elseif (strstr($icono, 'NE')) {$res = 'NE'; $res1 = 'Nevadas';}
elseif (strstr($icono, 'NI')) {$res = 'NI'; $res1 = 'Nieblas';}
elseif (strstr($icono, 'DH')) {$res = 'DH'; $res1 = 'Deshielos';}
elseif (strstr($icono, 'RI')) {$res = 'RI'; $res1 = 'Rissaga';}
elseif (strstr($icono, 'VS')) {$res = 'VS'; $res1 = 'Visibilidad';}
elseif (strstr($icono, 'AL')) {$res = 'AL'; $res1 = 'Aludes';}
elseif (strstr($icono, 'GA')) {$res = 'GA'; $res1 = 'Galernas';}
elseif (strstr($icono, 'CO')) {$res = 'CO'; $res1 = 'Costeros';}
return 'http://www.aemet.es/imagenes/gif/iconos_avisos/'.$res.$nivel.'.gif';
}

$avisoamar = ""; $avisonara = ""; $avisorojo = "";

$semana = ['Domingo', 'Lunes', 'Martes', 'Mi&eacute;rcoles', 'Jueves', 'Viernes', 'S&aacute;bado'];

$meses = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'];

$riesgo = ['', '<div span class="avisos1">Avisos AEMET Campi&ntilde;a Sevillana&nbsp;&nbsp;&nbsp;&nbsp;Alerta Roja&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ INFO</div span class>', '<div span class="avisos2">Avisos AEMET Campi&ntilde;a Sevillana&nbsp;&nbsp;&nbsp;&nbsp;Alerta Naranja&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ INFO</div span class>', '<div span class="avisos3">Avisos AEMET Campi&ntilde;a Sevillana&nbsp;&nbsp;&nbsp;&nbsp;Alerta Amarilla&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ INFO</div span class>'];

$lista = [];

$lista[] = date('Y-m-d');

$lista[] = date('Y-m-d', strtotime("+1 day"));

$lista[] = date('Y-m-d', strtotime("+2 day"));

$jsons = [];

for ($i = 0; $i < 3; $i++){

$jsons[] = json_decode(file_get_contents('http://www.aemet.es/es/api-eltiempo/resumen-lista-avisos/PB/'.$lista[$i].'T12:00:00+02:00/D+0/'.$codigozona));

}

$res = "";
$exit = 0;

$horaact = time();
$activo = "";
$sinavisos = "";
$activonot = "";
$finaviso = $flagaviso = 0;


foreach ($jsons as $dia=>$items) {


if (empty($items->{'orden_avisos'})) {$exit += 1; continue;}
else {
$epoch = strtotime($lista[$dia]);
$res .= '<tr><th class="dia_tabla" colspan="8">'.$semana[date('w',$epoch)].' '.date('j',$epoch).' de '.$meses[date('n',$epoch)-1].'</th></tr>';
foreach ($items as $item2){

$res .='<tr><th>Fen&oacute;meno</th><th>Nivel de riesgo</th><th>Valor</th><th>Probabilidad</th><th>Zona de avisos</th><th>Hora de comienzo</th><th>Hora de finalizaci&oacute;n</th><th>Comentario</th></tr>';

foreach ($item2 as $item3){
++$flagaviso;
$ini = strtotime($item3[1]->{'Onset'});
$fin = strtotime($item3[1]->{'Expire'});
if ($horaact > $fin) {$finaviso += 1; continue;}
elseif ($horaact > $ini and $horaact < $fin and date('d',$epoch) == date('d')) {$activo = ' class="activo"'; $activonot = '<br><span class="blinking" style="font-weight: bold; display: inline-block; margin-top:10px;">ACTIVO</span>';}
$nivel = $item3[1]->{'Nivel'};
if ($nivel == 1) $avisorojo = 1;
elseif ($nivel == 2) $avisonara = 1;
elseif ($nivel == 3) $avisoamar = 1;


$res .= '<tr'.$activo.'><td class="estrecho"><img src="'.icono_aviso($item3[1]->{'FemParam'}, $nivel).'" /><br/>'.$res1.'</td><td>'.$riesgo[$nivel].$activonot.'</td><td class="estrecho">'.$item3[1]->{'Valor'}.'</td><td>'.$item3[1]->{'Prb'}.'</td><td>'.$nombrezona.'-'.$provincia.'</td><td class="start">'.date('d-m-Y H:i', $ini).'</td><td class="end">'.date('d-m-Y H:i', $fin).'</td><td style="width:25%;">'.htmlentities($item3[1]->{'Descrption'}).'</td></tr>';

$activo = $activonot = "";
}
if ($finaviso == $flagaviso) {$res = ""; $sinavisos = 1;}
}
}
}

$filaavisos = "";

if ($avisorojo) $filaavisos .= $riesgo[1];
if ($avisonara) $filaavisos .= $riesgo[2];
if ($avisoamar) $filaavisos .= $riesgo[3];

$resulavisos = "";
if ($exit == 3 or $exit == 2 && $sinavisos);
else $resulavisos = '<div class="tabla_avisos_open" style="border: 5px solid red;"><div id="riesgo">Avisos AEMET '.$nombrezona.$filaavisos.'<a class="tabla_avisos_open"class="tabla_avisos_open" style="color:white; cursor: pointer; margin-left:15px; font-size: 10px;">+ INFO</a></div><table id="tabla_avisos">'.$res.'</table></div>';

echo $resulavisos;


?>
<style>
#tabla_avisos{

display: none;
width: 80%;
border-collapse: collapse;
border: 1px solid black;
font-size: 12px;
font-family: sans-serif;
}

.estrecho{
width:5%;
}

#tabla_avisos th{
padding: 5px;
border: 1px solid black;
background-color: lightblue;
}

#tabla_avisos td{
border: 1px solid black;
text-align: center;
background-color: #E0E0E0;
padding: 5px;
}

.dia_tabla{
background-color: #1b488e !important;
color: white;
font-size: 12px;
text-align: center;
}

.avisos3 {
background-color: yellow;
color:black;
border: 0px solid black;
padding:0px;
}
.avisos2 {
background-color: orange;
color:black;
border: 0px solid black;
padding:0px;
}
.avisos1 {
background-color: red;
color:black;
border: 0px solid black;
padding:0px;
}

#riesgo {
background-color:  ;
font-size: 14px;
font-weight: bold;
text-align: center;
color: white;
padding: 0px;
}

#riesgo span{
margin-left: 7px;
font-size: 14px;
}

#sin_riesgo {
background-color: #32CD32;
font-size: 14px;
font-weight: bold;
text-align: center;
color: black;
padding: 0px;
border: 0px solid #32CD32;
}

.activo td{
background-color: #ff7272 !important;
}

.blinking{
    animation: blinkingText 1.2s infinite;
}

@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}

</style>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="jquery.popupoverlay.js"></script>
<script>
    $(document).ready(function() {

      // Initialize the plugin
      $('#tabla_avisos').popup({
horizontal: 'center'
  });

    });
</script>
Edito para resubir script ya que si había 2 avisos amarillo o naranja no se mostraba bien.

[jmviper]

Saludos jmviper

Aunque tarde, te agradezco muchísimo el trabajo que has realizado para todos los aficionados Españoles que nos habíamos quedado sin el útil servicio de las alarmas de Meteoalarm (en España: AEMET).

No quiero ni imaginarme lo que has tenido que hacer para personalizar los avisos de todas las regiones Españolas.

Además, el diseño está muy logrado:

                    http://kocher.es

Nos has dado una lección magistral.

Muchísimas gracias y saludos desde San Sebastián

Hola kocher

Celebro que te haya servido y sirva a los demás. La verdad es que lo hice sólo para mí pero.... con tu petición dije de hacerlo público y que sirviera a más de uno 

Que lo disfrutes y que AEMET no cambie dentro de poco el sistema o habrá que estudiar otro nuevo 

Saludos

Hola jmviper ¿alguna explicación porque los segundos van de dos en dos y en números impares en mi versión móvil?
Es algo que he tocado en el script.  Si lo quito va bien (//<?php   include ('avisosaemetmobile.php');   ?>)
En la versión normal lo incluí en header.php. En la versión móvil lo añadí directamente en las primeras lineas de mobile.php
Actualizado:  03/05/21 16:27:33 hace 5 segundos
Ya no se que puede ser

No incluyas en ese script del adjunto (avisosaemetmobile.php) las cabeceras al inicio include("top.php"); ya que se llaman dos veces, ahí y en mobile.php

Eso hace que se incluya dos veces el ajaxCUwx.js y dos veces los setInterval que hacen funcionar ese contador por lo que hacen ese efecto de ir cada dos segundos cuando en verdad suman los dos muy rápidamente al ejecutarse a la vez.

Como digo, hay que tener cuidado en la inclusión de cabeceras y demás con PHP ya que se pueden repetir scripts y suceder comportamientos indeseados. Y ojo con los setInterval…. si se llaman unos dentro de otros pueden colapsar al servidor o al navegador con peticiones que se multiplicarían.... yo he tenido esos problemas y menos mal que jantoni me vio que el servidor estaba escribiendo peticiones en el log a cascaporro y ya vi que tenía mal por ahí los setInterval

[CarlosLSev]

Hola jmviper ¿alguna explicación porque los segundos van de dos en dos y en números impares en mi versión móvil?
Es algo que he tocado en el script.  Si lo quito va bien (//<?php   include ('avisosaemetmobile.php');   ?>)
En la versión normal lo incluí en header.php. En la versión móvil lo añadí directamente en las primeras lineas de mobile.php
Actualizado:  03/05/21 16:27:33 hace 5 segundos
Ya no se que puede ser

No incluyas en ese script del adjunto (avisosaemetmobile.php) las cabeceras al inicio include("top.php"); ya que se llaman dos veces, ahí y en mobile.php

Eso hace que se incluya dos veces el ajaxCUwx.js y dos veces los setInterval que hacen funcionar ese contador por lo que hacen ese efecto de ir cada dos segundos cuando en verdad suman los dos muy rápidamente al ejecutarse a la vez.

Como digo, hay que tener cuidado en la inclusión de cabeceras y demás con PHP ya que se pueden repetir scripts y suceder comportamientos indeseados. Y ojo con los setInterval…. si se llaman unos dentro de otros pueden colapsar al servidor o al navegador con peticiones que se multiplicarían.... yo he tenido esos problemas y menos mal que jantoni me vio que el servidor estaba escribiendo peticiones en el log a cascaporro y ya vi que tenía mal por ahí los setInterval
[/quote]

Entiendo lo que me dices, pero si no incluyo ese include("top.php");
La plantilla móvil se me descuadra

[CarlosLSev]

Solucionado, despiece el top.php
Y añadiendo esto al inicio del script de avisosaemet.php ya no se descuadra y el contador de segundos va bien.

Código: [Seleccionar]

?php
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


[jmviper]

El contador todavía va mal en mobile.php ya que se sigue llamando dos veces al ajaxCUwx.js

[CarlosLSev]

Lo se es que aun no lo había corregido ahora ya si...

[jmviper]

Perfecto 

[jmviper]

Por cierto... en la última versión de MX (build 3129) se han implementado notificaciones por email de las alarmas. De momento en el apartado de la lluvia solo están las alarmas de lluvia hoy superior a e intensidad de precipitación superior a

Seguramente se implementen más bajo demanda en siguientes versiones.

[CarlosLSev]

Gracias lo vi ayer, puede ser interesante, voy a intentar no actualizar inmediatamente CumulusMX, así me evito errores graves al menos los primeros dias