1<!DOCTYPE html>
2<html>
3<meta charset="UTF-8">
4<head>
5	<title>Controle   Arduino</title>
6	<link href="https://fonts.googleapis.com/css?family=Ropa+Sans"   rel="stylesheet">
7	<link rel="icon" href="http://www.arduino.cc/favicon.ico">
8	<link   rel="stylesheet" type="text/css" href="style.css">
9	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>	
10	<script>
11		//definindo   variaveis
12		var urlArduino = "http://192.168.0.105"; //trocar para o ip do   seu arduino
13		var urlConsulta = "";
14		var stringRele = "";
15
16		//atualiza   valores na pagina
17		function updateValues () {
18			//verifica se houve   clique nos "botoes" e prepara url
19			if (stringRele != "") {
20				urlConsulta   = (urlArduino + stringRele);
21			} else {
22				urlConsulta = urlArduino;
23			}
24			stringRele   = ""; //
25			
26			//faz a consulta, se houver link do rele atualiza   o estado dele no arduino qd chama o getJSON
27			$.getJSON(urlConsulta, function(json)   {
28				//atualiza valores
29				$('#temperatura').text((json.temperatura).toFixed(1));
30				$('#indice').text((json.indice).toFixed(1));
31				$('#umidade').text(json.umidade);
32				
33				//atualiza   botoes
34				Object.keys(json.reles).forEach(function(key) {
35					var   meuLink = "#r" + key;
36					if (json.reles[key] == 0) {
37						$(meuLink).removeClass("on").addClass("off");
38						$(meuLink).attr('value',0);
39					}   else {
40						$(meuLink).removeClass("off").addClass("on");
41						$(meuLink).attr('value',1);
42					}
43				})
44			});
45		}
46
47		//executa   qd entra na pagina
48		updateValues();
49		
50		//intervalor para chamar   a funo automaticamente a cada 2s
51		window.setInterval(function(){
52			updateValues();
53		},   2000);
54		
55		//funo para click em link dos reles descartando outros links
56		$(function(){
57			$("a").click(function(){
58				var   meuId = $(this).attr("id");
59				// verifica se o link tem um id
60				if   (typeof meuId !== typeof undefined && meuId !== false) {
61					// se tem   "r" no id do link  poque  um boto (nao colocar ids com "r" em outros links)
62					if   ((($(this).attr("id")).indexOf("r")) != -1) {         
63						//pega   o valor atual do boto e prepara o complemento com o inverso para a url de consulta
64						if   ($(this).attr("value") == 0) {
65							stringRele = ("?" + $(this).attr("id")   + "=1");
66						} else {
67							stringRele = ("?" + $(this).attr("id")   + "=0");
68						}
69						//realiza a consulta
70						updateValues(stringRele);
71					}
72				}
73			});
74		});
75	</script>	
76</head>
77<body>
78	<div>
79		<div   id="inicio">
80			<div class="logo"></div>
81			<div class="titulo"><h1>Controle   Arduino</h1></div>
82		</div>
83		<div>
84			<table>
85				<tr>
86					<th>Temperatura   (&deg;C)</th>
87					<th>ndice de Calor (&deg;C)</th>
88					<th>Umidade   (%)</th>
89				</tr>
90				<tr>
91					<td></td>
92					<td></td>
93				</tr>
94				<tr>
95					<td   id="temperatura"></td>
96					<td id="indice"></td>
97					<td id="umidade"></td>
98				</tr>
99			</table>
100		</div>
101		<div   id="buttons">
102			<a href="#" class="button off" id="r0" value="0">Rel   0</a>
103			<a href="#" class="button off" id="r1" value="0">Rel 1</a>
104			<a   href="#" class="button off" id="r2" value="0">Rel 2</a>
105			<a href="#"   class="button off" id="r3" value="0">Rel 3</a>
106		</div>
107	</div>
108	<div>
109		<p>&sup1;   Preciso do sensor <a href="https://www.mouser.com/ds/2/758/DHT11-Technical-Data-Sheet-Translated-Version-1143054.pdf"   target=_BLANK>DHT11</a> de +/-5% para umidade e +/-2 graus Celsius para temperatura.</p>
110	</div>
111</body>
112</html>

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
	<title>Controle   Arduino</title>
	<link href="https://fonts.googleapis.com/css?family=Ropa+Sans"   rel="stylesheet">
	<link rel="icon" href="http://www.arduino.cc/favicon.ico">
	<link   rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>	
	<script>
		//definindo   variaveis
		var urlArduino = "http://192.168.0.105"; //trocar para o ip do   seu arduino
		var urlConsulta = "";
		var stringRele = "";

		//atualiza   valores na pagina
		function updateValues () {
			//verifica se houve   clique nos "botoes" e prepara url
			if (stringRele != "") {
				urlConsulta   = (urlArduino + stringRele);
			} else {
				urlConsulta = urlArduino;
			}
			stringRele   = ""; //
			
			//faz a consulta, se houver link do rele atualiza   o estado dele no arduino qd chama o getJSON
			$.getJSON(urlConsulta, function(json)   {
				//atualiza valores
				$('#temperatura').text((json.temperatura).toFixed(1));
				$('#indice').text((json.indice).toFixed(1));
				$('#umidade').text(json.umidade);
				
				//atualiza   botoes
				Object.keys(json.reles).forEach(function(key) {
					var   meuLink = "#r" + key;
					if (json.reles[key] == 0) {
						$(meuLink).removeClass("on").addClass("off");
						$(meuLink).attr('value',0);
					}   else {
						$(meuLink).removeClass("off").addClass("on");
						$(meuLink).attr('value',1);
					}
				})
			});
		}

		//executa   qd entra na pagina
		updateValues();
		
		//intervalor para chamar   a funo automaticamente a cada 2s
		window.setInterval(function(){
			updateValues();
		},   2000);
		
		//funo para click em link dos reles descartando outros links
		$(function(){
			$("a").click(function(){
				var   meuId = $(this).attr("id");
				// verifica se o link tem um id
				if   (typeof meuId !== typeof undefined && meuId !== false) {
					// se tem   "r" no id do link  poque  um boto (nao colocar ids com "r" em outros links)
					if   ((($(this).attr("id")).indexOf("r")) != -1) {         
						//pega   o valor atual do boto e prepara o complemento com o inverso para a url de consulta
						if   ($(this).attr("value") == 0) {
							stringRele = ("?" + $(this).attr("id")   + "=1");
						} else {
							stringRele = ("?" + $(this).attr("id")   + "=0");
						}
						//realiza a consulta
						updateValues(stringRele);
					}
				}
			});
		});
	</script>	
