Come mettere d'accordo Caude con DFM2HTML

[Pino]

Salve, dopo aver combattuto tanto con varie implementazioni di web server con ESPx per mostrare su una pagina web i dati di diversi sensori, esausto per non aver trovato quello che fa al caso mio soddisfacentemente, ho chiesto a Claude di farmi un web server generico adattabile che possa fare questo per tutti i tipi di dati. Il risultato è stato ottimo, ma io sono un dilettante e se non riesco a modificare la “pappa pronta “ non mi sento a posto quindi avendo una conoscienza discreta del programma free DFM2HTML molto perfomante nella grafica, mi sono costrutito la pagina web di mio gusto. Il problema subito nato è che il codice generato da DFM2HTML un programma per creare siti WYSIWYG non sembra compatibile per sostituire il codice della pagina HTML suggerita da Claude, che usa PROGMEM con il codice generato da DFM2HTML.

Perchè faccio tutto questo? Per due motivi: uno è che mastico pochissimo, quasi nulla di HTML e quel programma freee è molto potente nella garfica per cui si possono fare un sacco di belle cose senza avere la conoscenza di HTML. Se riuscissi a far digerire il codice prodotto da DFM2HTML all’impianto di Claude avrei uno strumento multi uso potente. Il secondo motivo è la “curva di apprendimento” del sottoscritto piutosto lenta data la tenera età di 80 primavere (comiciai con l’hobby in Elettronica con le radio a galena); chissà se riuscirei prima di essere trasferito nel paradiso dei microcontrollori ad imparare quello che serve, considerato anche gli altri hobby ed impegni che ho.

Avete suggerimenti? Posso contraccabiare con un suggerimento di come fare a tirare un cavo in un corrugato nel pavimento che proprio non lascia passare la sonda da nessuna delle due entrate, con semplici attrezzi e un po’ d’inventiva.

Saluti da Pino_

[cotestatnt]

Prova ad allegare una pagina web (immagino statica) di esempio prodotta dal tool DFM2HTML così vediamo di cosa si tratta e che tipo di tecnologia web viene utilizzata.

[Pino]

Sì ma come? Con upload il sistema ha difficoltà con le immagini png che sono 11 ( mi dice di riprovare) poi c’è il file CSS, il file JavaScript e index html. Ho Win 11 pro quindi potrei cambiare estensione ai file index in txt e lo stesso con i file Css e JavaScript; a questi ultimi due devo aggiungere “1” e “2” perchè hanno lo stesso nome. Srano però, in tutto sono pochi kb.

Farlo ora mi viene troppo tardi, quindi lo farò domattina. Intanto Grazie!

Pino_

[cotestatnt]

@Pino

web server con ESPx

I microcontrollori ESP per funzionare hanno bisogno di una memoria Flash su cui andrà caricato il firmware compilato.
Questa memoria è piuttosto abbondante e nella stragrande maggioranza delle dev-board che si trovano, quella più usata comunemente è da 4MB.

Questo significa che ti avanzano 2/3 MB di memoria che puoi usare come meglio preferisci e quindi puoi anche caricare le immagini e tutte le altre risorse statiche direttamente nella flash e poi "servirle" al browser direttamente da li.

L'esempio di riferimento è quello che trovi già incluso nel core Arduino.
Se parliamo di ESP32 puoi guardare FSBrowser.ino oppure SDWebServer.ino (sono essenzialmente la stessa cosa, ma cambia il supporto di memoria usato e le relative API).

Il principio è semplice, anche se gli esempi sono lunghi perché c'è bisogno di definire tutte le funzioni necessarie:

• se l'endpoint richiesto dal browser è tra quelli definiti usando il metodo server.on("/list", HTTP_GET, handleFileList); procedi con la funzione handler associata;
• se l'endpoint invece è "not found" prima di rispondere 404, vai a vedere se si tratta di un file presente nella flash ed in tal caso fai lo stream del file interessato.

 server.onNotFound([]() {
    if (!handleFileRead(server.uri())) {
      server.send(404, "text/plain", "FileNotFound");
    }
  });

