Meteoclimatic

Software => WeeWX => Otros Skins de Weewx => Mensaje iniciado por: chve en 04 de Diciembre del 2016, 01:00:46 am

Título: Skin Adaptativo
Publicado por: chve en 04 de Diciembre del 2016, 01:00:46 am
Ya he terminado una primera versión del skin y ya se puede compartir. Adaptativo 1.0.

Como característica principal he intentado mostrar los datos de manera mas compacta y adaptables a cualquier dispositivo. Esta basado en bootstrap y muestra los contenidos en una columna en resoluciones inferiores a 768 px, en dos columnas de 768 px a 1199 px y en tres columnas en resoluciones de 1200 px o superiores. En resoluciones inferiores a 768 px la imagen del gráfico esta escondida y se muestra al pinchar sobre el boton.
Incluye imagen infraroja sat24, secuencia de radar aemet generada por script e imagen del flujo de viento.

Podéis verla  http://meteo.con-ip.com (http://meteo.con-ip-com)
Título: Re:Skin Adaptativo
Publicado por: errea en 04 de Diciembre del 2016, 16:49:16 pm
Gracias por compartirlo me gusta mucho.
Título: Re:Skin Adaptativo
Publicado por: jantoni en 04 de Diciembre del 2016, 17:36:13 pm
Me ha gustado mucho.

Muy limpia.....

Ahora solo te falta darla de alta en Meteoclimatic ;) ;) ;) ;) ;)
Título: Re:Skin Adaptativo
Publicado por: Ubik en 04 de Diciembre del 2016, 21:11:47 pm
La verdad es que me gusta como te está quedando, como dice Jantoni, muy limpia, muy clara. . . . .  pero. . . . . siempre tiene que haber un pero.

Como sabes, es foro está para apoyar en lo que se pueda a las estaciones de la Red. En tu Skin, se puede ver con claridad que llevas registrando datos al menos desde finales de Agosto.

Dar de alta una estación en Meteoclimatic cuesta menos de 10 minutos, modificar el Skin bastante más.

Creo que 4 meses es un tiempo más que prudente para que el que tiene intenciones de dar de alta la estación en la Red lo haga, salvo que haya cuestiones que se escapen al entendimiento normal.