</head>
<body>
	<div>
		<div   id="inicio">
			<div class="logo"></div>
			<div class="titulo"><h1>Controle   Arduino</h1></div>
		</div>
		<div>
			<table>
				<tr>
					<th>Temperatura   (&deg;C)</th>
					<th>ndice de Calor (&deg;C)</th>
					<th>Umidade   (%)</th>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td   id="temperatura"></td>
					<td id="indice"></td>
					<td id="umidade"></td>
				</tr>
			</table>
		</div>
		<div   id="buttons">
			<a href="#" class="button off" id="r0" value="0">Rel   0</a>
			<a href="#" class="button off" id="r1" value="0">Rel 1</a>
			<a   href="#" class="button off" id="r2" value="0">Rel 2</a>
			<a href="#"   class="button off" id="r3" value="0">Rel 3</a>
		</div>
	</div>
	<div>
		<p>&sup1;   Preciso do sensor <a href="https://www.mouser.com/ds/2/758/DHT11-Technical-Data-Sheet-Translated-Version-1143054.pdf"   target=_BLANK>DHT11</a> de +/-5% para umidade e +/-2 graus Celsius para temperatura.</p>
	</div>
</body>
</html>

Stylesheet

css

1body {
2	font-family: 'Ropa Sans', sans-serif;
3	margin: 0px;
4}
5h1  {
6	margin:0px;
7}		
8table {
9	width: 100%;
10	border-collapse: collapse;
11}
12th,  td {
13	font-size:3em;
14	text-align:center;
15	width:33%;
16}
17
18#inicio  {
19	margin: 0px 0px 10px 0px;
20	text-align: center;
21	background-color:  #00979d;
22	line-height: 120px;
23	height: 120px;
24	color: #ffffff;
25}
26.logo  {
27	background-image: url(https://content.arduino.cc/brand/arduino-white.svg),url(https://content.arduino.cc/brand/arduino_compressed-white.svg);
28	background-position:  30px 10px,30px 120px;
29	background-repeat: no-repeat,no-repeat;
30	background-size:  134px 100px,58px 32px;
31	box-sizing: content-box;
32	display: block;
33	height:  100px;
34	float:left;
35	padding: 10px 30px;
36	position: relative;
37	width:  134px;
38}
39.titulo {
40	float:left;
41	width: 80%;
42	text-align:center;
43}
44
45#buttons  {
46	text-align:center;
47}
48
49.button {
50	color:#ffffff;
51	font-size:3em;
52	height:120px;
53	line-height:120px;
54	text-decoration:  none;
55	padding: 18px 8px 18px 8px;
56	border-top: 1px solid #CCCCCC;
57	border-right:  1px solid #333333;
58	border-bottom: 1px solid #333333;
59	border-left: 1px  solid #CCCCCC;			
60}
61.on {
62	background-color: #00979d;
63}
64.off  {
65	background-color: #e67e22;
66}

