Icone en <SVG> a integre a un projet

International Français
1

Bonjour a tous.

Projet de base pour un débutant la fameuse "station météo".
Je suis autodidacte avec la programmation, beaucoup de recherches, formation en ligne, vidéos YouTube et énormément de temps et de prises de tête !!!!!
Mon matériels :

  • ESP8266
  • BH1750
  • BME280
    Je suis partie de ce code trouver sur internet qui ne concernais que le BME280.
#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;

float temperature, humidity, pressure, altitude;

/*Put your SSID & Password*/
const char* ssid = "BBOXYLLEN";  // Enter SSID here
const char* password = "NELLMATT2022";  //Enter Password here

ESP8266WebServer server(80);              
 
void setup() {
  Serial.begin(112500);
  delay(100);
  
  bme.begin(0x76);   

  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

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

void handle_OnConnect() {
  temperature = bme.readTemperature();
  humidity = bme.readHumidity();
  pressure = bme.readPressure() / 100.0F;
  altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float temperature,float humidity,float pressure,float altitude){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>ESP8266 Station Météo</title>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr +="<style>";
  ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr +="body{margin: 0px;} ";
  ptr +="h1 {margin: 50px auto 30px;} ";
  ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}";
  ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  ptr +=".temperature .reading{color: #F29C1F;}";
  ptr +=".humidity .reading{color: #3B97D3;}";
  ptr +=".pressure .reading{color: #26B99A;}";
  ptr +=".altitude .reading{color: #955BA5;}";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:65px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>ESP8266 Weather Station</h1>";
  ptr +="<div class='container'>";
  ptr +="<div class='data temperature'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Temperature</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)temperature;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data humidity'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Humidity</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)humidity;
  ptr +="<span class='superscript'>%</span></div>";
  ptr +="</div>";
  ptr +="<div class='data pressure'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 40.542 40.541'height=40.541px id=Layer_1 version=1.1 viewBox='0 0 40.542 40.541'width=40.542px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M34.313,20.271c0-0.552,0.447-1,1-1h5.178c-0.236-4.841-2.163-9.228-5.214-12.593l-3.425,3.424";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l3.425-3.424";
  ptr +="c-3.375-3.059-7.776-4.987-12.634-5.215c0.015,0.067,0.041,0.13,0.041,0.202v4.687c0,0.552-0.447,1-1,1s-1-0.448-1-1V0.25";
  ptr +="c0-0.071,0.026-0.134,0.041-0.202C14.39,0.279,9.936,2.256,6.544,5.385l3.576,3.577c0.391,0.391,0.391,1.024,0,1.414";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293L5.142,6.812c-2.98,3.348-4.858,7.682-5.092,12.459h4.804";
  ptr +="c0.552,0,1,0.448,1,1s-0.448,1-1,1H0.05c0.525,10.728,9.362,19.271,20.22,19.271c10.857,0,19.696-8.543,20.22-19.271h-5.178";
  ptr +="C34.76,21.271,34.313,20.823,34.313,20.271z M23.084,22.037c-0.559,1.561-2.274,2.372-3.833,1.814";
  ptr +="c-1.561-0.557-2.373-2.272-1.815-3.833c0.372-1.041,1.263-1.737,2.277-1.928L25.2,7.202L22.497,19.05";
  ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Pressure</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)pressure;
  ptr +="<span class='superscript'>hPa</span></div>";
  ptr +="</div>";
  ptr +="<div class='data altitude'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Altitude</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)altitude;
  ptr +="<span class='superscript'>m</span></div>";
  ptr +="</div>";
  ptr +="</div>";
  ptr +="</body>";
  ptr +="</html>";
  return ptr;
}

Apres plusieurs heures j'ai réussi à intégrer au code:

  • Le capteur BH1750.
  • La ligne de texte supplémentaire pour la valeur du BH1750.
  • Changer la couleur afin de différencier les valeurs.
    Et ça fonctionne, Yessssssssss! :smiley:
    Voici le code apres modification :
#include <ESP8266WebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
#include <BH1750.h> //biblioteque BH1750
#define SEALEVELPRESSURE_HPA (1006.06)

Adafruit_BME280 bme;
BH1750 lightMeter(0x23); //declaration du BH1750
float temperature, humidity, pressure, altitude, lux; // rajout "lightMeter"

/*Put your SSID & Password*/
const char* ssid = "BBOXYLLEN";  // Enter SSID here
const char* password = "NELLMATT2022";  //Enter Password here

ESP8266WebServer server(80);              
 
void setup() {
  Serial.begin(9600);
  delay(100);

  Wire.begin (D4, D3); // changement des pins pour l'ESP8266
  bme.begin(0x76);

  lightMeter.begin(BH1750::CONTINUOUS_HIGH_RES_MODE); // capteur en mode continue et sensibilité au lux
  
  Serial.println(F("BH1750 Test begin"));  
  Serial.println("Connecting to ");
  Serial.println(ssid);

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());


  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

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

void handle_OnConnect() {
  temperature = bme.readTemperature();
  humidity = bme.readHumidity();
  pressure = bme.readPressure() / 100.0F;
  altitude = bme.readAltitude(SEALEVELPRESSURE_HPA);
  lux = lightMeter.readLightLevel();
  server.send(200, "text/html", SendHTML(temperature,humidity,pressure,altitude,lux)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float temperature,float humidity,float pressure,float altitude,float lux){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>Station météo NDDL</title>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr +="<style>";
  ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr +="body{margin: 0px;} ";
  ptr +="h1 {margin: 50px auto 30px;} ";
  ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}";
  ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  ptr +=".temperature .reading{color: #F29C1F;}";
  ptr +=".humidity .reading{color: #3B97D3;}";
  ptr +=".pressure .reading{color: #26B99A;}";
  ptr +=".altitude .reading{color: #955BA5;}";
  ptr +=".lux .reading{color: #FF0000;}"; // couleur rouge de la valeur "Lux"
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:65px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>Station météo NDDL</h1>";
  ptr +="<div class='container'>";
  ptr +="<div class='data temperature'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Temperature</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)temperature;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data humidity'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Humidity</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)humidity;
  ptr +="<span class='superscript'>%</span></div>";
  ptr +="</div>";
  ptr +="<div class='data pressure'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 40.542 40.541'height=40.541px id=Layer_1 version=1.1 viewBox='0 0 40.542 40.541'width=40.542px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M34.313,20.271c0-0.552,0.447-1,1-1h5.178c-0.236-4.841-2.163-9.228-5.214-12.593l-3.425,3.424";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l3.425-3.424";
  ptr +="c-3.375-3.059-7.776-4.987-12.634-5.215c0.015,0.067,0.041,0.13,0.041,0.202v4.687c0,0.552-0.447,1-1,1s-1-0.448-1-1V0.25";
  ptr +="c0-0.071,0.026-0.134,0.041-0.202C14.39,0.279,9.936,2.256,6.544,5.385l3.576,3.577c0.391,0.391,0.391,1.024,0,1.414";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293L5.142,6.812c-2.98,3.348-4.858,7.682-5.092,12.459h4.804";
  ptr +="c0.552,0,1,0.448,1,1s-0.448,1-1,1H0.05c0.525,10.728,9.362,19.271,20.22,19.271c10.857,0,19.696-8.543,20.22-19.271h-5.178";
  ptr +="C34.76,21.271,34.313,20.823,34.313,20.271z M23.084,22.037c-0.559,1.561-2.274,2.372-3.833,1.814";
  ptr +="c-1.561-0.557-2.373-2.272-1.815-3.833c0.372-1.041,1.263-1.737,2.277-1.928L25.2,7.202L22.497,19.05";
  ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Pressure</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)pressure;
  ptr +="<span class='superscript'>hPa</span></div>";
  ptr +="</div>";
  ptr +="<div class='data altitude'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Altitude</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)altitude;
  ptr +="<span class='superscript'>m</span></div>";
  ptr +="</div>";
  ptr +="<div class='data lux'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#FF0000 /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Lux</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)lux;
  ptr +="<span class='superscript'>Lux</span></div>";
  ptr +="</div>";
  ptr +="</div>";
  ptr +="</body>";
  ptr +="</html>";
  return ptr;
}

Les quelques commentaire en français dans le code c'est moi.
Je me resigne a vous solliciter car après avoir éplucher tous les sites, toutes les vidéos depuis plusieurs jour, je n'arrive pas à changer l'icône devant ma ligne "LUX" rajouter.
J'ai l'icône de la goutte d'eau (que j'ai dupliquer de la ligne humidité) et je voudrais remplacer cette goutte d'eau par un soleil pour illustrer ma ligne "LUX"
Est-ce que l'un d'entre vous pourrais m'aiguiller à ce sujet car je sais qu'il y a un truc avec
"SVG", "HTML", "CSS" mais je crois que je suis en train de tous mélanger.
En attente de vos retour.
Merci d'avance

2

:warning:
Post mis dans la mauvaise section, on parle anglais dans les forums généraux. déplacé vers le forum francophone.

Merci de prendre en compte les recommandations listées dans Les bonnes pratiques du Forum Francophone

3

