collapse

* Posts Recentes

Amplificador - Rockboard HA 1 In-Ear por almamater
[Ontem às 19:13]


O que é isto ? por KammutierSpule
[26 de Março de 2024, 19:35]


Bateria - Portátil por almamater
[25 de Março de 2024, 22:14]


Emulador NES em ESP32 por dropes
[13 de Março de 2024, 21:19]


Escolher Osciloscópio por jm_araujo
[06 de Fevereiro de 2024, 23:07]


TP4056 - Dúvida por dropes
[31 de Janeiro de 2024, 14:13]


Leitura de dados por Porta Serie por jm_araujo
[22 de Janeiro de 2024, 14:00]


Distancia Cabo por jm_araujo
[08 de Janeiro de 2024, 16:30]


Meu novo robô por josecarlos
[06 de Janeiro de 2024, 16:46]


Laser Engraver - Alguém tem? por almamater
[16 de Dezembro de 2023, 14:23]

Autor Tópico: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE  (Lida 16794 vezes)

0 Membros e 1 Visitante estão a ver este tópico.

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Bom dia camaradas! Estou a tentar desenvolver um projecto que consiste em utilizar um sensor por ultrassons, um arduino e um ethernet shield + cartão sd (embutido). A finalidade é ler o valor da altura da água presente num reservatório de abastecimento, enviar esses dados para o arduino por RF a 433MHz, e através do ethernet shield disponibilizar na rede de INTRANET o valor em percentagem e os litros de água que estão disponíveis no tanque. Já elaborei um código para o arduino, com algum suporte em outros códigos presentes por esta net fora, assim como uma página html bastante simples. Um aspecto importante neste projecto é o facto de eu só pretender efectuar o alojamento, tanto da página como das imagens, no cartão sd do ethernet shield (ou seja, um sistema independente). Até este momento consigo visualizar o nivel da percentagem e os litros, mas pretendia fazer uma imagem dinâmica que tivesse um tanque e o interior do tanque tivesse uma espácie de tabela que ficava, ou mais ou menos alta de forma a simular a água no interior do tanque. Os problemas que queria resolver são:

1. Não sei como enviar o valor do arduino de modo a alterar a altura da imagem.
2. As imagens demoram um bocado a carregar no browser (mesmo com o cartão em FULL SPEED.
3. Têm alguma ideia de algum género que possa melhorar este projecto, mantendo-o completamente independente?

Peço desculpa pela dimensão do texto, e por à partida tirar logo a vontade de ler o mesmo, mas a intenção é explicar bem o pretendido e as dificuldades.

Desde já agradeço a vossa atenção e toda e qualquer ajuda que me possam vir a dar!

O código que tenho no arduino é este:
Código: [Seleccione]
/* SETUP CARTÃO SD: O SD DEVE ESTAR FORMATADO EM "FAT" E DEVE CONTER UM FICHEIRO
 * COM O NOME "index.htm". TODOS OS FICHEIROS NO CARTÃO DEVEM TER NOMES COM NO
 * MÁXIMO 8 CARACTERES E EXTENSÕES COM NO MÁXIMO 3 CARACTERES.
 */
 
#include <SPI.h>
#include <SdFat.h>
#include <SdFatUtil.h>
#include <Ethernet.h>
#define greenLEDandBEEP 2

//O BUFFER DEVE SER GRANDE
#define BUFSIZ 128

float leitura = 0;
float percentagem = 0;
float litros = 0;
char buffer[3];

//CONFIGURAÇÃO DO ETHERNET SHIELD

byte mac[] = {
  0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX };
IPAddress ip(xx,xx,xxx,xx);
IPAddress gateway(xx,xx,xxx,x);
IPAddress subnet(255, 255, 255, 0);
char rootFileName[] = "index.htm";
EthernetServer server(80);

//PROGRAMAÇÃO PARA O CARTÃO SD

Sd2Card card;
SdVolume volume;
SdFile root;
SdFile file;

//ARMAZENA SEQUÊNCIAS DE ERRO NA MEMÓRIA FLASH PARA ECONOMIZAR RAM

#define error(s) error_P(PSTR(s))
void error_P(const char* str) {
  PgmPrint("Erro: ");
  SerialPrintln_P(str);
  if (card.errorCode()) {
    PgmPrint("Erro cartao SD: ");
    Serial.print(card.errorCode(), HEX);
    Serial.print(',');
    Serial.println(card.errorData(), HEX);
  }
  while(1);
}

void setup() {

  Serial.begin(9600);
 
  pinMode(greenLEDandBEEP, OUTPUT);
 
  PgmPrint("Memoria RAM Livre: ");
  Serial.println(FreeRam()); 
   
  pinMode(10, OUTPUT);             
  digitalWrite(10, HIGH);             

//INICIALIZA O CARTÃO SD EM "FULL SPEED", MÁXIMO DESEMPENHO. (PARA EVITAR ERROS COM LIGAÇÃO À BREADBOARD DEVE ESTAR EM "HALF SPEED"

  if (!card.init(SPI_FULL_SPEED, 4)) error("Falha no card.init!");

//INICIALIZA O VOLUME FAT

  if (!volume.init(&card)) error("Falha no vol.init!");

  PgmPrint("O volume e FAT");
  Serial.println(volume.fatType(),DEC);
  Serial.println();

  if (!root.openRoot(&volume)) error("Falha no openRoot!");

  PgmPrintln("Ficheiros na raiz do cartao:");
 
//LISTA NA SÉRIE OS FICHEIROS QUE ESTÃO NA RAIZ DO CARTÃO SD, COM DATA E TAMANHO
 
  root.ls(LS_DATE | LS_SIZE);
  Serial.println();

//LISTA OS FICHEIROS DE TODOS OS DIRECTÓRIOS DO CARTÃO SD

  PgmPrintln("Ficheiros encontrados em todos os directorios do cartao:");
  root.ls(LS_R);

  Serial.println();
  PgmPrintln("Concluido");
 
//CONCLUI A DEPURAÇÃO E INICIA O SERVIDOR 

  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  delay(1);
}


void loop()
{
  char clientline[BUFSIZ];
  char *filename;
  int image = 0;
  int index = 0;

  EthernetClient client = server.available();
  if (client) {
    boolean current_line_is_blank = true;

//REPÕE O BUFFER DE ENTRADA

    index = 0;

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

//SE NÃO É UMA NOVA LINHA, GUARDA OS CARACTERES RECEBIDOS

        if (c != '\n' && c != '\r') {
          clientline[index] = c;
          index++;

//SE O BUFFER NÃO FOR GRANDE O SUFICIENTE, APAGA ALGUNS DADOS

          if (index >= BUFSIZ)
            index = BUFSIZ -1;
          //CONTINUA A LER MAIS DADOS
          continue;
        }

//SE TEM \n OU \r ENTÃO A RECEPÇÃO DE DADOS ESTÁ CONCLUÍDA

        clientline[index] = 0;
        filename = 0;

//IMPRIME NA SÉRIE PARA DEPURAÇÃO

        Serial.println(clientline);

//PROCURA "GET / " PARA ENVIAR O index.htm

        if (strstr(clientline, "GET / ") != 0) {
          filename = rootFileName;

        }
        if (strstr(clientline, "GET /") != 0) {

//SE NÃO HOUVER ESPAÇO A SEGUIR À "/", ENTÃO ESTÁ A PEDIR UM SUBDIRECTÓRIO OU FICHEIRO

          if (!filename) filename = clientline + 5;

//VÊ OS 5 CARACTERES APÓS O "GET /"

          (strstr(clientline, " HTTP"))[0] = 0;

//IMPRIME O NOME DO FICHEIRO "index.htm" NA SÉRIE

          Serial.println(filename);

          if (! file.open(&root, filename, O_READ)) {
            client.println("HTTP/1.1 404 Not Found");
            client.println("Content-Type: text/html");
            client.println();
            client.println("<h2>Erro 404</h2>");
            client.println("<s2>O ficheiro nao existe.<s2>");
            client.println("");
            break;
          }

          Serial.println("Ligado!");

//TIPOS DE FICHEIRO QUE PODEM ESTAR NO CARTÃO SD

          client.println("HTTP/1.1 200 OK");
          if (strstr(filename, ".htm") != 0)
            client.println("Content-Type: text/html");
          else if (strstr(filename, ".css") != 0)
            client.println("Content-Type: text/css");
          else if (strstr(filename, ".png") != 0)
            client.println("Content-Type: text/php");
          else if (strstr(filename, ".php") != 0)
            client.println("Content-Type: image/png");
          else if (strstr(filename, ".jpg") != 0)
            client.println("Content-Type: image/jpeg");
          else if (strstr(filename, ".gif") != 0)
            client.println("Content-Type: image/gif");
          else if (strstr(filename, ".3gp") != 0)
            client.println("Content-Type: video/mpeg");
          else if (strstr(filename, ".pdf") != 0)
            client.println("Content-Type: application/pdf");
          else if (strstr(filename, ".js") != 0)
            client.println("Content-Type: application/x-javascript");
          else if (strstr(filename, ".xml") != 0)
            client.println("Content-Type: application/xml");
          else
            client.println("Content-Type: text");
          client.println();

          int16_t c;
          while ((c = file.read()) >= 0) {

//IMPRIME NA SÉRIE TODO O CÓDIGO HTML (LENTO!) POR ISSO ESTÁ DESACTIVADO
           
            /*  Serial.print((char)c);  */
           
//IMPRIME NO BROWSER A PÁGINA HTML (CÓDIGO DO FICHEIRO "index.htm")
           
            client.print((char)c);
          }

//A PARTIR DAQUI SERÁ CÓDIGO HTML A ACRESCENTAR AO "index.htm"
       
          client.print("<html><body>");
           
//LEITURA DOS DADOS DO SENSOR E CONVERSÃO PARA PERCENTAGEM

        if ( Serial.available () > 0 )
  {
    if (Serial.read() == 'R')
   {
     Serial.readBytesUntil ( '\r', &buffer[0], 3 );
 
  leitura = atoi(buffer);
  percentagem = (leitura*100)/465;
 
  Serial.print("Nivel do Tanque:");
  Serial.print(percentagem, 1);
  Serial.println("%");
 
 //CÁLCULOS DA QUANTIDADE DE ÀGUA NO TANQUE
         
  litros = (percentagem*700000)/100;       
 
  Serial.print("Quantidade de agua no Tanque:");
  Serial.print(litros, 1);
  Serial.println("litros");
}
 
}
         
        if (percentagem >= 90 || percentagem <=10){
          client.print("<p>Nivel do Tanque: ");
          client.print("<b><font color=#E60000>");
          client.print(percentagem, 1);
          client.println("%");
          client.print("</font></b>");
         
          client.print("<p>Quantidade de agua no tanque: ");
          client.print("<b><font color=#E60000>");
          client.print(litros, 1);
          client.println(" litros");
          client.print("</font></b>");
            }
       else {
          client.print("<p>Nivel do Tanque: ");
          client.print("<b>");
          client.print(percentagem, 1);
          client.println("%");
          client.print("</b>");
       
          client.print("<p>Quantidade de agua no tanque: ");
          client.print("<b>");
          client.print(litros, 1);
          client.println(" litros");
          client.print("</b>");
       }
          client.print("</p></body></html>");
         
//FIM DO CÓDIGO HTML A IMPRIMIR NO BROWSER

          file.close();

        }
        else {
         
//TUDO O QUE NÃO ESTEJA INSERIDO NAS DEFINIÇÕES, É UM ERRO 404

          client.println("HTTP/1.1 404 Not Found");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<h2>Error 404</h2>");
          client.println("");
        }
        break;
      }
    }
    digitalWrite(greenLEDandBEEP, HIGH);
    delay(1);
    digitalWrite(greenLEDandBEEP, LOW);
    delay(1);
    client.stop();
  }
}