body {
	font-family: 'Ropa Sans', sans-serif;
	margin: 0px;
}
h1  {
	margin:0px;
}		
table {
	width: 100%;
	border-collapse: collapse;
}
th,  td {
	font-size:3em;
	text-align:center;
	width:33%;
}

#inicio  {
	margin: 0px 0px 10px 0px;
	text-align: center;
	background-color:  #00979d;
	line-height: 120px;
	height: 120px;
	color: #ffffff;
}
.logo  {
	background-image: url(https://content.arduino.cc/brand/arduino-white.svg),url(https://content.arduino.cc/brand/arduino_compressed-white.svg);
	background-position:  30px 10px,30px 120px;
	background-repeat: no-repeat,no-repeat;
	background-size:  134px 100px,58px 32px;
	box-sizing: content-box;
	display: block;
	height:  100px;
	float:left;
	padding: 10px 30px;
	position: relative;
	width:  134px;
}
.titulo {
	float:left;
	width: 80%;
	text-align:center;
}

#buttons  {
	text-align:center;
}

.button {
	color:#ffffff;
	font-size:3em;
	height:120px;
	line-height:120px;
	text-decoration:  none;
	padding: 18px 8px 18px 8px;
	border-top: 1px solid #CCCCCC;
	border-right:  1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px  solid #CCCCCC;			
}
.on {
	background-color: #00979d;
}
.off  {
	background-color: #e67e22;
}

Main Code

arduino

