HTML animation controlled by external data

Question

Is it possible to create a small web server to receive data from say an ultrasonic senor and depending on that data it will change a picture on the web server? Like for example a progress bar and if the object gets closer the bar will fill up to the end. Im new to HTML and CSS and just need some tips on how to achieve this. The backend would be controlled by python and I'm using a RaspberryPi

Answer 1

you could fetch the web server like every second or 500ms. And then retrieve data from the server and show it on your webpage or change something on your page using that data.
And then in your server you would have to update some values as the ultrasonic sensor updates and send the correct processed data.

Ultrasonic sensor
\/
Raspberry PI
\/
Server <- Web Request <- Client
\/ /\
\_____________________/
Update data