Archivo de la categoría: INS Jaume Balmes

Municipios de Catalunya (Openlayers)

Hemos cogido del IDESCAT los datos de los municipios de más de 20.000 habitantes de Cataluña (una setantena de municipios), y los hemos geolocalizado.
En esta ocasión se quería practicar la selección de capas, y lo quería hacer todo con módulos (imports) de Javascript, y el código los más limpio posible.
Se puede ver el resultado en este video.

Cataluña Mágica

Se ha publicado la web de la Cataluña Mágica: demonios, infierno, brujas y diablos, con información extraída de OpenStreetMap.

Hemos utiltzado OpenLayers 6.5.0 (con el paradigma de imports), y los tiles estandard de OSM y también TRESC, una capa de visualización que me gusta mucho. Los datos que se obtienen pueden ser nodos o vías, y ha habido un trabajo previo de limpiar un poco los datos, pero todo ha sido un proceso muy rápido.

Referencias:

Gráficos interactivos con Jupyter Notebooks: tiro parabólico

Ahora que ya he empezado a hacer pruebas con Jupyter Notebook, el siguiente paso que quiero probar es hacer gráficos interactivos. Pues ha resultado ser más fácil y rápido de lo que pensaba.

Partimos de un script python que simula los datos experimentales de una trayectoria parabólica, y calcula la parábola que mejor se ajusta (regresión cuadrática). A partir de la ecuación de la parábola se puede deducir la constante g (=9,81 m/s2). Simulamos los datos experimentales introduciendo un error de ruido en los datos teóricos. Pues bien, con mi gráfico interactivo puedo jugar con el nivel de ruido y con el número de puntos del muestreo, tal com se ve en el video. El código queda de la siguiente forma:

%matplotlib inline
from ipywidgets import interactive
import numpy as np
import pylab as plt
from IPython.display import display, Math, Latex

# tir parabòlic: y = vy*t - .5gt^2
vy = 10 # 10m/s
g = 9.81 # m/s^2
t_max = 2*vy/g

def f(nivell_soroll, num_punts):
    t = np.linspace(0, t_max, num_punts)
    y_or = vy*t - .5*g*t**2
    noise = np.random.normal(0, nivell_soroll, num_punts) # simulem dades experimentals
    y = y_or + noise

    # ajustament a una paràbola
    z = np.polyfit(t, y, 2)
    g_exp = 2.0*z[0]

    t_ = np.linspace(0, t_max, 100)
    y_ = z[0]*t_**2 + z[1]*t_ + z[2]

    fig, ax = plt.subplots()
    plt.plot(t_, y_, t, y, 'bo')
    plt.suptitle("Tir parabòlic. Regressió quadràtica")
    plt.title("y = " + str(round(z[0],3)) + "t^2 + " + str(round(z[1],3)) + "t + " + str(round(z[2],3)) + " -> g exp = " + str(round(g_exp,3)) + " m/s^2")
    ax.set(xlabel='temps (s)', ylabel='y (m)')
    ax.grid()
    plt.show()
    
interactive_plot = interactive(f, nivell_soroll=(0.0, 2.0),  num_punts=(10, 50))
interactive_plot

Otra cosa que me interesa es la manera de exportar estos Jupyter Notebooks a una web, conservando las gráficas y las fórmulas en format Latex (aunque se pierda la interacció con las gráficas). Esto se consigue directamente exportando el Notebook a html:

$ jupyter nbconvert --execute tir_parabolic.ipynb --to html

e integrando este código en una web donde haya más texto y explicaciones, y con la librería Bootstrap.

Actividad en la wiki y en blog durante la COVID-19

Durante este tiempo de confinamiento se ha trabajado mucho en casa con el teletrabajo, cosas del instituto y cosas mías. Haciendo una consulta mysql a la wiki y al wordpress se puede saber fácilmente en qué he estado trabajando durante estos días.

En la wiki, wiki.joanillo.org:

mysql> select distinct page_title 'COVID-19 editons' from page, revision where page_id=rev_page and rev_timestamp >= '20200313%' and page_namespace=0;
+--------------------------------------------------------------------+
| COVID-19 editons                                                   |
+--------------------------------------------------------------------+
| Llibres_electrònics_i_l'editor_Sublime_Text2._Convertir_pdf_a_txt |
| Esglésies_romàniques_de_Catalunya                                |
| Aplicació_web_amb_motor_Python                                    |
| Pàgina_principal                                                  |
| Mapes_medievals,_mapes_ficticis,_mapes_de_fantasia                 |
| Fusionar_GeoJSON                                                   |
| Opendata-barcelona                                                 |
| Openlayers:_ol_package._Exemple_Casa_de_Papel                      |
| DAW-M06-WEC                                                        |
| React:_A_JavaScript_library_for_building_user_interfaces           |
| JQuery:_Tablesorter                                                |
| React_Native                                                       |
| Github_pràctic:_control_de_versions                               |
| Desplegar_un_projecte_web_amb_Express_i_Heroku                     |
| Aplicació_Reactjs_a_través_del_servidor_web_Express              |
| Openlayers_amb_ReactJS                                             |
| ReactJS._Curs_EdX._Introduction_to_ReactJS._Microsoft:_DEV281x     |
| Curriculum_Vitae_Joan_Quintana_Compte                              |
| Introducció_als_frameworks_de_Javascript                          |
| React_CRUD_tutorial                                                |
| Exemples_Openlayers_(ol_package)                                   |
+--------------------------------------------------------------------+
21 rows in set (0.00 sec)