1// NAO USAR PINOS 10, 11, 12 e 13 - utilizados pelo ETHERNET
2// DESLIGAR  SD: pin 4 output high. W500: pin 10 output.
3// W5100 problema do restart: colocar  um capacitor de 47nF entreo o RESET e o GND
4
5#include <DHT.h>
6#include  <LiquidCrystal_I2C.h> // biblioteca by Frank Brabander 1.1.2 https://github.com/johnrickman/LiquidCrystal_I2C
7#include  <SPI.h>
8#include <Ethernet.h>
9
10float umidade;
11float temperatura;
12float  indice;
13
14bool opcaoDisplay = true; //variavel para alternar no LCD entre sensores  e estado dos reles
15int botaoAlterna = 9;
16
17//variaveis para controlar debounce  do pushbutton e taxa de atualizacoes
18unsigned long tempoAnterior = 0;
19unsigned  long debounceDelay = 350;
20unsigned long tempoLCD = 0;
21unsigned long delayLCD  = 2000;
22
23String dados;
24int reles[4] = { 5, 6, 7, 8 };
25
26byte mac[]  = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
27IPAddress ip(192, 168, 0, 105);
28IPAddress  gateway(192, 168, 0, 1);
29IPAddress subnet(255, 255, 255, 0);
30EthernetServer  server(80);
31
32DHT dht(2, DHT11);
33LiquidCrystal_I2C lcd(0x27, 20, 4); //  seta endereco LCD para 0x27 com DISPLAY de 16 char e 2 linhas
34
35String HTTP_req;  // armazena requisicao HTTP
36
37void setup() {
38
39	Serial.begin(9600);
40
41	//desligando  modulo SD do W5100
42	pinMode(4, OUTPUT);
43	digitalWrite(4, HIGH);
44
45	//iniciando  servidor
46	Ethernet.begin(mac, ip, gateway, subnet);
47	server.begin();
48
49	//iniciando  sensor DHT11
50	dht.begin();
51
52	//iniciando LCD
53	lcd.init();
54	lcd.setBacklight(HIGH);
55
56	pinMode(botaoAlterna,  INPUT);
57
58	//definindo e iniciando os reles
59	for (int i = 0; i < 4; i++)  {
60		pinMode(reles[i], OUTPUT);
61		digitalWrite(reles[i], HIGH);
62	}
63}
64
65void  loop() {
66
67	//atualizando dados e estado dos reles
68	if (millis() > (tempoLCD  + delayLCD)) { // so atualiza se "chegou a hora"
69		tempoLCD = millis();
70		atualizaDados();
71		escreveLCD();
72	}
73
74	//altera  entre leitura local e da internet
75	if ((digitalRead(botaoAlterna) == HIGH)
76			&&  (millis() > (tempoAnterior + debounceDelay))) { // controlando debounce
77		tempoAnterior  = millis();
78		if (opcaoDisplay) {
79			opcaoDisplay = false;
80			lcd.clear();
81		}  else {
82			opcaoDisplay = true;
83		}
84		//atualizaDados();
85		escreveLCD();
86	}
87
88	//Aguarda  conexao do browser
89	EthernetClient client = server.available();
90	if (client)  {
91		Serial.println("new client");
92		// requisicao http termina com linha  em branco
93		boolean currentLineIsBlank = true;
94		while (client.connected())  {
95			/*if (millis() > (tempoRequisicao + delayRequisicao)) {
96			 tempoRequisicao  = millis();
97			 }*/
98			if (client.available()) {
99				char c =  client.read();
100				HTTP_req += c;
101				// if you've gotten to the end  of the line (received a newline
102				// character) and the line is blank,  the http request has ended,
103				// so you can send a reply
104				if  (c == '\n' && currentLineIsBlank) {
105					// enviando header JSON
106					client.println("HTTP/1.1  200 OK");
107					//client.println("Content-Type: text/html"); // header  de retorno padro
108					client.println("Content-Type: application/json");  // header para JSON
109					client.println("Access-Control-Allow-Origin: http://192.168.0.100");  //permitir acesso do jquery do servidor
110					client.println("Connection:  close");
111					client.println();
112					processaReles();
113					client.print(dados);
114					Serial.print(HTTP_req);
115					HTTP_req  = "";    // requisicao completa, esvaziando string
116					break;
117				}
118				if  (c == '\n') {
119					// you're starting a new line
120					currentLineIsBlank  = true;
121				} else if (c != '\r') {
122					// you've gotten a character  on the current line
123					currentLineIsBlank = false;
124				}
125			}
126		}
127		//  delay pro browser receber os dados
128		delay(1);
129		// termina a conexao
130		client.stop();
131	}
132	delay(1);
133}
134
135//atualiza  dados no programa e prepara JSON
136void atualizaDados() {
137	umidade = dht.readHumidity();
138	temperatura  = dht.readTemperature();
139	indice = (dht.computeHeatIndex(dht.readTemperature(),dht.readHumidity(),  false));
140	dados = ("{\\"temperatura\\":" + String(temperatura) + ",\\"umidade\\":"  + String(umidade) + ",\\"indice\\":" + String(indice) + ",\\"reles\\":{");
141	dados  = dados + "\\"0\\":" + !digitalRead(reles[0]);
142	dados = dados + ",\\"1\\":"  + !digitalRead(reles[1]);
143	dados = dados + ",\\"2\\":" + !digitalRead(reles[2]);
144	dados  = dados + ",\\"3\\":" + !digitalRead(reles[3]) + "}}";
145}
146
147// mostra  dados do sensor ou estado dos rels
148void escreveLCD() {
149	if (opcaoDisplay)  {
150		lcd.setCursor(0, 0);
151		lcd.print("T ");
152		lcd.print(temperatura,  1);
153		lcd.write(byte(223));
154		lcd.print("C ");
155		lcd.write(byte(165));
156		lcd.print("  U ");
157		lcd.print(round(umidade));
158		lcd.print("%");
159		lcd.setCursor(0,  1);
160		lcd.print("I ");
161		lcd.print(indice, 1);
162		lcd.write(byte(223));
163		lcd.print("C  ");
164		lcd.write(byte(165));
165		lcd.print(" DHT11");
166	} else {
167		lcd.setCursor(0,  0);
168		lcd.print("R0 ");
169		if (digitalRead(reles[0]) == LOW) {
170			lcd.print("ON  ");
171		} else {
172			lcd.print("OFF ");
173		}
174		lcd.write(byte(165));
175		lcd.print("  R1 ");
176		if (digitalRead(reles[1]) == LOW) {
177			lcd.print("ON  ");
178		}  else {
179			lcd.print("OFF ");
180		}
181		lcd.setCursor(0, 1);
182		lcd.print("R2  ");
183		if (digitalRead(reles[2]) == LOW) {
184			lcd.print("ON  ");
185		}  else {
186			lcd.print("OFF ");
187		}
188		lcd.write(byte(165));
189		lcd.print("  R3 ");
190		if (digitalRead(reles[3]) == LOW) {
191			lcd.print("ON  ");
192		}  else {
193			lcd.print("OFF ");
194		}
195	}
196}
197
198//requisicao de  alteracao de rele
199void processaReles() {
200	if (HTTP_req.indexOf("r") > -1)  {
201		//tem pedido de rele pegando o numero dele
202		int posicaoRele = (HTTP_req.indexOf("r")  + 1);
203		int numeroRele = ((int)(HTTP_req.charAt(posicaoRele))) - 48;
204		//pegando  solicitacao
205		int posicaoAcao = (HTTP_req.indexOf("r") + 3);
206		int numeroAcao  = ((int)(HTTP_req.charAt(posicaoAcao))) - 48;
207		//se for valor valido modifica  rele
208		if ((numeroRele >= 0 && numeroRele <= 3) && (numeroAcao >= 0 && numeroAcao  <= 1)) {
209			digitalWrite(reles[numeroRele], !numeroAcao);
210			//atualiza  antes de enviar
211			atualizaDados();
212		}
213	}
214}
215

// NAO USAR PINOS 10, 11, 12 e 13 - utilizados pelo ETHERNET
// DESLIGAR  SD: pin 4 output high. W500: pin 10 output.
// W5100 problema do restart: colocar  um capacitor de 47nF entreo o RESET e o GND

#include <DHT.h>
#include  <LiquidCrystal_I2C.h> // biblioteca by Frank Brabander 1.1.2 https://github.com/johnrickman/LiquidCrystal_I2C
#include  <SPI.h>
#include <Ethernet.h>

float umidade;
float temperatura;
float  indice;

bool opcaoDisplay = true; //variavel para alternar no LCD entre sensores  e estado dos reles
int botaoAlterna = 9;

//variaveis para controlar debounce  do pushbutton e taxa de atualizacoes
unsigned long tempoAnterior = 0;
unsigned  long debounceDelay = 350;
unsigned long tempoLCD = 0;
unsigned long delayLCD  = 2000;

String dados;
int reles[4] = { 5, 6, 7, 8 };

byte mac[]  = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 0, 105);
IPAddress  gateway(192, 168, 0, 1);
IPAddress subnet(255, 255, 255, 0);
EthernetServer  server(80);

DHT dht(2, DHT11);
LiquidCrystal_I2C lcd(0x27, 20, 4); //  seta endereco LCD para 0x27 com DISPLAY de 16 char e 2 linhas

String HTTP_req;  // armazena requisicao HTTP

void setup() {

	Serial.begin(9600);

	//desligando  modulo SD do W5100
	pinMode(4, OUTPUT);
	digitalWrite(4, HIGH);

	//iniciando  servidor
	Ethernet.begin(mac, ip, gateway, subnet);
	server.begin();

	//iniciando  sensor DHT11
	dht.begin();

	//iniciando LCD
	lcd.init();
	lcd.setBacklight(HIGH);

	pinMode(botaoAlterna,  INPUT);

	//definindo e iniciando os reles
	for (int i = 0; i < 4; i++)  {
		pinMode(reles[i], OUTPUT);
		digitalWrite(reles[i], HIGH);
	}
}

void  loop() {

	//atualizando dados e estado dos reles
	if (millis() > (tempoLCD  + delayLCD)) { // so atualiza se "chegou a hora"
		tempoLCD = millis();
		atualizaDados();
		escreveLCD();
	}

	//altera  entre leitura local e da internet
	if ((digitalRead(botaoAlterna) == HIGH)
			&&  (millis() > (tempoAnterior + debounceDelay))) { // controlando debounce
		tempoAnterior  = millis();
		if (opcaoDisplay) {
			opcaoDisplay = false;
			lcd.clear();
		}  else {
			opcaoDisplay = true;
		}
		//atualizaDados();
		escreveLCD();
	}

	//Aguarda  conexao do browser
	EthernetClient client = server.available();
	if (client)  {
		Serial.println("new client");
		// requisicao http termina com linha  em branco
		boolean currentLineIsBlank = true;
		while (client.connected())  {
			/*if (millis() > (tempoRequisicao + delayRequisicao)) {
			 tempoRequisicao  = millis();
			 }*/
			if (client.available()) {
				char c =  client.read();
				HTTP_req += c;
				// if you've gotten to the end  of the line (received a newline
				// character) and the line is blank,  the http request has ended,
				// so you can send a reply
				if  (c == '\n' && currentLineIsBlank) {
					// enviando header JSON
					client.println("HTTP/1.1  200 OK");
					//client.println("Content-Type: text/html"); // header  de retorno padro
					client.println("Content-Type: application/json");  // header para JSON
					client.println("Access-Control-Allow-Origin: http://192.168.0.100");  //permitir acesso do jquery do servidor
					client.println("Connection:  close");
					client.println();
					processaReles();
					client.print(dados);
					Serial.print(HTTP_req);
					HTTP_req  = "";    // requisicao completa, esvaziando string
					break;
				}
				if  (c == '\n') {
					// you're starting a new line
					currentLineIsBlank  = true;
				} else if (c != '\r') {
					// you've gotten a character  on the current line
					currentLineIsBlank = false;
				}
			}
		}
		//  delay pro browser receber os dados
		delay(1);
		// termina a conexao
		client.stop();
	}
	delay(1);
}

