Questa applicazione richiede i seguenti componenti:

1. Smart Display Custom CAN ID 10.1”

2. ARDUINO UNO

3. Shield CAN bus per ARDUINO UNO

4. Modulo Display OLED con manopola rotativa

5. ST-Link CAN bus Dongle

6. Software GUI-Builder v0.4.2 o successivo

7. Arduino IDE v2.0.4     

 

La demo è divisa in tre parti:

1. Progettare il progetto di demo nell'interfaccia grafica (GUI) Builder.

2. Costruire e caricare il progetto.

3. Programmare l'host Arduino.

 

Sviluppa il progetto dimostrativo in GUI Builder.

Per iniziare, avvia ilGUI Builder aggiornato per avviare un nuovo progetto. Inserisci il nome del progetto desiderato e verifica che la cartella di quest'ultimo venga selezionata automaticamente. Successivamente, scegli il tipo di dispositivo, specificamente un display da 10,1" in questo caso. Prosegui selezionando il protocollo desiderato e lasciando l'orientamento del display come impostazione predefinita in modalità landscape. Opta per un modello di UI vuoto e concludi il processo cliccando sul pulsante crea. Consulta la figura per una rappresentazione visiva dei passaggi sopra descritti.

 

 

Questa pagina si apre dopo aver creato il progetto.

 

 

Per allinearsi allo scenario demo fornito, sono necessarie in totale quattro pagine. Di conseguenza, è necessario aggiungere altre tre pagine. Per farlo, individua il pulsante Pagina e clicca su di esso. Successivamente, clicca sul pulsante Più per aggiungere le tre pagine aggiuntive.

 

 

 

Ora, esploriamo il processo di aggiunta di uno sfondo personalizzato. Naviga nella sezione risorse e individua l'opzione per lo sfondo. All'interno dell'opzione 2, troverai tre sfondi predefiniti specificamente progettati per le pagine Industria, Medicale e Veicolo. Per incorporare uno sfondo aggiuntivo, clicca sul pulsante Aggiungi Widget nell'opzione 3. Successivamente, premi il pulsante a tre punti situato sul lato sinistro del pulsante di reset nell'opzione 4. Selezionando il pulsante dei puntini (...), puoi introdurre uno sfondo personalizzato, sostituendo lo sfondo predefinito che verrà utilizzato per la prima pagina.

 

 

Ora esploreremo il processo di aggiunta di un widget personalizzato. Seguendo lo scenario dimostrativo, dobbiamo selezionare il widget multistato personalizzato, che ci consente di scegliere le pagine Industria, Medica e Veicolo. Per iniziare, torna alla sezione Controlli sulla prima pagina. Da lì, naviga nella sezione risorse e individua l'opzione Widget multistato. Clicca sul pulsante Aggiungi Widget nell'opzione 2 e procedi al pulsante Modifica nell'opzione 3. Nel quarto passaggio, elimina tutte le immagini predefinite associate al widget. Successivamente, nel quinto passaggio, clicca sul pulsante Aggiungi dell'opzione 5 e seleziona singolarmente le immagini dei widget personalizzati dalla cartella locale sul tuo computer nel sesto passaggio. Infine, nel settimo passaggio, clicca sul pulsante OK per aggiungere i widget personalizzati alla lista dei widget multistato come mostrato nell'immagine sottostante.

 

 

Ritorniamo alla sezione Controlli sulla prima pagina. Seguendo lo scenario demo, scegli il widget multistato personalizzato per selezionare le pagine Industria, Medica e Veicolo. Trascina e rilascia il widget nell'area di layout della pagina designata. In questo modo, hai creato con successo la tua pagina iniziale.

 

 

Ora, applica lo stesso processo alle restanti tre pagine che hai creato. Sulla seconda pagina, scegli un widget correlato all'industria dalle opzioni disponibili. Sulla terza pagina, seleziona un widget correlato alla medicina. Infine, sulla quarta pagina, opta per un widget relativo ai veicoli. Trascina e rilascia ciascun widget rispettivo nelle rispettive aree di layout delle pagine.

 

 

Per creare e caricare il progetto

Dopo aver creato con successo quattro pagine distinte e aver collocato i rispettivi widget su ciascuna di esse, assicurati di includere i widget multistato personalizzati sulla pagina iniziale per selezionare le pagine Industria, Medicale e Veicolo. Ora, procediamo con la compilazione del progetto. Naviga nella sezione Informazioni Pagina e individua il pulsante Dispositivo. Cliccaci sopra e scegli Proprietà Dispositivo. Conferma che le impostazioni del protocollo siano corrette, quindi seleziona la porta COM appropriata e specifica il baud rate desiderato. Stabilisci una connessione con il dispositivo cliccando sul pulsante "Connetti al Dispositivo". Infine, avvia il processo di caricamento del progetto cliccando sul pulsante Carica, come rappresentato nell'immagine fornita. Lascia che il tempo sufficiente per il caricamento del progetto e attendi pazientemente il completamento del processo.

 

 

Quando il caricamento del progetto è completato, clicca sul pulsante OK come mostrato nella Figura:

 

 

La schermata iniziale apparirà dopo che il caricamento è completato, come mostrato nella Figura:

 

 

Dopo la schermata iniziale, passerà alla prima pagina. Ora la costruzione e il caricamento sono completati tramite GUI Builder, come mostrato nella Figura:

 

 

Programmare l'host ARDUINO

Come mostrato nel frammento di codice fornito, inizia con una sezione "include", dove vengono importate varie librerie e file di intestazione necessari per il programma. Questi includono librerie come Adafruit_SSD1327, Adafruit_FT6206, Adafruit_GFX e SPI, tra gli altri. Inoltre, vengono importati file di intestazione personalizzati come mcp2515_can.h, lcdgfx_gui.h e lcdgfx.h.

Dopo la sezione "include", c'è una sezione "defines", dove vengono definiti costanti specifiche e configurazioni dei pin. Questa sezione include definizioni per un encoder rotativo, le dimensioni di un display OLED, impostazioni del bus CAN, impostazioni dei widget e altro ancora.

Infine, c'è una dichiarazione condizionale che verifica il tipo di microcontrollore in uso e seleziona l'interfaccia seriale appropriata. Se il codice viene eseguito su un microcontrollore SAMD, viene definita l'interfaccia SerialUSB. Altrimenti, viene utilizzata l'interfaccia seriale standard.

In sintesi, questo frammento di codice imposta gli import necessari, definisce costanti importanti e configurazioni dei pin e gestisce la selezione dell'interfaccia seriale in base al tipo di microcontrollore in uso.

 

 

Dopo aver definito le librerie e le costanti, è comune dichiarare e inizializzare diverse variabili e pin necessari per il programma. Ad esempio:

SPI_CS_PIN: Questa variabile costante è impostata sul valore 9 e rappresenta il pin di selezione del chip per la comunicazione SPI.
CAN_INT_PIN: Questa variabile costante è impostata sul valore 2 e rappresenta il pin di interruzione per il bus CAN.
CAN: Viene creata un'istanza della classe mcp2515_can e viene inizializzata con il valore di SPI_CS_PIN. Viene utilizzata per comunicare con il bus CAN..
ts: Viene creata un'istanza della classe Adafruit_FT6206 e utilizzata per la funzionalità touchscreen.
display: Viene creata un'istanza della classe DisplaySSD1327_128x128_SPI e inizializzata con le configurazioni dei pin per la comunicazione SPI con un display SSD1327.

 

 

Di seguito è riportata una sezione del codice che dichiara e inizializza più array costituiti da variabili unsigned char. Lo scopo di ciascun array è il seguente:

“configMsg”: Un array di 8 elementi unsigned char che rappresenta un messaggio di configurazione..
`PageIndex_0` a`PageIndex_3`: Questi array contengono ciascuno 8 elementi unsigned char e rappresentano gli indici di pagina da 0 a 3.
“displayMode”: Un array di 8 elementi unsigned char che rappresenta la modalità di visualizzazione.

Inoltre, ci sono diversi array chiamati `stmp`, `stmp1`, `stmp2`, e così via fino a `stmp12`. Ciascuno di questi array consiste anche di 8 elementi unsigned char e viene utilizzato per memorizzare byte di dati relativi a vari widget o componenti. I nomi di questi array indicano lo scopo che servono, come memorizzare dati per widget specifici.

In breve, questi array contengono insiemi di dati specifici cruciali per il programma, inclusi messaggi di configurazione, indici di pagina, modalità di visualizzazione e dati relativi ai widget.

 

 

Questo definisce una funzione chiamata "bitmapDemo" che prende un parametro intero "imageIndex". La funzione è responsabile per disegnare un'immagine sul display OLED con manopola.

Le immagini specifiche e le loro posizioni e dimensioni corrispondenti sono definite nel file di intestazione "Image.h".

 

 

Questa funzione aspetta una risposta su un bus CAN ritardando ripetutamente per un certo periodo e controllando il valore della variabile flag Recv. Una volta ricevuta la risposta, il flag Recv viene azzerato a 0.

 

 

Questo codice definisce una funzione chiamata `changePageFunction` che è responsabile per cambiare il valore della pagina in un sistema di comunicazione CAN. Questa funzione invia messaggi al bus CAN per cambiare il valore della paginain base al parametro fornito `pageValue`. I messaggi specifici inviati dipendono dal valore di `pageValue` e corrispondono a diversi array `PageIndex`.

 

 

La funzione "handleTouchEvents" gestisce gli eventi di tocco su uno schermo touch. Rileva gli input touch, converte le coordinate e intraprende azioni specifiche in base alla pressione e alla durata del tocco. Utilizza anche la funzione "changePageFunction" per aggiornare la pagina corrente in base all'input touch. Ad esempio, quando viene rilevata una pressione prolungata, viene chiamata la funzione "changePageFunction" con il valore "nowPage" per passare alla Home Page. D'altra parte, quando viene rilevata una pressione breve, viene chiamata la funzione "changePageFunction" con il valore "nowPage" per passare alla pagina selezionata.

 

 

Il frammento di codice qui sotto è la funzione "setup", che viene utilizzata in Arduino e viene eseguita una volta quando il programma viene avviato. Questa funzione è responsabile dell'inizializzazione dei pin, dell'instaurazione della comunicazione seriale, della configurazione del display, dell'impostazione del bus CAN e dell'inizializzazione del controller touchscreen.

In primo luogo, la funzione imposta la modalità di diversi pin (pinA, pinB, pinC, EN_Pin) come pin di input con resistenze di pull-up abilitate o come pin di output. Il pin di output EN_Pin viene impostato su un'uscita digitale alta.

Viene quindi stabilita la comunicazione seriale con un baud rate di 115200, e il codice attende finché la connessione non viene stabilita.

Successivamente, viene inizializzato l'oggetto display e vengono configurate impostazioni specifiche come il font e il colore. Viene disegnata un'immagine bitmap sul display in una posizione specifica, seguita da un ritardo di 2 secondi.

Viene allegato un interrupt a un pin specifico (CAN_INT_PIN), e la funzione MCP2515_ISR viene specificata come routine da eseguire quando si verifica l'interrupt. Questo interrupt viene triggerato da un fronte di discesa del segnale.

Il bus CAN viene inizializzato con un baud rate di 250k. Se l'inizializzazione fallisce, il codice riprova dopo un ritardo. Una volta riuscito, la modalità del bus CAN viene impostata su normale, e un messaggio di successo viene stampato sull'output seriale.

Maschere e filtri dei filtri vengono quindi configurati per accettare tutti i frame, inclusi quelli estesi.

Viene quindi inizializzato il controller touchscreen, e se l'inizializzazione fallisce, viene stampato un messaggio di errore, facendo entrare il codice in un loop infinito.

Infine, viene stampato un messaggio di successo sull'output seriale quando il touchscreen viene avviato con successo.

 

 

Questa funzione è probabilmente una routine di servizio di interrupt (ISR) per il MCP2515, un controller CAN, e imposta un flag e stampa un messaggio quando si verifica un'interruzione.

 

 

Queste funzioni sono correlate alla gestione dello stato della manopola. La funzione "setKnobState" aggiorna lo stato della manopola e imposta un timer per il rilevamento dello stato di inattività, mentre la funzione "isKnobIdle" verifica se la manopola è attualmente inattiva in base al valore del timer.

 

 

La funzione "redrawScreen()" aggiorna il display in base allo stato attuale della manopola (stato della manopola). Controlla i cambiamenti di stato, cancella il display e disegna immagini bitmap appropriate a seconda dello stato della manopola.

 

 

La seguente porzione della funzione "loop()" legge gli stati di tre pin e determina un nuovo stato in base ai loro valori. Se il nuovo stato è diverso dal vecchio stato, vengono eseguite determinate azioni, tra cui l'aggiornamento del contatore, "MultiStateValue", "GaugeValue" e il valore di altre variabili dei widget.

 

 

Dopo il blocco di codice precedente all'interno della funzione loop(), questa porzione di codice esegue il caso in cui la manopola viene ruotata in una direzione specifica. Aggiorna diverse variabili e chiama le funzioni di conseguenza, quindi aggiorna la variabile di vecchio stato per la prossima iterazione della loop().

 

 

Questa parte rimanente della funzione loop() esegue le seguenti azioni dopo il blocco di codice precedente:

La variabile oldState viene aggiornata con il valore di newState.

Se nowPage è uguale a 0 o il numero di pagina è 1, il codice verifica se MultiStateValue è diverso da LastMultiStateValue. Se è diverso, LastMultiStateValue viene aggiornato con il valore di MultiStateValue, e il valore di MultiStateValue viene memorizzato nell'array stmp1. Quindi, viene inviato un messaggio contenente il valore di MultiStateValue tramite il bus CAN con l'ID di stato multiplo di 0x716.

 

 

Se nowPage è uguale a 1 o il numero di pagina è 2, vengono eseguiti diversi controlli simili per diverse variabili per vari widget (CircleProgressValue, HorizontalSliderValue, VerticalSliderValue, TemperatureValue, GaugeValue, FixedWidgetValue e IndicatorValue). Se una qualsiasi di queste variabili è diversa dai rispettivi valori precedenti, i valori precedenti vengono aggiornati e vengono inviati messaggi contenenti i nuovi valori tramite il bus CAN con gli ID appropriati.

 

 

Se nowPage è uguale a 2 o il numero di pagina è 3, vengono eseguiti controlli simili per i widget disponibili sulla pagina 3, ad esempio CircleProgressValue, HorizontalSliderValue, GraphValue e AnimationValue. Se una qualsiasi di queste variabili è diversa dai rispettivi valori precedenti, i valori precedenti vengono aggiornati e vengono inviati messaggi contenenti i nuovi valori tramite il bus CAN con gli ID appropriati.

 

 

Se nowPage è uguale a 3 o il numero di pagina è 4, vengono eseguiti controlli simili per i widget disponibili sulla pagina, ad esempio HorizontalSliderValue, GaugeValue, FixedWidgetValue, AnimationValue, IndicatorValue e ToggleButtonValue. Se una qualsiasi di queste variabili è diversa dai rispettivi valori precedenti, i valori precedenti vengono aggiornati e vengono inviati messaggi contenenti i nuovi valori tramite il bus CAN con gli ID appropriati.

 

 

Dopo il blocco di codice precedente all'interno della funzione loop(), viene chiamata la funzione handleTouchEvents() per gestire l'evento di tocco.

Se la manopola è inattiva (isKnobIdle() restituisce 1), lo stato della manopola viene impostato su KNOB_IDLE utilizzando la funzione setKnobState(). Viene quindi chiamata la funzione redrawScreen() per ridisegnare lo schermo. E così termina il codice del progetto demo.

 

 

Dopo aver verificato e caricato con successo questo programma utilizzando l'Arduino IDE, noterai una transizione nel display della manopola OLED. Passerà dall'immagine della Smart Display a un'immagine di Tocco o Rotazione. A questo punto, sia la Smart Display che il display della manopola OLED mostreranno la pagina home predefinita.

 

 

Ora sarai in grado di eseguire gli scenari di demo. Sulla pagina principale, puoi ruotare la manopola e selezionare una delle tre pagine disponibili per l'industria, la medicina e i veicoli come mostrato nell'immagine qui sotto.

 

 

E subito dopo la selezione, una breve azione di tocco sul display della manopola OLED passa immediatamente alla pagina selezionata della Smart Display. 

 

 

Vediamo di nuovo come eseguire gli scenari di demo, iniziando dalla pagina principale e scegliendo una delle altre tre pagine ruotando la manopola. In questo esempio, l'utente seleziona la pagina medica.

 

 

Dopo aver selezionato la pagina medica, basta toccare lo schermo della manopola OLED per accedere alla pagina medica selezionata sullo smart display.

 

 

Ruotando la manopola della manopola OLED nella direzione sinistra-destra, è possibile controllare tutti i widget presenti sulla pagina, come illustrato nell'immagine allegata.

 

 

Se esegui un tocco prolungato sul display della manopola OLED, ti riporterà automaticamente alla pagina principale, nota anche come Pagina 1. Inoltre, se non ruoti né tocchi il display della manopola OLED per 10 secondi, reimposterà il display e tornerà alla pagina principale.

 

 

Congratulations! Il design demo per lo Smart Display da 10,1" e il display della manopola OLED sono completati. Questa demo ti consente di controllare diverse pagine e passare tra di esse eseguendo tocchi brevi o lunghi sul display della manopola OLED. Inoltre, puoi interagire con vari widget disponibili su ciascuna pagina.

Si prega di fare riferimento a questo link di GitHub https://bit.ly/3oT0o5M per scaricare il programma sopra e per cercare ulteriori dettagli su questo progetto di demo.

Il setup hardware effettivo è mostrato nella figura qui sotto.

 

 

Conclusioni

In sintesi, questo programma fornisce una dimostrazione pratica su come utilizzare una scheda Arduino in combinazione con un display OLED con manopola rotante, utilizzando un protocollo CAN personalizzato, per gestire diverse pagine e navigare tra di esse eseguendo tocchi brevi o lunghi sul display. Consente inoltre l'interazione e il controllo di vari widget disponibili su ciascuna pagina. Questo programma è prezioso per individui di tutti i livelli di competenza, inclusi principianti e sviluppatori esperti, che desiderano acquisire conoscenze sulla programmazione di host e le sue applicazioni nel controllo di display intelligenti, in particolare display non touch.