arduino, eletrônica, robotica...
BOTÃO HTML PARA CONTROLE DO LED
Bom dia pessoal, fiz uma simples pagina web para ligar e desligar algumas lampadas, a pagina está bem simples estou melhorando ela aos poucos, como vocês podem observar eu aciono os lampadas clicando na palavra LIGAR ou DESLIGAR pensando em melhorar isso fiz um botão como podem observar na primeira opção (SALA).Minha dúvida é : Quero fazer botoes iguais para os outros cômodos um ao lado do outro, consigo fazer apenas um em baixo do outro não consigo por lado a lado,como faço para colocar por exemplo do lado do botão sala outro botão garagem e outro cozinha.
Gostaria também de aumentar o tamanho do botão acho que esta pequeno,quase não da para ver quando acesso do celular.
OBRIGADO.
#include <SPI.h>
#include <Client.h>
#include <Ethernet.h>
#include <Server.h>
//DETERMINA O END MAC
byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
byte ip[] = {
192, 168, 1, 20};
//PORTA DE COMUNICAÇÃO
EthernetServer server(80);
//ESCREVE O NUMERO DOS PINOS CORRESPONDENTES AOS LEDES
int ledPin1 = 5;
int ledPin2 = 4;
int ledPin3 = 3;
int ledPin4 = 2;
String readString = String(30);
boolean LEDON1 = false;
boolean LEDON2 = false;
boolean LEDON3 = false;
boolean LEDON4 = false;
void setup(){
Serial.begin(9600);
Ethernet.begin(mac, ip);
pinMode(ledPin1, OUTPUT);
pinMode(ledPin2, OUTPUT);
pinMode(ledPin3, OUTPUT);
pinMode(ledPin4, OUTPUT);
}
void loop(){
EthernetClient client = server.available();
if (client)
{
while (client.connected())
{
if (client.available())
{
char c = client.read();
if (readString.length() < 100)
{
readString += c;
}
if (c == '\n')
{
if(readString.indexOf("L1=1") > 0)
{
LEDON1 = true;
}
else if (readString.indexOf("L2=1") > 0)
{
LEDON2 = true;
}
else if (readString.indexOf("L3=1") > 0)
{
LEDON3 = true;
}
else if (readString.indexOf("L4=1") > 0)
{
LEDON4 = true;
}
else if(readString.indexOf("L1=0") > 0)
{
LEDON1 = false;
}
else if (readString.indexOf("L2=0") > 0)
{
LEDON2 = false;
}
else if (readString.indexOf("L3=0") > 0)
{
LEDON3 = false;
}
else if (readString.indexOf("L4=0") > 0)
{
LEDON4 = false;
}
//CRIA A PAGINA HTML
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
client.println("<html><head></head><body>");
client.println("<body bgcolor=#000000");//PODE MUDAR A COR DO FUNDO DA PAGINA
//TITUL0 LED 1
if (LEDON1) {
digitalWrite(ledPin1, HIGH);
//PRIMEIRO BOTÃO
client.println("<h4><a href='?L1=0'><input type=button value=sala </a>");
}
else {
digitalWrite(ledPin1, LOW );
client.println("<a href='?L1=1'><input type=button value=sala </a> ");
}
client.println("<br>______________________________<br>");
//TITULO LED2
client.println("<h1>Garagem</h1>");
if (LEDON2) {
digitalWrite(ledPin2, HIGH);
client.println("<h4><a href='?L2=0'>Desligar</a> Status: ON</h4>");
}
else {
digitalWrite(ledPin2, LOW);
client.println("<h4><a href='?L2=1'>Ligar</a> Status: OFF</h4>");
}
client.println("<br>______________________________<br>");
//TITULO LED 3
client.println("<h1>Cozinha</h1>");
if (LEDON3) {
digitalWrite(ledPin3, HIGH);
client.println("<h4><a href='?L3=0'>Desigar</a> Status: ON</h4>");
}
else {
digitalWrite(ledPin3, LOW );
client.println("<h4><a href='?L3=1'>Ligar</a> Status: OFF</h4>");
}
client.println("<br>______________________________<br>");
//TITULO LED 4
client.println("<h1>Banheiro inferior </h1>");
if (LEDON4) {
digitalWrite(ledPin4, HIGH);
client.println("<h4><a href='?L4=0'>Desligar</a> Status: ON</h4>");
}
else {
digitalWrite(ledPin4, LOW );
client.println("<h4><a href='?L4=1'>Ligar</a> Status: OFF</h4>");
}
client.println("<br>______________________________<br>");
client.println("</body></html>");
readString="";
client.stop();
}
}
}
}
char c = Serial.read();// ACIONA OS LEDES VIA BLUETOOTH
if (c == 'q')digitalWrite(9,HIGH);
if (c == 'a')digitalWrite(9,LOW);
if (c == 'w')digitalWrite(8,HIGH);
if (c == 's')digitalWrite(8,LOW);
if (c == 'e')digitalWrite(7,HIGH);
if (c == 'd')digitalWrite(7,LOW);
if (c == 'r')digitalWrite(6,HIGH);
if (c == 'f')digitalWrite(6,LOW);
if (c == 'i')digitalWrite(5,HIGH);
if (c == 'k')digitalWrite(5,LOW);
if (c == 'u')digitalWrite(4,HIGH);
if (c == 'j')digitalWrite(4,LOW);
if (c == 'y')digitalWrite(3,HIGH);
if (c == 'h')digitalWrite(3,LOW);
if (c == 't')digitalWrite(2,HIGH);
if (c == 'g')digitalWrite(2,LOW);
delay (500);
}
Respostas a este tópico
-
Permalink Responder até Carlos kwiek em
-
Argel,
Não sei se isso que se refere, mas veja uma forma de colocar lado a lado.
client.println("<a href=\"/?ledon\"\">Luz Sala 100%</a>/>");
client.println("<a href=\"/?ledoff\"\">Luz Sala 0%</a><br/>");Abs.
-
Permalink Responder até imhugo em
-
pesquise sobre CSS. Vc conseguirá forçar os elementos pra ficarem numa mesma linha inserindo-os dentro de uma DIV e estilizando essa DIV com style="display: inline-block;"
E pra aumentar o tamanho dos botões, também com estilização, através de definição de width e height dos butttons. Dá também pra usar padding pra aumentar o espaço compreendido entre a borda do botão e o texto contido no botão
Bem-vindo a
Laboratorio de Garagem (arduino, eletrônica, robotica, hacking)
© 2024 Criado por Marcelo Rodrigues.
Ativado por