//atualiza  dados no programa e prepara JSON
void atualizaDados() {
	umidade = dht.readHumidity();
	temperatura  = dht.readTemperature();
	indice = (dht.computeHeatIndex(dht.readTemperature(),dht.readHumidity(),  false));
	dados = ("{\\"temperatura\\":" + String(temperatura) + ",\\"umidade\\":"  + String(umidade) + ",\\"indice\\":" + String(indice) + ",\\"reles\\":{");
	dados  = dados + "\\"0\\":" + !digitalRead(reles[0]);
	dados = dados + ",\\"1\\":"  + !digitalRead(reles[1]);
	dados = dados + ",\\"2\\":" + !digitalRead(reles[2]);
	dados  = dados + ",\\"3\\":" + !digitalRead(reles[3]) + "}}";
}

// mostra  dados do sensor ou estado dos rels
void escreveLCD() {
	if (opcaoDisplay)  {
		lcd.setCursor(0, 0);
		lcd.print("T ");
		lcd.print(temperatura,  1);
		lcd.write(byte(223));
		lcd.print("C ");
		lcd.write(byte(165));
		lcd.print("  U ");
		lcd.print(round(umidade));
		lcd.print("%");
		lcd.setCursor(0,  1);
		lcd.print("I ");
		lcd.print(indice, 1);
		lcd.write(byte(223));
		lcd.print("C  ");
		lcd.write(byte(165));
		lcd.print(" DHT11");
	} else {
		lcd.setCursor(0,  0);
		lcd.print("R0 ");
		if (digitalRead(reles[0]) == LOW) {
			lcd.print("ON  ");
		} else {
			lcd.print("OFF ");
		}
		lcd.write(byte(165));
		lcd.print("  R1 ");
		if (digitalRead(reles[1]) == LOW) {
			lcd.print("ON  ");
		}  else {
			lcd.print("OFF ");
		}
		lcd.setCursor(0, 1);
		lcd.print("R2  ");
		if (digitalRead(reles[2]) == LOW) {
			lcd.print("ON  ");
		}  else {
			lcd.print("OFF ");
		}
		lcd.write(byte(165));
		lcd.print("  R3 ");
		if (digitalRead(reles[3]) == LOW) {
			lcd.print("ON  ");
		}  else {
			lcd.print("OFF ");
		}
	}
}

//requisicao de  alteracao de rele
void processaReles() {
	if (HTTP_req.indexOf("r") > -1)  {
		//tem pedido de rele pegando o numero dele
		int posicaoRele = (HTTP_req.indexOf("r")  + 1);
		int numeroRele = ((int)(HTTP_req.charAt(posicaoRele))) - 48;
		//pegando  solicitacao
		int posicaoAcao = (HTTP_req.indexOf("r") + 3);
		int numeroAcao  = ((int)(HTTP_req.charAt(posicaoAcao))) - 48;
		//se for valor valido modifica  rele
		if ((numeroRele >= 0 && numeroRele <= 3) && (numeroAcao >= 0 && numeroAcao  <= 1)) {
			digitalWrite(reles[numeroRele], !numeroAcao);
			//atualiza  antes de enviar
			atualizaDados();
		}
	}
}

Main HTML

html

