icon-uri condiționate în html

XAN77 · Ianuarie 6, 2022

Nu știu cât de sugestiv e numele topicului da mai mult nu am putut :D

Cum știu prea puțin spre deloc cod html, am următoarea necunoscută:

Într-o pagină web găzduită pe module cu ESP folosesc iconuri online, cum ar fi un termometru alături de o valoare de temperatură cu linia de cod:

<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>

Cum aș putea să fac să fie afișat un anumit icon din mai multe variante, funcție de valoarea temperaturii ? Ceva gen If ...then...

În cazul de față iconul cu termometru există în mai multe variante cu diferite nivele de umplere, iconul simulând un termometru clasic cu lichid. Funcție de valoarea temperaturii aș vrea să fie afișat un icon cu o umplere proporțională cu temperatura.

E doar un exemplu, mă rog, bănuiesc că se înțelege ce vreau să fac.

informer · Ianuarie 6, 2022

"if"-ul trebuie sa-l faci in javascript... e chiar un if....
Din JS poti modifica toate proprietatile unui element html inclusiv "poza".

Iti recomand https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Nu-i nimic foarte complicat iar pe net gasesti aproape orice-ti trece prin cap sa faci cu html/css/js.

Ca idee pun o bucata din ce-am io in "robotu` casei"... cre` ca-i clar dupa nume ce si cum:

(.svg-urile sunt imagini locale dar poti si cu link-uri daca preferi...)

if(theSwitch.state == 'on') {
if(theSwitch.getAttribute('type') == 'light-switch') img.src = "img/light-on.svg";
else if(theSwitch.getAttribute('type') == 'power-switch') img.src = "img/power-red.svg";
else if(theSwitch.getAttribute('type') == 'heater-switch') img.src = "img/fire-on.svg";
else if(theSwitch.getAttribute('type') == 'service-switch') img.src = "img/alarm-on.svg";
else if(theSwitch.getAttribute('type') == 'heater-circuit') img.src = "img/radiator-on.svg";
else img.src = "img/power-red.svg";
} else {
if(theSwitch.getAttribute('type') == 'light-switch') img.src = "img/light-off.svg";
else if(theSwitch.getAttribute('type') == 'power-switch') img.src = "img/power-green.svg";
else if(theSwitch.getAttribute('type') == 'heater-switch') img.src = "img/fire-off.svg";
else if(theSwitch.getAttribute('type') == 'service-switch') img.src = "img/alarm-off.svg";
else if(theSwitch.getAttribute('type') == 'heater-circuit') img.src = "img/radiator-off.svg";
else img.src = "img/power-green.svg";
}

Editat Ianuarie 6, 2022 de informer

Kreator · Ianuarie 7, 2022

@informer si cum incarci in ESP?

informer · Ianuarie 7, 2022

Acum 1 oră, Kreator a spus:

@informer si cum incarci in ESP?

Exista implementari de file system in flash inca de la ESP8266... nu-i problema sa ai script-urile ori incluse in "pagina" html ori ca fisier separat.

Acelasi lucru (pusu` in flash) e valabil si pt. eventualele fisiere .png ori .svg daca se doreste sa fie locale... daca se apeleaza la link-uri, cu atat mai putin e o problema... insa personal n-as face asta.

Daca intrebarea se referea concret la cum incarci fisiere de care or fi ele, in platformio se rezuma la a le pune intr-un director /data in proiect... sper sa-mi amintesc bine dar parca si-n asa numitul "IDE Arduino" era tot cam asa ceva doar ca un pic mai complicat... nu ma pot abtine sa nu ma enervez de cate ori ma gandesc la "unealta" asta din urma... :rade:

Editat Ianuarie 7, 2022 de informer

Ianuarie 8, 2022

La 06.01.2022 la 19:06, x_dadu a spus:
Într-o pagină web găzduită pe module cu ESP folosesc iconuri online, cum ar fi un termometru alături de o valoare de temperatură cu linia de cod:

Cum aș putea să fac să fie afișat un anumit icon din mai multe variante, funcție de valoarea temperaturii ? Ceva gen If ...then...

Nu este foarte complicat. Dar trebuie sa citesti putin ce variante de termometru ai la Font Awesome.
Asignezi un id tagului . adica:

