[RISOLTO] Inviare email in formato HTML con arduino...

International Italiano Generale
1

Salve,
ho uno sketch che funziona anche da webserver ed ha il compito (tra gli altri) di visualizzare una tabella con dei valori misurati e lo fa a richiesta da browser web oppure una volta al giorno la invia via mail.
Per fare ciò uso la stessa funzione:

void ShowStatus(FishinoClient client)
{
    const char* br = "
";
    client << F("<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=device-width\"><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><title>Fishino Solar Meter</title><style>td,th {padding:8px;text-align:center;}</style></head><body style=\"margin: 0; padding: 0;\">");
    client << F(SWVERSION) << br;
    client << DateTime(now()) << br;
    client << F("Uptime=") << upTime/24 << "d+" << upTime%24 << "h" << br;  
    client << F("<table border=\"1\">");
    client << F("<tr><th>ID<th>SID<th>Type<th>Actual<th>Peak<th>Today<th>Total<th>Factor<th>TodayCnt<th>EEprom<th>ppu<th>Pulse<th>Extra</tr>");

    for(int i=0;i<NUMSENSORS;i++)
    {  
        sensors[i]->CalculateActuals();
        client << F("<tr><td>") << i;
        sensors[i]->Status(client);
        client << F("</tr>");
    }
    client << F("</table>Last PvOutput fail=") << pvResponse << " @ " << DateTime(pvResponseTime) << " (in " << PVORetry << "x)" << br;
    client << F("Last NTP update=") << DateTime(lastTimeUpdate) << " (in " << ntpRetry << "x)" <<  br;
    client << F("WD ctr=") << eeprom_read_byte ((uint8_t*)EE_CTR) << br;
    client << F("WD val=") << eeprom_read_byte ((uint8_t*)EE_STATE) << br;
    client << F("Reset Day=") << eeprom_read_byte ((uint8_t*)EE_RESETDAY) << br;
    client << F("Free=") << freeRam() << br;
    client << F("</body></html>");
}

Per inviare la mail, invece, procedo così:

   Serial.println(F("Invio DATA"));
    mailClient.println("DATA");
    if(!eRcv()) return 0;

    Serial.println(F("Invio email"));

    // Qui si compone la email
    mailClient.println("To: User <" MAIL_FROM ">"); // Inserire email destinatario
    mailClient.println("From:  Fishino Solar Meter <" MAIL_TO ">"); // Inserire email mittente (Fishino)
    mailClient.println("Subject: Fishino Solar Meter\r\n"); // Inserire Soggetto email
    mailClient.println("Content-Type: text/html; charset=utf-8\r\n\r\n");
    ShowStatus(mailClient); // Inserire Contenuto email
    mailClient.println("\r\n");
    mailClient.println(".");
    if(!eRcv()) return 0;

    Serial.println(F("Invio QUIT"));
    mailClient.println("QUIT");
    if(!eRcv()) return 0;

    mailClient.stop();
    Serial.println(F("Disconnesso"));
    return 1;

Quello che ottengo è che la mail viene inviata ma il client la visualizza come testo e non come HTML. Sicuramente manca qualcosa ma non riesco a risolvere anche dopo ore passate a spulciare internet.
Questo è un esempio di quello che ottengo:

Content-Type: text/html; charset=utf-8


<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Fishino Solar Meter</title><style>td,th {padding:8px;text-align:center;}</style></head><body style="margin: 0; padding: 0;">V11.43 Mini WiFi SDCard Retry Mail IDE v1.8.6 - Fishino MEGA R2
Never
Uptime=0d+0h
<table border="1"><tr><th>ID<th>SID<th>Type<th>Actual<th>Peak<th>Today<th>Total<th>Factor<th>TodayCnt<th>EEprom<th>ppu<th>Pulse<th>Extra</tr><tr><td>0<td>61535<td>2<td>0<td>0<td>0<td>-1<td>1<td>0<td>0<td>2000<td>0</tr><tr><td>1<td>61535<td>4<td>0<td>0<td>6172<td>21415<td>1<td>12345<td>12345<td>2000<td>0</tr></table>Last PvOutput fail= @ Never (in 0x)
Last NTP update=Never (in 0x)
WD ctr=0
WD val=5
Reset Day=8
Free=5588
</body></html>

Sul browser invece la stessa funzione visualizza una tabella formattata correttamente.

2

Dato che mi sono reso conto che mancavano diverse chiusure di tag () e che le linee erano parecchio lunghe, ho provato ad aggiungere i tag di chiusura e spezzare le linee di testo con dei /r/n ottenendo come risultato questo:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fishino Solar Meter</title>
<style>td,th {padding:8px;text-align:center;}</style>
</head>
<body style="margin: 0; padding: 0;">
V11.43 Mini WiFi SDCard Retry Mail IDE v1.8.6 - Fishino MEGA R2

09.09.18 11:05:05

Uptime=0d+0h

<table border="1">
<tr><th>ID</th><th>SID</th><th>Type</th>
<th>Actual</th><th>Peak</th><th>Today</th>
<th>Total</th><th>Factor</th><th>TodayCnt</th>
<th>EEprom</th><th>ppu</th><th>Pulse</th><th>Extra</th></tr>
<tr><td>0</td><td>61535</td><td>2</td>
<td>0</td><td>0</td><td>0</td>
<td>-1</td><td>1</td><td>0</td>
<td>0</td><td>2000</td><td>0</td></tr>
<tr><td>1</td><td>61535</td><td>4</td>
<td>0</td><td>0</td><td>6172</td>
<td>33759</td><td>1</td><td>12345</td>
<td>12345</td><td>2000</td><td>0</td></tr>
</table>
Last PvOutput fail= @ Never (in 1x)

Last NTP update=09.09.18 11:04:53 (in 1x)

WD ctr=0

WD val=5

Reset Day=9

Free=5576

</body></html>

Ma anche così la mail viene visualizzata come testo e non come HTML...

3

Alla fine ho risolto!
Il primo problema stava nell'header smtp, mancavano delle direttive che ho aggiunto:

mailClient.println("MIME-Version: 1.0");
mailClient.println("Content-Transfer-Encoding: quoted-printable");

E poi ho dovuto lavorare abbastanza sul testo HTML per farlo visualizzare correttamente sia dal browser che dai vari clients di posta (la webmail di Tiscali ho scoperto essere abbastanza schizzinosa ed ignora completamente le sezioni ).
In caso possa essere utile a qualcun altro posto qui la funzione che gestisce la creazione del testo HTML:

void ShowStatus(FishinoClient client)
{
    const char* br = "
"; //TEST
    const char* nl = "\r\n"; //TEST
    client << F("<!DOCTYPE html>") << nl;
    client << F("<html>") << nl;
    client << F("<head>") << nl;
//    client << F("<meta name=\"viewport\" content=\"width=device-width\">") << nl;
//    client << F("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">") << nl;
    client << F("<title>Fishino Solar Meter</title>") << nl;
//    client << F("<style>td,th {padding:8px; text-align:center;}</style>") << nl;
    client << F("</head>") << nl;
    client << F("<body style=\"margin: 0; padding: 0;\">") << nl;
    client << F("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"1000px\"><tr><th><b>") << nl;
    client << F(SWVERSION) << br << br << nl;
    client << F("</b></th></tr><tr><td>") << nl;
    client << DateTime(now()) << br << nl;
    client << F("Uptime= ") << upTime/24 << "d+" << upTime%24 << "h" << br << nl;  
    client << F("Last PvOutput fail= ") << pvResponse << " @ " << DateTime(pvResponseTime) << " (in " << PVORetry << "x)" << br << nl;
//    client << F("DNS status= ") << DnsStatus << br; //WiFi
    client << F("Last NTP update= ") << DateTime(lastTimeUpdate) << " (in " << ntpRetry << "x)" <<  br << nl;
    client << F("WD ctr= ") << eeprom_read_byte ((uint8_t*)EE_CTR) << br << nl;
    client << F("WD val= ") << eeprom_read_byte ((uint8_t*)EE_STATE) << br << nl;
    client << F("Reset Day= ") << eeprom_read_byte ((uint8_t*)EE_RESETDAY) << br << nl;
    client << F("Free RAM= ") << freeRam() << br << br << nl;

    client << F("<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" width=\"1000px\">") << nl;
    client << F("<tr><th>ID</th><th>SID</th><th>Type</th>") << nl;
    client << F("<th>Actual</th><th>Peak</th><th>Today</th>") << nl;
    client << F("<th>Total</th><th>Factor</th><th>TodayCnt</th>") << nl;
    client << F("<th>EEprom</th><th>ppu</th><th>Pulse</th><th>Extra</th></tr>") << nl;

    for(int i=0;i<NUMSENSORS;i++)
    {  
        sensors[i]->CalculateActuals();
        client << F("<tr><th>") << i << F("</th>");
        sensors[i]->Status(client);
        client << F("<th></th></tr>") << nl;
    }
    client << F("</table></td></tr></table>") << nl;
    client << F("</body></html>") << nl;
}

