smartlight – Creiamo l’interfaccia grafica sul Mac (parte 2)

Seconda parte della guida per realizzare smartlight. Oggi vediamo come impostare l'interfaccia grafica del progetto sul Mac (in Objective C).


Tempo di lettura stimato: 4 minuti


Nella scorsa puntata abbiamo visto come creare il programma che girerà su Arduino. Sostanzialmente il nostro amico tecnologico si aspetta un segnale (nel nostro caso il valore numerico assegnato nella tabella ASCII alle lettere che abbiamo deciso) che noi vogliamo far pronunciare al nostro Mac. Vediamo come fare!

In questa guida non spiegherò come programmare un’applicazione del Mac da zero. Per questo, vi elenco le due risorse che io stesso ho sfruttato per poter creare l’applicazione in questione:

  • il libro Diventare un XCoder, scaricabile gratuitamente da qui, che vi darà un’infarinatura generale su quello che è il mondo di Xcode e della programmazione in Objective C
  • questa guida fornita dalla stessa Apple, che vi consiglio di seguire alla lettera per capire circa il 90% di quello che c’è dietro questa applicazione e per muovere i primi passi con la programmazione ad oggetti

Darò per scontato il come fare le cose (tranne alcuni punti che non sono presenti nelle risorse linkate), ma vedremo perché abbiamo scritto determinati codici e perché dovrebbero funzionare.

Cominciamo!

1. Preparazione

Creo prima di tutto una nuova classe che chiamo controllo. Poi vado a preparare le tre immagini e le icone (questo ve lo risparmio e vi lascio le immagini già pronte nello zip del progetto così potete utilizzarle direttamente).

Ora apro l’editor grafico e aggiungo alla finestra una casella di testo (della con la descrizione) , due label di testo (uno per la frase di benvenuto e l’altra per indicare lo stato del sistema). Aggiungo infine tre pulsanti e un “Image View”. Dovremmo avere una cosa del genere:

Schermata 2014-03-29 alle 20.06.03

E’ tutto pronto, cominciamo!

2. Le azioni

Noi vogliamo ovviamente interagire con il nostro programma, quindi dobbiamo dire al computer cosa ci aspettiamo che faccia rispetto a delle nostre determinate azioni. Aggiungiamo allora delle azioni per i tre pulsanti e le proprietà per le due caselle di testo (quella di benvenuto la lasciamo immutata) e l’immagine (che dovrà cambiare conseguentemente al testo). Nel file controllo.h dovremmo quindi avere una situazione del tipo:

#import <Foundation/Foundation.h>
@interface controllo : NSObject

@property (weak) IBOutlet NSTextField *testoStato;
@property (weak) IBOutlet NSTextField *testoDescrizione;
@property (weak) IBOutlet NSImageView *immagine;

- (IBAction)crepuscolare:(id)sender;
- (IBAction)accendi:(id)sender;
- (IBAction)spegni:(id)sender;

@end

3. Cambiare l’immagine

Una delle parti più noiose è stata quella di far cambiare l’immagine al programma alla pressione del pulsante corrispondente, in quanto non trovavo nessuna guida su internet. Quindi, mentre tralascio il come far cambiare il contenuto delle caselle di testo in risposta alla pressione del pulsante (che trovate spiegata nella guida della Apple di cui sopra) vediamo come fare per cambiare l’immagine.

Apriamo il file controllo.m, quello che contiene il vero e proprio corpo della programmazione. Ci concentreremo sul caso della pressione del pulsante di accensione, ma il procedimento è identico per tutti i pulsanti (ovviamente!).

Per prima cosa trasciniamo nel progetto l’immagine che vogliamo, in modo da vederla a sinistra tra i file di progetto. Abbiamo ora bisogno di una stringa dove memorizzare l’indirizzo dell’immagine, quindi:

NSString* fileAccesa = [[NSBundle mainBundle] pathForResource:@"accesa" ofType:@"png"];

Dove abbiamo specificato il tipo dell’immagine (estensione) e il suo nominativo.  Ora creiamo un oggetto immagine assegnandogli l’indirizzo di memoria che abbiamo appena allocato:

NSImage* accesa = [[NSImage alloc] initWithContentsOfFile:fileAccesa];

ed infine assegnamo l’immagine al box immagine:

[_immagine setImage:accesa];

4. Parlare con Arduino

Ma veniamo al sodo: come facciamo a comunicare con Arduino? Esistono diversi modi per gestire l’interfaccia seriale con l’Objective C, ma qui vi propongo il più facile ed immediato: popen().

Il vantaggio di questo operatore è la sua immediatezza: basta conoscere la porta seriale alla quale è connesso Arduino (che è possibile vedere tramite il programma di Arduino stesso) e quindi inviare il segnale desiderato. Nel caso del pulsante di accensione avremo quindi:

popen("echo a > /dev/tty.usbmodemfa131", "r");

In questo modo abbiamo inviato l’intero ‘c’ tramite la porta seriale utilizzata da Arduino. Ma quali sono gli svantaggi di questo metodo? Il programma di Arduino deve essere aperto e deve essere aperto il monitor seriale, altrimenti il programma urla a vuoto senza poter essere udito da Arduino.

5. Conclusioni

In pratica abbiamo finito. Ovviamente ho tralasciato molti molti pezzi esplicativi (perché ripetitivi), quindi vi lascio il link al file zip con tutto il progetto dove potete confrontare il codice ed utilizzarlo nel modo che più vi aggrada:

Potete scaricare il progetto da qui!

Ci vediamo nell’ultima parte di questa guida, dove vedremo finalmente il progetto funzionante e all’opera!

Pubblicato da Raffaele Farinaro

Se il blog esiste è solo colpa sua. Mezzo campano e mezzo abruzzese ha la fissa per gli ologrammi, la divulgazione scientifica e Iron Man. E la pizza.