Semaforo con MCU e Javascript

Creiamo il nostro primo applicativo con il simulatore di basette MCU ovvero MicroController Unit, se preferite dare un nome e cognome un simulatore a tutti gli effetti di Arduino, la nota basetta prototipale. L’idea è di creare un semaforo con i led e programmarlo in uno dei due linguaggi a disposizione, qui il JavaScript.

Indice dei contenuti

La basetta

Per sperimentare il nostro MCU simil Arduino, andiamo nel menù Components dove è proprio stilizzata una icona che assomiglia al classico dispositivo open source. Nel menù abbiamo un MCU che risponde alle caratteristiche tecnologiche di Arduino, un SBC ovvero un Single Board Computer del tutto analogo invece al classico e noto dispositivo Raspberry più versatile.

A fargli compagnia, un sottomenù per gli attuatori (il led) ed uno per i sensori (la manopola). Vi rimando a questo articolo per capire meglio le potenzialità di Arduino. Il simbolo Thing è interessante perché permette di programmare da zero un dispositivo per comportarsi in una qualche modo ed alterare le variabili di ambiente.

Preparare i led di altri colori

Purtroppo Cisco Packet Tracer tra i suoi componenti ha il led ma solo di colore verde. Poco realistico per fare qualche esercizio più complesso come questo. La cosa bella di Packet Tracer è in realtà la possibilità di creare e personalizzare le componenti.

Posizioniamo un led verde, entriamoci dentro cliccando il bottone Advanced in basso a destra. Si aggiungono dei tab in alto, tra cui Thing Editor

Cliccando sull’immagine del led verde ci porta alla cartella di tutte le immagini utilizzate da cisco per dettagliare i vari dispositivi, led incluso. Possiamo aprire l’immagine con un programma di grafica/fotoritocco (ad esempio Gimp) e colorare il led di rosso prima e di giallo salvando i file così creati con un nome opportuno o nella stessa cartella o in una cartella Immagini. Qui sotto ho riportato due esempi già pronti che potete scaricare andandoci sopra col mouse->tasto destro->salva immagine con nome. Le immagini salvate potranno sempre essere sostituite sul led standard verde ricliccando sull’immaginetta e selezionando quella desiderata.

La simulazione

Siamo pronti a creare il nostro spazio di lavoro e simulazione. Posizioniamo la MCU e i tre led avendo cura di cambiare le icone verde/giallo/rosso come detto precedentemente. Per collegare i led alla basetta, questa volta, non abbiamo un cavo ethernet o di rete. Dobbiamo ricorrere allo IoT custom cable selezionando le porte digitale D0, D1, D2 sulla MCU. E’ importante vedere o annotare le porte digitali usate per avere poi il codice corretto corrispondente. Rinominate sempre i componenti e dispositivi per poterli riconoscere facilmente in caso di debug/troubleshooting.

Il listato completo

Clicchiamo sulla MCU e andiamo sul tab Programming. Quindi clicchiamo il tasto New, scegliamo un nome per il progetto e lasciamo il template Empty – Javascript. Entriamo nel file main.js on un doppio click.

Non ci resta che digitare il codice del listato e personalizzarlo.

Le porte digitali le possiamo rinominare creando una variabile mnemonica in linguaggio naturale e ci permette una migliore manutenzione del codice nel caso si voglia cambiare la porta digitale da un numero ad un altro. In javascript una variabile si può dichiarare con var, let e const ma il nostro Packet Tracer supporto solo var. Creiamo poi le due funzioni standard setup() e loop().

In setup() andiamo ad inizializzare tutte le variabili o funzionalità una tantum del nostro Arduino MCU. In particolare pinMode ci permette di impostare una porta digitale come ingresso o uscita a seconda se ci sia collegato un attuatore o un sensore,

In loop() a far da padrone è la funzione digitalWrite(pin, HIGH/LOW) che manda un segnale sulla porta scelta accedendo di fatto il led o spegnendolo.

var ROSSO = 2;
var GIALLO = 1;
var VERDE  = 0;

function setup()
{
	pinMode(ROSSO, OUTPUT);
	pinMode(GIALLO, OUTPUT);
	pinMode(VERDE, OUTPUT);
}

function loop()
{
	digitalWrite(ROSSO, HIGH);
	digitalWrite(GIALLO, LOW);
	digitalWrite(VERDE, LOW);	
	delay(5000);
	digitalWrite(ROSSO, LOW);
	digitalWrite(GIALLO, LOW);		
	digitalWrite(VERDE, HIGH);
	delay(3000);
	digitalWrite(ROSSO, LOW);
	digitalWrite(GIALLO, HIGH);		
	digitalWrite(VERDE, LOW);	
	delay(2000);
	
}