La parte che si occupa dell'invio della mail:

    Serial.println(F("Invio DATA"));
    mailClient.println("DATA");
    if(!eRcv()) return 0;

    Serial.println(F("Invio email"));

    // Qui si compone la email
    mailClient.println("To: User <" MAIL_FROM ">"); // Inserire email destinatario
    mailClient.println("From:  Fishino Solar Meter <" MAIL_TO ">"); // Inserire email mittente (Fishino)
    mailClient.println("Subject: Fishino Solar Meter"); // Inserire Soggetto email
    mailClient.println("MIME-Version: 1.0");
    mailClient.println("Content-Type: text/html; charset=\"utf-8\"");
    mailClient.println("Content-Transfer-Encoding: quoted-printable");
    ShowStatus(mailClient); // Inserire Contenuto email
    mailClient.println("\r\n");
    mailClient.println(".");
    if(!eRcv()) return 0;

    Serial.println(F("Invio QUIT"));
    mailClient.println("QUIT");
    if(!eRcv()) return 0;

    mailClient.stop();
    Serial.println(F("Disconnesso"));
    return 1;

E l'output risultante dal sorgente pagina:

<!DOCTYPE html>
<html>
<head>
<title>Fishino Solar Meter</title>
</head>
<body style="margin: 0; padding: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="1000px"><tr><th><b>
V11.43 Mini WiFi SDCard Retry Mail IDE v1.8.6 - Fishino MEGA R2


</b></th></tr><tr><td>
09.09.18 13:09:36

Uptime= 0d+0h

Last PvOutput fail=  @ Never (in 0x)

Last NTP update= 09.09.18 13:09:28 (in 1x)

WD ctr= 0

WD val= 5

Reset Day= 9

Free RAM= 5516


<table border="1" cellpadding="0" cellspacing="0" width="1000px">
<tr><th>ID</th><th>SID</th><th>Type</th>
<th>Actual</th><th>Peak</th><th>Today</th>
<th>Total</th><th>Factor</th><th>TodayCnt</th>
<th>EEprom</th><th>ppu</th><th>Pulse</th><th>Extra</th></tr>
<tr><th>0</th><th>61535</th><th>2</th>
<th>0</th><th>0</th><th>0</th>
<th>-1</th><th>1</th><th>0</th>
<th>0</th><th>2000</th><th>0</th><th></th></tr>
<tr><th>1</th><th>61535</th><th>4</th>
<th>0</th><th>0</th><th>6172</th>
<th>33759</th><th>1</th><th>12345</th>
<th>12345</th><th>2000</th><th>0</th><th></th></tr>
</table></td></tr></table>
</body></html>