Arxiu de la categoria: INS Jaume Balmes

Municipis de Catalunya (Openlayers)

Hem agafat de l’IDESCAT les dades dels municipis de més de 20.000 habitants de Catalunya (una setantena de municipis), i els hem geolocalitzat.
El que volia practicar en aquesta ocasió era la selecció de capes, i ho volia fer tot amb mòduls (imports) de Javascript, i el codi el més net possible.
Es pot veure el resultat en aquest video.

Catalunya Màgica

S’ha publicat la web de la Catalunya Màgica: dimonis, infern, bruixes i diables, amb informació agafada de OpenStreetMap.

Hem utiltizat OpenLayers 6.5.0 (amb el paradigma de imports), i les tiles estàndard de OSM i també TRESC, una capa de visualització que m’agrada molt. Les dades que s’obtenen poden ser nodes o vies, i hi ha hagut una feina prèvia de netejar una mica les dades, però tot plegat ha sigut un procés molt ràpid.

Referències:

Gràfics interactius amb Jupyter Notebooks: tir parabòlic

Ara que ja he començat a fer proves amb Jupyter Notebook, el següent pas que vull provar és fer gràfics interactius. Doncs ha resultat ser més fàcil i ràpid del que pensava.

Parteixo d’un script python que simula les dades experimentals d’una trajectòria parabòlica, i calcula la paràbola que millor s’hi ajusta (regressió quadràtica). A partir de l’equació de la paràbola es pot deduir la constant g (=9,81 m/s2). Simulo les dades experimentals introduïnt un error de soroll en les dades teòriques. Doncs bé, amb el meu gràfic interactiu puc jugar amb el nivell de soroll, i amb el número de punts de mostreig, tal com es veu en el video. El codi queda de la següent manera:

%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

Una altra cosa que m’interessa és la manera d’exportar aquests Jupyter Notebooks a una web, conservant les gràfiques i les fórmules en format Latex (encara que es perdi la interacció amb les gràfiques). Això s’aconsegueix directament exportant el Notebook a html:

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

i integrant aquest codi en una web on hi hagi més text i explicacions, i amb la llibreria Bootstrap.

Activitat a la wiki i al bloc durant la COVID-19

Durant aquest temps de confinament s’ha fet molta feina a casa i molt de teletreball, coses de l’institut i coses meves. Fent una consulta al mysql de la wiki i del wordpress es pot saber fàcilment en què he estat treballant durant aquests dies.

A la wiki, a 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)

Al bloc, 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 moment és això, perquè malauradament el confinament continua.

La Casa de Papel: aplicació web

Aquest és un exemple que he fet mano a mano amb el Pere, ara que estem confinats per la COVID-19 i estem a la meitat de la 3a temporada de La Casa de Papel.

Per a mi també ha servit per fer una aplicació OpenLayers amb codi Node, que sembla ser que tot anirà cap aquí. Tot està explicat a la wiki i als enllaços a què fa referència.

La renderització que s’ha fet del mapa amb blanc i negre és l’estil toner de Stamen. A mi particularment m’agrada molt, i crec que hem aconseguit una bona integració amb el disseny propi de la sèrie, que juga amb els colors negre i vermell.
Enllaços:

GeoJSON: densitat de les comarques de Catalunya

Tenia un tema pendent amb la visualització de mapes: programar aquells mapes en què es veuen les fronteres (ja siguin països, regions, comarques, municipis), i on podem assignar un color o podem clicar a cadascuna de les regions.

A l’API d’Overpass es poden fer consultes de les relacions a nivell administratiu, i normalment s’obté les ways que representen línies de frontera administrativa. Això ja va bé per pintar el contorn d’un municipi, per exemple. Ara bé, per ombrejar tota una àrea necessitem un poligon tancat. El millor és cercar una font de dades amb format GeoJSON de les dades que necessitem, per exemple les comarques. Cercant una mica pots trobar dades de tot: països, comunitats autònomes, províncies, etc. Combinant aquestes dades amb la informació que ens interessa (per exemple, la densitat de població per comarca), podem fer una aplicació com la que mostrem a la imatge.

Per fer-ho, està explicat a la wiki. Ara que m’he posat amb el GeoJSON, ara veig que hi ha un altre format interessant que és el TopoJSON. Això és un no parar!

Open Data BCN: World Data Viz Challenge 2018

Participo en l’edició d’enguany del World Data Viz Challenge 2018 Barcelona-Kobe. Entre el catàleg de dades obertes que publica l’Ajuntament de Barcelona, he triat les dades de l’atur en el període 2011-2018. La meva aplicació de visualització la pots veure a http://aturbcn.joanillo.org/. Es presenten les dades desglossades per barris i per districtes, i es pot veure l’evolució de l’atur a través dels anys, o a través dels mesos.

He utiltizat la API de Open Street Map, que és una novetat per mi doncs sempre havia utilitzat l’API de Google Maps. Les dades originals estaven en format xls, i s’han introduït a una base de dades MySQL per tal de poder explotar les dades directament amb SQL.

