Contrôler les sorties d'un MSP430 Launchpad avec GUI Composer

Bienvenue dans ce troisième article sur l'utilisation de GUI Composer, un outil en ligne qui permet de construire une interface graphique pour interagir avec un Launchpad.  Dans les deux articles précédents, nous avons vu comment afficher à l'écran l'état d'une entrée numérique et nous avons étudié la façon d'afficher à l'écran l'état d'une entrée analogique.  Cette fois-ci, nous allons créer à l'écran de l'ordinateur des boutons sur lesquels il sera possible de cliquer afin d'allumer ou d'éteindre les deux LEDs intégrées à la carte MSP430 Launchpad.

Je continue d'effectuer mes tests avec un Launchpad MSP430G2553, mais GUI Composer devrait fonctionner avec n'importe quel type de Launchpad.

Sketch

Pour nos deux précédents projets, le rôle du Launchpad se limitait essentiellement à envoyer un message json par liaison série.  Cette fois, le Launchpad va recevoir un message json en provenance de l'ordinateur, et il devra faire la différence entre un message qui lui commande de modifier l'état de sa LED rouge et un message qui lui commande de modifier l'état de sa LED verte.  Ça rend le sketch un petit peu plus complexe.

Lorsqu'on cliquera sur les boutons à l'écran, les messages envoyés par GUI Composer seront de ce type:  {"Vert":1}, {"Vert":0} ,  {"Rouge":1} ou {"Rouge":0}.

Sur réception d'un message, le notre programme localise le symbole ":".  Pour faire la différence entre la LED verte et la LED rouge, il recule de deux caractères:  si ce caractère est "t" (dernière lettre du mot "Vert"), c'est la LED verte qui doit changer d'état.  Si c'est "e" (dernière lettre du mot "Rouge"), c'est la LED rouge.

