Afficher une image sur le ESP8266Webserver

Bonjour !

Je suis actuellement en train de programmer un ESP8266. Mon but est de faire un site web que l'on peux ouvrir en wifi grâce à une connexion internet avec l'EP8266. Pour cela j'utilise les librairies <ESP8266WiFi.h>, <DNSServer.h>, <ESP8266WebServer.h>, <ESP8266mDNS.h>, <FS.h>.

J'ai suivi différents tutoriels pour essayer d'afficher une image sur mon site web, en plus de mon texte. Mais l'image ne veut jamais s'afficher.

Etant donnée que ma photo est assez volumineuse, j'étais partie dans le but de la mettre dans la mémoire flash de l'ESP8266. J'ai au préalable créé un dossier "data" dans le même dossier que mon code, pour pouvoir mettre ma photo.

J'ai utilisé en premier ce tutoriel : https://randomnerdtu...266-web-server/, le #2. J'ai au préalable testé le programme d'exemple, il fonctionne très bien. Sauf qu'ils utilisent la bibliothèque <ESPAsyncWebServer.h> or ce n'est pas celle que je souhaite. J'ai donc légèrement modifié le morceaux de code "AsyncWebServerRequest" par "ESP8266WebServerRequest" mais ça ne fonctionne pas... Je me suis donc dit que ce n'était pas le bon programme pour cette librairie. Voici un bout de mon code, là où j'ai réutilisé l'exemple du tutoriel :

J'ai ensuite utilisé ce tutoriel : https://mischianti.o...e-byte-array-2/. J'ai testé leur code, j'ai dû régresser ma version Arduino au 1.8 pour pouvoir utiliser leur librairie SPIFFS, mais ça a fonctionné. Sauf que c'était avec un fichier html que l'on mettait dans l'esp. J'ai ensuite remplacé celui ci par une photo et ça me l'a affiché. Maintenant, j'essaye de faire en sorte que cette photo et du texte s'affichent aussi, mais seule la photo s'affiche (comme si la photo prenait toute la place et si elle ne fait pas toute la dimension de l'écran, alors il y a des bordures noires autour). J'ai seulement modifié la boucle handleRoot() dans le code d'exemple :

Je suis donc bloquée... Est-ce que quelqu'un aurait un exemple de code qui affiche une image avec un corps de texte, en utilisant la librairie <ESP8266WebServer.h> s'il vous plaît ?

Ceci devrait pouvoir t'aider :

// Config
const char *myHostname = "imagetester";    // Local address
const char *softAP_ssid = "ImageTester";   // Access Point SSID
const char *softAP_password = "12345678";  // Access Point Password


// Wifi handler

// Wifi manager libraries
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

// Global objects
DNSServer dnsServer;
ESP8266WebServer server(80);
IPAddress apIP(172, 217, 28, 1);                // Default Access Point Ip Address
const byte DNS_PORT = 53;                       // Default DNS Port

void setup() {
  setUpWifi();             // Configure Access Point and Station Wifi connection
}

void loop() {
  dnsServer.processNextRequest();
  server.handleClient();
}

void setUpWifi() {
  // Start Access point
  WiFi.mode(WIFI_AP_STA);                        // Set wifi as Acess Point and Station Mode.
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP(softAP_ssid, softAP_password);
  dnsServer.start(DNS_PORT, "*", apIP);

  // Set up all handlers for all available requests
  server.onNotFound([]() {
    handleHome();
  });     // Default : Display home page
  server.begin();
}


// Home Page
void handleHome() {
  server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
  server.sendHeader("Pragma", "no-cache");
  server.sendHeader("Expires", "-1");
  String Page;
  Page += F("<!DOCTYPE html><html lang='en'><head>"
            "<meta name='viewport' content='width=device-width'>"
            "<title>Image Display</title></head><body>"
            "<h1>Simple image display</h1>");
  Page += image();
  Page += F("</body></html>");
  server.send(200, "text/html", Page);
  server.client().stop();
}

