Personalizar avisos de AEMET en nuestra web

Software > Tu Web meteorológica

<< < (5/10) > >>

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: ---<?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ércoles', 'Jueves', 'Viernes', 'Sábado'];

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

$riesgo = ['', '<div span class="avisos1">Avisos AEMET Campiña Sevillana    Alerta Roja     + INFO</div span class>', '<div span class="avisos2">Avisos AEMET Campiña Sevillana    Alerta Naranja     + INFO</div span class>', '<div span class="avisos3">Avisos AEMET Campiña Sevillana    Alerta Amarilla     + 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ó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ó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>

--- Fin del código ---
Edito para resubir script ya que si había 2 avisos amarillo o naranja no se mostraba bien.

jmviper:

--- Cita de: kocher en 03 de Mayo de 2021, 19:46:12 ---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

--- Fin de la cita ---

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

--- Cita de: CarlosLSev en 03 de Mayo de 2021, 23:16:37 ---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

--- Fin de la cita ---

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:

--- Cita de: CarlosLSev en 03 de Mayo de 2021, 23:16:37 ---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

--- Fin de la cita ---

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: ---?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">

--- Fin del código ---

Navegación

[0] Índice de Mensajes

[#] Página Siguiente

[*] Página Anterior

Ir a la versión completa