Получить изображение с SD-карты Arduino Ethernet Shield

Question

Получить изображение с SD-карты Arduino Ethernet Shield

У меня есть код, который загружает данные о температуре и влажности с dht22 на веб-сайт.

Теперь я хочу добавить изображение к кнопке «Добавить на главный экран» в Safari на iOS.

У Apple есть для этого HTML-код:

<link rel="apple-touch-icon" href="/custom_icon.png">

Теперь я хочу, чтобы «custom_icon.png» был ссылкой или каким-либо другим методом на файл «Icon.png» на SD-карте Ethernet Shield.

Думаю, мне нужно что-то вроде этого:

client.println("<link rel=\"apple-touch-icon\" href=\"/Icon.png\">");

Но это не работает. Это не выдает ошибки, но это просто неверный способ доступа к этому файлу.

Я пробовал использовать библиотеку SD.h, но не могу использовать ее для своего кода. Это мой код.

#include <dht.h>
#define dht_apin A0                                  

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

File root;
// инициализируем библиотеку номерами контактов интерфейса

byte mac[] = {I HIDE THIS};   // физический mac-адрес
byte ip[] = {I HIDE THIS};                        // ip в локальной сети (это то, что вам нужно использовать в вашем браузере («Я СКРЫВАЮ ЭТО»)
byte gateway[] = {I HIDE THIS};                   // доступ в интернет через роутер
byte subnet[] = {I HIDE THIS};                  // маска подсети
EthernetServer server(10000);                          // порт сервера
String readString;
dht DHT;
int Temp;

void setup() {
  // устанавливаем количество столбцов и строк ЖК-дисплея:
  Serial.begin(9600);
   while (!Serial) {
    ; 
  }
  delay(100);
  Serial.println("DHT11 Humidity & temperature Sensor\n\n");

  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());

    Serial.print("Initializing SD card...");

  if (!SD.begin(4)) {
    Serial.println("initialization failed!");
    return;
  }
  Serial.println("initialization done.");


 Serial.println("done!");


}

void loop() {



  EthernetClient client = server.available();    // Создаем клиентское соединение
  if (client) {
    while (client.connected()) { 
      if (client.available()) {
        char c = client.read();

        if (readString.length() < 100) {    //читаем символ за символом HTTP-запрос
          readString += c;
         }

         if (c == '\n') {      //если HTTP-запрос завершился
          Temp = 0;
  switch (Temp){
  case 0:
           DHT.read22(dht_apin);
           Serial.print("Vochtigheid = ");
           Serial.print(DHT.humidity);
           Serial.print("%  ");
           Serial.print("Temperatuur = ");
           Serial.print(DHT.temperature);


           delay(500);


           File dataFile = SD.open("Icon.png");

           client.println("HTTP/1.1 200 OK"); //отправляем новую страницу
           client.println("Content-Type: text/html");
           client.println();     
           client.println("<HTML>");
           client.println("<HEAD>");
           client.println("<TITLE>Home Damian</TITLE>");
           client.println("<meta http-equiv=\"refresh\"content=\"1 \">");
           client.println("<meta name=\"apple-mobile-web-app-title\" content=\"Home\">");
           client.println("<link rel=\"apple-touch-icon\" href=\"/Icon.png"/>");
           client.println("<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">");
           client.println("<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\">");
           client.println("</HEAD>");
           client.println("<BODY bgcolor=\"#273B46\">");
           client.println("<br />");   
           client.println("<p><font color=\"white\">Temperatuur = </p>");  
           client.println(DHT.temperature,1); 
           client.print("&#176C"); 
           client.println("<p></p>");
           client.println("<p><font color=\"white\">Vochtigheid = </p>");  
           client.println(DHT.humidity,1);
           client.print("%"); 
           client.println("<br />"); 
           client.println("</BODY>");
           client.println("</HTML>");

           delay(1000);
           Serial.println("OK");
           Temp = 0;
           client.stop();

         }
       }
     }
   }
  }
}


void printDirectory(File dir, int numTabs) {
  while (true) {

    File entry =  dir.openNextFile();
    if (! entry) {
      // больше нет файлов
      break;
    }
    for (uint8_t i = 0; i < numTabs; i++) {
      Serial.print('\t');
    }
    Serial.print(entry.name());
    if (entry.isDirectory()) {
      Serial.println("/");
      printDirectory(entry, numTabs + 1);
    } else {
      // у файлов есть размеры, у каталогов нет
      Serial.print("\t\t");
      Serial.println(entry.size(), DEC);
    }
    entry.close();
  }
}

@Damian Van de Kauter, 👍0

Обсуждение

В компьютерах Apple отсутствует функция копирования кода?, @gre_gor

Попробуйте использовать более простое имя файла, например ICON.PNG. Библиотека SD может не поддерживать расширенные имена., @Mikael Patel

Вам нужно написать код, который отвечает на HTTP-запрос изображения, загрузить изображение (используя библиотеку SD) и передать его веб-браузеру в правильном формате., @Majenko

@gre_gor да, извините за скриншот, я задал вопрос на телефоне и получил этот скриншот., @Damian Van de Kauter

@Majko У тебя есть код? я не нахожу свой путь, @Damian Van de Kauter

http://www.websiteoptimization.com/speed/tweak/inline-images/, @Johnny Mopp

На самом деле никто не может дать мне код, @Damian Van de Kauter

Нет, никто не может просто так дать вам код. Напишите свой код. Мы рассказали вам, что вам нужно сделать. Мы не раздаем код поневоле, особенно людям, которые публикуют скриншоты части имеющегося у них кода., @Majenko

[**Вот изображение моего ответа.**](https://s-media-cache-ak0.pinimg.com/736x/6f/3c/4b/6f3c4b862a2447cb28bc4ff9f0eac3e5.jpg), @Majenko

@Маженко, окей, извини, что пишешь. Я опубликую свой код, но, пожалуйста, помогите мне. Мне это действительно нужно, и я не понимаю эту часть. Мне очень жаль. Но ваш имидж не так ли? Хаха, это действительно не нужно ;), @Damian Van de Kauter

@Маженко, я добавил код, @Damian Van de Kauter

2 ответа

@*Majenko* · Answer 1 · 2017-06-01 15:36-00:00

Вы читаете HTTP-запрос в readString. Вам необходимо проанализировать этот запрос, чтобы увидеть, что на самом деле запрашивается.

Если запрашиваемый URL-адрес — «icon.png», вам необходимо открыть файл на SD-карте и отправить данные обратно в виде правильно созданного HTTP-ответа — что-то в форме:

HTTP/1.1 200 OK
Content-type: image/png
Content-length: <file size here>
Connection: close

<Raw PNG data>

Первая строка readString будет содержать запрос:

GET HTTP/1.1 /icon.png

Вам не нужно разделить это и выяснить, в чем заключается запрос. Вы можете перехватывать определенные записи (/, /index.html и т. д.) и обслуживать их как специально созданные ответы, а также все другие несовпадающие запросы, которые вы можете перенаправить на код чтения вашей SD-карты. Однако вам следует извлечь расширение файла и сопоставить его со временем MIME, чтобы можно было правильно установить заголовок Content-Type.

@*Mark Rhodes* · Answer 2 · 2019-02-13 12:04-00:00

Arduino использует формат файлов 8.3. это означает, что имя вашего файла не должно содержать более 8 символов, а расширение файла не должно превышать 3 символов.

например: картинка1.png 12345678.123

Надеюсь, это поможет.

Я играл с этим последние несколько дней и сумел выяснить, что он использует формат 8.3.

Кроме того, index.html также должен быть в формате 8.3. итак index.htm

Надеюсь, это поможет.