Update value on web page dynamically

Question

I have a microcontroller which reads a thermocouple and sends its values to a textfile on the Raspberry Pi.

On the Pi runs a apache server which hosts my website. The website shows the value from the textfile, but to get the actual value I have to refresh the page.

index.php

<html>
<?php $temp = file_get_contents('Temp.ESP'); ?>
 
     <header>
      <h2><?php echo $temp; ?> °C</h2>
     </header>
   
</html>

Thanks in advance

I think this is to much, I only would like to make this on value "dynamic". The website should look in the text file every X seconds and print the new value — Frederic Louis, May 04 '18 at 23:12
Are you concerned about efficiency, or complexity? https://stackoverflow.com/questions/14703627/websockets-protocol-vs-http — Matt Morgan, May 04 '18 at 23:19
One thing to make it easier to help is to make your example _minimal_ by eliminating e.g. the CSS and styles and other elements that distract from the central problem at hand. — Elin, May 04 '18 at 23:20
why do you need to append the previous content? shouldnt the text file be updated from the microcontroller already? — Geomorillo, May 04 '18 at 23:32
I was trying to log the values and only show the last messurement but my focus is on updating the website, sorry for that. the text file gets updtated by the MC — Frederic Louis, May 04 '18 at 23:35

Geomorillo · Accepted Answer · 2018-05-04T23:53:11.317

1

with javascript Use the setTimeout() global method to create a timer. This will refresh the content after 5000 milliseconds (5 seconds): also don't forget to load the jquery lybrary inside the html head adding

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
setTimeout(function(){ 

$.get( "mydata.php", function( data ) {
$( "#mydata" ).html( data ); // this will replace the html refreshing its content using ajax

});


 }, 5000);` 
</script>

on the html change

<header>
<h2 id="mydata"></h2> ºC
</header>

notice the id="mydata"

the php only needs to echo the file contents also create the file mydata.php

edited May 04 '18 at 23:53

answered May 04 '18 at 23:01

Geomorillo

985
1
9
14

I won't reload the hole site, only the value wich the add.php script grabs from the textfile – Frederic Louis May 04 '18 at 23:05
then you should use ajax have you seen jquery? – Geomorillo May 04 '18 at 23:07
$.get("add.php", function(data){ alert("Data: " + data); }); this should print your data on an alert box however is just an example, this should be easy to implement with jquery but you need to do some changes in your html too – Geomorillo May 04 '18 at 23:08
should be `echo file_get_contents('Temp.ESP', NULL, NULL, 2, 4);` – Geomorillo May 05 '18 at 00:36

Update value on web page dynamically

1 Answers1