Je ne comprends pas ta demande, tu as dupliquer le SVG de la goute d'eau.
Cherche tu un SVG d'un soleil ou comment mettre ton SVG à la place de la goute d'eau?

Si dessous un SVG trouvé sur un site gratuit.

<svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="64"
    height="64"
    viewbox="0 0 64 64">
    <defs>
        <filter id="blur" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="0" dy="4" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.05"/>
            </feComponentTransfer>
            <feMerge> 
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/> 
            </feMerge>
        </filter>
    </defs>
    <g filter="url(#blur)" id="day">
        <g transform="translate(32,32)">
            <g class="am-weather-sun am-weather-sun-shiny am-weather-easing-ease-in-out">
                <g>
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(45)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(90)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(135)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(180)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(225)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(270)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(315)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
            </g>
            <circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
        </g>
    </g>
</svg>
4

Merci de ton retour Terwal.
Oui je cherche a mettre un soleil a la place de la goutte d'eau.
Jai deja trouver pleins de soleil en SVG que jai converti en code via des convertisseurs online et offline.
Mais a chaque fois que j'essaie de l'intégrer dans mon code.
J'ai des erreurs de compilation.

5

Si tu remplace ton dernier SVG, par celui que je t'ai donné cela devrait marcher.
Sinon, met le SVG de ton soleil et donne le code et le message d'erreur.

Il peut être intéressant pour la suite, de passer par le système de fichier virtuel, pour lire ton/tes fichiers HTML, cela te permettra de pouvoir modifier le fichier sans modifier ton programme.
Surtout que sur les ESP dispose de pas mal de mémoire flash.

6

Bonjour.
Lors de l'integration du code que mas fournis qui comporte une 50 lignes.
Est-ce que je dois ecrire "ptr +=" a chaque debut de ligne, comme dans mon code originale.
Le problème est que je ne trouve pas de code SVG Soleil avec la meme architecture que mon code originale, donc je ne sais pas exactement ou et comment l'insérer.
Jaimerais aussi comprendre ce que je modifie.
Merci.

7

Peux-tu developper sur le systeme fichier
virtuel que tu propose.
Effectivement ça peut etre tres intéressant.

8

Oui, il faut que tu fasse la même chose, pour chaque ligne que je t'ai donné, tu en fait une chaine en englobant par des guillemets et tu le concatène à ta variable "ptr" de type String , tu peux retrouver la même structure que pour l'altitude par exemple.
... 

  ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";

Si j'ai le temps, j'essayerais de te le rajouter, mais ca va être chaud

9

Je dois faire un blocage sur des choses qui ne mérite peut-être pas forcement d'intérêt pour toi.
Pour moi le code que tu me demande d'intégrer au miens, n'ont aucune similitude.
Par exemple =>

<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="0" dy="4" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.05"/>
            </feComponentTransfer>
            <feMerge> 
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/> 
            </feMerge>
        </filter>
    </defs>

Si dessus des lignes que tu m'as gracieusement fournis, mais que je ne retrouve pas dans mon code.
Donc je suis incapable de savoir ou doivent commencer les guillemets, ou finir ma ligne avec un ";"
J'essaie également de faire mon possible pour te donner le maximum d'éléments, mais journée assez charger !!!!!
Merci a toi de prendre ce temps afin de m'aider.

10

J'ai trouvé ce dont tu me parlais pour modifier mon code html en ligne.
Après un test, quand je colle mon code originale, j'ai des erreurs dès le début !!!!! (voir imprimecran en PJ.
je n'y comprend plus rien, mon code n'est pas en "HTML"?

11

voici ton code implanter au miens.