Dans le script initial, je scrutait le caractère situé immédiatement après ":" pour savoir si c'était "1" ou "0", et j'ai constaté que c'était parfois "1" ou "0", et parfois "true" ou"false".  Bien entendu, vous pouvez construire vos conditions pour prévoir ces deux possibilités.  J'ai préféré ne pas tenir compte de la commande "1" ou "0" et de toujours modifier l'état de la LED.  J'envoie ensuite un message json du Launchpad vers GUI Composer pour m'assurer que l'état affiché à l'écran est le même que l'état réel des LEDs sur la carte.

	/******************************************************************************
	*
	* GUI_controle_LEDS
	*
	* Contrôle des deux LEDs intégrées à la carte Lauchpad au moyen de boutons toggle
	* dans GUI Composer
	*
	* Plus de détails:
	*
	* http://electroniqueamateur.blogspot.com/2017/12/controler-les-sorties-dun-msp430.html
	*
	*
	******************************************************************************/
	#define MAX_JSON_STRLEN 40 // taille maximale d'un message en provenance de GUI Composer
	char jsonStrFromHost[MAX_JSON_STRLEN];
	uint8_t numBytesRead = 0;
	int rxStrIndex = 0;
	int etatLEDVerte = HIGH;
	int etatLEDRouge = LOW;
	void setup() {
	pinMode(RED_LED, OUTPUT);
	pinMode(GREEN_LED, OUTPUT);
	Serial.setTimeout(6000);
	Serial.begin(9600);
	clearStr(jsonStrFromHost);
	rxStrIndex = 0;
	Serial.flush();
	miseAjourLEDs();
	}
	void loop() {
	numBytesRead = getSerialString();
	if (numBytesRead > 2){
	// Les messages possibles sont {"Vert":1}, {"Vert":0} , {"Rouge":1} ou {"Rouge":0}
	// Après avoir localisé le séparateur ":", on trouve la dernière lettre du mot "Rouge" ou "Vert"
	// pour savoir quelle LED il faut modifier
	for (int j=2; j < numBytesRead; j++){
	if ((jsonStrFromHost[j] == ':') && (j < (numBytesRead + 1))){
	if (jsonStrFromHost[j-2] == 'e'){ //rouge
	etatLEDRouge = !etatLEDRouge;
	}
	if (jsonStrFromHost[j-2] == 't'){ //vert
	etatLEDVerte = !etatLEDVerte;
	}
	miseAjourLEDs();
	clearStr(jsonStrFromHost);
	rxStrIndex = 0;
	}
	}
	}
	delay(1);
	}
	// on allume ou éteint des LEDs sur la carte, et on met à
	// jour l'état des deux boutons dans GUI Composer
	void miseAjourLEDs () {
	digitalWrite(RED_LED,etatLEDRouge);
	digitalWrite(GREEN_LED,etatLEDVerte);
	Serial.print("{\"Vert\":");
	Serial.print(etatLEDVerte);
	Serial.print("}\n");
	Serial.print("{\"Rouge\":");
	Serial.print(etatLEDRouge);
	Serial.print("}\n");
	}
	// on efface la chaîne de caractères
	void clearStr(char* pBuffer){
	int k = 0;
	for (k=0; k < MAX_JSON_STRLEN; k++){
	pBuffer[k] = (char)0;
	}
	}
	// on lit le message série
	int getSerialString(){
	char rxChar;
	boolean done = false;
	int waitCtr = 0;
	int numCharsRx = 0;
	int numAvailable = 0;
	int index = 0;
	while (!done) {
	numAvailable = Serial.available();
	if (numAvailable > 0) {
	for (index=0; index < numAvailable; index++){
	waitCtr = 0;
	rxChar = Serial.read();
	if ((rxChar != -1) && (rxChar != (char)0)){
	if (rxChar == (char)10){
	done = true;
	numCharsRx = rxStrIndex;
	rxStrIndex = 0;
	}
	else {
	if (rxStrIndex < MAX_JSON_STRLEN){
	jsonStrFromHost[rxStrIndex++] = rxChar;
	}
	else {
	done = true;
	break;
	}
	}
	}
	}
	Serial.flush();
	}
	else {
	if (rxStrIndex == 0) {
	done = true;
	Serial.flush();
	}
	else {
	// Si un message partiel a été reçu, on attend la fin de ligne /n ou le time out
	delayMicroseconds(50);
	waitCtr++;
	if (waitCtr > 2000) {
	clearStr(jsonStrFromHost);
	rxStrIndex = 0;
	numCharsRx = 0;
	done = true;
	Serial.flush();
	}
	}
	}
	}
	return(numCharsRx);
	}

view raw GUI_controle_LEDS.ino hosted with ❤ by GitHub

Construction de l'interface

Je vais supposer qu'il ne s'agit pas de votre première utilisation des services cloud de Texas Instrument, et que vous avez donc déjà installé le TI Cloud Agent.  Sinon, référez-vous à mon premier article pour plus d'informations.

Une fois dans GUI Composer, nous créons un nouveau projet de type "Dashboard".

Après avoir cliqué sur le bouton "NEXT", on se retrouve dans la zone où on règle la communication avec la carte.  Cliquons sur le bouton "+" en haut à gauche, et choisissons "USB-UART".

Ensuite, on sélectionne notre modèle de Launchpad.  Le port dans lequel le Launchpad est branché devrait se mettre à jour automatiquement.

On peut maintenant cliquer sur "OK" afin de quitter le "New Project Wizard".

Grâce au bouton circulaire rouge situé en bas à droite de l'écran, on créé une "Toggle Switch", disponible dans la catégorie "Control Panel".

Nous cliquons sur le bouton "Properties", situé à droite de la case à cocher "value".

Puis nous écrivons le message qui sera envoyé chaque fois que nous cliquerons sur ce bouton: "Vert".

Il ne reste plus qu'à créer une deuxième toggle switch, qui enverra plutôt le message "Rouge".

Utilisation

Pour utiliser notre nouvelle interface graphique, il s'agit de cliquer sur le bouton "run".

Le tableau de contrôle apparaît dans un nouvel onglet de votre navigateur.  Vous pouvez maintenant allumer ou éteindre chacune des deux LEDs du Launchpad en cliquant à l'écran sur le bouton qui lui est associé.

Yves Pelletier   (Twitter, Facebook)