#include <WiFi.h>
#include "AsyncTCP.h"
#include "ESPAsyncWebSrv.h"
#include <Wire.h>
IPAddress ip;
String readIp;
int LedRed = 15;
int LedGreen = 23;
// REPLACE WITH YOUR NETWORK CREDENTIALS
const char* ssid = "Wokwi-GUEST";
const char* password = "";
// HTML web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<title>LED COMANDO DE VOZ E BOTÃO</title>
<br>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" >
<style>
#todos {
background-color: rgb(59, 59, 59);
transition: .4s;
}
.conteiner {
position: relative;
width: 100%;
max-width: 480px;
text-align: center;
padding-top: 30px;
margin-left: auto;
margin-right: auto;
}
.search {
display: inline-block;
width: 100%;
margin-top: 40px;
}
#speakbt {
display: block;
width: 100px;
height: 100px;
margin: auto;
background-image: -webkit-radial-gradient(red,black);
border: 8px solid rgb(173, 173, 173);
cursor: pointer;
border-radius: 50%;
font-weight: 700;
transition: .4s;
position: relative;
top: 7px;
filter: drop-shadow(8px 8px 10px gray);
}
#speakbt:active {
border-color: #BEF0DF;
}
#resultSpeak {
position: relative;
display: block;
width: 280px;
color: white;
margin-left: auto;
margin-right: auto;
font-weight: 700;
font-size: 1.2em;
margin-top: 40px;
}
.switch {
position: relative;
display: inline-block;
height: 80px;
width: 80px;
margin: auto;
scale: 0.85;
top: 10px;
}
.switch input {
opacity: 0;
height: 80px;
width: 80px;
}
#BotaoDois {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: contain;
background-repeat: repeat-y;
border: 5px solid red;
-webkit-transition: .4s;
transition: .4s;
background-image: linear-gradient(white, rgb(208, 205, 205));
background-origin: border-box;
background-clip: content-box, border-box;
border-radius: 50%;
filter: drop-shadow(8px 8px 10px gray);
}
#BotaoUm:checked + #BotaoDois{
border-color: yellowgreen;
}
#BotaoDois:active{
scale: 0.85;
}
#Barra{
height: 8px;
width:24px;
background-color: red;
background-repeat: repeat-y;
background-size: contain;
margin: auto;
border-top-left-radius: 25em;
border-top-right-radius: 25em;
border-bottom-left-radius: 25em;
border-bottom-right-radius: 25em;
rotate: -90deg;
position: relative;
bottom: 4px;
right: 1.75px;
transition: .4s;
}
</style>
</head>
<body id="todos">
<div class="conteiner">
<div class="search">
<button id="speakbt">
<i class="fa fa-microphone" style="font-size:48px;color:black"></i>
</button>
<div id="resultSpeak"></div>
</div>
<label class="switch">
<input id="BotaoUm" type="checkbox" onchange="TheLed()">
<span id="BotaoDois" >
<div id="Barra" >
</div>
</span>
</label>
<script >
function TheLed(){
if(document.getElementById("BotaoUm").checked == true){
document.getElementById("todos").style.backgroundColor = "snow";
document.getElementById("Barra").style.backgroundColor = "yellowgreen";
$.ajaxSetup({timeout:1000});
$.get("/LedON" );
{Connection: close};
}else{
document.getElementById("todos").style.backgroundColor = "rgb(59, 59, 59)";
document.getElementById("Barra").style.backgroundColor = "red";
$.ajaxSetup({timeout:1000});
$.get("/LedOFF" );
{Connection: close};
}
}
var speakBtn = document.querySelector('#speakbt');
var resultSpeaker = document.querySelector('#resultSpeak');
var tod = document.querySelector('#todos');
if (window.SpeechRecognition || window.webkitSpeechRecognition) {
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var myRecognition = new SpeechRecognition();
speakBtn.addEventListener('click', function () {
try {
myRecognition.start();
resultSpeaker.innerHTML = "Fale ligar ou desligar.";
document.getElementById("speakbt").style.backgroundImage = "-webkit-radial-gradient(rgb(0, 221, 0),black)";
} catch (erro) {
alert('erro:' + erro.message);
}
}, false);
myRecognition.addEventListener('result', function (evt) {
var resultSpeak = evt.results[0][0].transcript;
console.log(resultSpeak);
resultSpeaker.innerHTML = resultSpeak;
tod.style.backgroundColor = resultSpeaker.innerHTML;
if(resultSpeaker.innerHTML == "desligar" || resultSpeaker.innerHTML == "Desliga" || resultSpeaker.innerHTML == "Desligar" ){
document.getElementById("todos").style.backgroundColor = "rgb(59, 59, 59)";
resultSpeaker.style.color = "white";
$.ajaxSetup({timeout:1000});
$.get("/LedOFF" );
{Connection: close};
}
if(resultSpeaker.innerHTML == "ligar" || resultSpeaker.innerHTML == "Liga" || resultSpeaker.innerHTML == "Ligar"){
resultSpeaker.style.color = "black";
document.getElementById("todos").style.backgroundColor = "snow";
$.ajaxSetup({timeout:1000});
$.get("/LedON" );
{Connection: close};
}
document.getElementById("speakbt").style.backgroundImage = "-webkit-radial-gradient(red,black)";
if (resultSpeak.match(/buscar por/)) {
resultSpeaker.innerHTML = 'Redirecionando...';
setTimeout(function(){
var resultado = resultSpeak.split('buscar por');
window.location.href = 'https://www.google.com.br/search?q=' + resultado[1];
},750);
}
}, false);
myRecognition.addEventListener('error', function (evt) {
document.getElementById("speakbt").style.backgroundImage = "-webkit-radial-gradient(red,black)";
resultSpeaker.innerHTML = 'Uso do microfone não foi autorizado neste navegador.';
}, false);
} else {
resultSpeaker.innerHTML = 'Seu navegador não suporta essa tecnoligia.';
}
</script>
</body>
</html>
)rawliteral";
AsyncWebServer server(80);
AsyncEventSource events("/events");
void setup() {
pinMode(LedRed,OUTPUT);
pinMode(LedGreen,OUTPUT);
Serial.begin(9600);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.println("WiFi not connected");
return;
}
Serial.println();
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
ip = WiFi.localIP();
for(int i = 0; i < 4;i++){
readIp += i ? "."+String(ip[i]):String(ip[i]);
}
// Send web page to client
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html);
});
// Receive an HTTP GET request
server.on("/LedON", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(LedRed,HIGH);
digitalWrite(LedGreen,HIGH);
});
server.on("/LedOFF", HTTP_GET, [] (AsyncWebServerRequest *request) {
digitalWrite(LedRed,LOW);
digitalWrite(LedGreen,LOW);
});
events.onConnect([](AsyncEventSourceClient *client){
if(client->lastId()){
Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
}
client->send("hello!", NULL, millis(), 10000);
});
server.addHandler(&events);
server.begin();
}
void loop() {
}