Utilização de CSS3 para customizar interfaces web de controle
Se você acompanha os nossos tutoriais envolvendo a utilização da linguagem HTML com as placas Arduino, este será mais um conteúdo muito interessante que você certamente irá gostar. Neste tutorial vamos apresentar uma melhoria no tutorial que fizemos sobre a leitura de um sensor de temperatura LM35 utilizando o Arduino como um Servidor Web, de modo que, aproveitaremos a ideia do tutorial citado entretanto vamos utilizar CSS3 para customizar de forma inteligente as informações referentes aos valores provenientes do sensor existente em nosso projeto.
Confira também nossos tutoriais anteriores sobre a utilização do Arduino UNO como um Servidor Web:
- Shield Ethernet W5100 – Criando um Servidor Web com Arduino
- Shield Ethernet W5100 – Monitorando sensores com um Servidor Web
- Shield Ethernet W5100 – Controlando saídas via Servidor Web
- Shield Ethernet W5100 – Acionamento remoto de relés com HTML
- Shield Ethernet W5100 – Controlando um LED RGB via PWM com HTML
[toc]
O que é CSS3?
Nós sabemos que ao desenvolvermos o código HTML de uma aplicação, devemos sempre utilizar as tags que melhor representam os significados das várias partes constituintes do mesmo, pois, como vimos em nossos outros tutoriais, uma das funções da linguagem HTML é atribuir sentido semântico aos elementos existentes em uma determinada página. Entretanto, a utilização das tags estruturais mais adequadas não é suficiente para que a aplicação possua uma aparência estética bem elaborada, pois, o uso das mesmas produz resultados contidos em uma espécie de estilo padrão. Sendo assim, podemos supor que exista alguma maneira de driblarmos este impasse através da possibilidade de customização do design dos elementos de uma página web.
Antigamente estes procedimentos de customização eram feitos no através de algumas tags do próprio HTML. Se você quisesse, por exemplo, escrever um título com a tag de cabeçalho h1 em vermelho, bastaria utilizar a tag <font>, veja:
<h1><font color="red">Como controlar o meu Arduino pela internet? - Volume II</font></h1>");
Além da tag <font>, várias outras tags de estilo também existiam, no entanto, este procedimento de estilização ficou para trás e apesar de alguns navegadores ainda reconhecerem as mesmas, utilizá-las nos dias de hoje constitui uma má prática. Como alternativa para realizar a customização dos elementos de uma página web, surgiu o CSS (Cascading Style Sheets), que por sua vez, consiste em um recurso semelhante a uma linguagem de marcação, como o HTML, porém totalmente distinta do mesmo, com objetivo único de cuidar dos procedimentos de estilização.
Uma das vantagens da utilização do CSS é a possibilidade de personalizar os objetos contidos em uma página web sem que seja necessário misturar as regras de estilização com os objetos citados (como acontecia anteriormente).
Sintaxe do CSS3
A sintaxe do CSS consiste em uma simples declaração de propriedades e valores, separados entre si por um sinal de dois pontos “:”.
color: red; background-color: blue;
CSS3 em um código HTML
Basicamente existem três forma de utilizar os códigos de CSS3 para customizar os elementos existentes em uma página web, entretanto, neste momento vamos nos ater apenas à forma que utiliza o atributo style como porta de entrada para as personalizações dos mesmos. O procedimento a ser seguido é bem simples, de modo que, basta adicionar o atributo style na tag do objeto que você quer manipular. Veja o código abaixo:
<h1 style=propriedade:valor>Vida de Silício</h1>"));
Neste exemplo, a frase “Vida de silício” será exibida com o sentido semântico de uma tag de cabeçalho h1, no entanto, terá sua aparência alterada de acordo com a propriedade e o valor atribuídos à mesma. Perceba que esta maneira de utilizar o CSS3 é praticamente igual ao modo que as customizações eram feitas antigamente (somente com a utilização da linguagem HTML). Além disso, o exemplo apresentado contém apenas um atributo, no entanto, podemos utilizar múltiplos atributos:
<h1 style=color: red; background-color: blue;>Vida de Silício</h1>"));
No código em questão nós declaramos a propriedade color e atribuímos à mesma o valor red (isto significa que a frase citada seja exibida pelo navegador na cor vermelha). Por outro lado, temos também a propriedade background-color, que por sua vez, está associada ao valor blue (este procedimento fará com que a frase “Vida de Silício” seu fundo na cor azul). Existem uma infinidade de atributos que podem ser utilizados para customizar a sua interface de controle, basta fazer uma breve pesquisa que você certamente encontrará uma vasta gama de opções.
Mãos à obra – Monitorando sensores com um Servidor Web
Nesta seção iremos demonstrar todos os passos que você deve seguir para utilizar o CSS3 para customizar o valor de temperatura em sua interface de monitoramento.De maneira mais específica, vamos replicar o projeto em que o usuário consiga monitorar valores de temperatura provenientes de um sensor LM35 (não esqueça de conferir nosso tutorial sobre o sensor de temperatura LM35 clicando aqui) e fazer com que o valor seja apresentado de maneiras diferentes utilizando o CSS3.
Componentes necessários
Para reproduzir este projeto, você irá precisar dos seguintes componentes:
Montando o projeto
Na figura abaixo você pode conferir o hardware pronto para ser utilizado.
Gostaríamos de sugerir que você tenha bastante cuidado no momento em que for encaixar o Shield Ethernet W5100 no Arduino UNO, pois, além da possibilidade de entortar os pinos do shield, você também pode se machucar.
Lembre-se que o shield em questão possui uma série de pinos em sua parte inferior, tanto nas laterais como em sua parte dianteira, portanto, antes de pressionar o mesmo sobre o Arduino UNO, certifique-se de que os pinos estejam levemente posicionados em suas respectivas entradas para que então você possa ir realizando o encaixe lentamente.
Realizando as conexões
Para reproduzir este projeto, garanta que o seu Shield Ethernet W5100 esteja ligado corretamente a uma das portas LAN presentes no seu modem ou roteador.
Programando
Nesta seção apresentaremos o código da nossa aplicação
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 25, 16);
EthernetServer server(80);
void setup()
{
Ethernet.begin(mac, ip);
server.begin();
}
void loop() {
EthernetClient client = server.available();
if (client)
{
boolean currentLineIsBlank = true;
while (client.connected())
{
if (client.available())
{
char c = client.read();
if (c == '\n' && currentLineIsBlank) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 2");
client.println();
client.println("<!DOCTYPE html>");
client.println("<html>");
client.println("<head>");
client.println("<title>Servidor Web VDS</title>");
client.println("</head>");
client.println("<body>");
client.println("<h1 style=\"color:#4279c7\">Servidor Web do Vida de Silício</h1>");
client.println("<hr/>");
client.println("<h1>Temperatura</h1>");
int valor = analogRead(A0);
float temperatura = (((valor*5)/1023)-0.5)*100;
if(temperatura >=50)
{
client.println("<p style=\"color:rgb(255,0,0)\">");
client.println(LM35: );
client.println(temperatura);
client.println("graus");
client.println("</p>");
}
else
{
client.println("<p style=\"color:rgb(0,0,0)\">");
client.println(LM35: );
client.println(temperatura);
client.println("graus");
client.println("</p>"); }
client.println("</body>");
client.println("</html>");
break;
}
if (c == '\n')
{
currentLineIsBlank = true;
}
else if (c != '\r')
{
currentLineIsBlank = false;
}
}
}
delay(1);
client.stop();
}
}
Colocando para funcionar
Veja como ficou nosso segundo Servidor Web.
Entendendo a fundo
Antes de começarmos com a explicação do código, gostaríamos de ressaltar que iremos apresentar os detalhes apenas dos tópicos não contemplados nos nossos outros tutoriais, pois, desta maneira, será mais fácil focarmos nas partes referentes às modificações feitas sobre o programa já existente, portanto, caso você tenha alguma dúvida sobre alguma parte do programa que não seja explicada neste momento, sugerimos que acesse o nosso material citado anteriormente.
Software
– Definindo os pré-requisitos para o funcionamento do código
Inicialmente, devemos incluir duas bibliotecas no código para que o mesmo pudesse funcionar corretamente. A biblioteca SPI.h, responsável pela comunicação dos módulos do shield com o Arduino UNO utilizando o protocolo SPI e a biblioteca Ethernet.h que atua possibilitando a conexão do conjunto, em um primeiro momento, com uma rede local.
Após a inclusão das bibliotecas citadas, devemos definir um endereço MAC (lembre-se que este pode ser qualquer um, desde que seja único em sua rede local) e um endereço IP (este deve ser um endereço válido e disponível dentro da sua rede local). Além disso, devemos criar o objeto que será responsável por representar o Servidor Web no código (aqui, chamamos este de server) e relacioná-lo com a porta 80.
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 25, 16);
EthernetServer server(80);
– Definindo as configurações iniciais
Dentro da função setup() nós iniciamos a conexão com a rede local através da função Ethernet.begin() (passando como parâmetro os endereços MAC e IP definidos anteriormente) e também iniciamos o Servidor Web por meio da sentença server.begin() (lembre-se que server é o objeto criado para representar o Servidor Web no código).
void setup()
{
Ethernet.begin(mac, ip);
server.begin();
}
– Criando a página para responder à requisição do navegador
No artigo anterior foi possível compreender como devemos proceder para elaborar uma página bem simples, contendo apenas elementos escritos e também estáticos, ou seja, que não sofriam nenhum tipo de alteração. Neste momento, iremos incrementar o programa criado anteriormente, portanto, vamos deixar de lado a parte referente ao processo de requisição do navegador (já explicado) e iremos focar apenas na elaboração da página que cumpra o objetivo proposto neste material.
Você se lembra do cabeçalho padrão que enviamos para o navegador antes de enviarmos a página propriamente dita? Para ajudar, vamos colocá-lo aqui.
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
Definindo tempo de atualização da página
A primeira modificação que faremos neste momento será a inclusão de uma linha de código que faça com que a página seja atualizada em intervalos de tempo definidos. Isto é importante para este projeto em virtude de estarmos trabalhando com aquisição de variáveis, portanto, devemos atualizar a página periodicamente para que seja possível visualizarmos sempre os valores atuais das variáveis envolvidas. Sendo assim, utilizamos a seguinte sentença para que a página seja atualizada de 2 em 2 segundos.
client.println("Refresh: 2");
Veja como ficará o nosso cabeçalho padrão
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 2");
client.println();
A estrutura da página em HTML
O próximo passo que faremos será construir, de fato, a página que será enviada ao navegador. Com uma breve recapitulação, devemos lembrar que todo conteúdo que compõe a página deve estar dentro da seguinte estrutura:
client.println("<!DOCTYPE HTML>");
client.println("<html>");
.
.
***** Conteúdo da página *****
.
.
client.println("</html>");
Como ressaltado anteriormente, dentro desta estrutura temos o conteúdo da página que queremos enviar para o navegador, de modo que, nesta, devemos ter pelo menos dois blocos, um responsável pelas informações gerais do documento, limitado pelo uso do par <head></head> e o outro, por sua vez, deve conter o corpo da página e está entre as tags <body> e </body>.
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
.
.
***** Bloco 1 *****
.
.
client.println("</head>");
client.println("<body>");
.
.
***** Bloco 2 *****
.
.
client.println("</body>");
client.println("</html>");
Definido o título para a página
Neste momento, vamos utilizar apenas uma tag dentro do bloco 1, denominada <title>, cuja função consistirá em definir um título para a página (este título aparecerá na aba do navegador). Para executarmos a ação proposta, devemos colocar o título desejado entre o par <title></title>.
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<title>Servidor Web VDS</title>");
client.println("</head>");
client.println("<body>");
.
.
***** Bloco 2 *****
.
.
client.println("</body>");
client.println("</html>");
Veja como ficou o título da nossa página:
Escrevendo o corpo da página web
Quanto ao corpo da página (entre o par <body></body>), a primeira coisa que faremos será colocar um título visível na própria página. Para realizar este procedimento, utilizaremos a tag <h1>, que por sua vez, consiste em uma tag para apresentar um determinado texto em um modelo predefinido. Além disso, utilizaremos também o atributo style, através do qual, poderemos fazer alterações no título produzido.
client.println("<h1 style=\"color:#4279c7\">Servidor Web do Vida de Silício</h1>");
Alguns pontos no trecho de código acima devem ser ressaltados:
- Tudo que estiver escrito entre o par <h1></h1> estará pré formatado no estilo deste cabeçalho.
- O atributo style é responsável por modificar alguma característica relativa à formatação de uma determinada porção de texto. Para isto, devemos colocar o nome da característica que queremos modificar, após o sinal de igual (=), sendo assim, quando escrevemos <style=\”color:#4279c7\”>, estamos indicando que a porção de texto entre o par <h1></h1> deverá está colorida em um certo tom de azul (dado pelo código RGB em hexadecimal #4279c7).
- Repare que a palavra Silício foi escrita no código como Silício. Esta forma de escrita é necessária sempre que temos a utilização de algum tipo de acento, pois, nem todos os dispositivos estão configurados para apresentar caracteres acentuados da mesma forma. Sendo assim, utilizamos o comando í para colocar o acento agudo na letra i da palavra Silício.
Veja o resultado deste procedimento na figura abaixo:
Posteriormente, vamos inserir uma barra horizontal para separar o título criado no passo anterior dos textos que ainda serão criados, através do comando <hr/>.
client.println("<hr/>");
Após a inserção da barra citada, nossa página ficará da seguinte maneira:
Imprimindo a tempertatura
Em seguida, escrevemos outro texto utilizando o modelo de cabeçalho h1 referente ao valor que será obtido pelo sensor de temperatura LM35.
client.println("<h1>Temperatura</h1>");
Com este passo, a página será apresentada assim:
Em seguida, vamos trabalhar sobre a porção de código responsável por exibir a leitura do sensor de temperatura LM35. Primeiramente, utilizamos a função analogRead() para obter o sinal proveniente do sensor de temperatura LM35 e armazená-lo em uma variável do tipo int. Em seguida, realizamos os cálculos para converter o valor obtido pela porta de entrada analógica e inserimos o resultado do mesmo em uma variável do tipo float chamada temperatura, de modo que, caso o valor em questão seja maior do que 50, nós vamos escrever a frase LM35: x graus, entretanto, caso o valor citado seja menor do que 50, a mesma frase será escrita desta maneira LM35: x graus função. Repare que para realizar esta comparação nós utilizamos um conjunto if()/else.
int valor = analogRead(A0);
float temperatura = (((valor*5)/1023)-0.5)*100;
if(temperatura >=50)
{
client.println("<p style=\"color:rgb(255,0,0)\">");
client.println(LM35: );
client.println(temperatura);
client.println(" graus");
client.println("</p>");
}
else
{
client.println("<p style=\"color:rgb(0,0,0)\">");
client.println(LM35: );
client.println(temperatura);
client.println("graus");
client.println("</p>");
}
A apresentação do valor de temperatura ficará conforme a figura abaixo:
Considerações finais
Neste tutorial, demonstramos como você utilizar CSS3 para personalizar alguns elementos do seu projeto, utilizando um Arduino UNO e um Shield Ethernet W5100. Esta foi mais uma parte de uma série de artigos sobre a criação de Servidores Web, portanto, esperamos que continue nos acompanhando e sinta-se à vontade para nos dar sugestões. Lembre-se de deixar suas dúvidas nos comentários abaixo.
