ESP32 Web Server

Bonjour à toutes et à tous,

Les réseaux : c'est quelque chose à laquelle je n'ai jamais vraiment accroché. Traduction : je suis nul dans ce domaine.

Comme je ne veux pas rester vraiment idiot à ce sujet,
je vais essayer de m'y mettre un peu.

J'ai lu cet article et j'ai compilé le code qui y est donné en utilisant un "ESP32 Dev Module".

Je me suis aperçu que pour allumer deux diodes et générer deux boutons sur un "client", cela prenait 940469 octets (71%) de l'espace de stockage de programmes. Le maximum est de 1310720 octets et que les variables globales utilisent 45392 octets (13%) de mémoire dynamique, ce qui laisse 282288 octets pour les variables locales. Le maximum est de 327680 octets.

Si je veux faire un programme un peu plus conséquent (tracer quelques courbes par exemple), est-ce cela qui va gonfler le code et les variables ou bien est-ce simplement les bibliothèques "WiFi" et "WebServer" qui mangent tout ça ?

Autrement dit, que me conseillez-vous comme module ESP32 à acheter.

Cordialement.

Pierre.

les bibliothèques sont gourmandes. mais une fois que vous les avez, rajouter des fonctionnalités et moins gourmand.

(Sur ESP32 je conseille plutôt la bibliothèque EspAsyncWebserver pour traiter un accès web)

Rien que la pile TCP/IP occupe une place très importante.
Pour tracer des courbes, il y a de fortes chances que cela se traduise par l'adoption d'une librairie JavaScript, HighCharts par exemple, donc cela va faire gonfler le code HTML, pas le code ESP32.

Ce code HTML, il est bien quelque part ... dans la mémoire de l'ESP32 ?

Cordialement.

Pierre.

ça dépend si le navigateur client a accès à internet, vous pouvez mettre le lien vers la bibliothèque javascript qui serait quelque part sur internet . Par exemple si vous utilisez Plotly.js vous pourriez aller chercher le script dans votre HTML par

  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

ou si vous prenez Chart.js vous mettrez

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

donc ça ne prend que quelques octets pour indiquer où trouver le script.

Mais si c'est un réseau fermé crée par l'ESP et qu'il n'y a pas d'accès internet, alors c'est plus compliqué :slight_smile:

Autre chose : tu n'as probablement pas changé de schéma de partitionnement. Par défaut il est celui-ci :

  • 1.2 MB pour le code
  • 1.5 MB pour le système de fichiers SPIFFS
  • le reste est laissé à l'OTA

D'autres choix sont possibles dans le menu Outils / Partition Scheme

Donc, si tu stockes les fichiers HTML, images, etc. dans le SPIFFS, il n'occuperont aucun espace dans la partition code.

EspAsyncWebserver permet justement de charger nativement les fichiers HTML à partir du SPIFFS. C'est pour cela qu'il est préférable de l'adopter dès le départ, au lieu d'utiliser WebServer.
Plus d'infos : ESP32 : servir une image

Ensuite il te restera à étudier les templates EspAsyncWebserver pour développer un serveur plus complexe.

Est-ce que la carte "ESP32 CH340C-TYPEC 30P" montrée dans ce site pourrait convenir pour faire un petit serveur délivrant quelques courbes ?

Il y est dit qu'il y a 32 Mo de mémoire qui, je suppose peuvent être répartis selon le partitionnement.

J'ai lu un article intéressant sur la mémoire SPIFFS. Mais, l'ai-je mal lu ou autre, je n'ai pas de réponse à cette question :

Peut-on charger indépendamment, via l'IDE Arduino, le code et des pages html ? En effet, je peux avoir besoin de changer l'un sans changer l'autre.

Cordialement.

Pierre.

Bonjour

Oui cette carte courante devrait permettre de délivrere quelques courbes dans un serveur HTML

