intégrer mesure dans html / css sur même ligne entre caractere

Bonjour,

Apres une semaine ... j'ai réussi :slight_smile:
ou presque !

Je cherche a pouvoir accéder via internet a mes relever de température et autre sur mon aquarium.
Mon arduino mega est relié a un modul esp-01. (en rx/tx02)

J'ai luter pour comprendre comment écrire une page html et je me heurte a un problème dont personne ne parle sur le net !

J'arrive bien a faire apparaître mes mesure mais uniquement sur la ligne suivante. impossible de le mettre au bout de la phrase "température aquarium :". Il en est de meme pour le sigle °.
Et également pour mettre le H pour separer les heure des minutes.

Tout les forum que je lise parle de html/css ou alors de l'arduino mais je n'est rien trouvé pour solutionner mon problème.

Les forum arduino utilise tous un biblioteque et des code "client.print"

Si dessous un rendu de ma page html et mon code, simplifier pour les tests.

Si des connaisseur arduino/html passe dans le coin ... Merci d'avance.

int test = 1234;

void setup() {
  Serial.begin(115200);
  Serial2.begin(115200); 
 

  String SSIDstring = ("ssid");
  String PASSstring = ("pass");
  
   Serial.println("\r\n----- [ RESET DE MODULE (RST) ] -----");  
  sendData("AT+RST\r\n", 1000, true); // Reset de ESP module.
 
  Serial.println("\r\n----- [ ZET ESP IN STATION MODE (CWMODE) ] -----");  
  sendData("AT+CWMODE=1\r\n", 500, true); // Configureer de ESP in "station mode" (1=Station, 2=AP, 3=Station+AP).
 
  Serial.println("\r\n----- [ INLOGGEN OP WIFI (CWJAP) ] -----");
  sendData("AT+CWJAP=" + SSIDstring + "," + PASSstring, 6000, true); // Inloggen op de WiFi met wachtwoord.
 
  Serial.println("\r\n----- [ DUMMY REGEL OM DE ERROR OP TE VANGEN ] -----");
  sendData("AT+CIPSTATUS\r\n", 500, true); // Alles wat na de bovenste regel komt geeft "ERROR", vandaar deze dummy regel!
 
  Serial.println("\r\n----- [ MULTIPLEX MODE OP MULTIPLE CONNECTIES ZETTEN (CIPMUX) ] -----");
  // Zet multiplex in "multiple mode, zo kan de server meerdere verbindingen accepteren, dit is nodig om de server te starten.
  sendData("AT+CIPMUX=1\r\n", 500, true);
 
  Serial.println("\r\n----- [ SERVER STARTEN (CIPSERVER) ] -----"); 
  sendData("AT+CIPSERVER=1,80\r\n", 500, true); // Zet de server actief op poort 80.
  
  Serial.println("\r\n----- [IP ADRES] -----");
  sendData("AT+CIFSR\r\n", 500, true); // Geef het verkregen IP adres weer.
}
 
void loop() {

 
  if(Serial2.available()) { 
    if(Serial2.find("+IPD,")) {
      int connectionId = Serial2.read() - 48;
 
      // ----- WEBPAGINA -----
String pageweb ="<!DOCTYPE html><html><head><style>body{background-color: lightblue;color: red;font-family: Comic Sans MS;font-size: 25px;}h1{color: blue;text-align: center;font-family: Comic Sans MS;font-size: 50px;}h3 {color: red;text-align: left;font-family: Comic Sans MS;font-size: 25px;}p {color: blue;font-family: Comic Sans MS;font-size: 20px;}</style></head><body><h1>AQUABOUN'S</h1>
<p>heure :</p>";
pageweb += test;
pageweb +="
<p>Temperature aquarium :</p>";
pageweb += test;
pageweb +="<h3>&deg</h3>";
pageweb +="
<p>Temperature rampe :</p>";
pageweb +="<h3>&deg</h3>
";
pageweb +="<p>PH:</p>";
pageweb +="<h3>ph</h3>";
     
        
      // ----- WEBPAGINA -----
 
       sendData("AT+CIPSEND=" + String(connectionId) + "," + pageweb.length() + "\r\n", 500, true);
      sendData(pageweb, 1000, true); // Stuur de webpagina door.
      sendData("AT+CIPCLOSE=" + String(connectionId) + "\r\n", 1000, true); // Sluit de connectie.
    }
  }
}

  String sendData(String command, const int timeout, boolean debug) {
  String response = "";
  Serial2.print(command); // Stuur een "lees" karakter naar de ESP.
  long int time = millis();
  while( (time+timeout) > millis()) {
    while(Serial2.available()) { // De ESP heeft data om weer te geven, laat het zien in de serial monitor. 
      char c = Serial2.read(); // Lees het volgende karakter.
      response+=c;
    }
  }
  if(debug) { Serial.print(response); } 
  return response;
}

Quand vous faites

pageweb +="[color=red]
<p>[/color]Temperature aquarium :[color=red]</p>[/color]";
...
pageweb +="[color=red]
<p>[/color]Temperature rampe :[color=red]</p>[/color]";

que pensez vous que les trucs en rouge font à votre page web ? faut lire un peu la base du langage HTML là...


Ne bâtissez pas des String de folies !!!! envoyez les trucs par petits bouts
j'ai un petit tuto sur le shield Ethernet ou je génère une page web

jetez un oeil au code de génération ça vous donnera des idées pour éviter de faire cette String gigantesque !

Salut,

Le passage a la ligne est volontaire et est apres l'affichage rouge pour qu'il y est une ligne de vide entre chaque paramètre.

Quand je met sur plusieurs ligne j'ai des erreur a la compilation.

Je n'est peut etre pas lu toute les base du html mais vous, vous n'avez pas lu tout mon message. Votre tuto parle comme tout les autre de la fonction client.print chose qu'il n'y a pas dans le code que j'utilise.

bonjour,
bon, on va redescendre d'un ton déjà, merci, ca sent l'agressivité.

et

font des retours à la ligne pour paragragphe, donc déjà tu ne peux avoir sur la même ligne la valeur est : et la données de la valeur

testes ceci

pageweb +="
<p>Temperature aquarium : ";
pageweb += test;
pageweb +="</p>";

J'ai luter pour comprendre comment écrire une page html et je me heurte a un problème dont personne ne parle sur le net
J'arrive bien a faire apparaître mes mesure mais uniquement sur la ligne suivante. impossible de le mettre au bout de la phrase "température aquarium :". Il en est de meme pour le sigle °.

Désolé mais que je lis cela je ne comprends pas que vous avez fait exprès de passer à la ligne - je comprends que vous galérez Avec HTML et comme c’est évident qu’il y a un saut de ligne dans le code je me suis permis un petit commentaire certes sarcastique - mais faut pas le prendre mal :slight_smile:

Quand je met sur plusieurs ligne j'ai des erreur a la compilation.

Pourquoi ne pas nous montrer le code avec tout sur une ligne et l’erreur de compilation plutôt que de nous montrer un code qui fonctionne et où vous sauter une ligne exprès?

Sinon ma référence à mon bout de code c’était juste pour montrer comment envoyer des choses par petits bouts, pas pour le client.print()

Je vois que vous utilisez directement l’ESP en mode commande AT mais rien ne vous empêche d’envoyer sur le port série par petits bouts aussi

infobarquee:
bonjour,
bon, on va redescendre d'un ton déjà, merci, ca sent l'agressivité.

et

font des retours à la ligne pour paragragphe, donc déjà tu ne peux avoir sur la même ligne la valeur est : et la données de la valeur

testes ceci

pageweb +="

Temperature aquarium : "; pageweb += test; pageweb +="

"; > ```

Bonjour,