<i id="i1" class="fas fa-thermometer-half" style="color:#059e8a;"></i>

Apoi, in codul javascript postat de tine acum ceva timp, acolo unde faci:

document.getElementById("temperaturec").innerHTML = this.responseText;

poti aduga ceva de genul:

if(this.responseText<10)
   document.getElementById("i1").setAttribute("class","fas fa-thermometer-empty");
else if(this.responseText<30)
   document.getElementById("i1").setAttribute("class","fas fa-thermometer-half");
else 
   document.getElementById("i1").setAttribute("class","fas fa-thermometer-full");

Te poti juca si cu culorile.
Nu am lucrat cu ESP nici cu Font Awesome. Dar cam asa se face.
Citeste, fa ceva teste, si te astept cu realizari si intrebari.
Succes.

XAN77 · Ianuarie 9, 2022

@Liviu.Mihaiu voi studia, mulțumesc

Kreator · Ianuarie 9, 2022

ESP nu stie decat HTML. Cum se poate implementa JS in ESP, ca eu nu am reusit?

Multumesc!

Editat Ianuarie 9, 2022 de Kreator

Bandi Szasz · Ianuarie 9, 2022

Acum 53 minute, Kreator a spus:

ESP nu stie decat HTML. Cum se poate implementa JS in ESP, ca eu nu am reusit?

Multumesc!

Daca e sa luam asa ESP nu stie nici HTML, el stie doar sa serveasca acel HTML scris ca text catre browser iar browser-ul este cel care se apuca sa afiseze grafic acel HTML. Cu JS exact la fel, tu scrii functia sau ce vrei in javascript ca text si ESP-ul il trimite la browser iar browserul cu siguranta site ce sa faca cu JS. Ce a fost sugerat a fost sa se faca niste mici bucatele de JS care sa ajunga impreuna cu continutul HTML (ca text) la browser iar mai apoi browserul sa se ocupe cu afisat o iconita sau alta.

Editat Ianuarie 9, 2022 de Bandi Szasz

Ianuarie 10, 2022

Acum 10 ore, Kreator a spus:

ESP nu stie decat HTML. Cum se poate implementa JS in ESP, ca eu nu am reusit?

ESP nu "stie" nici HTML nici Javascript.
ESP trimite catre browser un fisier oarecare. Daca fisierul contine cod html (eventual si js) browserul il trateaza ca atare.

LE: tot ce vezi tu acolo in ESP (codul html si javascript) se executa in browserul care acceseaza ESP.
Vad ca explicat si user Bandi Szasz anterior.

Editat Ianuarie 10, 2022 de Vizitator

Kreator · Ianuarie 10, 2022

Un exemplu sau un site in care se explica "ca la prosti" cum se face imi puteti indica?

Am facut un termostat WIFI pt centrala (cu emitator si receptor radio pe 433 MHz), dar l-am facut doar cu html, si parca l-as infrumuseta putin.

Nu stiu html javascript, etc, si recunosc ca "site-ul" mi-a luat cel mai mult timp sa-l creez.

Va multumesc.

Editat Ianuarie 10, 2022 de Kreator

nico_2010 · Ianuarie 10, 2022

Acum 12 minute, Kreator a spus:

Un exemplu sau un site in care se explica "ca la prosti" cum se face imi puteti indica?

Am facut un termostat WIFI pt centrala, dar l-am facut doar cu html, si parca l-as infrumuseta putin.

Va multumesc.

Cred ca poti incepe de aici:

https://github.com/Moddable-OpenSource/iot-product-dev-book

Si daca ai noroc gasesti si cartea in format PDF

XAN77 · Ianuarie 10, 2022

Eu unu nu mă descurc, dacă are cineva timp, oricând că nu e nicio grabă, să modifice acest cod pentru a afișa iconița temperaturii în 2 feluri diferite (de exemplu half și full) dacă temperatura este mai mică sau egal cu, să zicem, 25 respectiv alt icon dacă e mai mare de 25. Codul este un dht22 web server și l-am ales pur întâmplător, vreau să văd în ce constau modificările. Sursa codului este scrisă îm antet, nu-mi aparține:

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide/
*********/