plutôt 32Mb soit 4Mo qui peuvent être répartis selon le partitionnement choisi
(Choisir un partitionnement sans OTA pour augmenter la part de mémoire Flash dédiée au code si la possibilité de mise à jour par OTA n'est pas retenue)

Oui mais si je n'ai pas loupé un changement l'utilitaire permettant de faire cela ne fonctione pas encore avec un IDE Arduino 3.x

Sur l'excellent site Random Nerd Tutorials tu as plusieurs exemples bien expliqués, dont celui-ci

Merci à vous tous pour ces fameux renseignements. J'ai commandé la carte que j'avais mentionnée. Je vais lire avec attention les documents joints et ... yapluka :slight_smile:

Cordialement.

Pierre.

Si j'ai bien compris, sur un réseau ouvert, mon script va demander au client de télécharger une bibliothèque dont mon script va aller piocher les fonctions qui vont bien pour faire l'affichage de mes courbes. Oui / Non ?

Si mon réseau est fermé, je n'ai pas accès à cette bibliothèque. Mais je peux la télécharger et la placer dans l'espace SPIFFS de mon serveur. Dès lors, c'est mon serveur qui sert d'hébergement de la bibliothèque et mon script fait alors appel à cette adresse dans l'espace SPIFFS pour l'envoyer au client qui veut faire l'affichage.

Je ne sais pas quelle est la vitesse de transfert d'un ESP32. La taille de la bibliothèque Chart.js est de l'ordre de 200 ko et je n'ai qu'à l'envoyer une seule fois. Après, ce sont seulement les données qu'il faut envoyer.

Je me fais du cinéma ou bien est-ce que je dis est réalisable ?

Cordialement.

Pierre.

Oui c'est bien cela

Oui le client va mettre cela en cache et donc il n'y aura qu'un seul téléchargement.

Des versions compressées (minified) de Chart.js sont disponibles aussi (cherchez chart.min.js) ➜ ces fichiers sont plus légers je pense.

leur site web: Chart.js | Chart.js et chez un CDN Chart.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

Sur le site de Chart, il y a un exemple où est donné l'adresse de la librairie :

https://cdn.jsdelivr.net/npm/chart.js

J'ai ouvert cette adresse et j'y ai trouvé un gigantesque fichier (environ 200 k0) qui contient des tas de fonctions dont voici quelques lignes :

/**
 * Skipped minification because the original files appears to be already minified.
 * Original file: /npm/chart.js@4.4.5/dist/chart.umd.js
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*!
 * Chart.js v4.4.5
 * https://www.chartjs.org
 * (c) 2024 Chart.js Contributors
 * Released under the MIT License
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Chart=e()}(this,(function(){"use strict";var t=Object.freeze({__proto__:null,get Colors(){return Go},get Decimation(){return Qo},get Filler(){return ma},get Legend(){return ya},get SubTitle(){return ka},get Title(){return Ma},get Tooltip(){return Ba}});function e(){}const i=(()=>{let t=0;return()=>t++})();function s(t){return null==t}function n(t){if(Array.isArray&&Array.isArray(t))return!0;const e=Object.prototype.toString.call(t);return"[object"===e.slice(0,7)&&"Array]"===e.slice(-6)}function o(t){return null!==t&&"[object Object]"===Object.prototype.toString.call(t)}function a(t){return("number"==typeof t||t instanceof Number)&&isFinite(+t)}function r(t,e){return a(t)?t:e}function l(t,e){return void 0===t?e:t}const h=(t,e)=>"string"==typeof t&&t.endsWith("%")?parseFloat(t)/100:+t/e,c=(t,e)=>"string"==typeof t&&t.endsWith("%")?parseFloat(t)/100*e:+t;function d(t,e,i){if(t&&"function"==typeof t.call)return t.apply(i,e)}function u(t,e,i,s){let a,r,l;if(n(t))if(r=t.length,s)for(a=r-1;a>=0;a--)e.call(i,t[a],a);else for(a=0;a<r;a++)e.call(i,t[a],a);else if(o(t))for(l=Object.keys(t),r=l.length,a=0;a<r;a++)e.call(i,t[l[a]],l[a])}function f(t,e){let i,s,n,o;if(!t||!e||

Est-ce ce fichier (ou un équivalent minified) que je dois copier dans mon espace SPIFFS et qui sera transmis au client ?

Cordialement.

Pierre.

Oui c'est bien ce fichier, qu'il faudra que tu mettes sur ton ESP32 et qui sera accessible via le serveur HTTP créer par EspAsyncWebserver, il faudra bien sûre que tu change l'url de chargement par exemple par ceci si tu le mets à la racine du serveur WEB

<script src="chart.min.js"></script>

Oui ce doit être une version minified de Chart.js qui est une version du fichier JavaScript dans laquelle tout l’espace inutile - comme les espaces, les sauts de ligne et les commentaires - a été supprimé pour réduire la taille du fichier.

Cela améliore le temps de chargement et les performances des pages Web en minimisant la quantité de données à transférer.

Vous pouvez aussi trouver sur certains serveurs des techniques supplémentaires, comme la compression Gzip ou Brotli, pour réduire encore la taille des fichiers lors du transfert. Une fois chargée, cette version compressée est décompressée automatiquement par le navigateur pour l’exécution, rendant la version encore plus légère pour le téléchargement.

Ça doit exister pour chartJS - faudrait chercher

Je n'ai pas vu de lien vers un fichier compressé, mais c'est assez simple de le faire.
on passe alors sur un fichier de 55ko au lieu de 180ko

Merci à tous pour ces infos complémentaires.

Je pense que j'aurai à revenir vers vous quand j'aurai mes ESP32.

Cordialement.

Pierre.

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.