Monitor Raspberry Pi temperature from a phone on your LAN

Quickstart#

If you'd like to get started as soon as possible, follow these steps:

1. Install and run Endrpi (see endrpi.io/installation).
2. Get the IP address of your Raspberry Pi® by running ifconfig.
3. Replace the code in `endrpi-server/public` with the files in this Gist.
4. Navigate to `<pi ip address>:5000` in a web browser.

I've included more details below if you'd like to learn how the code works.

Table of contents#

1. Reading Temperature
2. Install and Start Endrpi
3. Access Endrpi on LAN
4. Add HTML, CSS, and JavaScript
5. How does this work?
6. Enhancements

Reading temperature#

If you're running your Raspberry Pi® in an unforgiving environment, you may want to keep an eye on the system on chip (SoC) temperature. High SoC temperature may damage your Pi or cause it to run slower.

According to raspberrypi.org¹:

As the device approaches the [temperature] limit, various frequencies and sometimes voltages used on the chip (ARM, GPU) are reduced.

Fortunately, Raspberry Pi® OS includes a utility called vcgencmd that provides a convenient way to query the temperature of the SoC.²

Running the command

gives the result

The command is short and the output is clear. There's only one catch; this command has to be run on the Pi itself. What if we wanted to check the SoC temperature from another device?

You may consider using SSH to run the vcgencmd command from another device. In fact, I would argue SSH is the right choice for the majority of use cases. My use case is a bit different; I want to create a project with the following characteristics:

• Webpage accessible from a phone connected to the same Wi-Fi.
• No input required to start monitoring temperature.
• Temperature data updated automatically at regular intervals.

The Endpoints for the Raspberry Pi® (Endrpi) server was made for projects like this. It features a RESTful API and a WebSocket endpoint that can fetch common system statuses and set basic GPIO configurations.

Install and start Endrpi#

Head on over to endrpi.io/installation for details on how to install the Endrpi server.

Once the installation is complete, running the command

in the `endrpi-server` directory should give the result

Now that the Endrpi server is running on a Raspberry Pi®, it's time to test LAN access.

Access Endrpi on LAN#

With Endrpi up and running, its API should be accessible to any device on the same LAN as the Pi. Let's run through a basic test to make sure this is the case.

On the Raspberry Pi®, running the command

will output its IP address. I'll refer to this address as `<pi ip address>`.

Since we're targeting a phone, we'll use a browser running on a phone to test LAN access to Endrpi. The Endrpi server starts on port 5000 by default, so navigating to `<pi ip address>:5000` on the phone's browser should present the Endrpi welcome page.

While we're here, let's quickly check out the temperature REST endpoint to see what kind of response we should expect. The temperature endpoint in Endrpi (`/system/temperature`) responds to a GET HTTP request. Coincidentally, browsers send GET requests when we navigate to an address in the URL bar. This means we can test the endpoint in the browser. If you're curious about what other HTTP methods exist, check out developer.mozilla.org.

Navigating to `<pi ip address>:5000/system/temperature` should provide a result similar to the following:

Refreshing the page will update the temperature result assuming it has fluctuated since the last call. We are now monitoring a Raspberry Pi®'s SoC temperature from a phone!

Next, let's make the temperature more readable than raw JSON and eliminate the need for manual polling.

Add HTML, CSS, and JavaScript#

By default, navigating to `<pi ip address>:5000`will present the default Endrpi welcome webpage. The source code for the webpage can be found in the `endrpi-server/public` directory. We're going to overwrite the source files in this directory and turn the welcome page into a temperature monitor.

Head on over to my Github® Gist which contains all the HTML, CSS, and JavaScript files for the temperature monitor. Download the Gist files and place them in the `endrpi-server/public` directory.

Restart Endrpi and refresh the page at `<pi ip address>:5000`. You should now see the following:

We are now monitoring temperature 'live' from a phone!

How does this work?#

When you navigate to `<pi ip address>:5000`, you are viewing the browser's rendition of `endrpi-server/public/index.html`. Endrpi is configured to serve this static file when you visit the root path`/`. Other routes, such as `/system/temperature`, will return JSON that is generated dynamically.

The `index.html` file pulls in`endrpi-server/public/app.css` which adds styles and formatting to the webpage. It also pulls in `endrpi-server/public/app.js` which performs the heavy lifting of asking Endrpi for updates and changing the rendered HTML to reflect what Endrpi says.

Both the `index.html` and `app.css` files are pretty tame. The connection status and temperature requests controlled by `app.js` are more complex and warrant explanation.

Endrpi supports a WebSocket endpoint³that mirrors endpoints in the REST API including the temperature endpoint we're interested in. Most modern browsers, including phone browsers, support the WebSocket API which mozilla.org ⁴ defines as being:

...an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server.

The code in the Gist uses a WebSocket to get temperature data as opposed to polling with HTTP GET requests. When we visited

`<pi ip address>:5000/system/temperature`

our browser performed a standard HTTP GET request. If you're like me and started rapidly refreshing the page to see temperature updates, you were essentially polling data with GET requests.

You may hear that request polling is inherently inefficient and thus bad. For websites with a large user base and specific real-time requirements, this is likely true. For this project, using request polling to get data would have been perfectly fine. I chose a WebSocket over request polling in my Gist because I enjoy using WebSockets and wanted to demonstrate the technology. Ironically, Endrpi only supports a request/response workflow for Pi statuses so we will still have to poll in some regard.

The following code is a snippet from `app.js`. Here, we wait for the WebSocket connection to open, then we update the connection status and begin polling Endrpi for temperature at the POLL_INTERVAL_MILLISECONDS interval.

The WebSocket will respond shortly after receiving a message. To read data from the WebSocket, we must listen for responses and parse them as they come in. Assuming the temperature read was successful, we can get the temperature data out of the parsed JSON as outlined in the following `app.js` snippet:

That's about all there is! To recap, we installed Endrpi onto a Raspberry Pi®, added a basic website to the server, and started serving the website to devices on the LAN.

Thanks for reading and I hope you enjoyed this project!

Enhancements#

Want to go further? Here are a few ideas on how to enhance this project:

• Send READ_MEMORY messages to Endrpi and add HTML for memory usage.
• Add a notification for high temperatures using the Web Notification API.
• Use a JavaScript Chart library to show the temperature as a line chart.