Go Down

Topic: arduino e website (Resolvido) (Read 15534 times) previous topic - next topic

bubulindo

This... is a hobby.

Maks

#16
May 10, 2012, 08:38 pm Last Edit: May 10, 2012, 08:53 pm by Maks Reason: 1
sim ja corri... fiquei a saber os valores analogicos dos pins 0 a 6...
e até alterei para valores analócos para ficar entre 0s e 1s, mas fico na mesma... :S

bubulindo

O teu browser liga-se ao arduino e recebe esses dados.

Agora podes criar um javascript que ligue ao arduino para receber estes dados... Ou então um php que se liga ao arduino e recebe estes dados. Depois de teres um php que faz isto, o javascript apenas tem de chamar esse ficheiro php.

Por isso o próximo passo é criares um php que se ligue ao arduino e receba estes dados. Repara que agora o browser acede a um php que por sua vez se liga ao Arduino. Se conseguires isto já tens mais um passo feito.
This... is a hobby.

Maks

#18
May 10, 2012, 11:14 pm Last Edit: Jul 07, 2012, 03:17 pm by Maks Reason: 1
em php ja tinha...
mas eu estava a desistir do php porque nao conseguia usar os botoes que tenho de java para controlar a luz, controlava apenas a animação

bubulindo

Os botões de java podem renovar a página php. O que te bastaria.
This... is a hobby.

Maks

#20
May 10, 2012, 11:44 pm Last Edit: Jul 07, 2012, 03:16 pm by Maks Reason: 1
não chegaria, porque um refresh ir-me-ia mandar para a pagina inicial...
ou seja, teria de ser com o ajax, o json, ou jquery... que eu ainda nao percebi mto bem o que tenho de usar... :S

bubulindo

Mais uma vez... estás a olhar para o produto final em vez de veres os passos que te indicamos.

Se não conheces as tecnologias, começa a mexer nelas mesmo que não seja o que pretendes no final para pelo menos perceberes as capacidades da mesma e veres como adaptar ao que pretendes.

O script de php que falei não vai retorna uma página web... vai retornar dados em JSON. O que quer dizer que a página não vai sair de onde está e voltar ao início. Mas só vais conseguir ver isso se experimentares.
This... is a hobby.

Maks


Mais uma vez... estás a olhar para o produto final em vez de veres os passos que te indicamos.

Se não conheces as tecnologias, começa a mexer nelas mesmo que não seja o que pretendes no final para pelo menos perceberes as capacidades da mesma e veres como adaptar ao que pretendes.

O script de php que falei não vai retorna uma página web... vai retornar dados em JSON. O que quer dizer que a página não vai sair de onde está e voltar ao início. Mas só vais conseguir ver isso se experimentares.


voltando um pouco atrás então... se ele não vai renovar a pagina php então como é que retorno dados em json sem que faça refresh?

Maks

Já tive alguma evolução

encontrei este código aqui no forum mas alterei um pouco para servir para mim...

Code: [Select]
//zoomkat 12-08-11, combined client and server
//simple button GET with iframe code
//for use with IDE 1.0
//open serial monitor and send an g to test client and
//see what the arduino client/server receives
//web page buttons make pin 4 high/low
//use the \ slash to escape the " in the html
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
IPAddress ip(192,168,10,70); // ip in lan
IPAddress gateway(192,168,10,1); // internet access via router
IPAddress subnet(255,255,255,0); //subnet mask
IPAddress myserver(192,168,10,50); // zoomkat web page
EthernetServer server(6969); //server port
EthernetClient client;
String readString;

//////////////////////

void setup(){

 pinMode(13, OUTPUT); //pin selected to control
 Ethernet.begin(mac, ip, subnet, gateway);
 server.begin();
 Serial.begin(9600);

}
void loop(){


 EthernetClient client = server.available();
 if (client) {
   while (client.connected()) {
     if (client.available()) {
       char c = client.read();

       //read char by char HTTP request
       if (readString.length() < 100) {

         //store characters to string
         readString += c;
         //Serial.print(c);
       }

       //if HTTP request has ended
       if (c == '\n') {

         ///////////////
         
          //now output HTML data header
         if(readString.indexOf('?') >=0) { //don't send new page
           client.println("HTTP/1.1 204 Zoomkat");
         }
         //stopping client
         client.stop();

         ///////////////////// control arduino pin
         if(readString.indexOf("on") >0)//checks for on
         {
           digitalWrite(13, HIGH);    // set pin 4 high
         }
         if(readString.indexOf("off") >0)//checks for off
         {
           digitalWrite(13, LOW);    // set pin 4 low
         }
         //clearing string for next read
         readString="";

       }
     }
   }
 }
}

//////////////////////////



isto permite que eu mude o estado dos pins como quero mas ainda me está a faltar 2 coisas...

o meu javascript:

Code: [Select]
var luzcoz1=1;
function lcoz1() {
var floatimg = document.getElementById("lcoz1");
if ( luzcoz1== 1){
floatimg.src="../images/luz_on.png"
luzcoz1=0;
} else {
floatimg.src="../images/luz_off.png"
luzcoz1=1;
}
   }
   
   <a href="http://192.168.10.70:6969/?off"><input alt="" src="images/luz_off.png" onclick="lcoz1();" id="lcoz1" style="float: right; width: 50px; height: 50px; " type="image" /></a>


neste momento tenho de criar 2 botoes de imagens, 1 para cada href, é possivel usar a mesma função de javascript para mudar o URL tambem?

Após isso so me fica a faltar receber os status do arduino e mostrar as imagens dependendo desses valores...ose values...

Espero que me tenho conseguido fazer entender

Obrigado e Abraços

Maks

ja consegui por a função a funcionar, ou seja, já consigo ligar/desligar a luz e tambem alternar a imagem consoante o estado.

Já so me está a faltar receber os status do arduino e mostrar as imagens dependendo desses valores no load da página.

alguma ideia?

neuron_upheaval

Podes verificar a cadeia de caracteres vinda do cliente e, se ela contiver "status", tu envias de volta um JSON com a informação que desejas:

Code: [Select]

//
// código Arduino
//
void loop(){

  EthernetClient client = server.available();

  if (client) {

    while (client.connected()) {

      if (client.available()) {

        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string
          readString += c;
        }

        //if HTTP request has ended
        if (c == '\n') {

           //now output HTML data header
          if(readString.indexOf('?') >=0) { //don't send new page

            client.println("HTTP/1.1 204 Zoomkat");

          }

          ///////////////////// control arduino pin
          if(readString.indexOf("on") >0)//checks for on
          {
            digitalWrite(13, HIGH);    // set pin 4 high
          }

          if(readString.indexOf("off") >0)//checks for off
          {
            digitalWrite(13, LOW);    // set pin 4 low
          }

          if(readString.indexOf("status") > 0) //send JSON
          {
              int luzcoz1 = digitalRead(PINLUZCOZ1) == HIGH? 1: 0;

              client.println("Content-type: application/json");
              client.println();
              client.print("{ cozinha: ");
              client.print(luzcoz1, DEC);
              client.println("}");
          }

          //clearing string for next read
          readString="";

          //stopping client
          client.stop();
        }
      }
    }
  }
}



neuron_upheaval

O JavaScript a seguir tem de estar na tua página PHP ou HTML:

Code: [Select]

    document.onload = onLoadHandler();

    var xhr;

    function onLoadHandler() {

        if ( window.ActiveXObject ) {

            xhr = new ActiveXObject( "Microsoft.XMLHTTP" );

        } else if ( window.XMLHttpRequest ) {

            xhr = new XMLHttpRequest();

        } else {

            alert( "Seu navegador nao suporta AJAX" );

        }
    }

    function openSocket(command) {

        xhr.open( "GET", "suaPaginaPHPQueConversaComOArduino.php?command=" + command, true );
        xhr.send();
        xhr.onreadystatechange = function () {

            if ( xhr.readyState == 4 && xhr.status == 204 ) {

                var info = eval( xhr.responseText );

                if ( info.cozinha == 1 ) {

                    // light up the icon for the kitchen
                } else {

                    // turn off the icon
                }
            }
        };
    }



Depois, toda vez que quiseres averiguar o estado da lâmpada da cozinha, deves chamar a função openSocket() e passar como parâmetro a string "status".

fabioprudencio

Marks estou tentando fazer a mesma coisa, você poderia me enviar o HTML ou colocar para download?

Maks


Marks estou tentando fazer a mesma coisa, você poderia me enviar o HTML ou colocar para download?


Enviei-te pm

PS: Maks não Marks

fabioprudencio

neuron_upheaval, estou tentando usar o seu código porém apresenta erro no eval do JSON, o que pode ser?

Code: [Select]

<html>
<head>
<script language="javascript" type="text/javascript" src="json2.js"></script>
<script language="javascript" type="text/javascript">
    document.onload = onLoadHandler();

    var xhr;

    function onLoadHandler() {

        if ( window.ActiveXObject ) {

            xhr = new ActiveXObject( "Microsoft.XMLHTTP" )

        } else if ( window.XMLHttpRequest ) {

            xhr = new XMLHttpRequest();

        } else {

            alert( "Seu navegador nao suporta AJAX" );
        }

    }

    function openSocket(){

        xhr.open( "GET", "http://192.168.1.15");
        xhr.send(null); 
            if ( xhr.readyState == 4 ) {
alert( xhr.responseText);
                var info = eval(xhr.responseText);
alert(info.cozinha );
                if ( info.cozinha == 1 ) {
                    alert( "LIGADO" );
                } else {

                    alert( "DESLIGADO" );
                }
            }
    }

</script>
<style type="text/css">

#botao {

position:absolute;

left:50%;

top:50%;

margin-left:-110px;

margin-top:-40px;

}

</style>
</head>
<body>
<img id="botao" alt="Abrir" src="off.jpg" onclick="openSocket()" width="107" height="98" />
<br /><br />
</body>
</html>

Go Up