String SendHTML(float temperature,float humidity,float pressure,float altitude,float lux){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>Station météo NDDL</title>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr +="<style>";
  ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr +="body{margin: 0px;} ";
  ptr +="h1 {margin: 50px auto 30px;} ";
  ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}";
  ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  ptr +=".temperature .reading{color: #F29C1F;}";
  ptr +=".humidity .reading{color: #3B97D3;}";
  ptr +=".pressure .reading{color: #26B99A;}";
  ptr +=".altitude .reading{color: #955BA5;}";
  ptr +=".lux .reading{color: #FF0000;}";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:65px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>Station météo NDDL</h1>";
  ptr +="<div class='container'>";
  ptr +="<div class='data temperature'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Temperature</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)temperature;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<div class='data humidity'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 29.235 40.64'height=40.64px id=Layer_1 version=1.1 viewBox='0 0 29.235 40.64'width=29.235px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><path d='M14.618,0C14.618,0,0,17.95,0,26.022C0,34.096,6.544,40.64,14.618,40.64s14.617-6.544,14.617-14.617";
  ptr +="C29.235,17.95,14.618,0,14.618,0z M13.667,37.135c-5.604,0-10.162-4.56-10.162-10.162c0-0.787,0.638-1.426,1.426-1.426";
  ptr +="c0.787,0,1.425,0.639,1.425,1.426c0,4.031,3.28,7.312,7.311,7.312c0.787,0,1.425,0.638,1.425,1.425";
  ptr +="C15.093,36.497,14.455,37.135,13.667,37.135z'fill=#3C97D3 /></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Humidity</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)humidity;
  ptr +="<span class='superscript'>%</span></div>";
  ptr +="</div>";
  ptr +="<div class='data pressure'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 40.542 40.541'height=40.541px id=Layer_1 version=1.1 viewBox='0 0 40.542 40.541'width=40.542px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M34.313,20.271c0-0.552,0.447-1,1-1h5.178c-0.236-4.841-2.163-9.228-5.214-12.593l-3.425,3.424";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l3.425-3.424";
  ptr +="c-3.375-3.059-7.776-4.987-12.634-5.215c0.015,0.067,0.041,0.13,0.041,0.202v4.687c0,0.552-0.447,1-1,1s-1-0.448-1-1V0.25";
  ptr +="c0-0.071,0.026-0.134,0.041-0.202C14.39,0.279,9.936,2.256,6.544,5.385l3.576,3.577c0.391,0.391,0.391,1.024,0,1.414";
  ptr +="c-0.195,0.195-0.451,0.293-0.707,0.293s-0.512-0.098-0.707-0.293L5.142,6.812c-2.98,3.348-4.858,7.682-5.092,12.459h4.804";
  ptr +="c0.552,0,1,0.448,1,1s-0.448,1-1,1H0.05c0.525,10.728,9.362,19.271,20.22,19.271c10.857,0,19.696-8.543,20.22-19.271h-5.178";
  ptr +="C34.76,21.271,34.313,20.823,34.313,20.271z M23.084,22.037c-0.559,1.561-2.274,2.372-3.833,1.814";
  ptr +="c-1.561-0.557-2.373-2.272-1.815-3.833c0.372-1.041,1.263-1.737,2.277-1.928L25.2,7.202L22.497,19.05";
  ptr +="C23.196,19.843,23.464,20.973,23.084,22.037z'fill=#26B999 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Pressure</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)pressure;
  ptr +="<span class='superscript'>hPa</span></div>";
  ptr +="</div>";
  ptr +="<div class='data altitude'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 58.422 40.639'height=40.639px id=Layer_1 version=1.1 viewBox='0 0 58.422 40.639'width=58.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M58.203,37.754l0.007-0.004L42.09,9.935l-0.001,0.001c-0.356-0.543-0.969-0.902-1.667-0.902";
  ptr +="c-0.655,0-1.231,0.32-1.595,0.808l-0.011-0.007l-0.039,0.067c-0.021,0.03-0.035,0.063-0.054,0.094L22.78,37.692l0.008,0.004";
  ptr +="c-0.149,0.28-0.242,0.594-0.242,0.934c0,1.102,0.894,1.995,1.994,1.995v0.015h31.888c1.101,0,1.994-0.893,1.994-1.994";
  ptr +="C58.422,38.323,58.339,38.024,58.203,37.754z'fill=#955BA5 /><path d='M19.704,38.674l-0.013-0.004l13.544-23.522L25.13,1.156l-0.002,0.001C24.671,0.459,23.885,0,22.985,0";
  ptr +="c-0.84,0-1.582,0.41-2.051,1.038l-0.016-0.01L20.87,1.114c-0.025,0.039-0.046,0.082-0.068,0.124L0.299,36.851l0.013,0.004";
  ptr +="C0.117,37.215,0,37.62,0,38.059c0,1.412,1.147,2.565,2.565,2.565v0.015h16.989c-0.091-0.256-0.149-0.526-0.149-0.813";
  ptr +="C19.405,39.407,19.518,39.019,19.704,38.674z'fill=#955BA5 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Altitude</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)altitude;
  ptr +="<span class='superscript'>m</span></div>";
  ptr +="</div>";
  ptr +="<div class='data lux'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg version="1.1" xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width="64" height="64" viewbox="0 0 64 64">";
    <defs>
        <filter id="blur" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
            <feOffset dx="0" dy="4" result="offsetblur"/>
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.05"/>
            </feComponentTransfer>
            <feMerge> 
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/> 
            </feMerge>
        </filter>
    </defs>
    <g filter="url(#blur)" id="day">
        <g transform="translate(32,32)">
            <g class="am-weather-sun am-weather-sun-shiny am-weather-easing-ease-in-out">
                <g>
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(45)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(90)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(135)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(180)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(225)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(270)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
                <g transform="rotate(315)">
                    <line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
                </g>
            </g>
            <circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
        </g>
    </g>
</svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Lux</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)lux;
  ptr +="<span class='superscript'>Lux</span></div>";
  ptr +="</div>";
  ptr +="</div>";
  ptr +="</body>";
  ptr +="</html>";
  return ptr;
}

Voici les erreurs survenu suite a ce changement.

C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:201:7: error: missing terminating " character
  201 | </svg>";
      |       ^~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino: In function 'String SendHTML(float, float, float, float, float)':
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:156:24: error: expected ';' before numeric constant
  156 |   ptr +="<svg version="1.1" xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width="64" height="64" viewbox="0 0 64 64">";
      |                        ^~~
      |                        ;
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:157:5: error: expected primary-expression before '<' token
  157 |     <defs>
      |     ^
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:157:6: error: 'defs' was not declared in this scope; did you mean 'fs'?
  157 |     <defs>
      |      ^~~~
      |      fs
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:158:9: error: expected primary-expression before '<' token
  158 |         <filter id="blur" width="200%" height="200%">
      |         ^
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:158:10: error: 'filter' was not declared in this scope
  158 |         <filter id="blur" width="200%" height="200%">
      |          ^~~~~~

exit status 1

Compilation error: missing terminating " character
12

il faut que pour chaque ligne tu rajoute ptr +="

le code suivant doit être correcte, mais je n'ai pas testé

ptr +="<svg";
ptr +="    version='1.1'";
ptr +="    xmlns='http://www.w3.org/2000/svg'";
ptr +="    xmlns:xlink='http://www.w3.org/1999/xlink'";
ptr +="    width='64'";
ptr +="    height='64'";
ptr +="    viewbox='0 0 64 64'>";
ptr +="    <defs>";
ptr +="        <filter id='blur' width='200%' height='200%'>";
ptr +="            <feGaussianBlur in='SourceAlpha' stdDeviation='3'/>";
ptr +="            <feOffset dx='0' dy='4' result='offsetblur'/>";
ptr +="            <feComponentTransfer>";
ptr +="                <feFuncA type='linear' slope='0.05'/>";
ptr +="            </feComponentTransfer>";
ptr +="            <feMerge>";
ptr +="                <feMergeNode/>";
ptr +="                <feMergeNode in='SourceGraphic'/> ";
ptr +="            </feMerge>";
ptr +="        </filter>";
ptr +="    </defs>";
ptr +="    <g filter='url(#blur)' id='day'>";
ptr +="        <g transform='translate(32,32)'>";
ptr +="            <g class='am-weather-sun am-weather-sun-shiny am-weather-easing-ease-in-out'>";
ptr +="                <g>";
ptr +="                    <line fill='none' stroke='orange' stroke-linecap='round' stroke-width='2' transform='translate(0,9)' x1='0' x2='0' y1='0' y2='3' />";
ptr +="                </g>";
ptr +="                <g transform='rotate(45)'>";
ptr +="                    <line fill='none' stroke='orange' stroke-linecap='round' stroke-width='2' transform='translate(0,9)' x1='0' x2='0' y1='0' y2='3' />";
ptr +="                </g>";
ptr +="                <g transform='rotate(90)'>";
ptr +="                    <line fill='none' stroke='orange' stroke-linecap='round' stroke-width='2' transform='translate(0,9)' x1='0' x2='0' y1='0' y2='3' />";
ptr +="                </g>";
ptr +="                <g transform='rotate(135)'>";
ptr +="                    <line fill='none' stroke='orange' stroke-linecap='round' stroke-width='2' transform='translate(0,9)' x1='0' x2='0' y1='0' y2='3' />";
ptr +="                </g>";
ptr +="                <g transform='rotate(180)'>";
ptr +="                    <line fill='none' stroke='orange' stroke-linecap='round' stroke-width='2' transform='translate(0,9)' x1='0' x2='0' y1='0' y2='3' />";
ptr +="                </g>";
ptr +="                <g transform='rotate(225)'>";
ptr +="                    <line fill='none' stroke='orange' stroke-linecap='round' stroke-width='2' transform='translate(0,9)' x1='0' x2='0' y1='0' y2='3' />";
ptr +="                </g>";
ptr +="                <g transform='rotate(270)'>";
ptr +="                    <line fill='none' stroke='orange' stroke-linecap='round' stroke-width='2' transform='translate(0,9)' x1='0' x2='0' y1='0' y2='3' />";
ptr +="                </g>";
ptr +="                <g transform='rotate(315)'>";
ptr +="                    <line fill='none' stroke='orange' stroke-linecap='round' stroke-width='2' transform='translate(0,9)' x1='0' x2='0' y1='0' y2='3' />";
ptr +="                </g>";
ptr +="            </g>";
ptr +="            <circle cx='0' cy='0' fill='orange' r='5' stroke='orange' stroke-width='2'/>";
ptr +="        </g>";
ptr +="    </g>";
ptr +="</svg>";