//FIM DO PROGRAMA


Em anexo está o exemplo da página html.

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #1 em: 17 de Janeiro de 2013, 18:48 »
Só para acrescentar, a imagem (ou tabela, etc) é para ficar de forma a que, como se pode ver no exemplo da página que está em anexo, no interior do tanque simule o nível de água lá dentro.


Offline tarquinio

  • Mini Robot
  • *
  • Mensagens: 529
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #2 em: 17 de Janeiro de 2013, 23:21 »
Hummm... Dava-te jeito teres acabada uma library que eu tou a fazer precisamente para esse tipo de coisas... :P Tenho um projecto de Domótica em que vejo os estados das luzes e janelas da casa, mas se as coisas mudarem sem ser atraves da interface web só se vê quando se faz refresh.
Estou a usar um webserver no arduino com uma library que estou a modificar, e as coisas que faltam fazer é precisamente servir ficheiros a partir do SD card e suportarem páginas com conteúdo dinâmico (com dados a vir do arduino).
Em relação à parte do SD, não te posso ajudar muito, mas já agora deixo-te aqui umas coisas que descobri nums testes. Testei enviar um ficheiro de 560k com buffers de vários tamanhos:
// 16 byte buffer = 17.5s
// 32 byte buffer = 13.5s
// 64 byte buffer = 11.5s
// 128 byte buffer = 10.7s
// 256 byte buffer = 10.2s
// 512 byte buffer = 10.0s
Ter um buffer maior que 128 bytes não adianta grande coisa. Estas medições foram com half speed, com full speed as proporções são bastante parecidas).
Seja qual for o tamanho do buffer, o arduino (ou melhor o ethernet shield, assumindo que estás a usar o
shield oficial) tenta mandar sempre frames ethernet completas, e só uma de cada vez. O tamanho máximo é 1500 bytes. Isto significa por exemplo que se estiveres a enviar um ficheiro com 1501 bytes por exemplo, ele vai enviar os primeiros 1500 bytes, esperar confirmação que foram recebidos, e depois enviar mais uma frame com apenas 1 byte.

Em relação a teres a página dinâmica, essa parte já vai implicar programação (no meu caso tou a usar JavaScript e uma cena chamada Websockets). Basicamente a idéia é quando a página carrega, abre uma ligação para o Arduino e essa ligação fica sempre aberta... Depois podes enviar ou receber bytes de ambos os lados simplesmente fazendo send() e receive(). No teu caso o que te interessa seria estar sempre a ler o valor do sensor e enviar esse valor, depois no browser ter código para ler esse valor e alterar o tamanho da imagem consoante o valor.
Fiz alguns testes usando este sistema e pareceu bastante estável. Fiz um pequeno teste em que tinha uma página com uma lampada, e um botão no arduino que fazia a lâmpada acender e apagar. Funcionou perfeitamente, experimentei até deixar a página aberta uma tarde inteira e ao fim do dia ainda estava a receber os comandos bem.
Já tens algumas libraries para este tipo de coisas... As más notícias são que... Nem todos os browsers suportam bem todos os tipos de coisas... Exemplo: Como te disse isto funcionou tudo bem no Firefox. No Google Chrome, o browser que costumo utilizar, ele não reconhece logo quando o Websocket fecha, de modo que se fizeres refresh à página ele deixa de funcionar, fazendo refresh de novo volta a funcionar, etc etc... É só para te dar uma idéia de que quando fazes cenas destas, não estranhes as coisas funcionarem de forma diferente em browsers diferentes (ou não funcionarem de todo). ;)

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #3 em: 18 de Janeiro de 2013, 09:20 »
Obrigado pela resposta!!! ;D   Realmente a parte dinâmica é a que esta a ser dificil. Já li algo sobre sockets no PHP onde (penso eu) se tiver isso embutido na pagina html (index.htm) que o arduino envia para o browser atraves do SD card, vai fazer uma ligação ao arduino. Tentei fazer isso mas não consegui, e fiquei sem perceber se o problema seria o arduino como webserver não ter o apache "instalado" que é o que têm os servidores PHP (isto é mais uma questão que uma afirmação). Mas o que disseste em relação à ligação permanente ao arduino era precisamente o que eu precisava. Está-me a faltar alguns "inputs" ou orientações, pois tenho pesquisado bastante sobre isto e há coisas que ainda não consegui entender bem. Já pensei também fazer algo como um iframe que estivesse sempre a fazer refresh (ainda não testei), mas parece-me que depois tenho o mesmo problema em definir a altura dele de acordo com a leitura do sensor...  Que opinião têm sobre o que foi dito?

Offline tarquinio

  • Mini Robot
  • *
  • Mensagens: 529
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #4 em: 18 de Janeiro de 2013, 17:38 »
A library qhe estou a usar, se não me engano é esta:
https://github.com/johannrichard/Arduino-Websocket-Server

É um bom ponto para começares... Tem já exemplos que te permitem fazer um teste inicial (Tem uma página em que vai aparecendo texto que está a ser enviado a partir do arduino (usando javascript).
No teu caso, a cena mais simples que eu prováverlmente faria seria ter a imagem estática que tu já tens, depois desenharia por cima uma imagem a representar água, e esticaria essa imagem consoante o valor que estivesse a ser recebido do arduino.

Código: [Seleccione]
      ws.onmessage = function(evt) {
           window.console.log(evt.data);
           $("#msg").append("<p>"+evt.data+"<p>");
      };

No exemplo que vem com a library, terias de alterar esta função, e criar código javascript para interpretar o que foi recebido (no evt.data), que no teu caso seria provávelmente um numero qualquer, fazer umas contas com esse número, e usar o valor final para definir a altura da água.
Se não sabes mesmo nada de Javascript, aconselho-te a perderes umas horas e fazer estes tutoriais:
http://www.w3schools.com/js/default.asp

Depois para alterares dinamicamente o tamanho das imagens é algo deste género no script:
Código: [Seleccione]
var theImg = document.getElementById('theImgId');
theImg.height = 150;
theImg.width = 150;

E no <body>
Código: [Seleccione]
<img src="src/to/your/img.jpg" id="theImgId">

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #5 em: 18 de Janeiro de 2013, 22:20 »
Obrigado pelas dicas! Eu vou experimentar o que recomendas-te, mas entretanto só para que eu consiga perceber melhor o funcionamento da coisa, a página que fica alojada no arduino "consegue" receber os dados lidos do sensor? Ou melhor explicando, visto que o arduino envia linha por linha os codigos da página para o browser, como é que a página vai obter os dados do sensor? (Não consigo explicar a minha dúvida de outra forma) Em relação à imagem estática e ter outra por cima a simular a àgua foi mesmo isso que tentei fazer e após alguns testes (sem ser com os valores do sensor, pois essa é uma dificuldade minha) alterei a altura de uma tabela e também de uma imagem para simular e reparei que ambas não ficam fixas e apenas mudam a altura, ou seja, no caso da imagem por exemplo ao aumentar, a parte do fundo não fica fixa e sai para baixo do tanque (a diminuir fica um espaço entre o fundo do tanque e a imagem). No caso da tabela acontece algo semelhante.
Andei a pesquisar e encontrei o codigo que está em baixo e que acho que foi ao que te referis-te na primeira resposta, ligação por socket em PHP. Embora eu não precise de botões nem de ligar nada, o que interessava aqui seria a comunicação página -> arduino. Era a isto que te referias?

Código: [Seleccione]
<html>
<head></head>
<body>
 
<?php
$sock 
socket_create(AF_INETSOCK_STREAMSOL_TCP);
// Se conecta ao IP e Porta:
socket_connect($sock,"187.15.6.131"8081);
 
// Executa a ação correspondente ao botão apertado.
if(isset($_POST['bits'])) {
  
$msg $_POST['bits'];
  if(isset(
$_POST['Fora'   ])){ if($msg[0]=='1') { $msg[0]='0'; } else { $msg[0]='1'; }}
  if(isset(
$_POST['Quarto1'])){ if($msg[1]=='1') { $msg[1]='0'; } else { $msg[1]='1'; }}
  if(isset(
$_POST['Quarto2'])){ if($msg[2]=='1') { $msg[2]='0'; } else { $msg[2]='1'; }}
  if(isset(
$_POST['Sala'   ])){ if($msg[3]=='1') { $msg[3]='0'; } else { $msg[3]='1'; }}
  if(isset(
$_POST['Pequeno'])){ $msg 'P#'; }
  if(isset(
$_POST['Grande' ])){ $msg 'G#'; }
  
socket_write($sock,$msg,strlen($msg));
}
 
socket_write($sock,'R#',2); //Requisita o status do sistema.
 
// Espera e lê o status e define a cor dos botões de acordo.
$status socket_read($sock,6);
if ((
$status[4]=='L')&&($status[5]=='#')) {
  if (
$status[0]=='0'$cor1 lightcoral;
    else 
$cor1 lightgreen;
  if (
$status[1]=='0'$cor2 lightcoral;
    else 
$cor2 lightgreen;
  if (
$status[2]=='0'$cor3 lightcoral;
    else 
$cor3 lightgreen;
  if (
$status[3]=='0'$cor4 lightcoral;
    else 
$cor4 lightgreen;
   
  echo 
"<form method =\"post\" action=\"teste.php\">";
  echo 
"<input type=\"hidden\" name=\"bits\" value=\"$status\">";
  echo 
"<button style=\"width:70; background-color: $cor1 ;font: bold 14px Arial\" type = \"Submit\" Name = \"Fora\">Fora</button></br></br>";
  echo 
"<button style=\"width:70; background-color: $cor2 ;font: bold 14px Arial\" type = \"Submit\" Name = \"Quarto1\">Quarto1</button></br></br>";
  echo 
"<button style=\"width:70; background-color: $cor3 ;font: bold 14px Arial\" type = \"Submit\" Name = \"Quarto2\">Quarto2</button></br></br>";
  echo 
"<button style=\"width:70; background-color: $cor4 ;font: bold 14px Arial\" type = \"Submit\" Name = \"Sala\">Sala</button></br></br></br>";
  echo 
"<button style=\"width:90;font: bold 14px Arial\" type = \"Submit\" Name = \"Pequeno\">Portao Pequeno</button></br></br>";
  echo 
"<button style=\"width:90;font: bold 14px Arial\" type = \"Submit\" Name = \"Grande\">Portao Grande</button></br></br>";
  echo 
"</form>";
}
// Caso ele não receba o status corretamente, avisa erro.
else { echo "Falha ao receber status da casa."; }
socket_close($sock);
?>

 
</body>
</html>

Offline tarquinio

  • Mini Robot
  • *
  • Mensagens: 529
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #6 em: 18 de Janeiro de 2013, 23:50 »
Sim isso deve ser uma coisa do género em PHP... Sinceramente eu não sei quase nada de PHP... E tambem não sei assim muito mais de Javascript, mas para o que tu queres fazer, javascript parece-me ser o mais adequado :P
Quando á questão das posições das imagens, tambem não sei se haverá maneiras mais correctas, mas eu usaria <div> em vez de tabelas, desta forma:
Código: [Seleccione]
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var myVar=setInterval(function(){myTimer()},1000);
var dynamic_height = 100;
function myTimer()
{
var theImg = document.getElementById("img2");
var d = new Date();
dynamic_height = 100 (d.getSeconds()*3);
theImg.height = dynamic_height;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

<body>
<center>
<b>THIS IS THE TITLE</b>
<div style="position:relative; width:360; height:336">
<div style="position:absolute; top:0; left:0"><center><img name="img1" id="img1" src="1.gif" width="360" height="336"></center></div>
<div style="position:absolute; top:50; left:50"><center><input type="image" name="img2" id="img2" src="2.gif" width="100" height="130">
</center></div>
</div>
</body></html>

Este codigo desenha uma imagem pequena em cima de uma imagem maior, e o tamanho da imagem mais pequena varia consoante o número de segundos passados no minuto actual. Grava isto num ficheiro html, coloca na mesma directoria duas imagens chamadas 1.gif e 2.gif e deve funcionar.
Ajustares isto ao que tu queres é fácil, é so fazeres algumas contas com os tamanhos das tuas imagens.

Depois o que tu queres fazer é em vez de ter a função myTimer, queres que as coisas se alterem quando for recebida uma mensagem do arduino. Isso será feito naquela função onmessage que vem no exemplo da library que referi no post anterior. É bastante fácil em javascript ler os valores e fazer contas com eles. Não tens de declarar tipos de variáveis nem nada, é só mesmo fazer os cálculos.

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #7 em: 19 de Janeiro de 2013, 08:32 »
OK! Hoje vou ver se faço os testes e estudo um pouco sobre o que me passas-te, de forma a adaptar os códigos ao que pretendo. Quando tiver algo a relatar eu volto a postar. Desde já agradeço-te a grande ajuda que me tens dado!  ;D 

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #8 em: 19 de Janeiro de 2013, 22:18 »
Estive hoje a testar os códigos que me deste e apesar de não ter conseguido ver a página a alterar o tamanho da imagem 2, vi que era mesmo isto que eu queria fazer (alterei os valores manualmente). Após mais algum estudo, começo a concluir que o facto do sistema ser completamente independente faz com que fique com algumas limitações, entre elas o facto de ser o arduino a "escrever" no browser linha por linha do codigo da pagina alojada no cartão o que implica que a mesma só possa executar o que foi programado 1 vez, pois a partir daí só altera alguma coisa quando se volta a fazer um GET ao arduino. Desta forma parece-me que vou tentar pegar nesta parte do código:
Código: [Seleccione]
<div style="position:relative; width:360; height:336">
<div style="position:absolute; top:0; left:0"><center><img name="img1" id="img1" src="1.gif" width="360" height="336"></center></div>
<div style="position:absolute; top:50; left:50"><center><input type="image" name="img2" id="img2" src="2.gif" width="100" height="130">
</center></div>
</div>
e fazer com que seja o arduino a enviar a posição das imagens, como strings para o browser (pode ser que resulte) pois á partida posso alterar o valor da altura antes de enviar a string e desta forma adicionar um meta refresh no codigo html. O lado mau é que ao ser o arduino a disponibilizar as imagens e que este processo de carregamento no browser se  faz de forma mais ou menos lenta (mesmo com SPI_FULL_SPEED), o mesmo terá que carregar tudo cada vez que actualiza a página.

Offline r16

  • Mini Robot
  • *
  • Mensagens: 339
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #9 em: 19 de Janeiro de 2013, 23:42 »
boas, e nao da para tu ires buscar as imagens alojadas a um servidor tipo

 client.println("<img src='http://dl.dropbox.com/u/6916111/tvon.png' type='image' style=\"position:fixed;left:254px;top:146px;width:146px;height:93px;z-index:2;padding:0;\">");


Offline tarquinio

  • Mini Robot
  • *
  • Mensagens: 529
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #10 em: 20 de Janeiro de 2013, 00:56 »
Ok duas coisas... Primeiro, no código que eu enviei faltava uma coisa
Onde estava:
dynamic_height = 100 (d.getSeconds()*3);
devia ser:
dynamic_height = 100 + (d.getSeconds()*3);
Fazendo esta modificação já deves ver a página a alterar-se.

Agora em relação a usar websockets ou não, isso é contigo... Podes fazer a página estática do ponto de vista do browser, e fazer de maneira que o browser esteja sempre a fazer auto-refresh, e actualizar os valores sempre que se envia uma página nova. Isso é bem mais fácil, mas fica mais "feio", porque vai ver-se sempre que a página está a ser refrescada, principalmente se estiver sempre a ler as imagens de novo como disseste.
Acho que compensaria tentares fazer com websockets, mas isso agora tudo depende do tempo que tens e do trabalho que queres ter neste projecto (e da tua experiência com programação, que vai influenciar os factores anteriores).

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #11 em: 20 de Janeiro de 2013, 09:33 »
Tenho estado a aprender programação ao nível do arduino e também protocolo http e php/html conforme vou tendo os problemas neste projecto, embora o arduino já tenha estudado outras coisas de modo a perceber o funcionamento. Tens razão no que dizes, realmente a página a fazer auto-refresh era a última coisa que queria fazer, até pelo tempo que demora a carregar as imagens. Eu preferia fazer com websockets, mas ainda não percebi muito bem o esquema da "coisa". Neste preciso momento a ideia que eu tenho é que, se é o arduino a escrever o código da página no browser, como é que a página fica "ligada" de forma a receber uma variável do arduino e fazer as acções determinadas? Com uma página alojada num servidor na net eu já percebi (+/-) o esquema, o que ainda não percebi bem é este esquema da página ser enviada pelo arduino/receber valores e tratá-los.
Do que tenho pesquisado até agora ainda não encontrei informação que explique a um leigo como usar websockets com o arduino e como funcionam (o que fazem os códigos).

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #12 em: 20 de Janeiro de 2013, 10:05 »
Eu disse websockets, mas pode ser qualquer outra coisa como o java, que já tinhas sugerido! Vou actualizar o código com a alteração que referiste e ver como fica. Vou carregar a página para o cartão sd e ver se depois de carregada no browser a imagem altera conforme o tempo.

Citar
boas, e nao da para tu ires buscar as imagens alojadas a um servidor tipo

 client.println("<img src='http://dl.dropbox.com/u/6916111/tvon.png' type='image' style=\"position:fixed;left:254px;top:146px;width:146px;height:93px;z-index:2;padding:0;\">");
Isso realmente facilitava, mas queria fazer este sistema independente, ou seja, isto vai trabalhar numa rede de intranet do trabalho com o ethernet shield com um ip fixo. Quando se acede ao ip o arduino carrega a página que está no cartão sd, no browser, não utilizando qualquer recurso em termos de alojamento do servidor. O objectivo era este. Apresentar os dados do sensor é fácil, a parte que me está a complicar é a imagem alterar o tamanho de acordo com o valor do sensor (tipo "animação") mantendo presente que esta página esta no cartão e não no servidor.
« Última modificação: 20 de Janeiro de 2013, 10:13 por blastboot »

Offline blastboot

  • Mini Robot
  • *
  • Mensagens: 15
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #13 em: 20 de Janeiro de 2013, 10:33 »
tarquinio já experimentei, alojei no cartao sd e carregou o tanque que meti como 1.gif e um quadrado azul que meti como 2.gif e vai aumentando a altura de cima para baixo de segundo a segundo. Agora consegues explicar-me de que forma posso enviar o valor do arduino (ou o código da página ir buscar) de forma a fazer o lugar dos segundos?

Offline tarquinio

  • Mini Robot
  • *
  • Mensagens: 529
Re: Ajuda->Ethernet Shield + Cartão SD a Servir de Servidor INDEPENDENTE
« Responder #14 em: 20 de Janeiro de 2013, 17:39 »
Viste a library que eu linkey no 2º post? É precisamente para isso. :P De qualquer modo, aqui está um exemplo que adaptei a partir dos testes que fiz qdo comecei a brincar com websockets:
Código: [Seleccione]
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script>
    $(document).ready(function()
{
// WebSocket needs to be set to IP of arduino.
ws = new WebSocket("ws://192.168.1.70:8080");
ws.onmessage = function(evt)
{
var theImg = document.getElementById("img2");
theImg.height = evt.data;
var theDiv = document.getElementById("div2");
theDiv.style.top = 320-evt.data;
};
});
</script>
</head>

<body>
<center>
<b>Dynamic water tank</b>
<div style="position:relative; width:400; height:400">
<div style="position:absolute; top:0; left:0"><center><img name="img1" id="img1" src="tanque.jpg" width="360" height="336"></center></div>
<div style="position:absolute; top:100; left:15" id="div2"><center><input type="image" name="img2" id="img2" src="agua.jpg" width="235" height="130">
</center></div>
</div>
</body></html>

E no arduino usei isto:
Código: [Seleccione]
#include "SPI.h"
#include "Wire.h"
#include "Ethernet.h"

#include "WebSocket.h"
WebSocket wsServer("/", 8080);

// Network Settings
static uint8_t mac[] = { 0x90, 0xA2, 0xDA, 0x00, 0x75, 0x57 };
static uint8_t ip[] = { 192, 168, 1, 70 };

void onConnect(WebSocket &socket)
{
  Serial.println("onConnect called");
}

// You must have at least one function with the following signature.
// It will be called by the server when a data frame is received.
void onData(WebSocket &socket, char* dataString, byte frameLength)

  Serial.print("Got data: ");
  Serial.write((unsigned char*)dataString, frameLength);
  Serial.println();
}

void onDisconnect(WebSocket &socket) {
  Serial.println("onDisconnect called");
}

void setup()
{
    // Initializing all the hardware...
    Serial.begin(115200);   
    Serial.println(F("Starting..."));
    Wire.begin();

    Ethernet.begin(mac, ip);
    wsServer.registerConnectCallback(&onConnect);
    wsServer.registerDataCallback(&onData);
    wsServer.registerDisconnectCallback(&onDisconnect); 
    wsServer.begin();

    Serial.println("Init complete!");
}

int a = 80;

void loop()
{
    // Should be called for each loop.
    wsServer.listen();
    if (wsServer.isConnected())
    {
        char buff[20];
        sprintf(buff, "%i\r\n", a);
        wsServer.send(buff, 4);
        Serial.print("sending:"); Serial.println(buff);
        a = (a 1) 0;     
    }   
    delay(1000);
}

Isto funciona melhor no Firefox... No Chrome tem o problema de se fizeres refresh à página deixar de funcionar... Depois fazendo refresh de novo volta a funcionar... E no IE9 não funciona... No 10 deveria funcionar, mas nca testei...