Processing RGB interface

In questi ultimi giorni ho provato a realizzare una semplice processing RGB interface ossia una interfaccia dotata di 3 cursori:

realizzata in processing e capace di inviare il valore di ciascuna componente R,G o B in formato 2⁸ ad un micro controllore come Arduino o ESP8266.

Già in passato hai letto dei miei articoli su come controllare dei LED RGB con Arduino attraverso, ad esempio un potenziometro o un cellulare.

In questa occasione i led non sono più semplici RGB ma dei Neopixel WS2812.

Processing RGB interface

Con processing, come sai, puoi realizzare delle semplici interfacce per computer con le quali interagire con il computer o con i micro controllori come Arduino o l’ESP8266.

Ecco come si presenta l’interfaccia Processing RGB interface all’avvio del programma:

In cui trascinando ciascuno dei cursori puoi variare il corrispondente valore visualizzato.

Caratteristiche del processing RGB interface

Il progetto processing RGB interface ti permette di avere sull’interfaccia virtuale le seguenti caratteristiche:

• visualizzazione dei valori dei singoli cursori nella parte alta;
• conversione del valore visualizzato in formato esadecimale in basso, in corrispondenza di ogni cursore;
• il valore codificato  esadecimale e preceduto dal “#” in formato #RRGGBB
• lo sfondo che adatta il proprio colore al valore delle tre componenti composte dai cursori;

hai notato che ho aggiunto nell’interfaccia alcune funzioni che non sono direttamente necessarie al funzionamento dello sketch, come le ultime 3 ad esempio, tuttavia sono comode se devi convertire un codice colore in esadecimale o per avere il corrispondente valore web.

Codice processing

il codice per il processing RGB interface è il seguente:

import processing.serial.*;

int red    = 200;
int green  = 200;
int blue   = 200;

int sRed   = 127;
int sGreen = 127;
int sBlue  = 127;

int oldsRed   = 127;
int oldsGreen = 127;
int oldsBlue  = 127;

Serial myPort;  

void setup() {
  size(290,440);
  //printArray( Serial.list() );
  myPort = new Serial(this, Serial.list()[2], 57600);
}

void draw() {
  background(sRed,sGreen,sBlue);
  
  fill(0, 0, 0);
  stroke(255, 0, 0);
  rect(30, 20, 55, 360, 5 );
  stroke(0, 255, 0);
  rect(120, 20, 55, 360, 5 );
  stroke(0, 0, 255);
  rect(205, 20, 55, 360, 5 );
    
  stroke(255, 255, 255);
  if ( mousePressed ) {
    if ( (30 < mouseX && mouseX < 86) && (46 < mouseY && mouseY < 353) ) {
      red = mouseY;
      fill(255, 0, 0);
      translate(0, red);
      rect(30, -27, 55, 55, 5 );
      translate(0, -red);
    } else {
      fill(255, 0, 0);
      rect(30, red-(55/2), 55, 55, 5 );
    }
    
    /**********************/
    
    if ( (121 < mouseX && mouseX < 177) && (46 < mouseY && mouseY < 353) ) {
      green = mouseY;
      fill(0, 255, 0);
      translate(0, green);
      rect(120, -27, 55, 55, 5 );
      translate(0, -green);
    } else {
      fill(0, 255, 0);
      rect(120, green-(55/2), 55, 55, 5 );
    }
    
    /**********************/
    
    if ( (206 < mouseX && mouseX < 263) && (46 < mouseY && mouseY < 353) ) {
      blue = mouseY;
      fill(0, 0, 255);
      translate(0, blue);
      rect(205, -27, 55, 55, 5 );
      translate(0, -blue);
    } else {
      fill(0, 0, 255);
      rect(205, blue-(55/2), 55, 55, 5 );
    }
  } else {
    fill(255, 0, 0);
    rect(30, red-(55/2), 55, 55, 5 );
    fill(0, 255, 0);
    rect(120, green-(55/2), 55, 55, 5 );
    fill(0, 0, 255);
    rect(205, blue-(55/2), 55, 55, 5 );
  }
  
  fill(255);
  rect(30, 2, 55, 15, 2 );
  rect(120, 2, 55, 15, 2 );
  rect(205, 2, 55, 15, 2 );
  
  rect(30, 385, 55, 20, 2 );
  rect(120, 385, 55, 20, 2 );
  rect(205, 385, 55, 20, 2 );
  
  rect(30, 415, 230, 20, 2 );
  
  fill(0);
  textSize(14);
  sRed   = int(map(red,47,352,255,0));
  sGreen = int(map(green,47,352,255,0));
  sBlue  = int(map(blue,47,352,255,0));
  
  text(sRed,    35, 15 );
  text(sGreen, 125, 15 );
  text(sBlue,  210, 15 );
  
  text(hex(sRed,2),    35, 400 );
  text(hex(sGreen,2), 125, 400 );
  text(hex(sBlue,2),  210, 400 );
  
  text("#" + hex(sRed,2) + hex(sGreen,2) + hex(sBlue,2),  35, 430 );
  
  if ( ( !mousePressed ) && ((sRed != oldsRed) || (sGreen != oldsGreen) || (sBlue != oldsBlue))) {
    myPort.write(Integer.toString(sRed)+" "+Integer.toString(sGreen)+" "+Integer.toString(sBlue));
    myPort.write('\n');
    println( sRed + " " + sGreen + " " + sBlue );
    println(hex(sRed,2));
    
    oldsRed   = sRed;
    oldsGreen = sGreen;
    oldsBlue  = sBlue;
  }
}

// this part is executed, when serial-data is received
void serialEvent(Serial p) {
  try {
    // get message till line break (ASCII > 13)
    String message = p.readStringUntil(13);
    // just if there is data
    if (message != null) {
      println("message received: "+trim(message));
    }
  }
  catch (Exception e) {
  }
}

in cui le linee su cui devi prestare maggiore attenzione sono:

linea 20: imposta la comunicazione seriale creando l’istanza myPort come connessione alla porta seriale a cui hai connesso il micro controllore.

Per conoscere tale porta puoi decommentare la linea precedente ed avviare il programma.

Processing scriverà sulla console un elenco di porte seriali affiancate da un indice. 

Segna il valore dell’indice corrispondente alla porta a cui hai connesso l’arduino ( sarà certamente la medesima che vedi nell’IDE arduino ) e sostituisci tale valore tra le parentesi quadre.

Nel mio esempio la porta seriale è la numero 2;

Le linee 108-117:

if ( ( !mousePressed ) && ((sRed != oldsRed) || (sGreen != oldsGreen) || (sBlue != oldsBlue))) {
    myPort.write(Integer.toString(sRed)+" "+Integer.toString(sGreen)+" "+Integer.toString(sBlue));
    myPort.write('\n');
    println( sRed + " " + sGreen + " " + sBlue );
    println(hex(sRed,2));
    
    oldsRed   = sRed;
    oldsGreen = sGreen;
    oldsBlue  = sBlue;
  }

si occupano, nella processing RGB interface, di verificare che appena rilasci il pulsante del mouse ( !mousePressed ) i valori delle tre componenti siano differenti dai precedenti già inviati, o almeno uno di essi.

In caso di cambiamenti, anche di un solo valore, invia tutta la stringa attesa dal micro controllore ( linea 109 ) convertendo i valori da interi in stringa.

La linea 110: invia il carattere ‘\n’, a capo;

le linee successive 111-112 si occupano di scrivere sulla console la medesima linea inviata ed il valore del solo rosso convertito in HEX;

linee 114-116: allineano le variabili oldsXXXXX ai valori appena inviati per favorire il controllo alla linea 108 al prossimo controllo.

Download del progetto

Ho deciso di condividere tutto il progetto sul mio gitHub, puoi trovarlo qui.

In questo momento trovi solo la parte relativa a Processing, nei prossimi giorni aggiungerò lo sketch ed i test eseguiti con Arduino e ESP8266.

Il video dell’interfaccia