1<!DOCTYPE html>
2<html>
3<meta charset="UTF-8">
4<head>
5	<title>Controle  Arduino</title>
6	<link href="https://fonts.googleapis.com/css?family=Ropa+Sans"  rel="stylesheet">
7	<link rel="icon" href="http://www.arduino.cc/favicon.ico">
8	<link  rel="stylesheet" type="text/css" href="style.css">
9	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>	
10	<script>
11		//definindo  variaveis
12		var urlArduino = "http://192.168.0.105"; //trocar para o ip do  seu arduino
13		var urlConsulta = "";
14		var stringRele = "";
15
16		//atualiza  valores na pagina
17		function updateValues () {
18			//verifica se houve  clique nos "botoes" e prepara url
19			if (stringRele != "") {
20				urlConsulta  = (urlArduino + stringRele);
21			} else {
22				urlConsulta = urlArduino;
23			}
24			stringRele  = ""; //
25			
26			//faz a consulta, se houver link do rele atualiza  o estado dele no arduino qd chama o getJSON
27			$.getJSON(urlConsulta, function(json)  {
28				//atualiza valores
29				$('#temperatura').text((json.temperatura).toFixed(1));
30				$('#indice').text((json.indice).toFixed(1));
31				$('#umidade').text(json.umidade);
32				
33				//atualiza  botoes
34				Object.keys(json.reles).forEach(function(key) {
35					var  meuLink = "#r" + key;
36					if (json.reles[key] == 0) {
37						$(meuLink).removeClass("on").addClass("off");
38						$(meuLink).attr('value',0);
39					}  else {
40						$(meuLink).removeClass("off").addClass("on");
41						$(meuLink).attr('value',1);
42					}
43				})
44			});
45		}
46
47		//executa  qd entra na pagina
48		updateValues();
49		
50		//intervalor para chamar  a funo automaticamente a cada 2s
51		window.setInterval(function(){
52			updateValues();
53		},  2000);
54		
55		//funo para click em link dos reles descartando outros links
56		$(function(){
57			$("a").click(function(){
58				var  meuId = $(this).attr("id");
59				// verifica se o link tem um id
60				if  (typeof meuId !== typeof undefined && meuId !== false) {
61					// se tem  "r" no id do link  poque  um boto (nao colocar ids com "r" em outros links)
62					if  ((($(this).attr("id")).indexOf("r")) != -1) {         
63						//pega  o valor atual do boto e prepara o complemento com o inverso para a url de consulta
64						if  ($(this).attr("value") == 0) {
65							stringRele = ("?" + $(this).attr("id")  + "=1");
66						} else {
67							stringRele = ("?" + $(this).attr("id")  + "=0");
68						}
69						//realiza a consulta
70						updateValues(stringRele);
71					}
72				}
73			});
74		});
75	</script>	
76</head>
77<body>
78	<div>
79		<div  id="inicio">
80			<div class="logo"></div>
81			<div class="titulo"><h1>Controle  Arduino</h1></div>
82		</div>
83		<div>
84			<table>
85				<tr>
86					<th>Temperatura  (&deg;C)</th>
87					<th>ndice de Calor (&deg;C)</th>
88					<th>Umidade  (%)</th>
89				</tr>
90				<tr>
91					<td></td>
92					<td></td>
93				</tr>
94				<tr>
95					<td  id="temperatura"></td>
96					<td id="indice"></td>
97					<td id="umidade"></td>
98				</tr>
99			</table>
100		</div>
101		<div  id="buttons">
102			<a href="#" class="button off" id="r0" value="0">Rel  0</a>
103			<a href="#" class="button off" id="r1" value="0">Rel 1</a>
104			<a  href="#" class="button off" id="r2" value="0">Rel 2</a>
105			<a href="#"  class="button off" id="r3" value="0">Rel 3</a>
106		</div>
107	</div>
108	<div>
109		<p>&sup1;  Preciso do sensor <a href="https://www.mouser.com/ds/2/758/DHT11-Technical-Data-Sheet-Translated-Version-1143054.pdf"  target=_BLANK>DHT11</a> de +/-5% para umidade e +/-2 graus Celsius para temperatura.</p>
110	</div>
111</body>
112</html>

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
	<title>Controle  Arduino</title>
	<link href="https://fonts.googleapis.com/css?family=Ropa+Sans"  rel="stylesheet">
	<link rel="icon" href="http://www.arduino.cc/favicon.ico">
	<link  rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>	
	<script>
		//definindo  variaveis
		var urlArduino = "http://192.168.0.105"; //trocar para o ip do  seu arduino
		var urlConsulta = "";
		var stringRele = "";

		//atualiza  valores na pagina
		function updateValues () {
			//verifica se houve  clique nos "botoes" e prepara url
			if (stringRele != "") {
				urlConsulta  = (urlArduino + stringRele);
			} else {
				urlConsulta = urlArduino;
			}
			stringRele  = ""; //
			
			//faz a consulta, se houver link do rele atualiza  o estado dele no arduino qd chama o getJSON
			$.getJSON(urlConsulta, function(json)  {
				//atualiza valores
				$('#temperatura').text((json.temperatura).toFixed(1));
				$('#indice').text((json.indice).toFixed(1));
				$('#umidade').text(json.umidade);
				
				//atualiza  botoes
				Object.keys(json.reles).forEach(function(key) {
					var  meuLink = "#r" + key;
					if (json.reles[key] == 0) {
						$(meuLink).removeClass("on").addClass("off");
						$(meuLink).attr('value',0);
					}  else {
						$(meuLink).removeClass("off").addClass("on");
						$(meuLink).attr('value',1);
					}
				})
			});
		}

		//executa  qd entra na pagina
		updateValues();
		
		//intervalor para chamar  a funo automaticamente a cada 2s
		window.setInterval(function(){
			updateValues();
		},  2000);
		
		//funo para click em link dos reles descartando outros links
		$(function(){
			$("a").click(function(){
				var  meuId = $(this).attr("id");
				// verifica se o link tem um id
				if  (typeof meuId !== typeof undefined && meuId !== false) {
					// se tem  "r" no id do link  poque  um boto (nao colocar ids com "r" em outros links)
					if  ((($(this).attr("id")).indexOf("r")) != -1) {         
						//pega  o valor atual do boto e prepara o complemento com o inverso para a url de consulta
						if  ($(this).attr("value") == 0) {
							stringRele = ("?" + $(this).attr("id")  + "=1");
						} else {
							stringRele = ("?" + $(this).attr("id")  + "=0");
						}
						//realiza a consulta
						updateValues(stringRele);
					}
				}
			});
		});
	</script>	