En otros casos puedo tener más dudas, pero tienes la estación operativa, y salvo que haya algo que desconozca ( todo) no veo que haya problemas para tenerla activada.
Título: Re:Skin Adaptativo
Publicado por: chve en 05 de Diciembre del 2016, 20:10:52 pm
Mil disculpas Ubik. :-[ :-[  Entiendo tu postura, pero no es cuestión de que no quiera registrar la estación en Meteoclimatic, si no todo lo contrario, es por eso que en este tiempo la he estado controlando para ver si su funcionamiento en conjunto con la OPI+2 es optimo y reúne una calidad mínima para formar parte de esta comunidad. Mi intención era darla de alta el dia 31 de Diciembre si todo funcionaba bien y así empezar el año en Meteoclimatic.

Entonces voy a darle prioridad a la corrección de alguna inconsistencia que he detectado y la daré de alta una vez corregidas. No sera algo inmediato, primero tengo que leerme para solucionar inconsistencias y luego como enviar datos a Meteoclimatic. Intentare tenerla activa para el fin de semana, que yo no tengo ni puente ni festivos.

Un saludo.  ;)
Título: Re:Skin Adaptativo
Publicado por: Ubik en 05 de Diciembre del 2016, 22:24:47 pm
Ya somos dos, .. .  me refiero a lo de los festivos y domingos, jejeje, Yo libro en Navidad medio día y el de Año nuevo , . . ( Autónomo, ¿verdad?)

Bueno, a lo que nos ocupa.

Hablando se entiende la gente, y me parece perfecto tu criterio,, si prefieres esperar al día 1 y empezar con el año es totalmente válido y una vez que lo has explicado no hay nada que objetar.

Título: Re:Skin Adaptativo
Publicado por: errea en 06 de Diciembre del 2016, 09:31:04 am
Sobre tu skin, creo estás evolucionando a una nueva versión, yo lo estoy usando en mi nueva estación, el proceso es estar en pruebas esta semana y espero para la próxima, ya dejarlo continuamente.

http://meteoejea.eu5.org/ (http://meteoejea.eu5.org/)

Cuando saques una nueva versión me dices, las bandas azules mejoran la lectura, lo mismo que separar el dato del texto, Temperatura5.9

 y en la tuya se ve

Temperatura      5.9

A la espera pues de la V.1.1.   

El radar como ves no me funciona pero imagino el porqué.
Título: Re:Skin Adaptativo
Publicado por: jantoni en 06 de Diciembre del 2016, 09:54:15 am
Insisto......me ha gustado......me ha gustado mucho.....

Yo todavía estoy con la versión 3.10

Pero, el día que me cambie a la 3.6, seguramente instale tu Skin.

¿El skin es tuyo original?

Si es así, ponle nombre y cuando esté terminado, lo subes a la wiki de Weewx, y por supuesto a la wiki de Meteoclimatic.
Título: Re:Skin Adaptativo
Publicado por: chve en 06 de Diciembre del 2016, 16:22:10 pm
Os respondo a toos...

Ubik no soy autónomo ahora, pero casi, haber si la cosa realmente espavila y volvemos a la carga.

Errea, estoy seguro que no has copiado el archivo Adaptativo.css a la carpeta weewx de la www/html. Lo que te fallan son los estilos, copia el archivo que te he dicho.

Jantoni el skin parte del bootstrap, yo solo he restructurado la manera de presentar los datos y cambiado algun estilo css. El compartir todo son ventajas.

Un saludo.
Título: Re:Skin Adaptativo
Publicado por: errea en 06 de Diciembre del 2016, 18:05:04 pm
Cierto, ese era el problema. Gracias.
Título: Re:Skin Adaptativo
Publicado por: meteozgz en 26 de Enero del 2017, 20:14:35 pm
Una pregunta, soy nuevo en WeeWx y en Linux.
¿Hay que añadir algo al skin.conf o algún lado para que siga subiendo los datos a meteoclimatic? Me ha dejado de subir cuando he hecho el cambio, y ni idea del por qué... En la web me actualiza perfectamente cada cinco minutos.

COD: ESARA5000000050014B
Web: http://meteozgz.eu5.org/davis/index.html

Muchas gracias de antemano.
Título: Re:Skin Adaptativo
Publicado por: Wlarues en 26 de Enero del 2017, 20:19:09 pm
Parece que sí, en skin.conf falta añadir estas líneas en la sección [ToDate]:
Código: [Seleccionar]
        [[[Meteoclimatic]]]
            template = meteoclimatic.html.tmpl

Saludos
Título: Re:Skin Adaptativo
Publicado por: meteozgz en 26 de Enero del 2017, 20:20:43 pm
Parece que sí, en skin.conf falta añadir estas líneas en la sección [ToDate]:
Código: [Seleccionar]
        [[[Meteoclimatic]]]
            template = meteoclimatic.html.tmpl

Saludos

¡Muchas gracias, Wlarues!
Título: Re:Skin Adaptativo
Publicado por: alcion en 27 de Enero del 2017, 09:28:07 am
Mola tu skin chve!! Enhorabuena!
Título: Re:Skin Adaptativo
Publicado por: chve en 27 de Febrero del 2017, 22:16:20 pm
Bueno pues... funcionando el skin en weewx 3.6.2

Para la próxima versión 2.0 optimizare el skin para que su configuración sea igual que los skin oficiales, añadiré documentación para su instalación, incluiré scripts para mostrar mapa de sat24 visible de día e infrarrojo por la noche, optimizare y cambiare algunas posiciones para que muestre adecuadamente el almanaque básico en caso de utilizarlo y no queden posiciones sin contenido, añadiré también la pagina RSS traducida al Castellano y buscare  un lugar en el skin donde ubicar las galletas de Meteoclimatic.

Si alguien le viene en gana aportar o realizar cualquier petición para con el skin y su contenido, que hable ahora o calle pa siempre  *+* *+* *+*

Un saludo Maestros.  ;D
Título: Re:Skin Adaptativo
Publicado por: jantoni en 28 de Febrero del 2017, 09:40:42 am
A ver si este fin de semana puedo verlo
Título: Re:Skin Adaptativo
Publicado por: Telares en 17 de Marzo del 2017, 17:11:57 pm
A mí también me gusta mucho. Además se adapta muy bien al móvil. Gracias por compartir.
Título: Re:Skin Adaptativo
Publicado por: Xavi-EA5ZF en 18 de Marzo del 2017, 18:08:51 pm
Hay que ver, este vecino mío de Alfondeguilla es mas listo que los ratones coloraos...
Me ha gustado tu skin y como lo vas cociendo, creo que en algún momento ya comenté en el foro que usaba un adaptativo tipo response de bootstrap personalizado a mi gusto.
Y me ha gustado tu personalización del gráfico de lluvia semanal en el que marcas la lluvia por día y supongo que como 2º opción la tri-horaria, es correcto? Si puedes explicame que haces con este gráfico en sus dos opciones. Me has abierto los ojos a una cosa que tenía en la cabeza y nunca me había puesto a resolverla.
Gracias.
Título: Re:Skin Adaptativo
Publicado por: chve en 25 de Marzo del 2017, 13:36:48 pm
Xavi, creo que te refieres a esto...

        [[[weekrain]]]
            yscale = None, None, 0.02
            plot_type = bar
            chart_line_colors = 0x4242b4, 0xb48242
            chart_fill_colors = 0x7272c4, 0xc4b272
           
            [[[[rain3Hour]]]]
                data_type = rain
                aggregate_type = sum
                aggregate_interval = 10800
                label = LLUVIA (3 horas)
           
            [[[[rain]]]]
                aggregate_type = sum
                aggregate_interval = 86400
                label = LLUVIA (total x dia)

Un saludo.  ;D
Título: Re:Skin Adaptativo
Publicado por: jantoni en 26 de Marzo del 2017, 09:39:36 am
Si ya tienes la 2.0, súbela aquí y en la wiki.

Gracias
Título: Re:Skin Adaptativo
Publicado por: Xavi-EA5ZF en 26 de Marzo del 2017, 10:52:52 am
Si, exactamente, me refería a ese código, ya lo probé hace tiempo pero por un problemilla no me funcionó como esperaba, por lo visto hacía dos cosas mal, por una parte, el primero que hay que meter es el no standard "rain3hour" en tu caso y luego hay que definirle que son datos de tipo rain, que es lo que no hacía bien...
Ya lo tengo y estoy en ello, modificando intervalos y colores a mi gusto.
Muchas gracias.
Título: Re:Skin Adaptativo
Publicado por: chve en 09 de Septiembre del 2017, 03:55:20 am
Adaptativo 2.0
Añadido Script para cambiar la imagen Meteosat sat24 de VISIBLE a INFRAPOLAR y viceversa
dependiento la hora.
Añadido codigo a radar_aemet.sh que muestra un fondo negro como transición entre el final
y el principio de la animación del Radar de Aemet. Por Xavi-EA5ZF
---------------------------------------------------------------------------------------

Skin Adaptativo para WEEWX. Incluye:

-Biblioteca Bootstrap para un optimo visionado en cualquier dispositivo.

-Biblioteca jquery para interactuar con los documentos html.

-Script para cumplir con la ley de Cookies. Una vez aceptada no se vuelve a mostrar.
Por johnchambers  https://gist.github.com/johnchambers

-Script para cambiar la imagen Meteosat sat24 de VISIBLE a INFRAPOLAR y viceversa
dependiento la hora.

-Script que recrea las ultimas 12 horas del Radar de Precipitacón de la Agencia
Estatal de Meteorologia AEMET. Por Blackhold

-Imagen Interactiva de Flujos de Viento windy.com.

-Imagen Meteosat sat24.com.

-Imagen Radar Aemet.

-Pagina RSS.

-Informes NOAA Mensual y Anual.

El Sking muestra los contenidos en una columna en resoluciones inferiores a 768 px.
   ____________________________________________________________________________
  |                                                                                                                        |
  |                                                                                                                        |
  |                                                                                                                        |
  |                                                                                                                        |
  |                                                                                                                        |

En dos columnas para resoluciones de 768 px a 1199 px.
   _____________________________________  _____________________________________
  |                                                          ||                                                          |
  |                                                          ||                                                          |
  |                                                          ||                                                          |
  |                                                          ||                                                          |
  |                                                          ||                                                          |

En tres columnas para resoluciones de 1200 px o superiores.
   ________________________  ________________________  ________________________
  |                                      ||                                     ||                                      |
  |                                      ||                                     ||                                      |
  |                                      ||                                     ||                                      |
  |                                      ||                                     ||                                      |
  |                                      ||                                     ||                                      |

Este skin viene preparado por defecto para mostrar el Almanaque extendido que
incorpora weewx pero, para que este se muestre correctamente se deben instalar
en linux, en caso de no tenerlos instalados, el modulo para python y el modulo
para calculos astronomicos en python de nombre pyephem. Se puede dar el caso que
antes de instalar el modulo pyephem se deba instalar otro modulo llamando python-pip,
sea cual fuere el caso bajo estas lineas se muestra el codigo para su instalación:

apt-get install python-dev

apt-get install python-pip

pip install pyephem


INSTALACIÓN SKIN ADAPTATIVO=======================================

Descomprime el archivo Adaptativo

---------------------------------------------------------------------------------------

Edita el archivo radar_aemet.sh y pon la ruta a tu carpeta destino en la linea cd /ruta/carpeta.
La carpeta destino es donde weewx copia los archivos e imagenes que genera, esta carpeta
y su ruta se definen en el archivo weewx.conf dentro del apartado [StdReport] en la linea
HTML_ROOT = /ruta/carpeta/

---------------------------------------------------------------------------------------

Copia las carpetas backgrounds, NOAA, RSS y los archivos Adaptativo.css,
favicon.ico, inicio_radar.gif, cookie.js y radar_aemet.sh en la carpeta destino de weewx.

---------------------------------------------------------------------------------------

Otorgamos permisos de ejecución al archivo radar_aemet.sh desde sus propiedades en modo
gráfico o por consola:

chmod +x radar_aemet.sh

Instala en linux el componente imagemagick para crear y editar imágenes dinamicamente:

apt-get install imagemagick

Añade al cron de Linux para que ejecute cada 10 minutos el radar_aemet.sh. Lo podemos
hacer con el gnome scheduled en modo grafico o por consola:

vi /etc/crontab
*/10 * * * * root /var/www/weewx/radar_aemet.sh

Este script crea un gif animado en tu carpeta weewx del radar de aemet. Para cambiar la
zona geográfica hay que cambiar la terminación de la url del aemet /radar?w=1&p=ba
ba Barcelona, va Valencia etc...

---------------------------------------------------------------------------------------

Copia la carpeta del skin Adaptativo y pegala dentro de la carpeta skins de weewx.

En el archivo de configuracion weewx.conf en el apartado [[StandardReport]] cambia la
linea skin = Standard por skin = Adaptativo.

---------------------------------------------------------------------------------------

Ya podemos reiniciar weewx por consola:

service weewx restart

Si has seguido todos los pasos y colocado bien las rutas a los archivos tendras el skin
funcionando con todas su opciones disponibles.

---------------------------------------------------------------------------------------

Para cambiar el horario en que se muestra el meteosat en modo visible o modo infrapolar
edita el archivo index.html.tmpl y en la linea 301 modifica (ahora<20 && ahora>8) por las
horas que se deseen: (ahora<19 && ahora>7)  Cambiaria a infrapolar a las 7 de la tarde y
a visible a las 7 de la mañana.


---------------------------------------------------------------------------------------[Extras]
   # Url Imagen Radar Precipitación
     radar_img = radar.gif

   # Url Web Radar Precipitación
     radar_url =

   # Url Pastilla Meteoclimatic
     pastilla_url =

==================================================================

Agradecimientos a Xavi de MeteolaVall por su aportación a la secuencia del Radar.

Próxima versión 2.1

Un saludo.

Título: Re:Skin Adaptativo
Publicado por: jmviper en 09 de Septiembre del 2017, 20:30:53 pm
Interesante lo del radar...

He probado a ejecutarlo en mi Orange Pi PC pero necesitaba instalar imagemagick. No sé si la Raspi viene con él instalado por defecto. Luego he modificado un poco el script porque por defecto carga todas las imágenes de la página del radar que queramos para que sólo ponga si queremos por ejemplo las últimas 10 imágenes.

Pongo el código modificado:

Código: [Seleccionar]
#!/bin/bash
### CREATED BY: Blackhold
### DATE: 2014-12-12
### MODIFIED: 2016-02-07
### http://blackhold.nusepas.com

YEAR=`date +"%Y"`
MONTH=`date +"%m"`

cd /var/www/weewx

curl "http://www.aemet.es/es/eltiempo/observacion/radar?w=1&p=r8mu" > radar.html
IMG=(`cat radar.html |grep ${YEAR}${MONTH} |grep gif |awk '{ gsub("src=","",$0); gsub("data-\"","",$0); gsub("\"","",$0); print $3}'`)

lenIMG=${#IMG[@]}


for ((i=lenIMG - 10; i < lenIMG; i++))
do
    GIF=`printf "http://www.aemet.es%s\n" ${IMG[i]}`
    wget ${GIF}
done

/usr/bin/convert -delay 100 -loop 0 ./*r8mu.gif ./radar.gif
rm ./*r8mu.gif
rm ./radar.html

Es con el radar de Murcia y con el loop cada segundo (-delay 100). En el bucle for en i=lenIMG - 10 se cambia el 10 por el número de últimas imágenes del radar que se quieren. Aquí lo tengo funcionando:

http://www.meteoprovidencia.es/radar.php

A ver si podemos ponerlo en la wiki.

Saludos
Título: Re:Skin Adaptativo
Publicado por: chve en 10 de Septiembre del 2017, 02:14:36 am
Excelente jmviper.  :aplaude1:
Cierto que se aprecia muchísimo mejor la imagen del radar relentizandola a una imagen por segundo. La opción de poder elegir la cantidad de imágenes que componen la animación del Radar no tiene precio.
 
Añadidos para la 2.1

Un saludo.
Título: Re:Skin Adaptativo
Publicado por: jmviper en 10 de Septiembre del 2017, 20:16:26 pm
Ok ok  :) pero... no hay diferenciación entre el final y el inicio de la secuencia del radar ya que van todas las imágenes seguidas. He modificado ligeramente otra vez el script para incluir las dos últimas imágenes iguales y así dar una imagen de final y principio del bucle.

Todo es cuestión de gustos pero a mí personalmente me gusta más. Pongo el código:

Código: [Seleccionar]
#!/bin/bash
### CREATED BY: Blackhold
### DATE: 2014-12-12
### MODIFIED: 2016-02-07
### http://blackhold.nusepas.com

YEAR=`date +"%Y"`
MONTH=`date +"%m"`

cd /var/www/weewx

curl "http://www.aemet.es/es/eltiempo/observacion/radar?w=1&p=r8mu" > radar.html
IMG=(`cat radar.html |grep ${YEAR}${MONTH} |grep gif |awk '{ gsub("src=","",$0); gsub("data-\"","",$0); gsub("\"","",$0); print $3}'`)

lenIMG=${#IMG[@]}

for ((i=lenIMG - 10; i < lenIMG; i++))
do
    GIF=`printf "http://www.aemet.es%s\n" ${IMG[i]}`
    wget ${GIF}
if [ $i -eq 23 ]
then
GIF=`printf "http://www.aemet.es%s\n" ${IMG[i]}`
wget ${GIF}
fi
done

/usr/bin/convert -delay 100 -loop 0 ./*r8mu.gif* ./radar.gif
rm ./*r8mu.gif*
rm ./radar.html

Como se ve en él al final del bucle se inserta otra vez la última imagen y después se pone comodín al final de los archivos de creación y borrado de los archivos temporales del radar.

Espero que te guste.

Saludos
Título: Re:Skin Adaptativo
Publicado por: chve en 12 de Septiembre del 2017, 15:17:29 pm
Gracias nuevamente jmviper.

En su momento Xavi de MeteolaVall agrego al script en la penúltima linea para diferenciar el final del principio de la secuencia:

Código: [Seleccionar]
/usr/bin/convert -delay 100 -loop 0 ./*r8pb.gif ./inicio_radar.gif ./radar.gif
En este caso lo añade al final, pero bueno... yo le puse inicio_radar.gif

Por cierto, se me paso en el anterior post. He añadido al manual del skin que se debe instalar en linux el componente imagemagick. Si algún admin me otorga permisos de edición editaría yo mismo el post.

Ya esta añadido el skin al wiki de Meteoclimatic.

Un saludo.  ;)
Título: Re:Skin Adaptativo
Publicado por: jmviper en 12 de Septiembre del 2017, 17:49:46 pm

En su momento Xavi de MeteolaVall agrego al script en la penúltima linea para diferenciar el final del principio de la secuencia:

Código: [Seleccionar]
/usr/bin/convert -delay 100 -loop 0 ./*r8pb.gif ./inicio_radar.gif ./radar.gif
En este caso lo añade al final, pero bueno... yo le puse inicio_radar.gif


De esa manera consigues insertar en la secuencia una imagen de radar inexistente (http://alfondeguillameteo.con-ip.com/weewx/inicio_radar.gif) con la que como tú dices también se consigue un efecto de transición pero como ya dije anteriormente es cuestión de gustos   :).

En cuanto a lo de editar los mensajes escritos anteriormente de momento no se permite (ha habido malas experiencias recientemente) por lo que si quieres añade la respuesta completa en una nueva y ya edito el original yo mismo.

Por cierto... buen trabajo en la wiki  ;).

Saludos
Título: Re:Skin Adaptativo
Publicado por: chve en 04 de Febrero del 2021, 20:54:37 pm
Retomo este hilo.
Estoy liao con la versión 2.1 que optimiza todas las posiciones para que se muestren de manera optima con independencia de los apartados extras que se muestren.
Quiero actualizar la plantilla a nuevas versiones bootstrap e incluir varios diseños diferentes, incluida una segunda plantilla que muestre el contenido tipo consola con datos e iconos a tiempo real.

Un saludo.  ;)
Título: Re:Skin Adaptativo
Publicado por: salguerodejuarros en 07 de Marzo del 2021, 09:45:35 am
Retomo este hilo.
Estoy liao con la versión 2.1 que optimiza todas las posiciones para que se muestren de manera optima con independencia de los apartados extras que se muestren.
Quiero actualizar la plantilla a nuevas versiones bootstrap e incluir varios diseños diferentes, incluida una segunda plantilla que muestre el contenido tipo consola con datos e iconos a tiempo real.

Un saludo.  ;)

Buenos días chve: soy nuevo en esto y he decidido utilizar tu skin "adaptativo".
Para comenzar te agradezco el trabajo realizado pues me agrada y me resulta útil a la vez, por eso lo utilizo.
Por poner un pero: yo creo que, por lo menos en mi caso, todos los literales "UTC" que aparecen en las plantillas tengo que eliminarlos pues los tiempos que muestra, como por ejemplo aquí:
<h2> $station.location <small><span class=" glyphicon  glyphicon-time"></span> $current.dateTime UTC</small></h2>
creo que no son UTC, sino la hora local.

Por otra parte: alguien, que ignoro si es la aplicación weewx o el skin o el generador de informes, hace unas conversiones y/o redondeos poco rigurosos pues, por ejemplo, la temperatura que se muestra como máxima diaria no aparece con ese valor exacto (ni aún redondeando) en la tabla "archive" de la base de datos. No se donde podría mirar eso.

Pero sobre todo, gracias por tu trabajo.
Título: Re:Skin Adaptativo
Publicado por: salguerodejuarros en 07 de Marzo del 2021, 09:54:35 am
Además, para quien me pueda responder, tengo una duda (bueno, tengo muchas, pero de momento me intriga esta):
¿como es que en el index.html que veo en el cliente web se muestra por ejemplo que la máxima ha ocurrido a las 9:44:08 si en la base de datos los tiempos que registra se producen en intervalos de 5 minutos?.

Gracias anticipadas.
Título: Re:Skin Adaptativo
Publicado por: jantoni en 07 de Marzo del 2021, 10:11:49 am
Porque entre generación y generación de plantillas y grabación en la base de datos, Weewx tiene memoria intermedia.
Título: Re:Skin Adaptativo
Publicado por: salguerodejuarros en 07 de Marzo del 2021, 10:16:01 am
Gracias Jantoni: eso entonces explica lo de las horas y lo que yo creía que eran conversiones poco rigurosas de temperaturas.
Título: Re:Skin Adaptativo
Publicado por: jantoni en 07 de Marzo del 2021, 10:23:35 am
Puedes verlo claramente si ejecutas weewx como programa y no como servidor.

Para weewx y lo arrancas manualmente

sudo weewx /etc/weewx/weewx.conf

Verás como llegan los oaqquetes de datos desde tu consola.

No olvides cerrar el programa con ctrl-c y volver a arrancar weewx normalmente