En el blog, a www.joanillo.org:

select post_title from wp_posts where post_modified >= '2020-03-13%' and post_type='post' and post_parent=0

Geovisualització de la COVID-19
Esglésies romàniques
Vegueries/regions de Catalunya. Densitat de població
La Casa de Papel: aplicació web
John H. Conway. Joc de la Vida
Introducció a ReactJS: DEV281x

De momento es esto, porque desgraciadamente el confinamiento continúa.

La Casa de Papel: aplicación web

Este es un ejemplo que he hecho mano a mano con Pere, ahora que estamos confinados por la COVID-19 y vamos por la mitad de la 3a temporada de La Casa de Papel.

Para mi también ha servido para hacer una aplicación OpenLayers con código Node, que es la tendencia actual. Todo está explicado en la wiki y en los enlaces a los que se hace referencia.

La renderización que se ha hecho del mapa en blanco y negro es el estilo toner de Stamen. A mí particularmente me gusta mucho, y creo que hemos conseguido una buena integración con el diseño propio de la serie, que juega con los colores negro y rojo.

Enlaces:

GeoJSON: densidad de las comarcas de Cataluña

Tenía un tema pendiente con la visualización de mapas: programar aquellos mapas en que se ven las fronteras (ya sean países, regiones, comarcas, municipios), y donde podamos asignar un color o podamos clicar en cada una de las regiones.

En la API de Overpass se pueden hacer consultas de las relaciones a nivel administrativo, y normalmente se obtiene las ways que representan líneas de frontera administrativa. Esto ya va bien para pintar el contorno de un municipio, por ejemplo. Ahora bien, para sombrear toea una área necesitamos un polígono cerrado. Lo mejor es buscar una fuente de datos con formato GeoJSON de los datos que necesitamos, por ejemplo las comarcas. Buscando un poco puedes encontrar datos de todo: países, comunidades autónomas, provincias, etc. Combinando estos datos con la información que nos interesa (por ejemplo, la densidad de población por comarca), podemos hacer una aplicación como la que se muestra en la imagen.

Para hacerlo, está explicado en la wiki. Ahora que me he puesto con el GeoJSON, ahora veo que hay otro formato interesante que es el TopoJSON. Esto es un no parar!

Open Data BCN: World Data Viz Challenge 2018

Participo en la edición de este año del World Data Viz Challenge 2018 Barcelona-Kobe. Entre el catálogo de datos abiertos que publica el Ayuntamiento de Barcelona, he escogido los datos de paro en el periodo 2011-2018. Mi aplicación de visualización la puedes ver en http://aturbcn.joanillo.org/. Se presentan los datos desglosados por barrios y por distritos, y se puede ver la evolución del paro a través de los años, o a través de los meses.

He utilizado la API de Open Street Map, que es una novedad para mi pues siempre había utilizado la API de Google Maps. Los datos originales estaban en formato xls, y se han introducido a una base de datos MySQL para poder explotar los datos directamente con SQL.