</head>
<body>
	<div>
		<div  id="inicio">
			<div class="logo"></div>
			<div class="titulo"><h1>Controle  Arduino</h1></div>
		</div>
		<div>
			<table>
				<tr>
					<th>Temperatura  (&deg;C)</th>
					<th>ndice de Calor (&deg;C)</th>
					<th>Umidade  (%)</th>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td  id="temperatura"></td>
					<td id="indice"></td>
					<td id="umidade"></td>
				</tr>
			</table>
		</div>
		<div  id="buttons">
			<a href="#" class="button off" id="r0" value="0">Rel  0</a>
			<a href="#" class="button off" id="r1" value="0">Rel 1</a>
			<a  href="#" class="button off" id="r2" value="0">Rel 2</a>
			<a href="#"  class="button off" id="r3" value="0">Rel 3</a>
		</div>
	</div>
	<div>
		<p>&sup1;  Preciso do sensor <a href="https://www.mouser.com/ds/2/758/DHT11-Technical-Data-Sheet-Translated-Version-1143054.pdf"  target=_BLANK>DHT11</a> de +/-5% para umidade e +/-2 graus Celsius para temperatura.</p>
	</div>
</body>
</html>

Stylesheet

css

1body {
2	font-family: 'Ropa Sans', sans-serif;
3	margin: 0px;
4}
5h1
6  {
7	margin:0px;
8}		
9table {
10	width: 100%;
11	border-collapse: collapse;
12}
13th,
14  td {
15	font-size:3em;
16	text-align:center;
17	width:33%;
18}
19
20#inicio
21  {
22	margin: 0px 0px 10px 0px;
23	text-align: center;
24	background-color:
25  #00979d;
26	line-height: 120px;
27	height: 120px;
28	color: #ffffff;
29}
30.logo
31  {
32	background-image: url(https://content.arduino.cc/brand/arduino-white.svg),url(https://content.arduino.cc/brand/arduino_compressed-white.svg);
33	background-position:
34  30px 10px,30px 120px;
35	background-repeat: no-repeat,no-repeat;
36	background-size:
37  134px 100px,58px 32px;
38	box-sizing: content-box;
39	display: block;
40	height:
41  100px;
42	float:left;
43	padding: 10px 30px;
44	position: relative;
45	width:
46  134px;
47}
48.titulo {
49	float:left;
50	width: 80%;
51	text-align:center;
52}
53
54#buttons
55  {
56	text-align:center;
57}
58
59.button {
60	color:#ffffff;
61	font-size:3em;
62	height:120px;
63	line-height:120px;
64	text-decoration:
65  none;
66	padding: 18px 8px 18px 8px;
67	border-top: 1px solid #CCCCCC;
68	border-right:
69  1px solid #333333;
70	border-bottom: 1px solid #333333;
71	border-left: 1px
72  solid #CCCCCC;			
73}
74.on {
75	background-color: #00979d;
76}
77.off
78  {
79	background-color: #e67e22;
80}

body {
	font-family: 'Ropa Sans', sans-serif;
	margin: 0px;
}
h1
  {
	margin:0px;
}		
table {
	width: 100%;
	border-collapse: collapse;
}
th,
  td {
	font-size:3em;
	text-align:center;
	width:33%;
}

#inicio
  {
	margin: 0px 0px 10px 0px;
	text-align: center;
	background-color:
  #00979d;
	line-height: 120px;
	height: 120px;
	color: #ffffff;
}
.logo
  {
	background-image: url(https://content.arduino.cc/brand/arduino-white.svg),url(https://content.arduino.cc/brand/arduino_compressed-white.svg);
	background-position:
  30px 10px,30px 120px;
	background-repeat: no-repeat,no-repeat;
	background-size:
  134px 100px,58px 32px;
	box-sizing: content-box;
	display: block;
	height:
  100px;
	float:left;
	padding: 10px 30px;
	position: relative;
	width:
  134px;
}
.titulo {
	float:left;
	width: 80%;
	text-align:center;
}

#buttons
  {
	text-align:center;
}

.button {
	color:#ffffff;
	font-size:3em;
	height:120px;
	line-height:120px;
	text-decoration:
  none;
	padding: 18px 8px 18px 8px;
	border-top: 1px solid #CCCCCC;
	border-right:
  1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px
  solid #CCCCCC;			
}
.on {
	background-color: #00979d;
}
.off
  {
	background-color: #e67e22;
}

Downloadable files

http://fritzing.org/projects/metonline

Comments

Only logged in users can leave comments

RDCAMPOS

0 Followers

•

0 Projects

Intro