arduino, eletrônica, robotica...

Aumentar o tamanho da "fonte e botões" do servidor web

Boa tarde estou com problemas para aumentar o tamanho dos (botões e fonte) ajude-me abraço.

este é o sketch: onde inicia o HTML.

//Inicia página HTML
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
client.print("<HTML> ");
client.println("<BR><center></B></I></U></B></I></U></center>");
//=========================================================================================================================

client.print("<BR><BR>");

//Primeiro BOTAO
client.print("<center><button onclick=\"window.location.href='http://192.168.254.199/00001'\">\0</button> > Codigo: 00001 > ");
if(A2_estado)
{
client.print("<B><span style=\"color: #00ff00;\">");
client.print(A2_carga);
client.print(" - ON");
client.print("</span></B></center>");
}
else
{
client.print("<B><span style=\"color: #ff0000;\">");
client.print(A2_carga);
client.print(" - OFF");
client.print("</span></B></center>");
}
//=========================================================================================================================

//Segundo BOTAO
client.print("<center><button onclick=\"window.location.href='http://192.168.254.199/00010'\">\0</button> > Codigo: 00010 > ");
if(A3_estado)
{
client.print("<B><span style=\"color: #00ff00;\">");
client.print(A3_carga);
client.print(" - ON");
client.print("</span></B></center> ");
}
else
{
client.print("<B><span style=\"color: #ff0000;\">");
client.print(A3_carga);
client.print(" - OFF");
client.print("</span></B></center> ");
}

//==========================================================================================================================
//Terceiro BOTAO
client.print("<center><button onclick=\"window.location.href='http://192.168.254.199/00100'\">\0</button> > Codigo: 00100 > ");
if(A4_estado)
{
client.print("<B><span style=\"color: #00ff00;\">");
client.print(A4_carga);
client.print(" - ON");
client.print("</span></B></center> ");
}
else
{
client.print("<B><span style=\"color: #ff0000;\">");
client.print(A4_carga);
client.print(" - OFF");
client.print("</span></B></center> ");
}

//========================================================================================================================

//Quarto BOTAO
client.print("<center><button onclick=\"window.location.href='http://192.168.254.199/01000'\">\0</button> > Codigo: 01000 > ");
if(A5_estado)
{
client.print("<B><span style=\"color: #00ff00;\">");
client.print(A5_carga);
client.print(" - ON");
client.print("</span></B></center> ");
}
else
{
client.print("<B><span style=\"color: #ff0000;\">");
client.print(A5_carga);
client.print(" - OFF");
client.print("</span></B></center> ");
}

//=========================================================================================================================

//Quinto BOTAO
client.print("<center><button onclick=\"window.location.href='http://192.168.254.199/10000'\">\0</button> > Codigo: 10000 > ");
if(A6_estado)
{
client.print("<B><span style=\"color: #00ff00;\">");
client.print(A6_carga);
client.print(" - ON");
client.print("</span></B></center> ");
}
else
{
client.print("<B><span style=\"color: #ff0000;\">");
client.print(A6_carga);
client.print(" - OFF");
client.print("</span></B></center> ");
}

Curtir

0 membros curtem isto

Exibições: 2583

Anexos

Botoes_arduino.jpg, 145 KB

As respostas para este tópico estão encerradas.

Respostas a este tópico

Permalink Responder até Marcos Pedroso Sobrinho em 22 dezembro 2015 at 16:06

Olá JSM. experimenta colocar entre as tag <button>style='width:121;height:90'</button> ai voce pode controlar o tamanho do botao alterando o valor de width: e height:.

Permalink Responder até Jonathas da Silva Matos em 28 dezembro 2015 at 8:26

Bom dia Brother obrigado vc me ajudou muito falowows

Marcos Pedroso Sobrinho Valeu!

Permalink Responder até Manoel Pereira dos santos em 22 dezembro 2015 at 21:11

Pode ser feito usando css, exemplo:

<button style="font-size:20pt; padding:20px; width:auto; height:auto;">Lampada_Patio OFF</button>

Se colar a linha acima em um arquivo de texto com a extensão html e abrir no navegador, vai ver um botão enorme com letras grandes.

Explicando:

font-size = controla o tamanho da fonte

padding = controla o espaço entre o conteudo e as bordas

width = controla o tamanho do botao

height = controla a largura do botao

caso queira mudar cores da letra só usar a propriedade color, exemplo color:red; (cor da letra em vermelho) ou usa codigos RGB ou hexadecimal.

pode mudar a cor do botão com a propriedade background-color exemplo background-color: #00FF00; (vermelho em hexadecimal).

Dá para mudar fontes, enfim altera tudo, qualquer coisa dê uma pesquisada sobre Cascading Style Sheets (CSS) que vai conseguir editar muitas coisas e fazer uma interface top.

Permalink Responder até imhugo em 22 dezembro 2015 at 22:25