Merci infobarquee,
effectivement ça fonctionne mais surtout j'ai compris le principe ...

J-M-L:
mais faut pas le prendre mal :slight_smile:
Pourquoi ne pas nous montrer le code avec tout sur une ligne et l’erreur de compilation plutôt que de nous montrer un code qui fonctionne et où vous sauter une ligne exprès?

Sinon ma référence à mon bout de code c’était juste pour montrer comment envoyer des choses par petits bouts, pas pour le client.print()

Je vois que vous utilisez directement l’ESP en mode commande AT mais rien ne vous empêche d’envoyer sur le port série par petits bouts aussi

Ok JML
Je post pas pour le plaisir et je passe des jour voir des semaine a chercher avant d’embêter mon monde.

Pour le code, j'ai pas voulu mettre mon code global afin de simplifier les personne me venant en aide.

infobarquee ma bien aider et c'etait si simple ... j'ai trouver un site pas mal www.w3schools.com
ca ma permis de fignoler et du coup je suis arrivé a ce que je voulait.

Je met le code complet et modifié ci joint

bitmap_functions.ino (8.53 KB)

led_jebao_oscilo_djbouns_2017__wifi.ino (24.3 KB)

Bravo

Je post pas pour le plaisir et je passe des jour voir des semaine a chercher avant d'embêter mon monde.

la démarche est intellectuellement noble et enrichissante. Vous n'embêtez personne cependant en postant ici, il n'y a que des bénévoles passionnés qui décident de répondre si ça les chante. faut pas hésiter non plus.

(J’ai pas bien compris si finalement le passage à la ligne par le paragraphe était volontaire ou pas dans votre code d'origine)

infobarquee ma bien aider et c'etait si simple ... j'ai trouver un site pas mal www.w3schools.com
ca ma permis de fignoler et du coup je suis arrivé a ce que je voulait.

que pensez vous que les trucs en rouge font à votre page web ? faut lire un peu la base du langage HTML là...

w3 est bien, mais le soucis comme le soulignait jml était sur les bases du html.
la meilleure facon de procéder AMHA est de faire sa page en html et de la transformer en code après.

J-M-L:
(J’ai pas bien compris si finalement le passage à la ligne par le paragraphe était volontaire ou pas dans votre code d'origine)

Alors,
Le passage a la ligne par
était volontaire
Par contre, mon soucis était que j'avais compris que le

était obligatoire au début en fin de chaque ligne de code. donc forcement, quand on c'est que ce cela termine un paragraphe et donc va a la ligne ... :roll_eyes: je peux comprendre que sa puisse agacer :confused:

infobarquee:
w3 est bien, mais le soucis comme le soulignait jml était sur les bases du html.
la meilleure facon de procéder AMHA est de faire sa page en html et de la transformer en code après.

Oui, si je doit modifier quelque chose je passerait par la

effectivement ça fonctionne mais surtout j'ai compris le principe ...

Attention cependant à ma remarque sur les grandes String. La commande que vous utilisez "AT+CIPSEND" qui permet de préparer l'envoi d'un certains nombre d'octets est limitée à un buffer de 2048 octets par paquet et il faut un intervalle de 20ms entre deux envois

c'est pour cela que si vous voulez gérer une page HTML un peu plus complexe, il vaut mieux l'envoyer par petits bouts.

si j'ai un peu de temps dans l'après midi je documenterais dans un petit tuto les base d'un serveur TCP sur base de ESP01 en mode commande AT - ça vous aidera à y voir plus clair

Bon jetez un oeil sur ce tuto, j'ai passé un peu de temps pour essayer d'être didactique

il n'y a pas encore la partie code, mais si vous comprenez cela, comme il me semble que vous savez programmer vous avez la base pour tout faire fonctionner en contrôlant au niveau bas ce qu'il se passe.

je posterai à l'occasion du code qui permet de gérer sa connection

merci je vais dévorer tout ça
a+