Timer “analogico” con MIT App Inventor 2

Un nuovo esempio di come MIT App Inventor 2 ci possa aiutare a creare App molto personalizzate e, quindi, a predisporre strumenti davvero utili, “tagliati su misura” (e sappiamo quanto questo sia importante quando si parla di disabilità!).

Oggi proviamo a progettare e realizzare un Timer “analogico”.

MIT App Inventor 2 App Disabilità Apprendimento Educational Technology

Perchè un Timer?

Perchè misurare il tempo che passa e, soprattutto, sapere quando è il momento in cui si verifica un determinato evento, è un’esigenza di tutti: è una competenza centrale per orientarsi nella realtà quotidiana e non essere presi da ansia e disorientamento continuo.

Perchè analogico?

Perchè la competenza di lettura di un orologio (tradizionale o digitale) non è affatto scontata!

Allora abbiamo pensato di utilizzare:

  1. la rappresentazione visiva della giornata che scorre: una linea temporale che avanza sullo schermo del nostro tablet
  2. fotografie personalizzate che rimandino agli eventi da segnalare
  3. segnali sonori per avvisare circa il raggiungimento dell’orario associato agli eventi

Insomma ci avviciniamo ad una gestione del tempo più “fenomenica”, base per successive elaborazione cognitive.

All’apertura la nostra App si presenta come una “linea del tempo” che diviene sempre più lunga con il trascorrere della giornata:

MIT App Inventor 2 App disabilità Apprendimento Educational Technology

Clicca sull’immagine per ingrandire

Sono circa le 10…

Cliccando sull’icona della macchina fotografica la nostra app ci consente di predisporre uno o due eventi (magari l’inizio e la fine di un’attività…inizio e fine della terapia, per esempio…), associando orario e foto significativa dell’evento stesso:

MIT App Inventor 2 App Disabili Apprendimento Educational TechnologySopra la “linea del tempo”, in corrispondenza dell’orario impostato, comparirà la foto associata al nostro evento (…preparare la borsa per andare in piscina 🙂 )

MIT App Inventor 2 App disabilità Timer

Clicca sull’immagine per ingrandire

Quando la linea del tempo raggiunge la fotografia, lo smartphone (o il tablet) vibra, segnalando l’orario associato all’evento.

Compilando il modulo di contatto alla fine del post potrete richiedere il file .aia da far girare in MIT App Inventor 2 e generare (o, meglio, personalizzare ulteriormente) l’App ma, per chi avesse voglia di farsi tutto da solo, vediamo ora design e blocchi dell’applicazione (qui per un ripasso dei primi passi con MIT App Inventor 2).

Il Viewer si presenta così:

App Disabilità MIT App Inventor 2 Android

Clicca sull’immagine per ingrandire

Il primo passaggio è quindi quello di trascinare un Clock (dal menù Sensor, impostando TimerInterval a 30.000 millisecondi, ossia trenta secondi), due Fotocamere e un componente Sound (dal menù Media).

Avete poi bisogno di tre HorizontalArrangement, nei primi due inserirete altrettante TextBox, nel terzo due Button (dal menù User Interface):

App disabilità MIT App Inventor 2 Educational TechnologyNelle proprietà delle caselle di testo suggerisco di settare il controllo “Numbers Only”, che abilita la casella di testo a ricevere solo numeri. Nella proprietà Hint scriviamo il contenuto atteso delle caselle di testo:

TexBox3: Ora Primo Evento

TextBox4: Ora Secondo Evento

TextBox5: Minuto Primo Evento

TextBox6: Minuto Secondo Evento

MIT App Inventor 2 Timer App Disabilità

Clicca sull’immagine per ingrandire

Rinominiamo i due Button come “ScattaPrimoEvento” e “ScattaSecondoEvento”, nella proprietà Text inseriamo, rispettivamente, “Foto primo evento” e “Foto secondo evento”.

MIT App Inventor 2 Disabilità App Android apprendimento

Clicca sull’immagine per ingrandire

A questo punto trascinate, dal menù Drawing, quattro Canvas sul vostro Viewer (rinominati come Primocanvas, Secondocanvas, Terzocanvas, Quartocanvas).

Settate le proprietà dei Canvas come da tabella:

MIT App Inventor 2 Canvas App Disabilità Android