// Image
String image() {
  return "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAFzUkdCAK7OHOkAAAAEZ0FNQQAAsY8L/GEFAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAGHFJREFUeF7tnQuULEV5x7/deezOvncviAQUjUqMCKL4iGjijTzkISJgMIJEfARijOKLk3MMMRojSYziWzSKkRiNRuRhEFHxgTkkEUQRVFSiIYKKcnf37nt3Xpv/v6uL2Z3b07szO909Xf39zimmquay0/V99a+vqqemq28diJI8S+eLlK80+eLpIsMfMnklUVQgvcDsgSK1++ANv0yP5B4sMvlLU1YSo99/VZJiFZGC4qAnKBAm5lnH95REUYEkTfXGRuTYCOv4npIoKpCkWV/0MwGEvafEggokccJcoO5JGvWAooSgAlGUEFQgihKCCkRRQlCBKEoIKhBFCcEtgayvIunOmcRYr4vUZ/2CG7ghkMpXRGaGRfaURKbRpPkT/TeU2Jg/BrbPwQ9TSAX4xI1dAOkXSPUWkbljMXotm9Zwi0b5etQ9xntbiYG9h8LmX23sJVuvom63SO127+00k36BLL+64Rib2KrKnSJrn0BGiZS1D2OQuqsxOG30wdIr8Z90k36B1H7kZ5qgkxZfaPJKdCyeZ2wdRA2DVMpJv0Byj/czTdBpXK8vXeAVlQhYgjho41YCyR/tZ9JL+gUy9PfGSUE3r+i45ffgvXlTVrpH/X7YFtOrIHFYf5Te4hXTTPoFkn+CSPH3/UITdB5buHCSV1S6yCJsStu2ih4Dz4ZvDvcL6SX9AiGjX8KIhtegKELKN2HR/g2/oOyYMuxd/pZfaMJGj9F/94ppxw2B9OUx1Xp9sEA4wjEtnOAVlS6weHLDrhux4hj+K6/oAm4IhAz/g2lNK5HUV0RWsB5RdsbK22DL6r7isPQXsfZ4k19IP+4IhIx8JlgghA5d5h0tzsV6ibDr6bFrXS/Dhn/eWhy0/cjVJu8Ibgmk+DyR3EGtowjrF1/sFXuGvv38TABh7yXB0jnGhkECYX3ukfCBW9t83BIIGfuqcVYrkaz8s0jt/0y5Fyietu/12jLf6xVqd4ms/ltrcTCN3eAVXcI9geQONbcYg6Bz2eLF53rFnqB4CtLTG53MJtbxvV5hEWKl/VoJZOAPYPtDTNkhHH2yIprEXb0kyKE1pPFr0QFPNuVeYPX9IuVPmnzxLJHBV5h8L1DGumIeAgkaTq2g93OwGwF3Hz26/DdIfxk86rHFfQMiU6umrITD7evcoRtkR6bht4mULvSqXMO9KZZl6CK0rugXmqCj62sQ0F+bstIaDjKht3WHnBUHcfvh1ZUvicw9yzi31ei3i87PeVVKE7ytO41IG2a/8a+JFHZ7VS7ibgQhheORHucXmrBOXzzdKyoB8GZGkDgshSc6LQ7i/vEH9V9jFDzADAWtRsGJ74vk9ReIm6jciugLAQQJxNpt1wzem/SqXMXtCEL6H4Q58lnGoc1Yx69e7GeUB1i7xLwGRQ/acvBc58VBsnOAzrTv6aDRMI+RcvwWU1YMc4eJVH8QbC+yKxvdxv0IYhl+b3AU8QTS4leJWSZ3ZGt7DV9q8hkgOxGE7H04RsW7N4+KbP2uOdSNmbJiqO8VmW2aQtFWhcMRbdP/tJLtkp0IQib+F3PnF/gFwIX51C9VHEH0T4hM/hyR5BF+BRg8J1PiINmKIEqHsIsErdbdJ1sRROmQbIqDqEAUJQQViKKEoAJRlBBUIIoSggpEUUJQgShKCCoQRQlBBaIoIXQukPWaeYjY3NEii2eJVL/rv6EoCcNzSZZeKjK/2/xkeAd0ttVkvSIyU9y8A4H54rEiY19ERgOTkhALp4isXWvy7Jvsl/3oj1N8lE37dCYQHiew9oXNOrB/ha9DiCxDf2fKioG7Y+s/w+iGSFu7FRH3OyjfC3vNIeE9RmRrQzqWD+Tum0Aah50fKpI/UiT3BKQjTJmbCZUGK29C1HizsR3ZuDuGT3AtHu8P3u3RmUBmSnDm6uaLsPCvMfVBPaOfxYX10EPa4oRRtnwFEmzAh0esLxi7WIJsF0bz/9s/CtGcAPueITKAJBBUFiljoOZv5+tlY5dWfbJvEFFkxZTboDOBzGL0qvM3FH45CP5VpjxGu9GvYOR7pFftNPV7RFYvQXS9HBFidl+HhdmrHTZ67AE774JQXiQy+BqI52DvLafh42MXMKWv/s++dm6G9uGAMtn+SWOdLRaKWABtdFIQvGD+9RqmFbOPQmNO3fr/SSMcX1Y/gDY+BJEVg8HyuyAUiINPEmL7rfPCHNguG/8mP4OfVZ/GZ0OcM7iO2UNwTR90095k8Uy08WHoWxCHtXEYtEMRg0cHdP57kLmnILzdvP0LtAy9VaT0Br+QYtaX0CFfjbnvR0zZ2mArW0SNtbV9LZ0Hm0O0fZgWp52Vt8PmF5q20c7b6XdMeazbJjq7y9q5QMjax6HmP2r/gvsHzBFdheO86lTBxfbSH5v1xXbbnRTW3mQQo+7QP8L2WPSnjcrXMQM5GbZfbq+f8d8No82D8FeH7EwgFh4Yv/w+E01IWAPsp/G1cKQ5X7B/f1PX6yy9DKPYZY32beWoXmGjzUvno9Ng+pUG1jFVnT8eAvnW9mxu28m7VkMQBQeEHfqoOwIhXLQvnIjG/Fd7jeHr4FkiI58w5V5k7UpEyjPMtbJNOzR6YvD6bRtGr8a8HOvCXoUHHa1+rP2+xKc9jvIriO4cPtQ9gVi8cHgCBLNmGrVVZ7JOY/QZeg/EgmjUK/CJ5vNYa1W+vb22pAVr8+KTRca+6VX1DLy5sPxyEwXa6j85COM6CAQRp4t0XyCWlXebRSz/ejsNLcBp4z3gtMr1InOIiPa6t7r+tGG9ztfxG2D3Y0w5SfYeKlK9q73+QiI8fsGuGrpP6QLz5PTBF5rRwDamFTQIr6ZyM0aRt3tVibH0Zw1xbMdZaWRj2+aONYNZkiyeY8Sx3buiTLzxsAszlQiPX4gugmykdjcMcJpI+baGJFsZgVeTe5h5hlUSzB6M6/15o/NkAdvhcg8VmUzo/MZWj4bdCK/R2zZyGNasV+F6H+VVR0l0EWQj7PDj30G6FgYYaDikJbRCzHAryMwQPhri2M4o5hJsK9vMvWIzo7DFslcdG1v1BysM7k8bhzDGvxeLOEg8ArHwTEAeezb05oZRmg3D8sDLTD4u6vehY4zhs1eyJYxm2Pb1RdhiGDbZY+rigJ+bf7TJb2RjH+GJYVMV9KF49/bFM8UKgneIeOt07XOm7DkHid+NMNrERfVWLA5bnIORVWyP4GNG84f7hYip3QM/YIrHz7Z+YH4Aa8GRq1HX4ji9iElOIJbqnVibfAgj1v0QB4wxgEV9XHiR40AVRxDsFUxT8EuXvlPYkvqMuVlQw1o1h4gyiKjBbSIJkrxAkoJrjmlMq1QcrWHPoG0ml/CK9VkGiXcN0kvMHqDi2ArahiKhrTJKNgXCrelZX5BvF08kWLhze3kGyZ5A+CVg7V4VRzvQVvyB0lLCXyYmQLbWIGV/+wiHBRVIe7CXMI19WbyHc2SE7AiEt5WnC0YYKo7OsCLZj08IycbkIztTLO7KVXHsDGu/ud/xilkgGwIpX2m2rCvdoXILbHqNX3CbbEyxtrMRTtk+tsdk4Kx09yMIfz9OP6o4ugdtSZsuvdwruozbEYRPLJyeNA5VgXQX9homx8+YdzuCLJ6n4ogKa1PHo4i7EYTPrZoeUYFEyQNRhM8fSGa3bdS4G0HsT0hVHNFhbbv8Wj/jHo5GEDRpD7Sv0SN6bBTZz8FuBNyMIKuXmlcVR/RYG6/9k59xCzcjyN6H6IbEOGEPyv2myMRPTNkh3IsgPIKgCnEo8VL9qfmFpmO4J5CVS8yrRo/4sLZefbefcQf3plizUxjJ/MNrlPhgL+p/sMjkL03ZEdyKIDz2zJ7spMRPDVMsx1a0bgmkcoWKIyms3StX+Rk3cEsgPDBTBZIctD194BBurUG8x2YuqkiSgj2pb1JkasaUHcCdCMKFOcWhJAtPheIzxxzBIYHcY0YwJVnoAz4A3BHcEUjNP8VUp1fJYW1fu8PPpB93BMKHUCu9gUO+cCiC3KbRoxegD6oxPp0/Ytxagyi9wbo7e+Eat3lX3ytS+RoyS6z2qnZOHX9qf5Hi85BO8+siYnY/fNy0RpGkYW/KHSQyEbFIyp8zj3Na5y3lbo3zuPi+YZH8M0QGz/dqjEBmd2GKgg+KqnN558o9SWT8ZlOOgpk82ldTgSQNBcJONhXhLfe5p0Ic/x3d/McTudlX1i9LLzXi4Iexc0WR+Lf5sLEod3tSHEqPwFlIRKy8A33JF0dQX+tG4t/mvrKl85DlE/JYGSX2g8uf8oqRkMC5n0oLovQF+5DtT1Hi9derqBXKJS4wDVKUFNEvxdPNnCtK+Pe9dchZXjES4tS5Ek6Uvij+oelPcfTZ4ml2kb7h8PxuYxtS3C0yxrtkEaGL9N6A/u4bwSI9wv1YMS7SG7d51y7H4udGZHj3oVufzNu8uzwlSuF4vy4iZvfHx+1RgSSN17kw4E5E/L1UrLd5XWDvIxAFf6oCSRr2pvxhIuPfM+WU487Mvf+hfkZJnL6H+Jn0445Ackea0UtJFi+CwBeO4I5A8kf5GSVxHPKFQxHkceZVo0hyWNvnDvcz6cchgWDeqwv05KEP+g8yeQdwRyB9E0ijfkFJjP4p+GHEL6QfdwRCiif4GSUxCif7GTdwTCBn6BokSWh7+sAh3PmikHCryZ481iN+WYkP9iImHg3t0FrQrQjSB2XkMQd2R/LpIvcbTomDuCUQUnyxCiQJaPPBc03eIdyaYhE+tGzmYDOS6W3feGAPYpr6FYbcB3lVruBeBOE9+Lzuy4qd/COdEwdxTyBk8A06zYoT2rp0kck7hntTLMsezK90mhU9dnqlx0CnjNJ5GkXigDYuvdLkHcTdCLK+IjI9pFEkSthzmHaVYeOCV+Ua7kaQvpLIwPP9ghIJFMfgC50VB3E3gpD1OUQRbmJEXqNId3kgeszDtu5uEnU3gpC+ccyPzzeOVLoLbVp6hdPiIG5HEMu0Hz40inQH22O478px3I4gltGrG1MCZWfQhnwI4Ni1XtF1shFByNxTRKo3axTZKewthaMhkJtM2XGyIxB6dg8Cpi7YO4c9hcnRLwWDyMYUywOqGPtyw8lKe1i7jUf4+NgeJEMCAcVjRUqvUoF0Am1Weh2mV7tNOSNkaIq1gdlDsND8mU61tgt7SP/DRSZ/asoZIpsCITOjcPyiimQrPHGMQRxzppwxsiuQ9WWIZNjkVSTBsGfQNpMreB30qrJG8muQys0iC6eK7H2MyOLZmPpM+29ETN8QHH+/6QTZHCLCsTaZmI1PHPUZ9IEXoC8chtdzRKq3+W8kR3IRhNObheeIlL9mRimvDon5CawP+KTEOKjeITJ3hMlrJDE8II4fwg+/5RcipnYP1ob+L0HpB3sNA+gjI59FXTLH9yUTQZYvFJnGGoDnstMYNtmrWTzRz8RA/nBEkj0mn8xQ0VtYG0ztjU8cZP6pjT6w8ZUH5UwX0GfejEL8xBtB1j6Nzu+fMWdF0QzfY4r7yyiuSWYPwGuGF+40ORfkE7+GDQZMXRyslyECfN5WfaK/aKJJ8dledRzEE0GqP8C8EqPRAsRB7OjQiniuajNck/BcvX7eAkY5Zn0mCtvKNnu3cufiFQfpQ8cP6w9WOBTS3ClIjzOnicVAtF1xfRUR43Sz6Kr9eGthEDqreJ7JJ8Hk3SKlC8x1ZEEktp1Dr0PbE/yegz9uC7O3FQmfmlm9HdH+EehbZ+P/qfLdyIhuirXytyJLbzB527gwrKMKTxAZv9WrSpTKDRipjmtc91bXnzas1/nK7SO98A353KNh9x+111/I8DswqL3WL3SX7guk8kVMpbDIruPPttPQfvzD4csxkpzjVfcGuLD5p2CheMv22pIWrM2LWBiP/adX1TOsvg8L8leaKV9b/QcL+dEvQOjHeNXdonsCqd9vhFHB6G8bFdY4+6l8Lf0JxHGpKfci5WvQtueaa92O03oVXj8Tp7oj10IgPXxUAadPq59svy8VnmyEwnNKukB3BLKENcPyh43hybYbwxHsS/j3KTlwZenlmDp+0OTTJBTa2tqdP5MdxiidBrxB93gMurc1bL2dvsXoM9SdQXdnAlm9DJ3mZebCttNhrKNyoxjBGA6f5lWnivo8BgMIhaMb2U67k8Lam/DpI0MfwCCWwt+Qcz248GzYfq29fsZ/N/wRtP2lrO2IzgXCg/ur/sH9271gMnIJLvg1fiHFrMNZy69DRHm/KVsbbGWLqLF2th1kEPP5ISxiXXg0D2/8LPuPlW2n3+Wx+J+406tql84EMn8c5uVQ9XZuEtuLHHw+xPEpr8o5Vj+KdDEGjJ+YctxisR60r3yQ9OBFSC/yKxxj4TSRtau3JxLCKdfACWZt0ibtC2Qdn7YnZ8QRdnH8q7ywwqNwYRBTLgNPXK//CkJ5F5z3MZHafaau2UY7FU2zt2w5dyA6wUsgilfBN+49ZX0fahiMFo7FoHS3selWfZFpFzpkX3sO6EAgqxBIqbVA7MXwttvINSLFGPdV9Rrlq5A+izn0dRDPrLGLpV2hNP+/vEvDAzN5JmDxVFOfRbhXa4FnU1aNXVr1SQ7W+3Ebkf8Th23S2RRrFgu9etOeJftX+DqM8F56iykrBu7xqt+LEe8OjH634vU21N2Dujm87kVaMrYjnqNHkCYghDG8Ivrmj0SUOMpsruQZKA4dtdwVlv8CCdNc2yeb+6a3lQg2bpPOBFL5BhbpzzBRxMK/wmOYx9qf5ylK15hHHyx/cbNAGD0mb8LgcrQpt8F2ltn7Uvg9fCBGwAJFcoCZRk1iZFRxKEkzdr3IxHfQJ09B38RajH108vaOxEE6iyCKkhE6iyCKkhFUIIoSggpEUUJQgShKCCoQRQlBBaIoIahAFCUEFYiihKACUZQQsieQlYtFZg80D4lbeaNfqbSEP1DaezDs9XCR1ff4ldkhW1tN5o4SqXy7sZGNLS8cLjJ+uykrm+HD/qo/btiLm/4GdouMZeeUqexEkJV3GnGwxXS4TZU7RNY+joyyidUPNcRhE21X/jreuxyZbJAdgSy/1jh5I9bxFd2FvA+V6xv2sdjy0rleMQtkQyCLZ/o/mjHFTXj1WJMom+nb39imGdqQ9XwEUgZwfw1Sv09kGgKwU6uNsOVMkz8SyR3qVSk+1VuxBnmisVmQ3byfsC7gPbd/2eh+BFk4LlgcloHTVRxB5I8SKT7TLzRBW9KmC8/yii7jdgTh2mLuJOPQoFGQqYMnXWQG/k5+mr+NR76V/cZvEil09mu9NOB2BOERb0HOJXTu8FtVHGHwCSBDFxpbNWPtuogByGHcFQiP7Kq3ODuCDu8fEin5xzMorRl6G2wFJQSJhNTmnP4C0U2B8OF2K29qjHLNcIE5cqXJ9wor6Ij8InPuSehw7/Qre4SRf90iilzgFV3EzTUIH3Rc/nywONhaLkDHv2XKvcDcE7Fe2nBsBK+x+HSRsf8w5V5g76GIFncF25QDzuDZENK/mLJDuCeQ2g9FZn/bOLLZmWwpnbnrZ4idMR0zvRV88uL88zZfL6+TiY9R4rPGeoHq9yGSx7a2K9PUvbDrQV6VK7g3xZo/JtiJhE4svbh3xEHKV+x7vTZfudrP9AD5w0QGWjzi1F4/b6k7hlsCWfsMIsgvNnc2C8XB+pHLvGLPsD7tZ5rgtbZ6Lym4FiG0ZRCVOyH4G/yCG7glEG4pCRIHoVOHeLJSq3+QFGEu6DH39JVgw7cEC4RmZVp8jld0BXcEsvR647ig/s/6HG/rvsKUlc4pXWR6TasoUl8RWXmrX0g/bghkvSKyzFOU/PJG6Eim0eu9otIFRj7fsOtGbBRZgogcwQ2BcE8QWxIkEMJbpvnf9QvKjimeJFI40i80YUXCU4EdIP0CqX4TC8MWv3DjCMfbuqPXeUWli/A4M9q2OYpY1q4Rqf3YL6SX9Atk+Y2NUasZOm/oAryXwpNde53+B2M9cm6wQKw/+Hv2lJN+gdQQQYKg4+ik4Xd5RSUCRj5qbNwqitR6aLdCh6RfILnD/EwTdJqDWx96C6hj+P2tBdKf/t/ZpF8g/G7DzoVtYrlwhMjA2cgokTL4pxikDgz2wfAl+E+6Sb9A8o8XmbgRg1mp4aSBk0TGv+u9rcTA5C8wID2tIQ76gj7JPdZ7O824tVmRv4CTYTMvTgsLAYdOEk/oZ2Ka+GlTTgPrNfxnBW1x53fq6Y8gG+Ev4NIkDtfoyzklDuKWQBSly6hAFCUEFYiihKACUZQQVCCKEoIKRFFCUIEkTtjXUO58RZVWVCCJM+y/BuH2g6HTgAokaQrPDA4UrCvsNnklMdw//iANzO4Sqc00dgHQI/mDRSbuMWUlMTSC9AKT0yKll8AbEEr//sifr+LoCUT+H40VSTOc3kHkAAAAAElFTkSuQmCC'>";
}

#1 Marilux

#2 Mike118

#3 Marilux

#4 Mike118

Aussi étiqueté avec au moins un de ces mots-clés : esp8266

Données Arduino vers NodeMCU(esp8266)

Projet domotique et tuto N°1

Carte Esus - Controle robot & IoT avec Wifi

0 utilisateur(s) li(sen)t ce sujet