Soy muy nuevo en HTML y javascript. Después de varios días de trabajar en esto, se me ocurrió una página web que leerá un archivo CSV y mostrará los resultados. El archivo CSV contiene datos de una estación meteorológica. Mucho por aprender. Aquí está el código de la página web:
<!doctype html> <html lang="en"> <style> body { background-color: black; color: azure; font-size: 1.1em; } h1 { color: coral; } </style> <head> <meta charset="utf-8"> <title>Weather Station</title> </head> <script> setInterval(connectWeatherStation, 1000); function connectWeatherStation(){ fetch('data.csv') <!-- REPLACE WITH YOUR IP ADDRESS --> .then(response => response.text()) .then(text => { var data = text.split(","); document.getElementById("ir_ambient").innerHTML = "IR Ambient: " + data[0]; document.getElementById("sky_temperature").innerHTML = "IR Sky: " + data[1]; document.getElementById("temperature").innerHTML = "Temperature: " + data[2]; document.getElementById("humidity").innerHTML = "Humidity: " + data[3]; document.getElementById("rain_status").innerHTML = "Rain Status: " + data[4]; var clockElement = document.getElementById( "clock" ); clock.innerHTML = new Date().toLocaleTimeString(); }) } </script> <body onload="connectWeatherStation()"> <div> <h1>Weather Data</h1> <h3 id="clock">?</h3> <h2 id="ir_ambient">?</h2> <h2 id="sky_temperature">?</h2> <h2 id="temperature">?</h2> <h2 id="humidity">?</h2> <h2 id="rain_status">?</h2> </div> </body> </html>El elemento sky_temperature y el elemento ir_ambient son valores de texto. Me gustaría convertirlos en flotadores y luego restar ir_ambient de sky_temperature. Si la diferencia es más de 20 quiero mostrar un archivo jpeg y si es menos otro jpeg. Mi problema es que no tengo ni idea de cómo hacer esto y dónde ponerlo en la sección del cuerpo. Gracias por cualquier idea.
Puede incrustar la imagen en el cuerpo con la visibilidad configurada como oculta. Y dentro del script, establezca la visibilidad de forma condicional.
<!doctype html> <html lang="en"> <style> body { background-color: black; color: azure; font-size: 1.1em; } h1 { color: coral; } </style> <head> <meta charset="utf-8"> <title>Weather Station</title> </head> <script> setInterval(connectWeatherStation, 1000); function connectWeatherStation(){ fetch('data.csv') <!-- REPLACE WITH YOUR IP ADDRESS --> .then(response => response.text()) .then(text => { var data = text.split(","); document.getElementById("ir_ambient").innerHTML = "IR Ambient: " + data[0]; document.getElementById("sky_temperature").innerHTML = "IR Sky: " + data[1]; document.getElementById("temperature").innerHTML = "Temperature: " + data[2]; document.getElementById("humidity").innerHTML = "Humidity: " + data[3]; document.getElementById("rain_status").innerHTML = "Rain Status: " + data[4]; var clockElement = document.getElementById( "clock" ); clock.innerHTML = new Date().toLocaleTimeString(); // new code var irAmbient = parseFloat(data[0]); var skyTemperature = parseFloat(data[1]); if (skyTemperature-irAmbient > 20) { document.getElementById("myImage").style.visibility = "visible"; } else { document.getElementById("myImage").style.visibility = "hidden"; } }) } </script> <body onload="connectWeatherStation()"> <div> <h1>Weather Data</h1> <h3 id="clock">?</h3> <h2 id="ir_ambient">?</h2> <h2 id="sky_temperature">?</h2> <h2 id="temperature">?</h2> <h2 id="humidity">?</h2> <h2 id="rain_status">?</h2> <!--- new code ---> <img id=myImage src="path-to-img" style="visibility: hidden;" /> </div> </body> </html>Lo haré de esta manera, para que quede más limpio:
#img-selector img:first-of-type { display:inline } #img-selector img:last-of-type { display:none } #img-selector.imgLess img:first-of-type { display:none } #img-selector.imgLess img:last-of-type { display:inline } <div id="img-selector"> <img src="image_more.jpg" alt="image 1"> <img src="image_less.jpg" alt="image 2"> </div> <div> <h1>Weather Data</h1> <h3 id="clock" > --/--/-- </h3> <h2 id="ir_ambient" >IR Ambient: <span> ? </span></h2> <h2 id="sky_temperature" >IR Sky: <span> ? </span></h2> <h2 id="temperature" >Temperature: <span> ? </span></h2> <h2 id="humidity" >Humidity: <span> ? </span></h2> <h2 id="rain_status" >Rain Status: <span> ? </span></h2> </div> const IP_Address_csv = 'data.csv' // REPLACE WITH YOUR IP ADDRESS , imgSelector = document.querySelector('#img-selector') , clock = document.querySelector('#clock') , irAmbient = document.querySelector('#ir_ambient span') , skyTemperature = document.querySelector('#sky_temperature span') , temperature = document.querySelector('#temperature span') , humidity = document.querySelector('#humidity span') , rainStatus = document.querySelector('#rain_status span') ; fetch(IP_Address_csv) .then( resp => resp.text()) .then( text => { let [ irAmbientVal, skyTemperatureVal, temperatureVal, humidityVal, ir_ambientVal ] = text.split(',').map(v=>isNaN(v)?v:Number(v) ) irAmbient.textContent = irAmbientVal skyTemperature.textContent = skyTemperatureVal temperature.textContent = temperatureVal humidity.textContent = humidityVal humidity.textContent = ir_ambientVal clock.textContent = new Date().toLocaleTimeString() imgSelector.classList.toggle('imgLess', (skyTemperatureVal - ir_ambientVal) < 21) })