Web-Based console for Raspberry Pi: webpage content update

The web-based console of Raspberry Pi utilizes three HTML files: login.html, index.html, and config.html. To illustrate the interaction between an HTML file and the server.py file (which utilizes the Tornado framework) for updating webpage content without needing to reload the entire web page, let’s take index.html as an example.

The data flow for reading and displaying the CPU temperature on the index.html webpage is indicated by red arrows with numbers 1 to 8.

1. When the index.html file is loaded in the browser, four functions within the (document).ready block will be executed simultaneously. One of these functions is refreshCpuTemp(). The setInterval(“refreshRoomTemp”, 3000) statement ensures that this function is executed every 3 seconds.
2. When an incoming request with the URL “/” is received, it is routed to the “IndexHandler” handler. (The URL and handler pairs are defined in server.py)
3. If the incoming request is a ‘post’ request, it points to the post(self) function.
4. The key ‘cpu_temp’ allows server.py to execute the code cpuTemp = board_ctrl.get_cpu_temp().
5. The program then navigates to boardctrl.py and executes the get_cpu_temp() function.
6. The server.py retrieves the CPU temperature and saves it in the cpuTemp variable.
7. The server.py returns the value stored in cpuTemp to index.html within the function(msg).
8. Using the id=”cpu” identifier, index.html updates the value within the element accordingly.