marcotchella/ori.html

## ori.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ori Robo</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container">
<button id="button">Iniciar</button>
<button id="stop">Parar</button>
<br>
<br>
<img id="myImg" src="parar.png" width="200" height="200">
<div id="output">--</div>
<div id="saida">xxxxx</div>


<script src="bower_components/watson-speech/dist/watson-speech.js"></script>
<!-- window.fetch pollyfill for IE/Edge & Older Chrome/FireFox -->
<script src="bower_components/fetch/fetch.js"></script>

<script>

document.querySelector('#button').onclick = function () {
  console.log("inicio");
  fetch('/api/speech-to-text/token')
  .then(function(response) {
      return response.text();
  }).then(function (token) {

    var stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
        token: token,
        //outputElement: '#output', // CSS selector or DOM Element
		    model : 'pt-BR_BroadbandModel'
    });

    stream.setEncoding('utf8');
	stream.on('error', function(err) {
        console.log(err);
    });

	stream.on('listening', function(err) {
        console.log(err);
		document.getElementById("output").innerText = 'ouvindo';
    });

	stream.on('end', function(err) {
        console.log("fim");

    });

	stream.on('data', function(data) {
	    console.log(data);
		document.getElementById("saida").innerText = document.getElementById("output").innerText; //em
		document.getElementById("saida").innerText = data; //em funcionamento
	    if (data.indexOf("esquerda") >= 0)
          {
		    requisicao_http('lll');
			document.getElementById("myImg").src = "esquerda.png";
	      }
	    if (data.indexOf("direita") >= 0)
          {
		    requisicao_http('kkk');
			document.getElementById("myImg").src = "direita.png";
	      }
		if (data.indexOf("frente") >= 0)
          {
		    document.getElementById("myImg").src = "frente.png";
			requisicao_http('fre');
	      }


    });

    document.querySelector('#stop').onclick = function() {
      //stream.stop();
     console.log('parar');
	  requisicao_http('kkk');
    };

  }).catch(function(error) {
      console.log(error);
  });
};

function requisicao_http(comando) {
     console.log('chamou');
    var xmlhttp = new XMLHttpRequest();
	var resposta;
	xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	   resposta= xmlhttp.responseText;
       //document.getElementById("demo").innerHTML = resposta;
       console.log(resposta);
     }
	 return resposta;
    };
    xmlhttp.open("GET", "https://192.168.0.16:3001/msg/" + comando, true);
	//xmlhttp.open("GET", "https://192.168.0.16:3001/msg/lll", true);
    xmlhttp.send();

}

</script>

</div>
</body>
</html>


//===========================================================================================
//Para vídeo explicativo e referência visite o blog FazerLab:
//https://fazerlab.wordpress.com/2017/06/28/como-criar-um-robo-com-cerebro-de-supercomputador/
//Nas redes sociais:
//https://twitter.com/@chellamarco
//Facebook: https://goo.gl/45PEq2
// 28/06/2017
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Ori Robo</title>
	<link rel="stylesheet" href="style.css" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	</head>
	<body>
	<div class="container">
	<button id="button">Iniciar</button>
	<button id="stop">Parar</button>
	<br>
	<br>
	<img id="myImg" src="parar.png" width="200" height="200">
	<div id="output">--</div>
	<div id="saida">xxxxx</div>


	<script src="bower_components/watson-speech/dist/watson-speech.js"></script>
	<!-- window.fetch pollyfill for IE/Edge & Older Chrome/FireFox -->
	<script src="bower_components/fetch/fetch.js"></script>

	<script>

	document.querySelector('#button').onclick = function () {
	console.log("inicio");
	fetch('/api/speech-to-text/token')
	.then(function(response) {
	return response.text();
	}).then(function (token) {

	var stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
	token: token,
	//outputElement: '#output', // CSS selector or DOM Element
	model : 'pt-BR_BroadbandModel'
	});

	stream.setEncoding('utf8');
	stream.on('error', function(err) {
	console.log(err);
	});

	stream.on('listening', function(err) {
	console.log(err);
	document.getElementById("output").innerText = 'ouvindo';
	});

	stream.on('end', function(err) {
	console.log("fim");

	});

	stream.on('data', function(data) {
	console.log(data);
	document.getElementById("saida").innerText = document.getElementById("output").innerText; //em
	document.getElementById("saida").innerText = data; //em funcionamento
	if (data.indexOf("esquerda") >= 0)
	{
	requisicao_http('lll');
	document.getElementById("myImg").src = "esquerda.png";
	}
	if (data.indexOf("direita") >= 0)
	{
	requisicao_http('kkk');
	document.getElementById("myImg").src = "direita.png";
	}
	if (data.indexOf("frente") >= 0)
	{
	document.getElementById("myImg").src = "frente.png";
	requisicao_http('fre');
	}


	});

	document.querySelector('#stop').onclick = function() {
	//stream.stop();
	console.log('parar');
	requisicao_http('kkk');
	};

	}).catch(function(error) {
	console.log(error);
	});
	};

	function requisicao_http(comando) {
	console.log('chamou');
	var xmlhttp = new XMLHttpRequest();
	var resposta;
	xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	resposta= xmlhttp.responseText;
	//document.getElementById("demo").innerHTML = resposta;
	console.log(resposta);
	}
	return resposta;
	};
	xmlhttp.open("GET", "https://192.168.0.16:3001/msg/" + comando, true);
	//xmlhttp.open("GET", "https://192.168.0.16:3001/msg/lll", true);
	xmlhttp.send();

	}

	</script>

	</div>
	</body>
	</html>


	//===========================================================================================
	//Para vídeo explicativo e referência visite o blog FazerLab:
	//https://fazerlab.wordpress.com/2017/06/28/como-criar-um-robo-com-cerebro-de-supercomputador/
	//Nas redes sociais:
	//https://twitter.com/@chellamarco
	//Facebook: https://goo.gl/45PEq2
	// 28/06/2017