Go Down

Topic: Arduino + Javascript (Read 2934 times) previous topic - next topic

Tenho realizado muitas pesquisas a respeito dessas duas tecnologias, e tenho notado que a dificuldade que estou passando não é só minha. Estou em projeto onde desenvolvi uma interface web em html e javascript. Porque o javascript? Porque para o design do site necessito usa-lo. Porém na hora de fazer a conexão com o arduino encontro uma enorme dificuldade, neste caso gostaria de receber e enviar dados para o arduino. Por favor se alguém souber alguma solução para este problema serei muito grato.

mmoscz

Se você está tentando fazer a comunicação via javascript com o arduino e Ethernet Shield, provavelmente deve ser com ajax,
Então deve desenvolver as funções no arduino da mesma forma como em um "servidor web", respondendo as suas solicitações, tanto "POST ou GET".
Ta muito amplo, tente ser mais claro e especifico quanto as dificuldades.


4x Duemilanove (clone)
Uno torrado (clone)
Amiga 1200 40MB
Windows XP

O código é esse:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>:) AUTO HOME :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
   background-image: url();
}
#div_qrt_casal {
   position: absolute;
   width: 194px;
   height: 131px;
   z-index: 1;
   left: 378px;
   top: 125px;
}
#div_sala_estar {
   position: absolute;
   width: 196px;
   height: 133px;
   z-index: 2;
   left: 378px;
   top: 263px;
}
#div_banheiro {
   position: absolute;
   width: 196px;
   height: 133px;
   z-index: 3;
   top: 137px;
   left: 1px;
}
#div_qrt_bb {
   position: absolute;
   width: 194px;
   height: 131px;
   z-index: 3;
   left: 582px;
   top: 125px;
}
#div_sala_jantar {
   position: absolute;
   width: 194px;
   height: 131px;
   z-index: 4;
   top: 138px;
   left: 0px;
}
#div_office {
   position: absolute;
   width: 194px;
   height: 131px;
   z-index: 5;
   top: 275px;
}
#div_qrt_solteiro {
   position: absolute;
   width: 194px;
   height: 131px;
   z-index: 4;
   left: 204px;
   top: -275px;
}
#div_cozinha {
   position: absolute;
   width: 194px;
   height: 131px;
   z-index: 5;
   left: 204px;
   top: -137px;
}
#div_lavanderia {
   position: absolute;
   width: 194px;
   height: 131px;
   z-index: 4;
   left: 786px;
   top: 400px;
}
#div_garagem {
   position: absolute;
   width: 344px;
   height: 75px;
   z-index: 5;
   left: 626px;
   top: 541px;
}
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_swapImgRestore(int) { //v3.0
  var i,x,a=document.MM_sr;
  for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)
  x.src=x.oSrc;
 
  acender(int);
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments;
  document.MM_sr=new Array;
  for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a))!=null)
   {
      document.MM_sr[j++]=x;
      if(!x.oSrc) x.oSrc=x.src;
      x.src=a[i+2];
   }
   apagar(a[4]);
}
function apagar(comodo)
{
   
}

function acender(comodo)
{
   
}
</script>
</head>

<body onload="MM_preloadImages('Imagens do Site/Botões/qrt_sala_de_estar_apagado.jpg','Imagens do Site/Botões/banheiro_apagado.jpg','Imagens do Site/Botões/qrt_bebe_apagado.jpg','Imagens do Site/Botões/sala_jantar_apagado.jpg','Imagens do Site/Botões/office_apagado.jpg','Imagens do Site/Botões/qrt_solteiro_apagado.jpg','Imagens do Site/Botões/cozinha_apagado.jpg','Imagens do Site/Botões/lavanderia_apagado.jpg','Imagens do Site/Botões/garagem_aberta.jpg','Imagens do Site/Botões/qrt_casal_apagado.jpg')">
<div align="center">
  <div id="div_qrt_casal">
     <a href="javascript:;" onclick="MM_swapImage('img_qrt_casal','','Imagens do Site/Botões/qrt_casal_apagado.jpg',1, 0)" ondblclick=             "MM_swapImgRestore(0)"><img src="Imagens do Site/Botões/qrt_casal_aceso.jpg" name="img_qrt_casal" width="197" height="131" id=    "img_qrt_casal" align="middle" border="0" /></a>
  </div>
  <div id="div_sala_estar"><a href="javascript:;" onclick="MM_swapImage('img_sala_estar','','Imagens do Site/Botões/qrt_sala_de_estar_apagado.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/qrt_sala_de_estar_aceso.jpg" name="img_sala_estar" width="197" height="131" id="img_sala_estar" border="0" /></a>
    <div id="div_banheiro"><a href="javascript:;" onclick="MM_swapImage('img_banheiro','','Imagens do Site/Botões/banheiro_apagado.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/banheiro_aceso.jpg" name="img_banheiro" width="197" height="131" id="img_banheiro" border="0" /></a></div>
  </div>
<img src="Imagens do Site/site_casa.jpg" width="1000" height="625" />
<div id="div_lavanderia"><a href="javascript:;" onclick="MM_swapImage('img_lavanderia','','Imagens do Site/Botões/lavanderia_apagado.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/lavanderia_aceso.jpg" name="img_lavanderia" width="193" height="131" id="img_lavanderia" border="0" /></a></div>
<div id="div_garagem"><a href="javascript:;" onclick="MM_swapImage('img_garagem','','Imagens do Site/Botões/garagem_aberta.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/garagem_close.jpg" name="img_garagem" width="346" height="77" id="img_garagem" border="0" /></a></div>
<div id="div_qrt_bb"><a href="javascript:;" onclick="MM_swapImage('img_qrt_bb','','Imagens do Site/Botões/qrt_bebe_apagado.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/qrt_bebe_aceso.jpg" name="img_qrt_bb" width="193" height="131" id="img_qrt_bb" border="0" /></a>
  <div id="div_sala_jantar"><a href="javascript:;" onclick="MM_swapImage('img_sala_jantar','','Imagens do Site/Botões/sala_jantar_apagado.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/sala_jantar_aceso.jpg" name="img_sala_jantar" width="193" height="131" id="img_sala_jantar" border="0" /></a></div>
  <div id="div_office"><a href="javascript:;" onclick="MM_swapImage('img_office','','Imagens do Site/Botões/office_apagado.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/office_aceso.jpg" name="img_office" width="193" height="131" id="img_office" border="0" /></a>
    <div id="div_qrt_solteiro"><a href="javascript:;" onclick="MM_swapImage('img_qrt_solteiro','','Imagens do Site/Botões/qrt_solteiro_apagado.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/qrt_solteiro_aceso.jpg" name="img_qrt_solteiro" width="194" height="131" id="img_qrt_solteiro" border="0" /></a></div>
    <div id="div_cozinha"><a href="javascript:;" onclick="MM_swapImage('img_cozinha','','Imagens do Site/Botões/cozinha_apagado.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="Imagens do Site/Botões/cozinha_aceso.jpg" name="img_cozinha" width="193" height="131" id="img_cozinha" border="0" /></a></div>
  </div>
</div>
</div>
</body>
</html>

Nas funções acender e apagar é onde eu quero ter o código que vai conversar com o arduino. Este código que não estou sabendo.

mmoscz

Você  já usou ajax no javascript?
Dá uma olhada nisso aqui:
http://www.joni.com.br/blog/2009/06/02/178/
Ele mostra como criar um objeto ajax em javascript, e como fazer para executar uma chamada com a uma determinada URL, e que no retorno, vai dar um alert() com o texto que o servidor vai retornar com da
URL, então você deve fazer  um código no Arduino que responda "Acesso" ou "Apagado".

4x Duemilanove (clone)
Uno torrado (clone)
Amiga 1200 40MB
Windows XP

Dentro da função aceder ou apagar ( que na verdade poderia ser só uma função tipo altera_status()) eu queria enviar um vetor para o arduino onde cada posição desse vetor representaria uma lampada. Você teria alguma sugestão para isso?

mmoscz

Bom sugestão eu tenho, mas você entende alguma coisa de javascript ou de programação para web?
assim, o sua chamada por ajax seria algo assim:
Code: [Select]

url="http://servidor:porta/acoes.html?Array[0]=1&Array[1]=0&Array[2]=1";
ajax.open("POST", "url", true);

No código do arduino você leria a variavel POST[] que é um array e faria as ações determinadas.
Acho legal você olhar os milhares de exemplos de arduino + ethernet shield, pois deve haver alguma que faça exatamente o que você quer, pois aparentemente, você não tem conhecimento suficiente nas tecnologias
que quer usar, para desenvolver o sua própria solução, olhando elas você pode aprender como fazem, ai depois tentar desenvolver a sua própria solução.
4x Duemilanove (clone)
Uno torrado (clone)
Amiga 1200 40MB
Windows XP

Bom, programação web eu não manjo muito. Mas nesse exemplo que você me deu eu não consegui entender como vou me conectar ao arduino através dessa url se no arduino eu não vou ter nenhuma página html hospedada?

mmoscz

Bom, vou assumir que você não tem um ethernet shield é isso?
Então, na máquina que vai rodar suas páginas html você vai precisar de algum programa feito em PHP, JAVA, C# para se comunicar com o arduino.
Basicamente você terá um servidor de internet, que ser comunica com o arduino.

4x Duemilanove (clone)
Uno torrado (clone)
Amiga 1200 40MB
Windows XP

Eu tenho um ethernet Shield w5100 e um arduino mega 2560. O código que eu postei é a página que vai se comunicar com o ethernet shield. Se fosse possível gostaria que vc me mandasse um código ajax para conexão com arduino que realmente funcione porque todos que eu vejo na internet e até mesmo aqui no forum não funcionam. Obrigado pela atenção.

mmoscz

Você já fez a parte do Arduino como webserver?
O código em javascrit ficaria assim:
Code: [Select]

<script language="javascript">
function ajaxInit() {
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        ajax = new XMLHttpRequest();
        if (ajax.overrideMimeType) {
            ajax.overrideMimeType('text/xml');
        }
    }
    else if (window.ActiveXObject) { // IE
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {}
        }
    }
    return ajax;
}

function AcenderApagar(comodo, LigaDesliga)
{
url = "http://seuserver/suapagina.html?comodo=" + comodo + "&LigaDesliga=" + LigaDesliga;
ajax = ajaxInit();
if(ajax) {
    ajax.open("POST", "url", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("dados=" + dadosenviados);
    ajax.onreadystatechange = function() {
    if(ajax.readyState == 4) {
            if(ajax.status == 200) {
                alert(ajax.responseText);
            } else {
                alert(ajax.statusText);
            }
        }
    }
}
}

</script>

Isso é basicamente o que você vai usar
nas suas funções apagar vc vai por
Code: [Select]

function apagar(comodo)
{
    AcenderApagar(comodo, 0)
}

function acender(comodo)
{
    AcenderApagar(comodo, 1)
}

Essa é a parte em javascript que você vai usar, o resto é o arduino/webshield interpretar suas chamadas
4x Duemilanove (clone)
Uno torrado (clone)
Amiga 1200 40MB
Windows XP

Beleza, entendi o seu código. Mas só tenho uma dúvida, pelo pouco que entendo de programação web na parte url vc aponta para um arquivo Html, este arquivo vai estar gravado no Arduino? E no caso tem como eu fazer apontando para uma url assim \\192.168.0.1:8080?

mmoscz


Beleza, entendi o seu código. Mas só tenho uma dúvida, pelo pouco que entendo de programação web na parte url vc aponta para um arquivo Html, este arquivo vai estar gravado no Arduino? E no caso tem como eu fazer apontando para uma url assim \\192.168.0.1:8080?



seuserver: vc substitui pelo endereço IP e pela porta que vc configurou no código que roda no arduino + ethernet shield
suapagina.htm: vc substitui pela página que vai responder pelo web server que vai rodar no arduino + ethernet shield

Você entendeu que o Arduino + Ethernet shield tem que funcionar como um servidor de web, como um IIS ou Apache né???


4x Duemilanove (clone)
Uno torrado (clone)
Amiga 1200 40MB
Windows XP

Certo, e essa página ficara dentro do arduino. O arduino tem memória para isso ou tenho que gravar em um cartão sd?

mmoscz


Certo, e essa página ficara dentro do arduino. O arduino tem memória para isso ou tenho que gravar em um cartão sd?

Eu acredito que como vai hospedar a sua página em outro servidor, a resposta em html não terá mais que algumas centenas de bytes, dizendo apenas que recebeu o comando, eu não tenho ethernet shield para te responder como seria o mais indicado, por isso deve olhar os exemplos na net e ver como o pessoal implementa as respostas do arduino ou alguém que fez algo parecido aqui no forum pode responder a você, eu estou limitado a parte do javascript / html do cliente.

4x Duemilanove (clone)
Uno torrado (clone)
Amiga 1200 40MB
Windows XP

Go Up