Clicca sull’immagine per ingrandire

All’interno di Secondocanvas trascinate due Sprite, rinominati come Primoevento e Secondoevento.

All’interno di Quartocanvas trascinate quattro Sprite rinominandoli Aquisisci_evento, Otto, Dodici, Diciannove.

Ecco le proprietà degli Sprite:

MIT App Inventor 2 App Disabilità Apprendimento Timer Analogico Educational Technology

Clicca sull’immagine per ingrandire

E i link per scaricarvi le immagini utilizzate: fotocamera.png otto.jpg   dodici.jpg  diciannove.jpg

Veniamo ora ai blocchi di programmazione.

In primo luogo inizializziamo tre variabili che ci serviranno come flag di controllo durante l’esecuzione della App:

MIT App Inventor Timer App Disabili Android Educational TechnologyIl secondo passo è inserire un blocco che verrà eseguito ogni volta che farete partire la vostra App (WhenScreen1.Inizialize): la variabile “orario” verrà settata sottraendo dall’orario attuale (per come letto dall’orologio di sistema) il numero 8 (ossia l’inizio della “giornata” presa in considerazione dall’applicazione).

Successivamente la larghezza di Canvas1 (la “linea del tempo”) viene impostata  moltiplicando “orario” per il 40: ogni ora occupa 40 pixel (la larghezza complessiva dello schermo per come gestito da MIT App Inventor 2 è pari a 480 pixel, nel nostro caso corrispondenti a 12 slot orari).

MIT App Inventor 2 Disabilità Timer Analogico Neuroscienze

Clicca sull’immagine per ingrandire

Terzo passaggio: ogni trenta secondi (ossia ogni volta che Clock1 viene attivato), ricalcola la variabile “orario” e lunghezza della linea del tempo.

Se tale linea supera l’orario che avremo impostato per il nostro evento (o i nostri eventi), allora il dispositivo produrrà una breve vibrazione.

Una interesssante variazione potrebbe essere quella di modificare il segnale di avviso sostituendo la vibrazione con la registrazione, per esempio, di una voce famigliare (la mamma che dice <<è ora di preparare la borsa per la piscina>>).

Ecco il codice:

MIT App Inventor 2 Neuroscienze Disabilità App Apprendimento Educational Technology

Clicca sull’immagine per ingrandire

Programmiamo ora lo Sprite Aquisisci_evento: il seguente blocco non fa altro che rendere invisibile la schermata di avvio e attivare le caselle di input per la scelta di orario e foto degli eventi.

MIT App Inventor 2 App Disabilità Apprendimento Android

Clicca sull’immagine per ingrandire

Ci avviamo alla conclusione con due blocchi identici, nella logica, che programmano il comportamento dei due pulsanti “ScattaPrimoEvento” e “ScattaSecondoEvento”.

Dopo aver calcolato la posizione, sulla linea del tempo, dell’evento prescelto (a seconda degli input indicati nelle caselle di scelta dell’orario), il blocco attiva la fotocamera e rende nuovamente visibile la schermata iniziale (aggiornata con orario e foto dell’evento).

MIT App Inventor 2 Timer Clock Disabilità Apprendimento

MIT App Inventor 2 Apprendimento Disabilità Neuroscienze

Clicca sulle immagini per ingrandire

Da ultimo, i blocchi per la programmazione della fotocamera attivata per completare la creazione degli eventi: l’immagine acquisita andrà a costituire la proprietà “picture” degli sprite Primoevento e Secondoevento.

MIT App Inventor 2 Neuroscienze Apprendimento Disabilità Cognitiva

Clicca sull’immagine per ingrandire

Riassumendo:

  • Disegnamo una linea del tempo rappresentante l’orario attuale
  • Predisponiamo una maschera di input (orario e immagine) per impostare uno o due eventi della giornata
  • Calcoliamo ogni trenta secondi se l’orario reale ha superato quello dell’evento
  • Proponiamo un segnale di allerta al raggiungimento dell’orario

Semplice e funzionale.

Se desiderate ricevere al vostro indirizzo mail il file .aia (o avete altre richieste), ecco il modulo di contatto:

A presto 🙂

 

Annunci

Una risposta a "Timer “analogico” con MIT App Inventor 2"

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...