La idea de participar vino porque, de hecho, en el instituto queremos participar en otra convocatoria: Repte Barcelona Dades Obertes, segona edició 2019 (http://opendata-ajuntament.barcelona.cat/ca/repte-barcelona-dades-obertes). Hay que ver cómo, dentro de la asignatura de Javascript (Ciclo Formativo de Desarrollo de Aplicaciones Web), podemos hacer alguna visualización para presentarla en esta convocatoria.

Referencias:

El punto medio catalán (middle dot): práctica de SQL en WordPress

En la escritura en catalán se utiliza frecuentmente la ela geminada con la grafía l.l (por ejemplo, Brussel.les), en vez de utilizar el punto volado: Brussel&middledot;les.

Vamos a actualizar un blog de WordPress (www.joanillo.org) substituyendo en la base de datos, con SQL, todas las eles geminades con la grafía del punto volado. Proceso:

1. los posts que están publicados

select ID,post_title,post_status from ins_posts where post_status=’publish’;

2. los posts que están publicados, mostramos también el contenido:

select ID,post_title,post_status, post_content from ins_posts where post_status=’publish’;

3. I ahora mostramos los posts que tienen ele geminada:

select ID,post_title,post_status, post_content from ins_posts where post_status=’publish’ and post_content like ‘%l.l%’;

4. Y ahora que ya vemos cuáles son los posts afectados, podemos modificar su contenido substituyendo las eles geminadas mal formatadas con el punto volado:

Ante todo hacemos una prueba de cómo quedaría la substitución:

select ID,post_title,post_status, replace(post_content,’l.l’,’l·l’) from ins_posts where post_status=’publish’ and post_content like ‘%l.l%’;

5. Y ahora ya podemos hacer la substitución (update):

update ins_posts set post_content=replace(post_content,’l.l’,’l·l’) where post_status=’publish’ and post_content like ‘%l.l%’;
Query OK, 49 rows affected (0,07 sec)
Rows matched: 49 Changed: 49 Warnings: 0

NOTA: También funciona, y quizás es mejor:

update ins_posts set post_content=replace(post_content,’l.l’,’& middledot ;’) where post_status=’publish’ and post_content like ‘%l.l%’;

Este es un pequeño ejemplo de cómo podemos hacer cambios directamente en la base de datos, si conocemos las tablas y la relación que hay entre ellas.

Enlaces:

Juego del Simon. Extraescolar de Robótica en el Balmes

Ya hemos acabado la extraescolar de Robótica al Balmes. Este año hemos programado el juego del Simon con una Raspberry Pi. Toda la documentación (y la programación didáctica) está en la wiki [1].

Durante estas 13 sesiones hemos ido trabajando sobre diferentes temas, que nos llevaban al objetivo final de hacer un prototipo de Simon:

  • Hemos programado el script con Python, viajando por las diferentes versiones a medida que necesitábamos incorporar nuevas funcionalidades.
  • Hemos conectado botones y LEDs a los pines GPIO de la RPi.
  • Hemos visto cómo, utilizando transistores, podemos disparar desde los pines GPIO señales de 12V para encender tiras de LEDs blancos.
  • Hemos discutido sobre la alimentación de todo el sistema, y alternativas.
  • Hemos discutido sobre cómo producir el sonido y su amplificación.
  • Hemos diseñado el mueble final, utilizando herramientas de fabricación digital como la impresora 3D y la fresadora CNC.

Al final ha sido un curso muy multidisciplinar, hemos tocado muchas cosas, aunque por falta de tiempo, conocimientos e infraestructura, muchas cosas las ha implementado el professor y las ha mostrado en clase. Pero al final la experiencia ha sido enriquecedora para todos.

El resultado final se puede ver en la foto y en este video:

Referencias:

Calibración del sensor de temperatura DS18B20

Ya tengo prácticamente acabado el proyecto IoT con una REST Api [3][4] para leer la temperatura de un sensor DS18B20.

El problema (y grave) es que las temperaturas que estoy cogiendo del sensor son erróneas. Para saber cuál es la temperatura real en mi barrio (Gràcia-Barcelona) cojo como referencia la web de meteo.cat. La estación meteorológica automática más cercana es la de Zona Universitaria, aunque en realidad la temperatura no será la misma exactamente. La calle Joan Blanques, donde tengo el sensor, es estrecha y enmedio de la ciudad y del barrio; la Zona Universitaria es un espacio más ancho y abierto, posiblemente las temperaturas mínimas tiendan a ser más bajas…

Calibrar el sensor DS18B20 puede ser una tarea difícil. Aquí tenemos un artículo [1] muy interesante sobre cómo proceder para la calibración. El artículo es realmente interesante, pero no tengo el tiempo (ni las ganas) de implementarlo. Lo que sí que tendría que haber hecho, y esto era fácil, era comprar 10 sensores DS18B20 (son baratos), descartar aquéllos que se desvíen bastante de la temperatura real, y promediar la temperatura con el resto de sensores escogidos, por ejemplo 5. Esto no sería ningún problema, en la RPi tengo muchos pines GPIO disponibles.

Otra posibilidad es utilizar otro sensor de temperatura. Peo ejemplo, utilizar el BMP280, que además de la temperatura también tengo la presión y la humedad relativa (y es barato). Es muy interesante este artículo [2] donde se utiliza el BMP280 para construir una estación meteorológica alimentada per un panel solar.

La conclusión es que confiar en que el sensor que tengo dé la temperatura correcta es un grave error. El objetivo del proyecto es hacer un ejemplo didáctico de IoT, RestFul API, y gráficas como frontend. Esto ya está implementado, ahora sólo falta que la temperatura que leo sea real. Por tanto, lo que haré es encontrar una recta de regresión para aproximarme a la temperatura real a partir de los datos que me da mi sensor, suponiendo que la mejor aproximación sea una recta.

En la imagen se pueden ver dos gráficas. En la de arriba se ve la diferencia entre la temperatura real y la de misensor. En la de abajo se puede deducir la recta de regresión para convertir los datos del sensor en datos reales. De todas maneras, estos datos se corresponden a dos días y medio. Esperaré una semana más (y que suban las temperaturea del mes de mayo, y así tener más rango) para poder hacer una recta de regresió.

Enlaces: