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: [Pedido de Ajuda] Arduino EthernetShield Armazenar um pagina html e imagem dentr  (Lida 27424 vezes)

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

Offline r16

  • Mini Robot
  • *
  • Mensagens: 339
Caros Amigos,,,bom já lá vao alguns dias que ando aqui a matar a cabeça com um problema que nao consigo de forma alguma resolver...primeiro porque nao entendo muito de arduino, depois que sou teimoso e insistente e tudo isso me faz doer a cabeça e fica dificil pensar sozinhoel.
Bom entao o que eu preciso de ajuda??
Eu tenho um shield ethernet com SD com chip wiznet.

E o que eu pretendia era um codigo no arduino que funcionasse dentro do WEBSERVER dele onde contesse uma imagem parecida com esta dentro dele num formato html



Ou seja quando eu clicasse ai nesses ICONES das lampadas do lado direito, ele acendia um led, e quando clicasse na mesma "imagem" ele desligasse o led.
Mas atencao, eu nao quero ter o site em servidores nenhuns, queria aloja-lo no meu arduino INCLUINDO O CODIGO e essa IMAGEM que seria o interface.
E possivel fazer isso? alguem com disposicao para me ajudar?
PS: Nao tenho conhecimentos gerais de html e nao muito de Arduino, mas estou disposto a aprender com quem tiver Dom de me ajudar
Obrigado


''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Algumas informacao que pode ser importante a quem me quiser ajudar.

# Include
# Include
# Include
# Include
/ ************ ************ STUFF ETHERNET /
mac byte [] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED};
ip byte [] = {192, 168, 1, 177};
rootFileName char [] = "index.htm";
Servidor servidor (80);
/ ************ STUFF SDCARD ************ /
Cartão Sd2Card;
Volume de SdVolume;
SdFile raiz;
Arquivo SdFile;
/ / Armazena seqüências de erro em flash para economizar RAM
# Define erro (s) error_P (PSTR (s))
vazio error_P (const char * str) {
PgmPrint ("erro:");
SerialPrintln_P (str);
if (card.errorCode ()) {
PgmPrint ("erro SD:");
Serial.print (card.errorCode (), HEX);
Serial.print (',');
Serial.println (card.errorData (), HEX);
}
while (1);
}
void setup () {
Serial.begin (115200);
PgmPrint ("RAM livre:");
Serial.println (FreeRAM ());
/ / Inicializa o cartão SD no SPI_HALF_SPEED para evitar erros de ônibus com
/ / Breadboards. SPI_FULL_SPEED usar para um melhor desempenho.
pinMode (10, OUTPUT); / / colocar o pino SS como uma saída (necessary!)
digitalWrite (10, HIGH); / / mas desligar o chip W5100!
if (card.init (SPI_HALF_SPEED, 4)!) erro ("card.init falhou!");
/ / Inicializar um volume FAT
se o erro ("vol.init falhou!") (volume.init (e cartão)!);
PgmPrint ("Volume é FAT");
Serial.println (volume.fatType (), DEC);
Serial.println ();
se o erro ("openRoot falhou") (root.openRoot (e volume)!);
/ List / arquivo na raiz, com data e tamanho
PgmPrintln ("Arquivos encontrados na raiz:");
root.ls (LS_DATE | LS_SIZE);
Serial.println ();
Lista / / recorrente de todos os diretórios
PgmPrintln ("Arquivos encontrados em todos os dirs:");
root.ls (LS_R);
Serial.println ();
PgmPrintln ("Done");
/ / Depuração completa, iniciar o servidor!
Ethernet.begin (mac, ip);
server.begin ();
}
/ / Como grande o nosso buffer de linha deve ser. 100 é muito!
# Define BUFSIZ 100
void loop ()
{
caractere clientline [BUFSIZ];
char * filename;
int index = 0;
int imagem = 0;
Cliente cliente = server.available ();
if (cliente) {
/ / Um pedido http termina com uma linha em branco
boolean current_line_is_blank = true;
/ / Repor o buffer de entrada
index = 0;
while (client.connected ()) {
if (client.available ()) {
char c = client.read ();
/ / Se não é uma nova linha, adicione o personagem para o buffer
if (c! = '\ n' && c! = '\ r') {
clientline [índice] = c;
index + +;
/ / Estamos muito grande para o buffer? começar a jogar fora de dados
if (index> = BUFSIZ)
index = BUFSIZ -1;
/ / Continuar a ler mais dados!
continuar;
}
/ / Tem um \ n ou \ r nova linha, o que significa que a cadeia é feito
clientline [índice] = 0;
filename = 0;
/ / Imprimi-lo para depuração
Serial.println (clientline);
/ / Procure substring como um pedido para obter o arquivo raiz
if (strstr (clientline, "GET /") = 0) {
filename = rootFileName;
}
if (strstr (clientline, "GET /") = 0) {
/ / Neste momento nenhum espaço após o /, então um arquivo sub-
Se filename = clientline + 5 (nome do arquivo!); / olhar / após o "GET /" (5 caracteres)
/ / Um pequeno truque, procure o "HTTP/1.1" string e
/ / Ligar o primeiro caractere da substring em um 0 a limpá-lo.
(Strstr (clientline, "HTTP"))
  • = 0;

/ / Imprimir o arquivo que queremos
Serial.println (filename);
if (! File.open (& raiz, filename, O_READ)) {
client.println ("HTTP/1.1 404 Not Found");
client.println ("Content-Type: text / html");
client.println ();
client.println ("Arquivo não encontrado
");
quebrar;
}
Serial.println ("Aberto");
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: 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, ".3 gp") = 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");
outro
client.println ("Content-Type: text");
client.println ();
int16_t c;
while ((c = file.read ())> = 0) {
/ Descomente / o serial de depuração (slow!)
/ / Serial.print ((char) c);
client.print ((char) c);
}
File.close ();
Else {}
/ / Tudo o resto é um 404
client.println ("HTTP/1.1 404 Not Found");
client.println ("Content-Type: text / html");
client.println ();
client.println ("Arquivo não encontrado
");
}
quebrar;
}
}
/ / Dar tempo ao navegador web para receber os dados
atraso (1);
client.stop ();
}
}



0000000000000000000000000000000000000000000000000000

Aqui fica um video de quase o que eu quero...
Repararem que ele carregou uma pagina HTML dentro do SDcard, mas ele tem DOIS botoes la LED ON e LED off,
eu nao quero esse botoes, eu quero clicar em cima da imagem, ou seja a imagem exemplo LAMPADA é como se fosse um botao,


Offline r16

  • Mini Robot
  • *
  • Mensagens: 339
Mais informacao que achei:
Penso que estamos proximos do que é pedido:
http://andrew-j-norman.blogspot.pt/2011/12/my-own-web-server.html

Offline senso

  • Global Moderator
  • Mini Robot
  • *****
  • Mensagens: 9.733
  • Helpdesk do sitio
Então, tens de usar um ecrã com touch-screen e implementas soft-buttons baseados em regiões quadradas/rectangulares do tamanho da imagem do botão.
Avr fanboy

Offline r16

  • Mini Robot
  • *
  • Mensagens: 339
Qual e o programa (leve ) indicado para poder agregar a imagem a um index.html?

Offline microbyte

  • Mini Robot
  • *
  • Mensagens: 1.322
    • http://ricardo-dias.com/
A tua imagem não precisa de estar no Arduino. Podes colocar a imagem na internet, e depois referencias na tag <img src="URL"> o seu URL. ;)

Offline r16

  • Mini Robot
  • *
  • Mensagens: 339
ok Microbyte e Senso,

Ja consegui alojar o meu index.htm no SD do ethernet shield, e ja consigo acessar a ele pela internet, e quando acesso ele abre essa imagem que defini,

Agora o que pretendo é, por exemplo quando clico em cima dessa imagem na parte da piscina...

que ele me ligue um LED..

Portanto faz tanto codigo no index.html, como codigo no arduino,,, alguem me ajuda nessas modificacoes?

aqui fica o codigo.

#include <LiquidCrystal.h>
#include <SPI.h>
#include <SdFat.h>
#include <SdFatUtil.h>
#include <Ethernet.h>
#define BUFSIZ 128
#define greenLEDandBEEP 2
#define redLEDpin 3
boolean led2 = true;
int hits = 0; // Set the number of hits the hit counter will start at.
int units = 0;
int count = 0;
int photocellPin = 2;
int photocellReading;
LiquidCrystal lcd(4, 5, 6, 7, 8, 9);

//Local ethernet setup
byte mac[] = {
  0x90, 0xA2, 0xDA, 0x00, 0x1C, 0x0E };
byte ip[] = {
  192, 168, 1, 80 };
char rootFileName[] = "index.htm";
Server server(8080);

//SD card stuff
Sd2Card card;
SdVolume volume;
SdFile root;
SdFile file;
#define error(s) error_P(PSTR(s))
void error_P(const char* str) {
  PgmPrint("error: ");
  SerialPrintln_P(str);
  if (card.errorCode()) {
    PgmPrint("SD error: ");
    Serial.print(card.errorCode(), HEX);
    Serial.print(',');
    Serial.println(card.errorData(), HEX);
  }
  while(1);
}

void setup() {
  lcd.begin(16, 2);
  lcd.print("Web Server v2.00");
  lcd.setCursor(0, 1);
  lcd.print("Hits:");

  Serial.begin(9600);

  pinMode(greenLEDandBEEP, OUTPUT);
  pinMode(redLEDpin, OUTPUT);

  PgmPrint("Free RAM: ");
  Serial.println(FreeRam()); 

  pinMode(10, OUTPUT);             
  digitalWrite(10, HIGH);             

  if (!card.init(SPI_HALF_SPEED, 4)) error("card.init failed!");

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

  PgmPrint("Volume is FAT");
  Serial.println(volume.fatType(),DEC);
  Serial.println();

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

  PgmPrintln("Files found in root:");
  root.ls(LS_DATE | LS_SIZE);
  Serial.println();

  PgmPrintln("Files found in all dirs:");
  root.ls(LS_R);

  Serial.println();
  PgmPrintln("Done");

  Ethernet.begin(mac, ip);
  server.begin();
}


void loop()
{
  if(count >=500)
  { 
    led2 = !led2;
    digitalWrite(redLEDpin, led2);
    count = 0;
  }
  count +=1;

  char clientline[BUFSIZ];
  char *filename;
  int image = 0;
  int index = 0;

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

    index = 0;

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

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

          continue;
        }

        clientline[index] = 0;
        filename = 0;

        Serial.println(clientline);

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

        }
        if (strstr(clientline, "GET /") != 0) {
          if (!filename) filename = clientline + 5;

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

          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>Error 404</h2>");
            client.println("<s2>The file does not exist.<s2>");
            client.println("");
            break;
          }

          Serial.println("Opened!");
          //File types
          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: 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) {
            //Serial.print((char)c); //Prints all HTML code to serial (For debuging)
            client.print((char)c); //Prints all HTML code for web page
          }

          //Hit counter math
          if(units >= 2)
          {
            hits ++;
            units = 0;
          }
          units +=1;
          //End hit counter math

          //Print the hit counters and light value
          lcd.setCursor(6, 1);
          lcd.print(hits); //Print hits for LCD hit counter

          client.print("<html><body>"); //HTML code starts here
          client.print("<P align=\"center\">");
          client.print("Hits since reset: ");   
          client.print(hits); //Print hits to client
          client.print("

");

          photocellReading = analogRead(photocellPin);
          client.print("Light reading: ");
          client.print(photocellReading); //Prints light reading to client

          // A few threshholds
          if (photocellReading < 10) {
            client.print(" - Dark");
          }
          else if (photocellReading < 200) {
            client.print(" - Dim");
          }
          else if (photocellReading < 500) {
            client.print(" - Light");
          }
          else if (photocellReading < 800) {
            client.print(" - Bright");
          }
          else {
            client.print(" - Very bright");
          }

          client.print("</p></body></html>"); //HTML code ends here
          //End hit counter and light value

          file.close();

        }
        else {
          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);
    client.stop();
  }

}

//The End /*

Offline Hugu

  • Mini Robot
  • *
  • Mensagens: 5.602
  • Keyboard not found. Press any key to continue.
    • [url=www.g7electronica.net]G7 Electrónica.net[/url]
« Última modificação: 08 de Abril de 2012, 00:44 por Hugu »

Offline r16

  • Mini Robot
  • *
  • Mensagens: 339
Hugu agradeço a ajuda,mas essa parte sera para o index.html, agora o codigo do arduino é o que falta.

Offline microbyte

  • Mini Robot
  • *
  • Mensagens: 1.322
    • http://ricardo-dias.com/
O index.html vai ser gerado no arduino... Não estou a perceber a tua dúvida.

Offline r16

  • Mini Robot
  • *
  • Mensagens: 339
Nao micro o meu index.html esta dentro do SD do meu arduino...ethernet shield.

Ou seja nesse index.html esta associada essa imagem que tambem esta no SD , eu quero que quando se clique nela... me ligue um led  um PIn qualquer, e quando se clique novamente na imagem que desligue o led.

Entendes agora?

Ou achas que existia um codigo mais facil?

Offline poliveira1978

  • Mini Robot
  • *
  • Mensagens: 335
podes implementar o código do teu arduino para responder a alguns parametros no url.
se nos links do html fizeres:
Código: [Seleccione]
<a href="http:<ip do arduino>/?p=<valor>" alteras a resposta do arduino consoante o valor.
algo semelhante ao que está neste post: http://lusorobotica.com/index.php?topic=3958.0
« Última modificação: 08 de Abril de 2012, 17:56 por poliveira1978 »

Offline microbyte

  • Mini Robot
  • *
  • Mensagens: 1.322
    • http://ricardo-dias.com/
Nao micro o meu index.html esta dentro do SD do meu arduino...ethernet shield.

Ou seja nesse index.html esta associada essa imagem que tambem esta no SD , eu quero que quando se clique nela... me ligue um led  um PIn qualquer, e quando se clique novamente na imagem que desligue o led.

Entendes agora?

Ou achas que existia um codigo mais facil?

Agora é que me baralhaste todo..
Mas pronto... De qualquer maneira, se tens acesso ao código fonte do ficheiro é só alterares para que ele faça o que tu queres. Isto deixou de ser uma questão de electrónica/ethernet shield e passou a ser uma questão de programação HTML que está fora do scope do fórum.

Offline r16

  • Mini Robot
  • *
  • Mensagens: 339
Nao micro o meu index.html esta dentro do SD do meu arduino...ethernet shield.

Ou seja nesse index.html esta associada essa imagem que tambem esta no SD , eu quero que quando se clique nela... me ligue um led  um PIn qualquer, e quando se clique novamente na imagem que desligue o led.

Entendes agora?

Ou achas que existia um codigo mais facil?

Agora é que me baralhaste todo..
Mas pronto... De qualquer maneira, se tens acesso ao código fonte do ficheiro é só alterares para que ele faça o que tu queres. Isto deixou de ser uma questão de electrónica/ethernet shield e passou a ser uma questão de programação HTML que está fora do scope do fórum.



MicroByte tenho 100% certeza que podes me ajudar mais que o teu ultimo post.
Se leres bem...que penso que não leste, é fácil deduzir que se eu soubesse o que fazer , não vinha cá sequer questionar, mas sim partilhar o que sei.. é somente isso que necessito de ti,caso queiras.. que partilhes o teu saber.. que como já referi no primeiro parágrafo tu sabes...

Eu a parte do html penso que já estou quase desenrascado, agora a parte que falta é qual a parte que tenho que alterar no código do ARDUINO para que ele acenda o led, quando clico na IMAGEM.

Penso que com isto, fui explicito.


Offline poliveira1978

  • Mini Robot
  • *
  • Mensagens: 335
Sketch que "saquei" do playground, tem radio-buttons em vez de buttons, mas é questão de adaptar.

Código: [Seleccione]
#include <SPI.h>
#include <Ethernet.h>
byte    mac[] =     { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
byte    ip[] =      { xxx, xxx, xxx, xxx };
byte    gateway[] = { xxx, xxx, xxx, xxx };
byte    subnet[] =  { xxx, xxx, xxx, xxx };
EthernetServer  server(80);
int     ledPin = 4;
int     heatpin = 5;
int     sensorPin = A0;
int     sensorValue = 0;
String  readString = String(30);
boolean LEDON = false;
boolean HEATON = false;

void setup()
{   
    Serial.begin(9600);
    Ethernet.begin(mac, ip, gateway, subnet);
    pinMode(ledPin, OUTPUT);
    pinMode(heatpin, OUTPUT);
    Serial.print("Starting server");
    sensorValue = analogRead(sensorPin);
    Serial.println("Analog in:");
    Serial.println("");
    Serial.println (sensorValue);
    Serial.println("");
    Serial.println("");
}

void loop()
{
    EthernetClient client = server.available();
    if (client)
    {
        while (client.connected())
        {
            if (client.available())
            {
                char c = client.read();
                if (readString.length() < 30)
                {
                    readString.concat(c);
                    Serial.print(c);
                    if (c == '\n')
                    {
                        Serial.println("");
                        Serial.println(readString);
                        Serial.println("");
                        int Le = readString.indexOf("L=");
                        int He = readString.indexOf("H=");
                        Serial.print("L= position: ");
                        Serial.println(Le);
                        Serial.print("H= position: ");
                        Serial.println(He);
                        if (Le > 1)
                        {
                            if (readString.substring(Le,Le+3) == "L=1")
                            {
                                digitalWrite(ledPin, HIGH);
                                Serial.println("ledpin paa");
                                LEDON = true;
                            }
                            if (readString.substring(Le,Le+3)== "L=0")
                            {
                                digitalWrite(ledPin, LOW);
                                Serial.println("ledpin av");
                                LEDON = false;
                            }
                        }
                        if (He > 1)
                        {
                            if (readString.substring(He,(He+3)) == "H=1")
                            {
                                digitalWrite(heatpin, HIGH);
                                Serial.println("heatpin paa");
                                HEATON = true;
                            }
                            if (readString.substring(He,(He+3)) == "H=0")
                            {
                                digitalWrite(heatpin, LOW);
                                Serial.println("heatpin av");
                                HEATON = false;
                            }
                        }
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println();
                        client.print  ("<body style=background-color:white>");
                        client.println("<font color=’red’><h1>Arduino Remote control</font></h1>");
                        client.println("<hr />");
                        client.println("<font color=’blue’ size=’5'>Analog input: ");
                        sensorValue = analogRead(sensorPin);
                        client.print(sensorValue);
                        Serial.print(sensorValue);
                        client.println("<br />");
                        client.println("<br />");
                        client.println("<hr />");
                        client.println("<h1>LED control</h1>");
                        client.println("<form method=get name=LED> <input type='radio' name='L' value='1'>LED ON<br><input type='radio' name='L' value='0'>LED OFF<br><input type='radio' name='H' value='1'>HEAT ON<br><input type='radio' name='H' value='0'>HEAT OFF<br><input type=submit value=submit></form>");
                        client.println("<br />");
                        client.print("<font size=’5'>LED status: ");
                        if (LEDON == true) {
                            client.println("<font color=’green’ size=’5'>ON");
                            Serial.print("led on");
                        }
                        else {
                            client.println("<font color=’grey’ size=’5'>OFF");
                            Serial.println("Led off");
                        }
                        client.print("<font size=’5'>Heatpin status: ");
                        if (HEATON == true) {
                            client.println("<font color=’green’ size=’5'>ON");
                            Serial.print("Heat on");
                        }
                        else {
                            client.println("<font color=’grey’ size=’5'>OFF");
                            Serial.println("Heat off");
                        }
                        client.println("<hr />");
                        client.println("</body></html>");
                        readString="";
                        client.stop();
                        Serial.println("stopped client");
                    }
                }
            }
        }
    }
}

Offline microbyte

  • Mini Robot
  • *
  • Mensagens: 1.322
    • http://ricardo-dias.com/
Nao micro o meu index.html esta dentro do SD do meu arduino...ethernet shield.

Ou seja nesse index.html esta associada essa imagem que tambem esta no SD , eu quero que quando se clique nela... me ligue um led  um PIn qualquer, e quando se clique novamente na imagem que desligue o led.

Entendes agora?

Ou achas que existia um codigo mais facil?

Agora é que me baralhaste todo..
Mas pronto... De qualquer maneira, se tens acesso ao código fonte do ficheiro é só alterares para que ele faça o que tu queres. Isto deixou de ser uma questão de electrónica/ethernet shield e passou a ser uma questão de programação HTML que está fora do scope do fórum.



MicroByte tenho 100% certeza que podes me ajudar mais que o teu ultimo post.
Se leres bem...que penso que não leste, é fácil deduzir que se eu soubesse o que fazer , não vinha cá sequer questionar, mas sim partilhar o que sei.. é somente isso que necessito de ti,caso queiras.. que partilhes o teu saber.. que como já referi no primeiro parágrafo tu sabes...

Eu a parte do html penso que já estou quase desenrascado, agora a parte que falta é qual a parte que tenho que alterar no código do ARDUINO para que ele acenda o led, quando clico na IMAGEM.

Penso que com isto, fui explicito.

Jovem, não me interpretes mal... Eu voltei a ler e percebi perfeitamente o que disseste e continuo a dizer-te que a tua questão é meramente de HTML e nada tem a ver com o Arduino.

Ser um botão ou uma parte de uma imagem é exactamente o mesmo em termos de programação do Arduino.

Mas vamos então debruçar-nos no assunto.
Diz-me uma coisa, o que faz a tua página neste momento (uma screen ajudava)?
Tens botões para acender/apagar as luzes?

Não é má vontade da nossa parte, tens de perceber que às escuras é complicado ajudar. Tens de nos dizer a que nível de desenvolvimento estás e o que tens feito se queres obter alguma ajuda... ;)