Arxiu de la categoria: INS Jaume Balmes

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:

Internet of Things, Restful API amb Python i Flask, Raspberry Pi Zero i sensor de temperatura

Estic muntant un projecte acadèmic de Internet of Things. Es pretén mesurar la temperatura exterior del meu barri amb un sensor DS18B20 connectat a una Raspberry Pi Zero. Tal com es veu a la foto, he hagut de connectar un llapis Wifi USB. Idealment seria millor fer el projecte amb la nova Raspberry Pi Zero W que acaba de sortir fa un mes, i que porta wifi incorporat.

La temperatura es va gravant cada 10 minuts a una base de dades MongoDB. La part més interessant del projecte és programar una Restful API, i per fer-ho ho faré amb Python i el microframework Flask, a partir d’algun exemple que he trobat (veure els enllaços). En la versió 1 només hi havia un servei, que era bolcar totes les temperatures. La versió 2 ja fa més coses: bolcar totes les temperatures; recuperar la temperatura actual; filtrar per un dia; filtrar per varis dies al mateix temps.

Una altra part important és la capa de presentació, i per fer-ho utilitzo la llibreria Highcharts.com, que dóna uns resultats molt espectaculars. Per cada funció de la API es donarà un exemple html, per exemplificar com podem digerir les dades.

En les futures versions de la API es calcularan les mitjanes de temperatura diàries, mensuals i anuals, de manera que es puguin fer comparatives entre dies, mesos,… De moment encara no està disponible.

La API encara no és pública, estic en fase de desenvolupament. En el moment que sigui estable i pública ja ho anunciaré. De moment la tinc dins de casa, sota els efectes del termostat de la calefacció, amb la qual cosa els resultats no són interessants. Però la idea és després de Setmana Santa traslladar-ho tot al local, el sensor a l’exterior, i la Raspberry Pi dins del local. Es podrà accedir a la API en el domini http://joanqc.no-ip.biz/, però encara no està disponible.

La idea de desenvolupar aquesta API és, a part de què programar és divertit, poder utilitzar open data en format JSON a l’assignatura de Javascript (M06) en el cicle de Desenvolupament d’Aplicacions Web (DAW), a l’institut. Evidentment, hi ha molts exemples disponibles d’open data i format JSON. Però un exemple on els alumnes vegin d’on surten realment les dades, sempre serà interessant.

En el primer enllaç tenim la documentació i discussió de tota la posta a punt. És el punt de partida principal si es vol reproduir el projecte. En el segon enllaç es documenta la API, en les seves diferents versions.

Minesweeper-pescamines-buscaminas amb Javascript

El Pescamines (Buscaminas, Minesweeper) és un dels 1001 videojocs a què has de jugar abans de morir. Si tens una certa edat, segur que te n’has afartat, perquè el Pescamines ha vingut en les diferents versions de Windows fins al Windows 7.

Existeixen diferents versions per jugar online. Concretament, amb els alumnes hem agafat la versió en Javascript de Andrew D. Birrell, que ja té uns anys, i l’hem actualitzat en diferents aspectes. Quant a Javascript, s’ha generalitzat a NxM cel·les. Això implica crear la taula de forma dinàmica (createElement), i també els events (addEventListener). Recordar que en el pescamines hem de distingir entre el botó esquerre i el dret del ratolí.

A més, hem afegit una capa de programació amb PHP i MySQL. Ara que estem estudiant crides asíncrones amb AJAX, hem creat una taula MySQL, i podem registrar l’usuari i fer estadístiques de les millors puntuacions.

Pots provar el Pescamines a:

Extraescolar de Robòtica al INS Jaume Balmes

Aquest curs hem estat fent una extraescolar de Robòtica al IES Jaume Balmes. En el primer trimestre es va veure programació amb Python i RUR-PLE. I aquest segon trimestre hem estat treballant amb Arduino, programació amb el robot Zowi, i impressora 3D. En acabar el curs els alumnes han imprès unes peces que han dissenyat, i també hem imprès un nou cap orellut per al Zowi.

La wiki de l’extraescolar:
Extraescolar de Robòtica al IES Jaume Balmes