I am very new to HTML and javascript. After several days of working on this I have come up with a web page that will read a CSV file and display the results. The CSV file contains data from a weather station. A lot to learn. Here is the web page code:
<!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>
The element sky_temperature and the element ir_ambient are text values. I would like to convert them to floats and then subtract ir_ambient from sky_temperature. If the difference is more than 20 I want to display a jpeg file and if less another jpeg. My problem is I haven't got a clue as to how to do this and where to even put it in the body section. Thanks for any insight.
You can embed the image in the body with visibility set to hidden. And inside the script, set visibility conditionally.
<!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>I will do that this way, to make it cleanner :
#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)
})