La idea de participar va venir pel fet que, a l’institut, volem participar en una altra convocatòria: Repte Barcelona Dades Obertes, segona edició 2019 (http://opendata-ajuntament.barcelona.cat/ca/repte-barcelona-dades-obertes). S’ha de veure com, dins de l’assignatura de Javascript (Cicle Formatiu de Desenvolupament d’Aplicacions Web), podem fer alguna visualització per presentar-la a aquesta convocatòria.

Referències:

El punt volat per fer la ela geminada en català: pràctica de SQL al WordPress

En l’escriptura en català s’utilitza freqüentment la ela geminada amb la grafia l.l (per exemple, Brussel.les), en comptes d’utilitzar el punt volat: Brussel·les.

Anem a actualitzar un bloc de WordPress (www.joanillo.org) substituïnt a la base de dades, amb SQL, totes les eles geminades amb la grafia del punt volat. Procés:

1. els posts que estan publicats

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

2. els posts que estan publicats, mostrem també el contingut

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

3. I ara mostrem els posts que tenen ela geminada:

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

4. I ara que ja veiem quins són els posts afectats, podem modificar el seu contingut substituint les eles geminades mal formatades per un punt volat:

Primer de tot fem una prova de com quedaria la substitució:

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. I ara ja podem fer la substitució (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: També funciona, i potser és millor:

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

Aquest és un petit exemple de com podem fer canvis directament en la base de dades, si coneixem les taules i la relació que hi ha entre elles.

Enllaços:

Joc del Simon. Extraescolar de Robòtica al Balmes

Ja hem acabat l’extraescolar de Robòtica al Balmes. Aquest any hem programat el joc del Simon amb una Raspberry Pi. Tota la documentació (i la programació didàctica) està a la wiki [1].

Durant aquestes 13 sessions hem anat treballant sobre diferents temes, que ens portaven a l’objectiu final de fer un prototipus de Simon:

  • Hem programat el script amb Python, viatjant per les diferents versions a mida que necessitàvem incorporar noves funcionalitats.
  • Hem connectat botons i LEDs als pins GPIO de la RPi.
  • Hem vist com, utilitzant transistors, podem disparar des dels pins GPIO senyals de 12V per encendre tires de LEDs blancs.
  • Hem discutit sobre l’alimentació de tot el sistema, i alternatives.
  • Hem discutit sobre com produir el so i la seva amplificació.
  • Hem dissenyat el moble final, utilitzant eines de fabricació digital com l’impressora 3D i la fresadora CNC.

Al final ha sigut un curs molt multidisciplinar, hem tocat moltes coses, tot i que per manca de temps, coneixements i d’infraestructura, moltes coses les ha implementat el professor i les ha mostrat a classe. Però al final l’experiència ha sigut enriquidora per tots.

El resultat final es pot veure a la foto i en aquest video:

Referències:

Calibració del sensor de temperatura DS18B20

Ja tinc pràcticament enllestit el projecte IoT amb una REST Api [3][4] per llegir la temperatura d’un sensor DS18B20.

El problema (i greu) és que les temperatures que estic agafant del sensor són errònies. Per saber quina és la temperatura real en el meu barri (Gràcia-Barcelona) agafo com a referència la web de meteo.cat. L’estació meteorològica automàtica més propera és la de Zona Universitària, tot i que en realitat la temperatura no serà la mateixa ben bé. El carrer Joan Blanques, on tinc el sensor, és estret i enmig de la ciutat i el barri; la Zona Universitària és un espai més ample i obert, possiblement les temperatures mínimes tendeixen a ser més baixes…

Calibrar el sensor DS18B20 pot ser una tasca difícil. Aquí tenim un article [1] molt interessant sobre com procedir per la calibració. L’article és realment interessant, però no tinc el temps (ni les ganes) d’implementar-ho. El que sí que hauria d’haver fet, i això era fàcil, era adquirir 10 sensors DS18B20 (són baratos), descartar aquells que es desvien bastant de la temperatura real, i fer que les meves mostres siguin una mitjana dels altres sensors no-descartats, per exemple 5. Això no és cap problema, a la RPi tinc molts pins GPIO disponibles.

Una altra possibiltiat és utilitzar un altre sensor de temperatura. Per exemple, utilitizar el BMP280, que a més de la temperatura també tinc la pressió i la humitat relativa (i és barato). És molt interessant aquest article [2] on s’utilitza el BMP280 per construir una estació meteorològica alimentada per penell solar.

La conclusió és que confiar en què el sensor que tinc doni la temperatura correcta és un greu error. L’objectiu del projecte és fer un exemple didàctic de IoT, RestFul API, i gràfiques com a frontend. Això s’ha acomplert, ara només falta que la temperatura que llegeixo sigui real. Per tant, el que faré és mirar de fer una recta de regressió per aproximar-me a la temperatura real a partir de les dades que em dóna el meu sensor, suposant que la millor aproximació és una recta.

En la imatge es poden veure dues gràfiques. En la de dalt es veu la diferència entre la temperatura real i la del meu sensor. En la de baix es pot deduir la recta de regressió per convertir les dades del sensor a dades reals. De totes maneres, aquestes dades es corresponen a dos dies i mig. Esperaré una setmana més (i que pugin les temperatures del mes de maig, i així tenir més rang) per poder fer una recta de regressió.

Enllaços: