De volta ao W5100, resolvemos juntar todas as peças, de hardware e software, e - fugindo da rotina - concluir um projeto. Como nosso site é meio tocado com uma lógica "fuzzy", na qual os projetos são apresentados sem uma sequência didática, achamos que dessa vez, o paciente leitor deveria ser brindado com um ciclo completo de desenvolvimento Solucionático...obviamente sem muita pretensão de ter um projeto com acabamento profissional, como atesta a foto abaixo.
O hardware é formado por uma W5100 e um Arduino (clone) Mega 2560. No protoboard temos seis leds. O motivo do emaranhado de fios já foi explicado em W5100 Ethernet Shield, mas resumidamente é porque o referido "Shield" não é compatível pino a pino com o Mega 2560. Como funciona? Basicamente temos o firmware do Arduino (sketch mostrado em Aplicações para o W5100. O Arduino programa o W5100 como um servidor ethernet que está ligado na rede local (no Power Box da GVT). Os leds piscam rapidamente em função do conteúdo da URL enviada pelo software de controle postado abaixo, que foi adaptado de um dos exemplos do Processing.
/**
* Button.
*
* Click on one of the colored squares in the
* center of the image to change the color of
* the background.
* Adapted in Oct 20th, by Solucionática
*/
import processing.net.*;
Client c;
String data;
int rectX, rectY; // Position of square button
int circleX, circleY; // Position of circle button
int rectX2, rectY2; // Position of square button
int circleX2, circleY2;
int rectSize = 90; // Diameter of rect
int circleSize = 93; // Diameter of circle
color rectColor, circleColor, baseColor;
color rectHighlight, circleHighlight;
color rectColor2, circleColor2;
color rectHighlight2, circleHighlight2;
color currentColor;
boolean rectOver = false;
boolean circleOver = false;
boolean rectOver2 = false;
boolean circleOver2 = false;
void setup() {
size(640, 360);
rectColor = color(0);
rectHighlight = color(51);
circleColor = color(255);
circleHighlight = color(204);
rectColor2 = color(90);
rectHighlight2 = color(180);
circleColor2 = color(51);
circleHighlight2 = color(110);
baseColor = color(102);
currentColor = baseColor;
circleX = 3*width/4;
circleY = height/4;
circleX2 = 3*width/4;
circleY2 = 3*height/4;
rectX = width/4;
rectY = height/4-40;
rectX2 = width/4;
rectY2 = 3*height/4-40;
ellipseMode(CENTER);
c = new Client(this, "192.168.25.20", 80); // Connect to server on port 80
}
void draw() {
update(mouseX, mouseY);
background(currentColor);
if (c.available() > 0) { // If there's incoming data from the client...
data = c.readString(); // ...then grab it and print it
println(data);
}
if(rectOver) {
fill(rectHighlight);
} else {
fill(rectColor);
}
stroke(255);
rect(rectX, rectY, rectSize, rectSize);
if(circleOver) {
fill(circleHighlight);
} else {
fill(circleColor);
}
stroke(0);
ellipse(circleX, circleY, circleSize, circleSize);
if(rectOver2) {
fill(rectHighlight2);
} else {
fill(rectColor2);
}
stroke(255);
// rect(rectX, rectY, rectSize, rectSize);
rect(rectX2, rectY2, rectSize, rectSize);
if(circleOver2) {
fill(circleHighlight2);
} else {
fill(circleColor2);
}
stroke(0);
ellipse(circleX2, circleY2, circleSize, circleSize);
}
void update(int x, int y) {
if( overCircle(circleX, circleY, circleSize) ) {
circleOver = true;
rectOver = false;
circleOver2 = false;
rectOver2 = false;
} else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
rectOver = true;
circleOver = false;
circleOver2 = false;
rectOver2 = false;
} else {
circleOver = rectOver = false;
}
if( overCircle2(circleX2, circleY2, circleSize) ) {
circleOver = false;
rectOver = false;
circleOver2 = true;
rectOver2 = false;
} else if ( overRect2(rectX2, rectY2, rectSize, rectSize) ) {
rectOver2 = false;
circleOver2 = false;
circleOver2 = false;
rectOver2 = true;
} else {
circleOver2 = rectOver2 = false;
}
}
void mousePressed() {
if(circleOver) {
currentColor = circleColor;
c.write("GET /?23456789 HTTP/1.0\r\n"); // Use the HTTP "GET" command to ask for a Web page
c.write("\r\n");
c = new Client(this, "192.168.25.20", 80); // Connect to server on port 80
}
if(rectOver) {
currentColor = rectColor;
c.write("GET /?98765432 HTTP/1.0\r\n"); // Use the HTTP "GET" command to ask for a Web page
c.write("\r\n");
c = new Client(this, "192.168.25.20", 80); // Connect to server on port 80
}
if(circleOver2) {
currentColor = circleColor2;
c.write("GET /?29384756 HTTP/1.0\r\n"); // Use the HTTP "GET" command to ask for a Web page
c.write("\r\n");
c = new Client(this, "192.168.25.20", 80); // Connect to server on port 80
}
if(rectOver2) {
currentColor = rectColor2;
c.write("GET /?56473829 HTTP/1.0\r\n"); // Use the HTTP "GET" command to ask for a Web page
c.write("\r\n");
c = new Client(this, "192.168.25.20", 80); // Connect to server on port 80
}
}
boolean overRect(int x, int y, int width, int height) {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
boolean overCircle(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
boolean overRect2(int x, int y, int width, int height) {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
boolean overCircle2(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
Não vamos explicar o sketch em detalhes (em Processing, os programas também são chamados de "sketch" , pois é o pai do Wiring, a linguagem de programação do Arduino!). Recomendamos não alterar muito o núcleo do sketch, pois não é muito intuitivo o seu funcionamento. Em outra oportunidade iremos dissecá-lo para não restar dúvidas sobre o funcionamento.
Uma observação que deve ser feita: caso o hardware não esteja ligado à rede, ou a rede esteja sem "enxergar" o Arduino e/ou o W5100, o sketch não vai funcionar. Para resolver isso basta acrescentar umas linhas tratando o erro "end-of-stream" no início do sketch. Para contornar essa falha, reiniciamos o servidor após cada envio da URL.
A Interface Gráfica do Usuário, mais conhecida pela sigla em inglês GUI, é formada por quatro botões "sensíveis" ao mouse. Quando clicamos em um dos botões, uma determinada URL é enviada para o ip do servidor (o nosso W5100!!!) que recebe a informação e repassa ao Arduino, que por sua vez e com muita boa vontade, faz piscar os leds correspondentes (aos números após a "?"). Vejamos um trecho do sketch como exemplo:
void mousePressed() {
if(circleOver) {
currentColor = circleColor;
c.write("GET /?23456789 HTTP/1.0\r\n"); // Use the HTTP "GET" command to ask for a Web page
c.write("\r\n");
c = new Client(this, "192.168.25.20", 80); // Connect to server on port 80
....
}
A subrotina (void) mousePressed() fica checando se o ponteiro do mouse está em cima de um botão e se o botão esquerdo do mouse foi pressionado, ou seja, se o usuário clicou, nesse caso, no circulo de cima, como mostra a imagem da tela: (ops...sem imagem ainda)
Assim, após o click do mouse, a linha c.write("GET /?23456789 HTTP/1.0\r\n") é executada e os leds conectados às saídas 2,3,4,5,6,7,8 e 9 vão piscar nessa sequência, como mostra o vídeo seguinte: