Insertar Imagenes en HTML con Ethernet Ehield.

Muy buenas tardes!

Acabo de iniciarme en este inmenso mundo de ARDUINO y estoy un poco perdido.
Estoy trabajando en un proyecto cotrolado via internet (Ethernet Shield) y de momento he conseguido texto, botones, valores de las entradas analógicas...Pero me gustaría dar el siguiente paso y poder mostrar en mi página de HTML alguna imagen.

¿Alguien podría decirme algún tutorial o explicarme qué tengo que hacer?

Muchas gracias.

Saludos
Yo también pase por eso y te comento.
Cuando trate de colocar imágenes en mi servicio web comencé usando base64 un tipo de codificación de imágenes, y me resultó muy bien para imágenes pequeñas pero cuando trate de usar imágenes más grandes el IDE no me compilaba.

Luego de investigar y frustrarme me recomendaron no hacer el servicio web en el arduino y que usará Json. Baja unas librerías que conseguí y las probé y consume mucho menos recursos del arduino. Pero la librería fallaron e hice una rutina que envía los datos en formato Json. Luego me hicieron una página que tomaba esos datos y los mostraba mucho mejor de que lo haría el arduino.

Investiga un poco de Json y si quieres te ayudo a hacer la rutina para enviar tus datos.

Lo que quiero conseguir es una cosa más o menos así:

¿Cómo puedo hacerlo? Me podeis pasar algún tuto o algo?

Referente a los botones, yo tengo algo así:

Mi código para dichos botones es:

 if (vdig[i]==0)
              {
                cliente.print("<form method=get>");
                cliente.print("<input type=hidden name=dig");
                cliente.print(dig[i]);
                cliente.print(" value=1>");
                cliente.print("<input type=submit value=APLICAR>");
                cliente.print("</form>");           
              }

¿Cómo puedo hacer que aparezcan colores en el botón?

Muchisimas gracias.

que tal algo asi

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page</title>
    </head>
    <body>
        <h1>Arduino SD Card Page with Image and Link</h1>
        <img src="pic.jpg" />
        <p>Go to <a href="page2.htm">page 2</a>.</p>
    </body>
</html>

encuentras todo el artículo acá

SD_card_image.zip (7.99 KB)

Perfecto muchísimas gracias ;D ;D
Esto va teniendo cada vez mejor pinta.

Ahora estoy pensando en poner una preidentificación para que no todo el mundo pueda entrar a mi página, es posible poner una página previa que pida usuario y contraseña??

Muchas gracias y Feliz Navidad a tod@s!

Sin que lo tomes a mal, a cada momento vas a pedir que te hagamos todo, o vas a ponerte a buscar tu?
eso que te puse lo encontre simplemente buscando en google. Arduino html image. simple no?

bueno busca ahora arduino web server password

Para nada, le agradezco mucho la ayuda y entiendo muy bien tu postura pero es lo que pasa cuando tienes unas nociones muy básicas de programación que con tanta información me es muy complicado seleccionar.
De todas formas le vuelvo agradecer su ayuda.

Un saludo.

No importan las nociones básicas, para mi no son excusa, aunque te comprendo, pero usa google que ahi esta todo, siempre. Mi molestia siempre tiene que ver con eso. Con que no prensentan bien lo que quieren hacer.
En tu caso: el título dice insertar una imagen en HTML, y bueno para comenzar esta bien pero en la descripción expone todo lo que quieres hacer y entonces ni yo me molestaré. Esta claro que a todos nos van surgiendo inquietudes y queremos sumarle al proyecto.
Pero ahora sera el password, luego agregarle un slide, luego otra cosa.. y hay muchos tutos.
Entonces hay que buscar e investigar.

Dime lo que puse en el buscador de google te parece que requiere mucho conocimiento de programación? Solo es sentido común.

Busco imagenes, busco arduino busco algo en html o web junto todo

busco en Google: arduino web image

siempre busca en inglés y luego si quieres en español, usa Chrome y automáticamente le das al traductor y aunque te quede en castellano indio, se entiende. Ojo que el indio de chrome ya esta terminando la primaria. Ya anda bastante aceptable.

:smiley: :smiley: :smiley: :smiley:
Muchas gracias por los consejos!!

Un saludo.

PD: Sigo liado con lo de : "web server password" jajaj

He conseguido lo más fácil:

¿Cómo se pueden recibir los datos del nombre de usuario y contraseña que se envían?

Solo para que veas que no te miento

Arduino Web password como te dije

Ahora esa pagina lleva a esta

password protect my Ethernet Web Server
Si tienes problemas con el inglés lo vemos.

Muchas gracias!!
Finalmente el problema lo resolví con este código, que lo dejo aquí por si a alguien le interesa:

#include <String.h>
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 178}; // ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // ip in lan
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(80); //server port
String readString; //
boolean login=false;

/////////////////////////////////
void setup(){
Ethernet.begin(mac, ip);
Serial.begin(9600);
    Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
  login = false;
}
void loop(){
EthernetClient client = server.available();
if (client) {
  boolean currentLineIsBlank = true;
  while (client.connected()) {
    if (client.available()) {
      char c = client.read();
        readString.concat(c);
      if (c == '\n' && currentLineIsBlank) {
        // Serial.print(readString);
       
        if(readString.indexOf("User=user&Pass=user") > 0) {
login=true;
        }
           
     
        
        if(login==true){
     
        if(readString.indexOf("Logout") > 0) {

          login=false;
     
          }      
        } 
        /////////////////////////////////////////////////////
if (login == false) {
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/html");
        client.println();
        client.print("<html>");
        client.println("<meta http-equiv=\"refresh\" content=\"60\">");
       client.println(" <head><title>website title</title><center></head><body> ");
       client.println("<h1>Welcome to Website</h1><hr />");
        if (login == false) {
        client.println("<h1>Please login to control!</h1>");
        client.print("<form action='192.168.1.178/'>");
        client.print("");
        client.print("Username: <input name='User' value=''>");
        client.print("Password: <input type='Password' name='Pass' value=''>");
        client.print("<input type='submit' value=' Login '>");
        client.print("<hr /></form><hr />");
                
        }
}
 
        if (login==true) { 
      client.print("you get access");
        client.print("<h2><a href='/?Logout'>Logout</a>");
        client.println("<hr />");
        client.print("<span><strong>Project by Zhiran</strong?</span>");
       
        } //chiude if login=true 
        client.println("</center></body></html>");

        //clearing string for next read
        readString="";
        //stopping client
        client.stop();
        

        } 
    } 
  } 
} 

}

Gracias de nuevo!

Un saludo