arduino e website (Resolvido)

International Português
1

Ola a todos,

Estou com um pequeno problema... estou a desenvolver um site em html + java e durante esse processo veio-me à cabeça a seguinte questão...
Como é que eu consigo com que o website possa ir buscar os valores de variaveis? e consoante esse valores fazer determinada acção?

neste caso, quando abro o website ele deverá ler a partir do arduino se a luz esta ligada ou nao, e se estiver ligada o icon deverá aparecer ligado, se estiver desligado o icon aparecerá desligado...

Eu sei que o html nao trabalha com variaveis nem é possivel efectuar calculos... terei de fazer um bd para guardar os valores? deverei programar o website com php?

O que me sugerem?

Obrigado

2

Faça com que o Arduino devolva tipo MIME application/json via EtherShield.

void loop() {
    Client client = server.available();

    if (client == true) {
        server.println("HTTP 1.1/200 OK");
        server.println("Content-Type: application/json");
        server.println();

        // agora vem os dados

        byte principal;
        principal = digitalRead(PINO_PRINCIPAL) == LOW? 0: 1;
        byte despensa;
        despensa = digitalRead(PINO_DESPENSA) == LOW? 0: 1;
        byte varanda;
        varanda = digitalRead(PINO_VARANDA) == LOW? 0: 1;

        server.print("{ { 'local': 'cozinha', 'principal': ");
        server.print(principal, DEC);
        server.print(", 'despensa': ");
        server.print(despensa, DEC);
        server.print(", 'varanda': ");
        server.print(varanda, DEC);
        server.println(" } }");
    }
}

Depois, na sua página web, você trata os dados em json com ajax, isto é, em modo assíncrono, enviando requisições para o Arduino e recebendo de volta o json.

3

deculpa mas nao consegui perceber...

eu percebo pouco de java, ou melhor, quase nada de java e nao estou a entender como é que o site em html vai conseguir ir buscar os valores das variaveis ao arduino e mostrar o site consoante um valor especifico.
Se o arduino tiver guardado que a lampada A está ligada, a imagem dessa lampada devera ser (digamos) ligado.png, caso contrario mostra a imagem desligado.png...

Será possivel dares-me um exemplo? eu ja andei a procura e nao consigo encontrar...

Obrigado e Abraços

PS. Titulo corrigido

4

por exemplo, eu tenho este codigo...

<li><a href="#sala_luz"><img src="images/luz_on.png" alt="Iluminação" /></a><p><span style="padding-left:40px">Iluminação</li>

Como podes verificar ele mostra como se a luz estivesse on.
o que eu queria fazer seria tipo:

if luz_on = true then
       <li><a href="#sala_luz"><img src="images/luz_on.png" alt="Iluminação" /></a><p><span style="padding-left:40px">Iluminação</li>
else
       <li><a href="#sala_luz"><img src="images/luz_off.png" alt="Iluminação" /></a><p><span style="padding-left:40px">Iluminação</li>
end if

mas em html nao posso fazer ifs...

Não sei se fui claro, espero que sim :wink:

Obrigado

5

Boas,

Gosto imenso do teu layout deve ser um projeto interessante que deves ter que fazer!

Vamos por partes!

O que o "neuron_upheaval" escreveu é o que o arduino te vai devolver, ou seja uma string em JSON com os dados que precisas para validar o que pretendes fazer!

Portanto o que tens é apenas html?!

Vais precisar de uma framework javascript por exemplo jQquery, isto para não teres que utilizar PHP ou ASP.
Portanto vais ter que te entender um pouco com isto se quiseres ver o que pretendes, porque em hml não podes fazer IF... ELSE... END IF

algumas ideias e ajudas para começar e usando o exemplo fornecido para o Arduino pelo "neuron_upheaval".

Usando o shield Ethernet que deverá ter um IP e uma porta!!!

Para veres o que é devolvido pelo Arduino usando então o JQuery:

<script type="text/javascript">
    $(function(){
        $("button")
            .click(function(){
                $.getJSON('http://ipdoarduino:porta', function(data){
                    var markup = '<strong>Local:</strong> ' + data.local +
                        '
<strong>Principal:</strong> ' + data.principal +
                        '
<strong>Despensa:</strong> ' + data.despensa +
                        '
<strong>Varanda:</strong> ' + data.varanda +;
                    $("#content").html(markup);
                });
            });
    });
</script>

isto vai ler o que o arduino está a "ver" e mostrar o estado de cada ligação Principal, Despensa, Varanda.

A tua página para além do jquery carregado tem que ter este conteúdo para veres a informação:

<div id="content">Clique no botão!</div>
<p>
    <button>Atualizar conteúdo</button>
</p>

Portanto sempre que carregares no botão Atualizar, vais ver o resultado devolvido pelo Arduino.

Agora com mais umas pesquisas no Google e alguma imaginação vais conseguir colocar o Jquery a guardar os valores devolvidos e a alterar o estado das imagens, para veres se a iluminação está ligada ou desligada.

Espero ter ajudado mais um pouco!

jQuery.getJSON() | jQuery API Documentation tens aqui mais informações.

6

Ola mais uma vez, eu agradeço a resposta e estive a tentar perceber o vosso codigo e nao consegui provavelmente porque nao conheço essa linguagem...
talvez com um exemplo a funcionar eu consiga entender... enfim, como não quero ficar parado continuei com o projecto como consegui...

Eu tenho este código:
Index.php (a variavel teste irá ser o valor que o arduino vai enviar no load da página...)

<?php
$teste = "2";
if ($teste == "1") {
echo $teste;
include ("liga.php");
}
else {
echo $teste;
include ("desliga.php");
}
?>

liga.php

<script type="text/javascript">  
var luzcoz1=true;
	function lcoz1() {
		var floatimg = document.getElementById("lcoz1");
		if ( luzcoz1== true){
			floatimg.src="../images/luz_on.png"
			luzcoz1=false;
			} else {
			floatimg.src="../images/luz_off.png"
			luzcoz1=true;
			}		
    }
</script>
		     <a href="#"><input alt="" src="images/luz_off.png" onclick="lcoz1();" id="lcoz1" style="float: right; width: 50px; height: 50px; " type="image" /></a>
			<h1 style="float: right; width: 320px; margin: 0 auto;">Principal</h1><p>&nbsp;</p><p>&nbsp;</p>

desliga.php

<script type="text/javascript">  
var luzcoz1=false;
	function lcoz1() {
		var floatimg = document.getElementById("lcoz1");
		if ( luzcoz1== true){
			floatimg.src="../images/luz_on.png"
			luzcoz1=false;
			} else {
			floatimg.src="../images/luz_off.png"
			luzcoz1=true;
			}
    }
</script>


		     <a href="#"><input alt="" src="images/luz_on.png" onclick="lcoz1();" id="lcoz1" style="float: right; width: 50px; height: 50px; " type="image" /></a>
			<h1 style="float: right; width: 320px; margin: 0 auto;">Principal</h1><p>&nbsp;</p><p>&nbsp;</p>

qual a minha duvida... Quando eu clico no "botao" (imagem), ele muda de imagem e queria que ele enviasse essa informação ao arduino... eu estou a planear usar em php o socket_write para enviar para o arduino, mas se eu ponho isso no código que tenho de momento ele executa logo em vez de esperar que eu carrege no "botao"... que opçoes tenho?

7

será que isto funciona?

<script type="text/javascript">  
var luzcoz1=true;
	function lcoz1() {
		var floatimg = document.getElementById("lcoz1");
		if ( luzcoz1== true){
			floatimg.src="../images/luz_on.png"
			luzcoz1=false;
<?PHP socket_write(blablabla); ?>
			} else {
			floatimg.src="../images/luz_off.png"
			luzcoz1=true;
			}
    }
</script>

	<a href="#"><input alt="" src="images/luz_off.png" onclick="lcoz1();" id="lcoz1" style="float: right; width: 50px; height: 50px; " type="image" /></a>
	<h1 style="float: right; width: 320px; margin: 0 auto;">Principal</h1><p>&nbsp;</p><p>&nbsp;</p>

Eu sei que esta pergunta é um pouco parva, porque provavelmente devem estar a pensar, "porque nao testas?", e a minha resposta será, porque estou no trabalho e enquanto cá estou tenho adiantado serviço escrevendo codigo sempre que posso.
A minha pergunta é, usando o <?PHP socket_write(blablabla); ?> dentro do javascript, vai-me dar erro?

8

Maks:
A minha pergunta é, usando o <?PHP socket_write(blablabla); ?> dentro do javascript, vai-me dar erro?

Provavelmente não... mas também não vai funcionar. Estás a juntar alhos com bogalhos.

9

ja tive oportunidade de testar e nada...
eu gosto muito do meu layout, e nao queria muda-lo :frowning:
aqueles botoes html sao ridiculos

10

pronto, finalmente já percebi que não vou conseguir, mesmo que mudasse os botões teria sempre de fazer refresh a pagina em cada click nos botões, e isso ir-me-ia fazer voltar à pagina inicial em vez do sitio onde estava a clicar. Agora fiquei encalhado...
Já tive horas a procura de soluções e não encontro...
nunoferreira e neuron_upheaval, tentei usar o vosso código e não consegui por funcionar...
já não sei o que mais fazer, nem onde procurar. Se eu tivesse um exemplo funcional, julgo que iria conseguir entender e adaptar ao meu caso, mas nem isso...

Eu sei que não devo estar a pedir pouco, mas alguém me consegue dar uma solução para o meu impasse?

EDIT: parece que as minhas pesquisas andaram muito ao lado... já encontrei mais informações e estou a analisa-las agora... ja informo como me safei :slight_smile:

11

Uma coisa o teu Arduino tem um shield ethernet?

Na realidade tudo o que apresentas é uma grande confusão de ideias o que eu compreendo mas tenta seguir o que te estamos a indicar!

O melhor será começares por descrever como tens o arduino configurado, que módulo tens, que shields tens, porque a ideia nós já estamos a ver, agora queres simplesmente ver o estado da ligação das luzes ou também queres poder enviar um comando para elas ligarem!?

Se queres fazes as duas coisas como tens o arduino para fazer isto?!

Eu que desenvolvo aplicações web dei-te uma sugestão para interagires com a ideia do JSON que é muito straight forward.
Mas já reparei que estás a tentar usar php, e vais usar sockets?

Terei todo o gosto em ajudar vai dizendo coisas concretas.

12

Complementando o que o nunoferreira disse, começa por criar um servidor com o Arduino. Para começar escusas de te preocupar com receber dados e fazer o parsing do pedido http e basta enviares uma resposta em ascii. Depois vê um exemplo da formatação json, e envia uma string nesse formato.

Quando o arduino fizer isto, começa com o javascript e o exemplo anterior.

Tens vários problemas que tens de te aperceber:

Não dominas algumas das linguagens e tecnologias, logo tens de "perder" algum tempo a experimentar exemplos funcionais mesmo que diferentes do que queres para aprender como fazer algo.

Estás com alguma pressa em obter resultados... Isto aliado ao facto de não dominares as tecnologias que vais usar, torna tudo pior pois um pequeno problema parece-te uma coisa enorme.

Não estás a dividir os teus problemas e queres que tudo funcione à primeira. Isso é difícil de conseguir, faz como te disse, resolve uma coisa de cada vez. Primeiro o arduino como servidor, depois o java script. Vais ver que num instante obténs resultados se te dedicares a apenas uma tarefa de cada vez.

13

nunoferreira:
Uma coisa o teu Arduino tem um shield ethernet?

Na realidade tudo o que apresentas é uma grande confusão de ideias o que eu compreendo mas tenta seguir o que te estamos a indicar!

O melhor será começares por descrever como tens o arduino configurado, que módulo tens, que shields tens, porque a ideia nós já estamos a ver, agora queres simplesmente ver o estado da ligação das luzes ou também queres poder enviar um comando para elas ligarem!?

Se queres fazes as duas coisas como tens o arduino para fazer isto?!

Eu que desenvolvo aplicações web dei-te uma sugestão para interagires com a ideia do JSON que é muito straight forward.
Mas já reparei que estás a tentar usar php, e vais usar sockets?

Terei todo o gosto em ajudar vai dizendo coisas concretas.

Boas,

tenho um arduino mega 2560 e um ethernet shield w5100...
o que eu pretendo, é ligar e desligar as luzes atraves de um site que esta alojado aqui em casa, quero tambem saber o estado das luzes...
isto eu consigo atraves de php mas fica com um aspecto "mete nojo" na minha opinião. podes ver em
se quiseres o codigo desta pagina tambem te posso mandar. eu apenas usei o projecto de outra pessoa e alterei de forma a eu me entender mais facilmente.
sobre o aspecto, eu gostaria de manter o aspecto do meu site
mas o problema é que os meus botoes para ligar as lampadas são em javascript e JS apenas funciona no lado do cliente, ou seja, eu carrego na lampada, ela acende mas apenas no site, e nao tenho como fazer no javascript (lingua que practicamente nao conheço).
Estou a usar php porque é uma lingua que conheço, mesmo que nao seja aprofundadamente.
Estive a ler um pouco sobre JSON, e a estrutura fica em especie de blocos que sao comandados pelo URL (espero nao estar a dizer asneiras).
O bubulindo deve ter razão, a vontade de fazer as coisas e obter resultados é tanta que no meio de tanta coisa provavelmente simples parece complicada porque torna-se uma grande confusão na minha cabeça e juntamente com a confusão vem o stress e a frustação... :S

Enfim espero que tenha conseguido explicar melhor a situação

PS. Eu posso usar a linguagem que mais facilmente me consiga por isto a funcionar sem ter de abdicar do design do site que eu nao gostaria de perder, mas se tiver de ser la será. Se olhares para o site, consegues perceber que funcionalidades pretendo ter

Abraços

bubulindo:
Complementando o que o nunoferreira disse, começa por criar um servidor com o Arduino. Para começar escusas de te preocupar com receber dados e fazer o parsing do pedido http e basta enviares uma resposta em ascii. Depois vê um exemplo da formatação json, e envia uma string nesse formato.

Quando o arduino fizer isto, começa com o javascript e o exemplo anterior.

Tens vários problemas que tens de te aperceber:

Não dominas algumas das linguagens e tecnologias, logo tens de "perder" algum tempo a experimentar exemplos funcionais mesmo que diferentes do que queres para aprender como fazer algo.

Estás com alguma pressa em obter resultados... Isto aliado ao facto de não dominares as tecnologias que vais usar, torna tudo pior pois um pequeno problema parece-te uma coisa enorme.

Não estás a dividir os teus problemas e queres que tudo funcione à primeira. Isso é difícil de conseguir, faz como te disse, resolve uma coisa de cada vez. Primeiro o arduino como servidor, depois o java script. Vais ver que num instante obténs resultados se te dedicares a apenas uma tarefa de cada vez.

o que queres dizer com começa por criar um servidor com o Arduino? esquecer o shield ethernet por enquanto e usar apenas o arduino?
amanha, vou começãr do zero para poder aprender os conceitos e funcionamento do json e tentar levar as coisas passo a passo...
Concordo contigo no paragrafo da pressa, é a mais completa verdade.

Abraços

14

Maks:
o que queres dizer com começa por criar um servidor com o Arduino? esquecer o shield ethernet por enquanto e usar apenas o arduino?
amanha, vou começãr do zero para poder aprender os conceitos e funcionamento do json e tentar levar as coisas passo a passo...
Concordo contigo no paragrafo da pressa, é a mais completa verdade.

Um computador (assume computador no sentido mais lato que imaginares, desde servidores da Google até ao teu arduino com o shield Ethernet) ligado em rede pode assumir dois papéis. Cliente e Servidor. O cliente liga-se a um servidor para fazer uma transaccão e o servidor aceita (ou não) a ligacão do cliente para essa transaccão. O mesmo dispositivo pode ser cliente e servidor ao mesmo tempo, no entanto o que é importante aqui é compreender o papel de cada um deles.

Depois se imaginares o teu JavaScript como foi escrito no exemplo do NunoFerreira, ele vai ser um cliente. Repara que o JavaScript vai ligar-se a um Servidor para obter os dados que pretende. Neste caso, o Servidor vai ser o Arduino.

Isto é importante porque, como também podes ver nos exemplos do Shield Ethernet, o código é diferente. Quando configuras um cliente, ele é a parte activa da ligacão. Liga-se a um IP e faz um pedido ao servidor. O servidor por seu lado é passivo e só responde e aceita ligacões.

Logo para esta aplicacão, tens de ter o Arduino configurado como servidor para responder ao JavaScript.
//isto é tirado dos exemplos no Arduino. Experimenta correr isto.

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

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1, 177);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);

void setup()
{
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
}

void loop()
{
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(analogRead(analogChannel));  //AQUI PODES COLOCAR O ESTADO DAS TUAS LÂMPADAS. 
            client.println("
");
          }
          break;
        }
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        } 
        else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
  }
}

Depois tendo o Arduino colocado no teu router experimenta aceder a ele com um browser ou com telnet...
No caso do JSON, não precisas de HTML ou da resposta HTTP. :slight_smile:

15

ha aqui uma coisa que eu ainda nao estou a comprender...
Eu ja vi como é a estrutura de json, e penso que devo ter de usar xmlhttprequest. A minha duvida é:
imaginando um fluxograma, como é que as coisas devem funcionar?
Ard --- server --- client
O arduino envia o estado dos interruptores ao server, o server envia para o cliente, o cliente ao carregar no botão vai enviar ao server que carregou no botão, o server envia para o arduino que por sua vez altera o estado e envia o novo estado para o server que envia para o cliente. Estou a falar mal?
Agora, o que é que vai comunicar? Tentando explicar melhor a minha pergunta...
O arduino trabalha com o seu codigo normal, usa ajax/javascript/html/json?
o servidor recebe e faz o pedido o pedido em que linguagem?

Eu sei o que quero e como deveriam funcionar as coisas, mas na minha cabeça continua uma confusão sobre o que tenho de usar e onde...
Alguma explicação para burros, que me possa guiar?

Obrigado e Abraços

16

Já correste o meu exemplo?

17

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

18

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.

19

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

20

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