Partendo da questi esempi, io ho creato una libreria che estende questa funzionalità aggiungendo wifi manager, file editor, gestore di "opzioni" persistenti, update del firmware e soprattutto upload dei file statici del webserver direttamente dal browser.
Se invece vuoi procedere senza librerie terze, allora devi trovare il modo di caricare i tuoi file nella memoria. Dovrebbero esserci dei plugin per l'IDE disponibili, ma siccome uso sempre la mia libreria per farlo, non saprei indirizzarti meglio.

[cotestatnt]

Una terza possibilità è aggiungere all'esempio FSBrowser.ino che ti ho citato prima, una piccola pagina web da PROGMEM per fare l'upload manuale dei file.

Qualcosa del genere dovrebbe funzionare.
Se ci fai caso la pagina chiama l'handler già definito per l'upload nell'esempio con l'istruzione server.on("/edit", HTTP_POST, []() { server.send(200, "text/plain", ""); }, handleFileUpload); usando il metodo HTTP POST.

L'upload di un file chiama due funzioni, la prima definita "inline" ( []() { server.send(200, "text/plain", ""); }) viene eseguita ad upload concluso, mentre la seconda viene chiamata più volte per verificare che l'upload stia proseguendo (tecnicamente alla ricezione di ciascun "chunk").

const char upload_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>ESP32 File Uploader</title>
</head>
<body>
    <h2>Didattica: Upload via POST (Multipart)</h2>

    <form method="POST" action="/edit" enctype="multipart/form-data" id="uploadForm">
        <input type="file" name="data" id="fileInput">
        <input type="submit" value="Carica File">
    </form>

    <div id="stato" style="margin-top: 20px;"></div>

    <script>
    // Intercettiamo l'invio del form per gestirlo via JavaScript (AJAX)
    // Questo evita che la pagina si ricarichi, rendendo tutto più moderno.
    document.getElementById('uploadForm').onsubmit = function(e) {
        e.preventDefault(); // Blocca l'invio standard del browser
        
        var form = document.getElementById('uploadForm');
        var formData = new FormData(form); // Crea il pacchetto 'multipart' automaticamente
        var areaStato = document.getElementById('stato');
        
        areaStato.innerHTML = "Inviando il file all'ESP32...";

        // Invio asincrono
        fetch('/edit', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (response.ok) {
                areaStato.innerHTML = "✅ File caricato con successo!";
            } else {
                areaStato.innerHTML = "❌ Errore durante il caricamento.";
            }
        })
        .catch(err => {
            areaStato.innerHTML = "❌ Errore di connessione: " + err;
        });
    };
    </script>
</body>
</html>
)rawliteral";
)rawliteral";

Nello sketch dovrai poi aggiungere in setup() l'istruzione per gestire la chiamata a questa pagina aggiuntiva:

server.on("/upload", HTTP_GET, []() {
  server.send(200, "text/html", upload_html); // Invia la stringa definita sopra
});

Una volta che hai caricato il tuo webserver nella flash, metti da parte l'esempio modificato e continui con il tuo progetto originario perché quando carichi un nuovo firmware i file presenti nella memoria flash non vengono toccati.

[Pino]

Molto interessante! Me lo studierò con calma

Nel frattempo ho modificato l’estensione dei file html, css, js, in.txt con l’avvertenza che il file dfm2html-1 è modificare in dfm2html.css, il file dfm2html-2 è damodificare in dfm2html.js; spero che arrivi tutto giusto

‘‘‘

dfm2html-1.txt (1.3 KB)

dfm2html-2.txt (13.0 KB)

index.txt (14.3 KB)

‘‘‘

[cotestatnt]

Potevi allegare anche un file zip.

Comunque appena ho 15 minuti disponibili provo a darci un'occhiata.

[cotestatnt]

Ho provato i file che avevi mandato in precedenza, ma senza le immagini non si capisce bene cosa volevi fare.

Comunque, se mi permetti un consiglio non richiesto, io lascerei perdere questo tool... per quanto possa sembrare comodo e facile all'inizio, non avrai mai tutta la flessibilità di cui potresti aver bisogno per le tue applicazioni.

