Não caro leitor, por incrível que pareça o título desse post e a imagem acima tem tudo a ver. Você que tem menos que 25 provavelmente não vai lembrar desse desenho animado que retratava uma família futurística cercada de invenções tecnológicas.
Segue um vídeo
É claro que muitas dessas tecnologias poderão nem existir, mas muitas delas podem ser facilmente criadas hoje utilizando programação, placas eletrônicas (Arduíno, Raspberry, Rumba). interfaces, (HTML, Android), componentes eletrônicos e elétricos.
Pois vem vamos lá, irei demonstrar aqui um dos projetos que foi desenvolvido no Mundo Senai Xanxerê, evento este que tem como finalidade demonstrar aos alunos oque se pode fazer com as mais variadas áreas do conhecimento.
A ideia
A ideia era automatizar uma sala de aula, iluminação, ventiladores, cortina, som.
Componentes utilizados
Arduino Mega
Relés
Como controlar a sala
Decidimos montar uma aplicação utilizando HTML, JavaScript e AJAX, dessa maneira se vários celulares ou tablets estivessem conectados, todos iriam receber o estado da iluminação,som (ligado, desligado), cortinas (abertas,fechadas),
A página do usuário
Compre um curso agora e aprenda a montar seu projetos com Arduino.
A página HTML (deve ser gravada no Sd Card e inserida no slot do shield ethernet)
<!DOCTYPE html> <html> <head> <title>Automação Residencial</title> <script> strLED1 = ""; strLED2 = ""; strLED3 = ""; strLED4 = ""; strLED5 = ""; strLED6 = ""; strLED7 = ""; strLED8 = ""; strLED9 = ""; strbarra1 = ""; strbarra2 = ""; strbarra3 = ""; strbarra4 = ""; strbarra5 = ""; strventiladores = ""; strdata = ""; strLED31 = ""; strLED33 = ""; strLED35 = ""; strLED37 = ""; strLED39 = ""; var LED2_state = 0; var LED3_state = 0; var LED4_state = 0; var LED5_state = 0; var LED6_state = 0; var LED7_state = 0; var LED8_state = 0; var LED9_state = 0; var barra1_state = 0; var barra2_state = 0; var barra3_state = 0; var barra4_state = 0; var barra5_state = 0; var ventiladores_state = 0; var LED31_state = 0; var LED33_state = 0; var LED35_state = 0; var LED37_state = 0; var LED39_state = 0; setTimeout(function(){ alert("Atualiza a página"); }, 480000); function GetArduinoIO() { nocache = "&nocache=" + Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseXML != null) { // XML file received - contains analog values, switch values and LED states var count; // get analog inputs var num_an = this.responseXML.getElementsByTagName('analog').length; for (count = 0; count < num_an; count++) { document.getElementsByClassName("analog")[count].innerHTML = this.responseXML.getElementsByTagName('analog')[count].childNodes[0].nodeValue; } // get switch inputs var num_an = this.responseXML.getElementsByTagName('switch').length; for (count = 0; count < num_an; count++) { document.getElementsByClassName("switches")[count].innerHTML = this.responseXML.getElementsByTagName('switch')[count].childNodes[0].nodeValue; } // LED 1 //if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "checked") { // document.LED_form.LED1.checked = true; //} //else { // document.LED_form.LED1.checked = false; //} // LED 2 if (this.responseXML.getElementsByTagName('LED2')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED2").innerHTML = "Desligar fluorescentes 1 (D2)"; } else { document.getElementById("LED2").innerHTML = "Ligar fluorescentes 1 (D2)"; } // LED 3 if (this.responseXML.getElementsByTagName('LED3')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED3").innerHTML = "Desligar fluorescentes 2 (D3)"; LED3_state = 1; } else { document.getElementById("LED3").innerHTML = "Ligar fluorescentes 2 (D3)"; LED3_state = 0; } // LED 5 if (this.responseXML.getElementsByTagName('LED5')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED5").innerHTML = "Desligar fluorescentes 3 (D5)"; LED5_state = 1; } else { document.getElementById("LED5").innerHTML = "Ligar fluorescentes 3 (D5)"; LED5_state = 0; } // LED 6 if (this.responseXML.getElementsByTagName('LED6')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED6").innerHTML = "Desligar fluorescentes 4 (D6)"; LED6_state = 1; } else { document.getElementById("LED6").innerHTML = "Ligar fluorescentes 4 (D6)"; LED6_state = 0; } // LED 7 if (this.responseXML.getElementsByTagName('LED7')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED7").innerHTML = "Desligar som (D7)"; LED7_state = 1; } else { document.getElementById("LED7").innerHTML = "Ligar som (D7)"; LED7_state = 0; } // LED 8 //if (this.responseXML.getElementsByTagName('LED8')[0].childNodes[0].nodeValue === "on") { // document.getElementById("LED8").innerHTML = "Fechar cortina (D8)/(D9)"; // LED8_state = 1; //} //else { // document.getElementById("LED8").innerHTML = "Abrir cortina (D8)/(D9)"; // LED8_state = 0; //} // barra1 //document.getElementById("b1").value = this.responseXML.getElementsByTagName('b1')[0].childNodes[0].nodeValue; //document.getElementById("b2").value = this.responseXML.getElementsByTagName('b2')[0].childNodes[0].nodeValue; //document.getElementById("b3").value = this.responseXML.getElementsByTagName('b3')[0].childNodes[0].nodeValue; //document.getElementById("b4").value = this.responseXML.getElementsByTagName('b4')[0].childNodes[0].nodeValue; //document.getElementById("b5").value = this.responseXML.getElementsByTagName('b5')[0].childNodes[0].nodeValue; // LED 22 if (this.responseXML.getElementsByTagName('LED22')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED22").innerHTML = "Desligar ventiladores (D22)"; ventiladores_state = 1; } else { document.getElementById("LED22").innerHTML = "Ligar ventiladores (D22)"; ventiladores_state = 0; } // LED 31 if (this.responseXML.getElementsByTagName('LED31')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED31").innerHTML = "Desligar incadescentes 1 "; LED31_state = 1; } else { document.getElementById("LED31").innerHTML = "Ligar incadescentes 1 "; LED31_state = 0; } // LED 33 if (this.responseXML.getElementsByTagName('LED33')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED33").innerHTML = "Desligar incadescentes 2 "; LED33_state = 1; } else { document.getElementById("LED33").innerHTML = "Ligar incadescentes 2 "; LED33_state = 0; } // LED 35 if (this.responseXML.getElementsByTagName('LED35')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED35").innerHTML = "Desligar incadescentes 3 "; LED35_state = 1; } else { document.getElementById("LED35").innerHTML = "Ligar incadescentes 3 "; LED35_state = 0; } // LED 37 if (this.responseXML.getElementsByTagName('LED37')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED37").innerHTML = "Desligar incadescentes 4 "; LED37_state = 1; } else { document.getElementById("LED37").innerHTML = "Ligar incadescentes 4 "; LED37_state = 0; } // LED 39 if (this.responseXML.getElementsByTagName('LED39')[0].childNodes[0].nodeValue === "on") { document.getElementById("LED39").innerHTML = "Desligar incadescentes 5 "; LED39_state = 1; } else { document.getElementById("LED39").innerHTML = "Ligar incadescentes 5 "; LED39_state = 0; } } } } } // send HTTP GET request with LEDs to switch on/off if any request.open("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + strLED4 + strLED5 + strLED6 + strLED7 + strLED8 + strLED9 + strbarra1 + strbarra2 + strbarra3 + strbarra4 + strbarra5 + strventiladores + strdata + strLED31 + strLED33 + strLED35 + strLED37 + strLED39 + nocache, true); request.send(null); setTimeout('GetArduinoIO()', 1000); strLED1 = ""; strLED2 = ""; strLED3 = ""; strLED4 = ""; strLED5 = ""; strLED6 = ""; strLED7 = ""; strLED8 = ""; strLED9 = ""; strbarra1 = ""; strbarra2 = ""; strbarra3 = ""; strbarra4 = ""; strbarra5 = ""; strventiladores = ""; strdata = ""; strLED31 = ""; strLED33 = ""; strLED35 = ""; strLED37 = ""; strLED39 = ""; } function GetLed2() { if (LED2_state === 1) { LED2_state = 0; strLED2 = "&LED2=0"; } else { LED2_state = 1; strLED2 = "&LED2=1"; } } function GetLed3() { if (LED3_state === 1) { LED3_state = 0; strLED3 = "&LED3=0"; } else { LED3_state = 1; strLED3 = "&LED3=1"; } } function GetLed5() { if (LED5_state === 1) { LED5_state = 0; strLED5 = "&LED5=0"; } else { LED5_state = 1; strLED5 = "&LED5=1"; } } function GetLed6() { if (LED6_state === 1) { LED6_state = 0; strLED5 = "&LED6=0"; } else { LED6_state = 1; strLED6 = "&LED6=1"; } } function GetLed7() { if (LED7_state === 1) { LED7_state = 0; strLED7 = "&LED7=0"; } else { LED7_state = 1; strLED7 = "&LED7=1"; } } function GetVentiladores() { if (ventiladores_state === 1) { ventiladores_state = 0; strventiladores = "&LED22=0"; } else { ventiladores_state = 1; strventiladores = "&LED22=1"; } } function GetLed8() { strLED8 = "&LED8=1"; } function GetLed9() { strLED9 = "&LED9=1"; } function GetBarra1(){ strbarra1 = "&b1="+document.getElementById('b1').value; } function GetBarra2(){ strbarra1 = "&b2="+document.getElementById('b2').value; } function GetBarra3(){ strbarra1 = "&b3="+document.getElementById('b3').value; } function GetBarra4(){ strbarra1 = "&b4="+document.getElementById('b4').value; } function GetBarra5(){ strbarra1 = "&b5="+document.getElementById('b5').value; } function GetData() { strdata = "&LED53=1"; } function GetLed31() { if (LED31_state === 1) { LED31_state = 0; strLED31 = "&LED31=0"; } else { LED2_state = 1; strLED31 = "&LED31=1"; } } function GetLed33() { if (LED33_state === 1) { LED33_state = 0; strLED33 = "&LED33=0"; } else { LED3_state = 1; strLED33 = "&LED33=1"; } } function GetLed35() { if (LED35_state === 1) { LED35_state = 0; strLED35 = "&LED35=0"; } else { LED5_state = 1; strLED35 = "&LED35=1"; } } function GetLed37() { if (LED37_state === 1) { LED37_state = 0; strLED37 = "&LED37=0"; } else { LED7_state = 1; strLED37 = "&LED37=1"; } } function GetLed39() { if (LED39_state === 1) { LED39_state = 0; strLED39 = "&LED39=0"; } else { LED9_state = 1; strLED39 = "&LED39=1"; } } </script> <style> .IO_box { margin: 0 20px 20px 0; border: 1px solid blue; padding: 0 5px 0 5px; width: 240px; } h1 { font-size: 120%; color: blue; margin: 0 0 10px 0; } h2 { font-size: 85%; color: #5734E6; margin: 5px 0 5px 0; } p, form, button { font-size: 80%; color: #252525; } .small_text { font-size: 70%; color: #737373; } </style> </head> <body onload="GetArduinoIO()"> <div class="IO_box"> <h2>Iluminação</h2> <button type="button" id="LED2" onclick="GetLed2()">Ligar fluorescentes 1 (D2)</button><br /><br /> <button type="button" id="LED3" onclick="GetLed3()">Ligar fluorescentes 2 (D3)</button><br /><br /> <button type="button" id="LED5" onclick="GetLed5()">Ligar fluorescentes 3 (D5)</button><br /><br /> <button type="button" id="LED6" onclick="GetLed6()">Ligar fluorescentes 4 (D6)</button><br /><br /> <button type="button" id="LED31" onclick="GetLed31()">Ligar incandescentes 1 </button><br /><br /> <button type="button" id="LED33" onclick="GetLed33()">Ligar incandescentes 2 </button><br /><br /> <button type="button" id="LED35" onclick="GetLed35()">Ligar incandescentes 3 </button><br /><br /> <button type="button" id="LED37" onclick="GetLed37()">Ligar incandescentes 4 </button><br /><br /> <button type="button" id="LED39" onclick="GetLed39()">Ligar incandescentes 5 </button><br /><br /> <!-- <label id="barra">Barra 1 - A2</label><br /> <input type="range" id="b1" name="rangeInput" min="0" max="9" onchange="GetBarra1();"><br /> <br /> <label id="barra">Barra 2 - A3</label><br /> <input type="range" id="b2" name="rangeInput" min="0" max="9" onchange="GetBarra2();"> <br /> <br /> <label id="barra">Barra 3 - A4</label><br /> <input type="range" id="b3" name="rangeInput" min="0" max="9" onchange="GetBarra3();"> <br /> <br /> <label id="barra">Barra 4 - A5</label><br /> <input type="range" id="b4" name="rangeInput" min="0" max="9" onchange="GetBarra4();"><br /> <br /> <label id="barra">Barra 5 - A6</label><br /> <input type="range" id="b5" name="rangeInput" min="0" max="9" onchange="GetBarra5();"><br /> <br /> <div class="IO_box"> <h2>Ar condicionado</h2> <button type="button" id="LED47" onclick="GetLed7()">Ligar ar condicionado (D7)</button><br /><br /> <button type="button" id="btnaumentar" disabled onclick="GetLed8()">- D8</button> <input type="text" size="3" name="barra5"> <button type="button" id="btndiminuir" disabled onclick="GetLed9()">+ D9</button><br /> <br /> </div> <button type="button" id="LED31" onclick="GetLed31()">Cena Festa (D31)</button><br /><br /> <button type="button" id="LED32" onclick="GetLed32()">Cena Cinema (D32)</button><br /><br /> <button type="button" id="LED33" onclick="GetLed33()">Cena Aula (D33)</button><br /><br /> <button type="button" id="LED34" onclick="GetLed34()">Cena Penumbra (D34)</button><br /><br /> <button type="button" id="LED35" onclick="GetLed35()">Cena x (D35)</button><br /><br /> --> </div> <div class="IO_box"> <h2>Som</h2> <button type="button" id="LED7" onclick="GetLed7()">Ligar som (D7)</button><br /><br /> </div> <div class="IO_box"> <h2>Cortina</h2> <button type="button" id="LED8" onclick="GetLed8()">Abrir cortina </button> <button type="button" id="LED9" onclick="GetLed9()">Fechar cortina </button><br /><br /> </div> <div class="IO_box"> <h2>Ventiladores</h2> <button type="button" id="LED22" onclick="GetVentiladores()">Ligar ventiladores</button><br /><br /> </div> <div class="IO_box"> <h2>Tela Datashow</h2> <button type="button" id="LED53" onclick="GetData()">Acionar/Parar</button><br /><br /> </div> </body> </html>
A programação no Arduino
Fonte:https://startingelectronics.org/tutorials/arduino/ethernet-shield-web-server-tutorial/web-server-read-switch-using-AJAX/
Nenhum comentário:
Postar um comentário