Autor Tema: Skin Adaptativo  (Leído 19048 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado jantoni

  • Investigación
  • Hero Member
  • ******
  • Mensajes: 3.652
    • Ver Perfil
    • Rivas-Vaciamadrid Centro
  • Estación: ESMAD2800000028522A
Re:Skin Adaptativo
« Respuesta #15 en: 28 de Febrero del 2017, 09:40:42 am »
A ver si este fin de semana puedo verlo
Las opiniones que pueda escribir no suponen asesoramiento profesional. Cada usuario tomará sus decisiones bajo su propio riesgo.

Desconectado Telares

  • Hero Member
  • *****
  • Mensajes: 665
    • Ver Perfil
  • Estación: Matueca ESCYL2400000024820A
Re:Skin Adaptativo
« Respuesta #16 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.

Desconectado Xavi-EA5ZF

  • Full Member
  • ***
  • Mensajes: 212
  • Ham Radio Operator EA5ZF
    • Ver Perfil
    • MeteoLaVall
  • Estación: ESPVA1200000012600A
Re:Skin Adaptativo
« Respuesta #17 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.

Desconectado chve

  • Jr. Member
  • **
  • Mensajes: 67
    • Ver Perfil
    • Meteo Moncofa
  • Estación: Moncofa ESPVA1200000012593A
Re:Skin Adaptativo
« Respuesta #18 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

Desconectado jantoni

  • Investigación
  • Hero Member
  • ******
  • Mensajes: 3.652
    • Ver Perfil
    • Rivas-Vaciamadrid Centro
  • Estación: ESMAD2800000028522A
Re:Skin Adaptativo
« Respuesta #19 en: 26 de Marzo del 2017, 09:39:36 am »
Si ya tienes la 2.0, súbela aquí y en la wiki.

Gracias
Las opiniones que pueda escribir no suponen asesoramiento profesional. Cada usuario tomará sus decisiones bajo su propio riesgo.

Desconectado Xavi-EA5ZF

  • Full Member
  • ***
  • Mensajes: 212
  • Ham Radio Operator EA5ZF
    • Ver Perfil
    • MeteoLaVall
  • Estación: ESPVA1200000012600A
Re:Skin Adaptativo
« Respuesta #20 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.
« Última modificación: 26 de Marzo del 2017, 10:55:32 am por Xavi-EA5ZF »

Desconectado chve

  • Jr. Member
  • **
  • Mensajes: 67
    • Ver Perfil
    • Meteo Moncofa
  • Estación: Moncofa ESPVA1200000012593A
Re:Skin Adaptativo
« Respuesta #21 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.

« Última modificación: 13 de Septiembre del 2017, 12:28:58 pm por jmviper »

Desconectado jmviper

  • Investigación
  • Hero Member
  • ******
  • Mensajes: 4.280
  • "Vortex Complex"
    • Ver Perfil
    • www.meteoarchena.es
  • Estación: Archena - ESMUR3000000030600B
Re:Skin Adaptativo
« Respuesta #22 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


Archena, Valle de Ricote (Murcia). 120 msnm. 19.500 hab.
Davis Vantage Pro2 Plus

www.meteoarchena.es

Desconectado chve

  • Jr. Member
  • **
  • Mensajes: 67
    • Ver Perfil
    • Meteo Moncofa
  • Estación: Moncofa ESPVA1200000012593A
Re:Skin Adaptativo
« Respuesta #23 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.

Desconectado jmviper

  • Investigación
  • Hero Member
  • ******
  • Mensajes: 4.280
  • "Vortex Complex"
    • Ver Perfil
    • www.meteoarchena.es
  • Estación: Archena - ESMUR3000000030600B
Re:Skin Adaptativo
« Respuesta #24 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


Archena, Valle de Ricote (Murcia). 120 msnm. 19.500 hab.
Davis Vantage Pro2 Plus

www.meteoarchena.es

Desconectado chve

  • Jr. Member
  • **
  • Mensajes: 67
    • Ver Perfil
    • Meteo Moncofa
  • Estación: Moncofa ESPVA1200000012593A
Re:Skin Adaptativo
« Respuesta #25 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.  ;)

Desconectado jmviper

  • Investigación
  • Hero Member
  • ******
  • Mensajes: 4.280
  • "Vortex Complex"
    • Ver Perfil
    • www.meteoarchena.es
  • Estación: Archena - ESMUR3000000030600B
Re:Skin Adaptativo
« Respuesta #26 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


Archena, Valle de Ricote (Murcia). 120 msnm. 19.500 hab.
Davis Vantage Pro2 Plus

www.meteoarchena.es

Desconectado chve

  • Jr. Member
  • **
  • Mensajes: 67
    • Ver Perfil
    • Meteo Moncofa
  • Estación: Moncofa ESPVA1200000012593A
Re:Skin Adaptativo
« Respuesta #27 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.  ;)

Desconectado salguerodejuarros

  • Newbie
  • *
  • Mensajes: 21
    • Ver Perfil
    • Salgüero de Juarros (Burgos)
  • Estación: Mi estación: ESCYL0900000009198A
Re:Skin Adaptativo
« Respuesta #28 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.

Desconectado salguerodejuarros

  • Newbie
  • *
  • Mensajes: 21
    • Ver Perfil
    • Salgüero de Juarros (Burgos)
  • Estación: Mi estación: ESCYL0900000009198A
Re:Skin Adaptativo
« Respuesta #29 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.