// Import required libraries
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

#define DHTPIN 5     // Digital pin connected to the DHT sensor

// Uncomment the type of sensor in use:
//#define DHTTYPE    DHT11     // DHT 11
#define DHTTYPE    DHT22     // DHT 22 (AM2302)
//#define DHTTYPE    DHT21     // DHT 21 (AM2301)

DHT dht(DHTPIN, DHTTYPE);

// current temperature & humidity, updated in loop()
float t = 0.0;
float h = 0.0;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Generally, you should use "unsigned long" for variables that hold time
// The value will quickly become too large for an int to store
unsigned long previousMillis = 0;    // will store last time DHT was updated

// Updates DHT readings every 10 seconds
const long interval = 10000;  

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP8266 DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">%</sup>
  </p>
</body>
<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral";

// Replaces placeholder with DHT values
String processor(const String& var){
  //Serial.println(var);
  if(var == "TEMPERATURE"){
    return String(t);
  }
  else if(var == "HUMIDITY"){
    return String(h);
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  dht.begin();
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println(".");
  }

  // Print ESP8266 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(t).c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", String(h).c_str());
  });

  // Start server
  server.begin();
}
 
void loop(){  
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    // save the last time you updated the DHT values
    previousMillis = currentMillis;
    // Read temperature as Celsius (the default)
    float newT = dht.readTemperature();
    // Read temperature as Fahrenheit (isFahrenheit = true)
    //float newT = dht.readTemperature(true);
    // if temperature read failed, don't change t value
    if (isnan(newT)) {
      Serial.println("Failed to read from DHT sensor!");
    }
    else {
      t = newT;
      Serial.println(t);
    }
    // Read Humidity
    float newH = dht.readHumidity();
    // if humidity read failed, don't change h value 
    if (isnan(newH)) {
      Serial.println("Failed to read from DHT sensor!");
    }
    else {
      h = newH;
      Serial.println(h);
    }
  }
}

Ianuarie 10, 2022

Acum 21 minute, x_dadu a spus:

<p>
	<!-- Aceste este un comentariu html. Am adaugat aici id="id-thermo" -->
    <i id="id-thermo" class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    
    <span class="dht-labels">Temperature</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">%</sup>
  </p>
</body>
<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
      
      /* Aceste este un comentariu java. Am adaugat aici scriptul java care modifica dinamic icons */
		if(this.responseText<=25)
   			document.getElementById("id-thermo").setAttribute("class","fas fa-thermometer-half");
		else
			document.getElementById("id-thermo").setAttribute("class","fas fa-thermometer-full");
      
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

Cauta in codul de mai sus dupa "comentariu"
Nu am cum sa testez dar cred ca este ok asa.

Editat Ianuarie 10, 2022 de Vizitator

XAN77 · Ianuarie 10, 2022

Am testat eu acum, merge cum trebuie doar dacă nu dau refresh manual în browser. Dacă dau manual refresh apare mereu iconul cu half, iar după ce trec cele 10 secunde cum este în funcția setInterval când face el refreshu automat, apare iconița care trebuie.

Ianuarie 10, 2022

Este normal sa se comporte asa. Prima citire de temperatura se face dupa intervalul setat. 10 secunde. Asa este conceput programul.
Poti sterge atributul class="thermo..." din linia pentru a nu mai aparea nici un fel de termometru pana nu se face prima citire.

Sau se poate modifica programul ca sa apeleze ,imediat dupa incarcarea paginii web, functia de citire date din ESP.

Autentificare

icon-uri condiționate în html

Postări Recomandate

Link spre comentariu

Top autori în acest subiect

Zile populare

Top autori în acest subiect

Zile populare

Link spre comentariu

Link spre comentariu

Link spre comentariu

Vizitator

Link spre comentariu

Link spre comentariu

Link spre comentariu

Link spre comentariu

Vizitator

Link spre comentariu

Link spre comentariu

Link spre comentariu

Link spre comentariu

Vizitator

Link spre comentariu

Link spre comentariu

Vizitator

Link spre comentariu

Creează un cont sau autentifică-te pentru a adăuga comentariu

Creează un cont

Autentificare

Popular acum

Informații Importante