Répondre

mecamaniack
13 hpost #4
Merci de ton retour Terwal.
13

je viens de mettre l'annotation ptr +=" devant chaque ligne avec une terminaison ";
mais toujours un grand nombre d'erreur, voir ci-dessous.

C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:171:25: error: stray '#' in program
  171 |   ptr +="<g filter="url(#blur)" id="day">";
      |                         ^
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino: In function 'String SendHTML(float, float, float, float, float)':
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:157:19: error: expected ';' before numeric constant
  157 |   ptr +="version="1.1" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="64" height="64" viewbox="0 0 64 64">";
      |                   ^~~
      |                   ;
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:159:26: error: unable to find string literal operator 'operator""blur' with 'const char [19]', 'unsigned int' arguments
  159 |   ptr +="<filter id="blur" width="200%" height="200%">";
      |                          ^~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:160:41: error: unable to find string literal operator 'operator""SourceAlpha' with 'const char [34]', 'unsigned int' arguments
  160 |   ptr +="<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>";
      |                                         ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:161:24: error: expected ';' before numeric constant
  161 |   ptr +="<feOffset dx="0" dy="4" result="offsetblur"/>";
      |                        ^
      |                        ;
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:163:31: error: unable to find string literal operator 'operator""linear' with 'const char [22]', 'unsigned int' arguments
  163 |   ptr +="<feFuncA type="linear" slope="0.05"/>";
      |                               ^~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:167:40: error: unable to find string literal operator 'operator""SourceGraphic' with 'const char [19]', 'unsigned int' arguments
  167 |   ptr +="<feMergeNode in="SourceGraphic"/>";
      |                                        ^~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:171:9: error: unable to find string literal operator 'operator""url' with 'const char [11]', 'unsigned int' arguments
  171 |   ptr +="<g filter="url(#blur)" id="day">";
      |         ^~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:171:26: error: 'blur' was not declared in this scope
  171 |   ptr +="<g filter="url(#blur)" id="day">";
      |                          ^~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:172:9: error: unable to find string literal operator 'operator""translate' with 'const char [14]', 'unsigned int' arguments
  172 |   ptr +="<g transform="translate(32,32)">";
      |         ^~~~~~~~~~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:173:9: error: unable to find string literal operator 'operator""am' with 'const char [10]', 'unsigned int' arguments
  173 |   ptr +="<g class="am-weather-sun am-weather-sun-shiny am-weather-easing-ease-in-out">";
      |         ^~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:173:23: error: 'weather' was not declared in this scope
  173 |   ptr +="<g class="am-weather-sun am-weather-sun-shiny am-weather-easing-ease-in-out">";
      |                       ^~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:173:31: error: 'sun' was not declared in this scope; did you mean 'sin'?
  173 |   ptr +="<g class="am-weather-sun am-weather-sun-shiny am-weather-easing-ease-in-out">";
      |                               ^~~
      |                               sin
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:175:26: error: inconsistent user-defined literal suffixes 'none' and 'orange' in string literal
  175 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                          ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:175:65: error: unable to find string literal operator 'operator""none' with 'const char [50]', 'unsigned int' arguments
  175 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                                                                 ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:177:9: error: unable to find string literal operator 'operator""rotate' with 'const char [14]', 'unsigned int' arguments
  177 |   ptr +="<g transform="rotate(45)">";
      |         ^~~~~~~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:178:26: error: inconsistent user-defined literal suffixes 'none' and 'orange' in string literal
  178 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                          ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:178:65: error: unable to find string literal operator 'operator""none' with 'const char [50]', 'unsigned int' arguments
  178 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                                                                 ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:180:9: error: unable to find string literal operator 'operator""rotate' with 'const char [14]', 'unsigned int' arguments
  180 |   ptr +="<g transform="rotate(90)">";
      |         ^~~~~~~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:181:26: error: inconsistent user-defined literal suffixes 'none' and 'orange' in string literal
  181 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                          ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:181:65: error: unable to find string literal operator 'operator""none' with 'const char [50]', 'unsigned int' arguments
  181 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                                                                 ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:183:9: error: unable to find string literal operator 'operator""rotate' with 'const char [14]', 'unsigned int' arguments
  183 |   ptr +="<g transform="rotate(135)">";
      |         ^~~~~~~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:184:26: error: inconsistent user-defined literal suffixes 'none' and 'orange' in string literal
  184 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                          ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:184:65: error: unable to find string literal operator 'operator""none' with 'const char [50]', 'unsigned int' arguments
  184 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                                                                 ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:186:9: error: unable to find string literal operator 'operator""rotate' with 'const char [14]', 'unsigned int' arguments
  186 |   ptr +="<g transform="rotate(180)">";
      |         ^~~~~~~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:187:26: error: inconsistent user-defined literal suffixes 'none' and 'orange' in string literal
  187 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                          ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:187:65: error: unable to find string literal operator 'operator""none' with 'const char [50]', 'unsigned int' arguments
  187 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                                                                 ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:189:9: error: unable to find string literal operator 'operator""rotate' with 'const char [14]', 'unsigned int' arguments
  189 |   ptr +="<g transform="rotate(225)">";
      |         ^~~~~~~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:190:26: error: inconsistent user-defined literal suffixes 'none' and 'orange' in string literal
  190 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                          ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:190:65: error: unable to find string literal operator 'operator""none' with 'const char [50]', 'unsigned int' arguments
  190 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                                                                 ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:192:9: error: unable to find string literal operator 'operator""rotate' with 'const char [14]', 'unsigned int' arguments
  192 |   ptr +="<g transform="rotate(270)">";
      |         ^~~~~~~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:193:26: error: inconsistent user-defined literal suffixes 'none' and 'orange' in string literal
  193 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                          ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:193:65: error: unable to find string literal operator 'operator""none' with 'const char [50]', 'unsigned int' arguments
  193 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                                                                 ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:195:9: error: unable to find string literal operator 'operator""rotate' with 'const char [14]', 'unsigned int' arguments
  195 |   ptr +="<g transform="rotate(315)">";
      |         ^~~~~~~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:196:26: error: inconsistent user-defined literal suffixes 'none' and 'orange' in string literal
  196 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                          ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:196:65: error: unable to find string literal operator 'operator""none' with 'const char [50]', 'unsigned int' arguments
  196 |   ptr +="<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />";
      |                                                                 ^~~~~~~~~~~~~~~~
C:\Users\yllen\Desktop\Formation C\arduino\BH1750 + BME280 station meteo\BH1750 + BME280 station meteo.ino:199:22: error: expected ';' before numeric constant
  199 |   ptr +="<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>";
      |                      ^
      |                      ;

exit status 1

Compilation error: stray '#' in program
14

Je pense qu'il faut 'échapper' les caractères spéciaux. Il faut mettre un \ devant chaque " sauf le premier et le dernier de chaque ligne.
Peut-être pareil pour les # qui semblent provoquer des erreurs.

15

J'ai l'impression qu'il crée une erreur parce qu'il se trouve hors d'une chaine de caractères causé par l'erreur précédente.

@mecamaniack Entre nous, si tu regardes le code qu'a proposé @terwal voir même le html que tu as déjà dans ton programme tu t'apercevras que dans le code html des apostrophes sont utilisées au lieu de guillemets pour éviter ce type de problème.

16

Je vois ce que tu veux dire : lorsque les guillemets seront échappés, l'erreur liée au dièze disparaitra.

17

Bonjour a tous.
Désoler du retard de ma réponse mais j'étais à fond sur mon problème de code.
J'ai le plaisir de vous annoncer que ça y est, j'ai réussi à réaliser ce que je voulais faire.
je suis trop contant!!!!!.
pour expliquer comment j'y suis arriver.
Je suis partie de ce code SVG "image de soleil trouvé sur un site.

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="64" height="64"
viewBox="0 0 72 72"
style=" fill:#000000;"><path d="M36 23c7.18 0 13 5.82 13 13s-5.82 13-13 13-13-5.82-13-13S28.82 23 36 23zM36 41c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5S33.239 41 36 41zM40 11c0 .732 0 3.268 0 4 0 2.209-1.791 4-4 4s-4-1.791-4-4c0-.732 0-3.268 0-4 0-2.209 1.791-4 4-4S40 8.791 40 11zM56.506 21.151c-.518.518-2.311 2.311-2.828 2.828-1.562 1.562-4.095 1.562-5.657 0s-1.562-4.095 0-5.657c.518-.518 2.311-2.311 2.828-2.828 1.562-1.562 4.095-1.562 5.657 0S58.068 19.589 56.506 21.151zM61 40c-.732 0-3.268 0-4 0-2.209 0-4-1.791-4-4s1.791-4 4-4c.732 0 3.268 0 4 0 2.209 0 4 1.791 4 4S63.209 40 61 40zM50.849 56.506c-.518-.518-2.311-2.311-2.828-2.828-1.562-1.562-1.562-4.095 0-5.657s4.095-1.562 5.657 0c.518.518 2.311 2.311 2.828 2.828 1.562 1.562 1.562 4.095 0 5.657S52.411 58.068 50.849 56.506zM32 61c0-.732 0-3.268 0-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 .732 0 3.268 0 4 0 2.209-1.791 4-4 4S32 63.209 32 61zM15.494 50.849c.518-.518 2.311-2.311 2.828-2.828 1.562-1.562 4.095-1.562 5.657 0s1.562 4.095 0 5.657c-.518.518-2.311 2.311-2.828 2.828-1.562 1.562-4.095 1.562-5.657 0S13.932 52.411 15.494 50.849zM11 32c.732 0 3.268 0 4 0 2.209 0 4 1.791 4 4s-1.791 4-4 4c-.732 0-3.268 0-4 0-2.209 0-4-1.791-4-4S8.791 32 11 32zM21.151 15.494c.518.518 2.311 2.311 2.828 2.828 1.562 1.562 1.562 4.095 0 5.657s-4.095 1.562-5.657 0c-.518-.518-2.311-2.311-2.828-2.828-1.562-1.562-1.562-4.095 0-5.657S19.589 13.932 21.151 15.494z"></path></svg>

J'ai essayé de l'intégrer dans mon code, mais pleins d'erreur comme vous l'avez dit de positionnement de guillemet a la place d'apostrophe.
Donc j'ai pris des éléments du code originale et du code SVG pour n'en faire qu'un !!!
Voici le resultat .

ptr +="<svg enable-background='new 0 0 66.422 65.639'height=65.639px id=Layer_1 version=1.1 viewBox='0 0 66.422 65.639'width=66.422px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink";
  ptr +="fill=#FF0000 /y=0px><g><path d='M36 23c7.18 0 13 5.82 13 13s-5.82 13-13 13-13-5.82-13-13S28.82 23 36 23zM36 41c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5S33.239 41 36 41zM40 11c0 .732 0 3.268 0 4 0 2.209-1.791 4-4 4s-4-1.791-4-4c0-.732 0-3.268 0-4 0-2.209 1.791-4 4-4S40 8.791 40 11zM56.506 21.151c-.518.518-2.311 2.311-2.828 2.828-1.562 1.562-4.095 1.562-5.657 0s-1.562-4.095 0-5.657c.518-.518 2.311-2.311 2.828-2.828 1.562-1.562 4.095-1.562 5.657 0S58.068 19.589 56.506 21.151zM61 40c-.732 0-3.268 0-4 0-2.209 0-4-1.791-4-4s1.791-4 4-4c.732 0 3.268 0 4 0 2.209 0 4 1.791 4 4S63.209 40 61 40zM50.849 56.506c-.518-.518-2.311-2.311-2.828-2.828-1.562-1.562-1.562-4.095 0-5.657s4.095-1.562 5.657 0c.518.518 2.311 2.311 2.828 2.828 1.562 1.562 1.562 4.095 0 5.657S52.411 58.068 50.849 56.506zM32 61c0-.732 0-3.268 0-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 .732 0 3.268 0 4 0 2.209-1.791 4-4 4S32 63.209 32 61zM15.494 50.849c.518-.518 2.311-2.311 2.828-2.828 1.562-1.562 4.095-1.562 5.657 0s1.562 4.095 0 5.657c-.518.518-2.311 2.311-2.828 2.828-1.562 1.562-4.095 1.562-5.657 0S13.932 52.411 15.494 50.849zM11 32c.732 0 3.268 0 4 0 2.209 0 4 1.791 4 4s-1.791 4-4 4c-.732 0-3.268 0-4 0-2.209 0-4-1.791-4-4S8.791 32 11 32zM21.151 15.494c.518.518 2.311 2.311 2.828 2.828 1.562 1.562 1.562 4.095 0 5.657s-4.095 1.562-5.657 0c-.518-.518-2.311-2.311-2.828-2.828-1.562-1.562-1.562-4.095 0-5.657S19.589 13.932 21.151 15.494z'fill=#FF0000 /></g></svg>";

Maintenant que je viens de résoudre avec votre aide un problème, je vais pouvoir m'attaquer a un autre.
Faire en sorte que les valeurs de mes capteurs "BME280 et BH1750" s'enregistre quelque part pour que je puisse avoir des graphique d'historique pour voir l'evolution de mes valeur dans le temps.
Qui ne s'est jamais poser la question "mais quelque température il y avait l'années dernière a cette période"?

18

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