Go Down

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

Maks

Apr 16, 2012, 06:13 pm Last Edit: May 24, 2012, 10:08 pm by Maks Reason: 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

neuron_upheaval

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

Code: [Select]

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.

Maks

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

Maks

por exemplo, eu tenho este codigo...

Code: [Select]
<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:
Code: [Select]
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 ;)

Obrigado

nunoferreira

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:

Code: [Select]
<script type="text/javascript">
    $(function(){
        $("button")
            .click(function(){
                $.getJSON('http://ipdoarduino:porta', function(data){
                    var markup = '<strong>Local:</strong> ' + data.local +
                        '<br/><strong>Principal:</strong> ' + data.principal +
                        '<br/><strong>Despensa:</strong> ' + data.despensa +
                        '<br/><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:

Code: [Select]
<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!

http://api.jquery.com/jQuery.getJSON/ tens aqui mais informações.



Go Up