In fondo, non è davvero necessario imparare al 100% il linguaggio HTML, CSS o Javascript.
Le IA fanno un ottimo lavoro con questi linguaggi perché la base dati da cui attingere è immensa.

Quello che devi fare è concentrarti sul prompt: contestualizza il progetto, indica il tuo livello di conoscenza della materia e definisci in modo chiaro gli obiettivi richiesti.
Perdici qualche minuto in più nel definire la richiesta, anzi potresti chiedere alla stessa IA quale "schema" adottare per avere un risultato migliore.
Io ad esempio ho imparato a scriverlo a parte sul blocco note, rileggo più volte e faccio le dovute revisioni prima di inviarlo alla IA. Ottengo risultati più rapidi e corretti rispetto all'approccio prova, correggi, ritenta che ero solito usare prima.

Comunque, appena riesco provo anche gli allegati che ha messo nell'ultimo post.

[Pino]

Nell’ultimo mio post ho rimandato la pag. web zippata con le immagini perchè mi sono reso conto che ciò che avevo mandato prima non era maneggevole e con qualche errore.

Dici del consiglio non richiesto, ma di fatto è implicitamente richiesto dal momento che ho postato sul forum chiedendo e per questo ti ringrazio.

In merito al tool per crere pagine web per me è una questione di tempi oltre che di conoscenza e sono convinto che IA offra comode vie di soluzione ma essendo un hobby viene a mancare la soddisfazione per aver realizzato qualcosa; per meglio spiegare il mio punto di vista allego una immagine di un vecchio pannello di gestione del riscaldamento di casa non più valido dato che ho cambiato casa, ma per farmelo fare da una IA avrei dovuto riempire più di una pagina di richieste, mentre col tool si fa prima e meglio nel senso che si sa cosa si vuole e spiegare è a volte è difficile; non parliamo poi per uno non del mestiere fare un pannello così dpieno di bottoni e visualizzazioni.

Ho cominciato a guardare i due link che hai mandato nella prima risposta ed effettivamente è una bella raccolta di librerie per ESP32 con Arduino e mi mancava, altro che pescando qua e la disordinatamente. Grazie! Buona serata.

[cotestatnt]

Ho installato il tool DHT2HTML per provarlo e devo dire che... ribadisco le mie perplessità

Va bene per fare delle paginette statiche, ma per realizzare quello che vuoi fare tu devi comunque inserire uno script per aggiornare i dati ottenendoli dal microcontrollore in modo ciclico e asincrono (ovvero la cosiddetta tecnica AJAX, l'alternativa della pagina che si ricarica io non la prendo nemmeno in considerazione).

Visto che si tratta comunque di scrivere codice in Javascript, non vedo molto il senso di questo approccio ibrido.

Ad ogni modo, ho rifatto un progetto DHT2HTML semplificato con solo temperatura ed umidità, ed ho adattato lo sketch che ti ha proposto Claude AI per servire questi file creati con il tool.

Lo script aggiunto alla pagina web lo trovi anche tra i commenti del file .ino e c'è anche il file .dfm per completezza.

Occhio che ho fatto anche alcune piccole modifiche necessarie per compilare (non ho i sensori, bisogna avviare il filesystem per poter leggere i file caricati in precedenza ed è necessario anche aggiungere alcune funzioni dallo sketch FSBrowser per lo stream dei file stessi) e fai anche attenzione ai commenti che ho cercato di inserire nei passaggi chiave dello sketch.

Siccome c'è bisogno di fare l'upload dei file DHT2HTML, ho usato la mia libreria per praticità e quindi l'esempio usa il webserver istanziato dalla libreria che estende quello incluso nel core ovvero quello usato nel tuo progetto originale.

Registrazione.zip (214.4 KB)

T_U_P_ESPxDHT2HTML_Edit.zip (30.7 KB)

P.S.
Questo sketch non vuole essere una "pappa pronta", ma solo uno spunto da cui partire e sviluppare secondo le proprie necessità. Per qualsiasi chiarimento, non esitare a chiedere, anche per quanto riguarda HTML e Javascript.

[cotestatnt]

Questo invece è il risultato di Gemini quando gli ho chiesto di replicare la pagina di cui hai postato l'immagine usando solo HTML e CSS.
C'è da lavorarci ancora un pochino, ma è il primo risultato che ha prodotto senza ulteriori affinamenti:

[Pino]

Fantastico! Attualmente però non posso neanche mettermi con calma a provare il tuo sketch. Ho un problema con la batteria scarica dell’auto (lo start and stop, batteria 4 anni) che devo ricaricare senza aver il caricabatterie; ieri ho quindi allestito un caricabatterie volante per caricarla e sembra che si carichi bene ma per prudenza devo decidere oggi se acquistare una nuova batteria in quanto lunedì devo andare all’estero per una settimana da mia figlia che vive in Svizzera dove tutto costa più del doppio rispetto all’Italia. Al ritorno proverò e adatterò il tuo sketch e ovviamente ti farò sapere come è andata!

Ti ringrazio tantissimo per la disponibilità (ed anche per l’avvertimento!). Buona Pasqua e Pasquetta!

Pino_

[Pino]

Sì assomiglia un po’ ma non ha i testi con effetto tridimensionale; per farla replicare a Gemini credo che bisognerebbe riempire una pagina di specifiche (e poi più sessioni per le modifiche), tanto vale farlo con il tool di cui posso dire che all’approcio non tutte le funzionalità sono immediatamente visibili, ma appena presa conoscenza va benissimo per fare pannelli web di gestione elettroniche ad esempio in ambito domotico. Quel pannello lì potrebbe gestire un migliaio di varibili … Comunque è un progetto incompiuto in quanto (a quei tempi non c’erano ancora i micro ESP) ma poi ho cambiato casa e qui non si può usare in quanto l’impianto non ha valvole di zona ma solo rubinetti termostatici sui radiatori delle stanze.

Ciao!

[Pino]

Buon giorno cotestatnt,

finalmente posso dedicarmi da un paio di giorni al tuo sketch, ma in tre/quattro sedute non riesco neanche a partire perchè lo sketch non si connette alla WiFi; la form di esp-fs-server lanciata direttamente dall'esempio in libreria si fa compilare sia in DHCP che con l'IP statico, ma non si connette, rimane continuamente con le palline in movimento.

Suppongo tre casi: 1. ho reiterato il tentativo di salvare le credenziali sbagliando qualcosa fino superare i 5 salvataggi max; 2. forse manca nello sketch la chiamata alla funzione per inserire e salvare le credenziali; 3 sono io che quasi certamente manco di comprendonio

La Seriale risponde che:

"WiFi not connected! Starting AP mode...
Server HTTP avviato sulla porta 80
Apri nel browser: http://(IP unset)"

l'IP unset non è accettato dal browser.

Cosa può essere?

[cotestatnt]

Ciao Pino e scusami se rispondo solo ora, ma in questo periodo non ho molto tempo a disposizione purtroppo.

Per quanto riguarda gli esempi della libreria, dobbiamo partire dal presupposto che io ritengo la pratica diffussisima di mettere le password in chiaro nei firmware fortemente sconsigliabile e che quindi by design la mia libreria non lo fa e che quindi non c'è alcuna funzione esplicita per salvare le credenziali nel firmware.

Il principio di funzionamento è il seguente:

• al primo avvio le credenziali del WiFi non sono state ancora memorizzate nell'ESP e quindi di default viene avviato in AP mode con nome e password configurate;
• l'utente si connette all'AP creato ed "in teoria" si dovrebbe aprire in automatico il Captive Portal che ti consente di configurare SSID e password. Dico in teoria perché questo funzionamento è influenzato direttamente dal sistema operativo e da come è configurato il SO stesso;
• se non parte in automatico, di defualt l'ESP32 avvia un Access Point con indirizzo http://192.168.4.1 e puoi eventualmente digitarlo direttamente nel browser per accedere alla pagina di setup;
• da qui puoi configurare la connessione e decidere se usare il DHCP del tuo router oppure configurare manualmente.

Se nel monitor seriale leggi IP unset, il sospetto è che stai cercando di usare un indirizzo che non è valido per configurare l'Access Point. Io ti suggerisco di lasciare il comportamento di default.
Per quanto riguarda il numero delle credenziali che è possibile salvare sono max 5, ma questo significa che se inserisci una sesta credenziale, questa andrà a sovrascrivere la prima inserita (la più vecchia).

P.S.
Negli ultimi giorni ho fatto numerosi aggiornamenti. Anche se non hanno nulla a che vedere con il problema che riscontri, ti suggerisco di installare comunque l'ultima versione che ho ampiamente testato sia su ESP32 che su ESP8266.

In passato avevo fatto un video. Si tratta di una versione molto vecchia, ma il principio rimane il medesimo

[Pino]

Figurati, sono conscio di farti perder tempo! Quando ti va, se ti va, di rispondere io leggo senza alcuna urgenza.

Per la questione in ballo: nel file WiFi.ccp la tua libreria dice:

```
IPAddress apIP = params.config.local_ip != IPAddress(0,0,0,0) ? params.config.local_ip : IPAddress(192, 168, 4, 1);
IPAddress gateway = params.config.gateway != IPAddress(0,0,0,0) ? params.config.gateway : IPAddress(192, 168, 4, 1);
IPAddress netmask = params.config.subnet != IPAddress(0,0,0,0) ? params.config.subnet : IPAddress(255, 255, 255, 0);

```

Siccome il gateway del mio impianto è su 192.168.1.1 e non vorrei cambiarlo per via della decina di IP utilizzati , dovrei cambiare sia il "param.config.local_ip" e il "params.config.gateway" in 192.168.1.1. giusto?

Carico lo sketch e la seriale mi dice che il server è all'IP 192.168.1.115 ma lì c'è solo il pannello di configurazione della WiFi, ma poi non avanza; per farlo avanzare si aspetta che aggiorni con UPDATE & FS, cosa che fa sia con il file .ino che con .bin, ma poi sono incartato perché non trovo alcun altro IP per ucire dal loop e far funzionare lo sketch. Naturalmente ho aggiornato la libreria con l'ultima su github.

Non capisco dove sbaglio. Purtroppo il filmato non mi è utile in quanto la risoluzione che appare non mi permettere di leggere bene.

E senz'altro possibile che sia il mio PC ad essere "strano"; si tratta di un PC Dell ricondizionato con a bordo Win 11 pro che funziona peraltro bene ma parte con la schermata per l'account scritta in caratteri scandinavi ... alla fine sono quasi convinto che forse mi conviene utilizzare il tuo listato della funzione funzione javaScript e rinunciare alla libreria, peccato perchè l'opzione sia per nascondere le credenziali che per la funzione OTA sono impagabili.

[cotestatnt]

@Pino, temo che tu stia facendo confusione.
Quando ti connetti in modo diretto all'ESP32 in AP mode non stai affatto usando il tuo router e quindi né il PC e né tantomeno l'ESP32 saranno connessi alla tua LAN.
In altre parole non ha importanza come è configurato il router, puoi trovare l'ESP32 sempre allo stesso indirizzo che di default è 192.168.4.1

A questo punto, usando la pagina di /setup, oltre a configurare il WiFi, usando il tab "UPDATE & FS" puoi fare 2 cose:

• aggiornare il firmware del microcontrollore (file compilato binario .bin)
• fare l'upload dei sorgenti del web server (file sorgenti .htm/.html .css .js)

Il file .ino è il sorgente dello sketch e non va caricato da nessuna parte.

Comunque adesso ho un po' di tempo a disposizione e cerco di preparare un video con l'ultima versione cosi poi magari lo carico anche nell'help del repository a beneficio di tutti.

[cotestatnt]

Ho fatto un nuovo video e l'ho caricato senza compressione su Google Drive.

Fai il download se vuoi vederlo al meglio e spero possa esserti un po' più di aiuto.

Video:
esp-fs-webserver.mp4