Water Temperature Monitor

This is a water temperature monitor that logs temperature data and connects to a website to display and graph the temperature in real time. It also has an optional data download page and REST API. The website can be installed as a PWA on most phones and computers. Best of all, the code is all open source on GitHub here.

You can check out my running version for Lake Wallenpaupack here.

For this project, you will need the following supplies.

You can view them all on Adafruit here.

• Raspberry Pi Zero W
• SD card (8gb or more)
• Solder-able Breadboard
• Waterproof Power Connector
• Waterproof 3-Wire Connector
• Waterproof 1-Wire DS18B20 Compatible Digital temperature sensor
• Lipo Battery Changer
• Lipo Battery
• Solar Panel
• Small Waterproof Project Box
• 2 Cable Glands
• IDC Breakout Helper - 2×20

Tools

These are some tools needed to make the project that are not in the Adafruit list, but can be bought from Adafruit.

• Soldering Iron
• Solder
• Phillips Screwdriver
• USB Micro Cable
• Computer (Or phone if you really like typing on tiny keyboards)

For my version, I have my web server separate from the sensor because it will make the website load faster and be more reliable. I am hosting it on a VPS from Vultr. You can run the web server on the Raspberry Pi or any server or old computer you have. If so, you can skip this step, but you will have to do more work on your own to get that all working.

First make an account at vultr.com. Then add $5 to pay for a month of the service. Now go to the Products tab to create the VPS.

• For server type, choose Cloud Compute
• For server location select any location you want but one closer to you will be faster
• For operating System, you can choose any Linux distro you are familiar with or Ubuntu 21.04 if you want to follow along exactly. Make sure you don't pick Windows.
• For Server Size, Pick 25 GB SSD, 1 CPU, 1024 MB Memory, 1000 GB Bandwidth. This size should cost $5 per month

Then create a server hostname and label. This can be something like "WaterTemp".

Once all the settings are correct, you can click Deploy Now!

Now just wait a few minutes for the OS to install.

Now to set up the server!

This will be fairly easy as you just need to copy and paste commands into the console.

First, you need to ssh into the server. To do this, You can use the ssh command or PuTTY for Windows. If you already know how to do this, then just skip to the next part.

Clicking on the VPS you just created will bring you to a page showing info about the server.

Using the SSH command

Just click the copy button next to the IP address, then open a Terminal Emulator and enter the command ssh root@ where is the server IP. If you are asked "Are you sure you want to continue connecting" say "yes" and press enter. Then go back to Vultr and press the copy button for the root password. Now paste that into the root password and press enter. If it doesn't work, you may need to try pasting by pressing CTRL + SHIFT + V.

Using PuTTY

Once you have downloaded and installed PuTTY open it. Then go back to the page on Vultr and just click the copy button next to the IP address. Then paste that into the Host Name text input. Click Open, then if there are any popups press Accept. The console window that opens will now ask you what user to log in as. Enter "root" and press enter. Then go back to Vultr and copy the root password. Go back to the Console and right-click on the window to paste the password. You can now press enter.

If you get a welcome message, you have done everything correctly 🙂

Now we will create a user account to run the web server in.

Note, the '#' or '$' character just tells if you should be running the command as root user and should not be included in the actual command.

First run the following command

# adduser watertemp

Then Enter a secure password for this user. Now just press enter a few more times to put the default information on the account.

Now we will add our "watertemp" user to the sudoers group. This will allow us to run commands with root privileges later on.

# visudo

Now you will open into the Nano text editor. Use the arrow keys to go to the bottom of the file and add the following line.

watertemp ALL=(ALL:ALL) ALL<br>

Once you have done that, press CTRL + O to save then press enter to confirm. And to Exit press CTRL + X.

Now we will log in to the watertemp account using the following command.

# su watertemp

You will now be in the watertemp user!

Now we will install my code on to this VPS to get the website up and running!

Run the following command to get into the watertemp users home directory.

$ cd ~

Install some packages we will need with this command

$ sudo apt install -y npm nodejs --fix-missing

It may ask for your password. For this, just enter the password you used to create your watertemp user. Now it will begin to install the needed packages. This may take a little while.

Now download my code with this command.

$ git clone https://github.com/Basicprogrammer10/WaterTemp.git

Now go to into the static folder and compile the Typescript into JavaScript with the next command

$ cd ~/WaterTemp/static && npm install typescript && npx tsc

Now open the config file and add the needed values

$ cd ~/WaterTemp/api/config && vim config.json

This should open config.json file in Vim. Press 'i' then navigate with the arrow keys to change the following settings.

• Change sensor.ip to be the ip of your server. Localhost is good if you are running the web server on the raspberry pi
• Change server.port to be 80

This is all that is needed to be changed for now. Press escape then type ':wq' and press enter.

Now install Node.js Dependencies with this command. (We are getting close :P)

$ cd ~/WaterTemp/api && npm i --production

This may take some time...

Now to start the Webserver!!!

cd ~/WaterTemp/api && sudo node src

This may ask for your password again. If all goes well, you should see '💧 Starting Water Temp Server! v0.4'. Now test the website by putting the IP address from Vultr into your web browser. You should see the webpage!

Now that you have the basic web server setup, you may be able to use Let's Encrypt to generate a TLS cert to let you use your site over HTTPS.

This will only work if you have a domain pointed to your server's IP. You cannot get a cert for a plain IP address.

To do this, follow the instructions for CertBot here.

For step #8 when you will need to add certs to your web server, run the following command to open the config file once more. Press 'i' to enter Insert mode, so you can start typing.

$ cd ~/WaterTemp/api/config && vim config.json

Change the TLS section to be the following, where is replaced with the domain you are using for this server. For example, with water.connorcode.com my key file would be '/etc/letsencrypt/live/water.connorcode.com/privkey.pem'

"tls": {
    "enabled": true,
    "key": "/etc/letsencrypt/live/<YOUR DOMAIN>/privkey.pem",
    "cert": "/etc/letsencrypt/live/<YOUR DOMAIN>/fullchain.pem"
}

Now that you are in your Config file, edit the server.port to be 443. This is the HTTPS default port. Now save and exit with Escape then type ':wq' and press enter. Just rerun your server and check that HTTPS is working.

Download the Raspberry Pi Imager here. Using this, Install Raspberry Pi Os Lite on your SD Card. Now remount the card. On the boot partition, make a new file named wpa_supplicant.conf and put the following text in it.

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
country=2 letter ISO 3166-1 country code here
update_config=1


network={
	ssid="Name of your wireless LAN"
	psk="Password for your wireless LAN"
}

Now create a file named 'ssh' with no contents to enable ssh. Just put the card back into your pi, and it should join the network after booting.

Now you just have to connect to it over ssh. To do this, repeat the same steps to use ssh as in step 3 but connect to 'pi@raspberrypi.local'. The default password is raspberry.

Now we will be setting up the software on the Raspberry Pi. Like before, we will be creating a new user account and adding it to the sudoers group, like in step 4. Keep in mind, the default password for the pi user is 'raspberry'. When running visudo add the line 'watertemp ALL=(ALL:ALL) ALL'.

$ sudo adduser watertemp
$ sudo visudo
$ su watertemp
$ cd ~

Now to install the software.

First, run the following command to install needed packages.

$ sudo apt install -y git vim

To install Cargo (used for compileing / running server software) use this command. When it asks what to do, select option 1.

$ curl https://sh.rustup.rs -sSf | sh

Now restart your shell, so the environment variables are updated. Run the exit command, then login to your pi again.

$ exit

Check that cargo is working now by running this command:

$ cargo -V
cargo 1.53.0 (4369396ce 2021-04-27)

If it gives version info, then it should all be good!

Now we will download the code for the sensor server.

$ git clone https://github.com/Basicprogrammer10/WaterTemp.git

To start building my software, run this command. Keep in ind that it can take about 50 min to build on a Raspberry Pi.

$ cd ~/WaterTemp/sensor_Interface && cargo build --release

Once that is done, start it up in debug mode with this command. Debug mode means it will just use random values for the current temperature.

$ cd ~/WaterTemp/sensor_Interface && ./target/release/sensor_interface --debug

If all goes well, it will say

[*] Starting Sensor Interface [v0.7] LOGGING DEBUG
[*] Device ID: 28-00000bdf4372
[*] Serving on: 127.0.0.1:3030

Now to connect the web server to the Raspberry Pi. For this, I will use port 3030. You will need to forward a Port on your network. This process is different for every router, so you will have to find out how to do that yourself.

Ssh to your Pi again and use this command to open the config file

$ vim ~/WaterTemp/sensor_Interface/config.ini

Here you will need to change some settings.

• Change ip to be '0.0.0.0'
• Change port to be the port you chose (or 3030)
• Change log_delay to be the time between collecting data points in ms

Now get your public IP Address with this command on the pi.

$ curl https://icanhazip.com

Write down this value as we will need it later.

Ssh into your vultr server again and open the web server config with this command

$ vim ~/WaterTemp/api/config/config.json

• Edit sensor.port to be 3030 or the port you chose
• Edit sensor.ip to be the public IP of your Raspberry Pi

Restart the sensor severe on the Raspberry Pi with this command

$ cd ~/WaterTemp/sensor_Interface && ./target/release/sensor_interface --debug

Now make sure you can connect to the Raspberry Pi going to [Public IP]:[Port]/test in your web browser. If it says 'All Systems are a Go!' then it's working! :)

Now if you connect to the web server and restart it when you go to the IP of the web server in your web browser you should see random numbers for the temperature.

Sometimes your Pi can lose power, so having it autostart its server is very important. This can easily be done by editing the /etc/rc.local file.

Open the rc.local file with this command

$ sudo vim /etc/rc.local<br>

Now Copy and Paste this text into it

#!/bin/sh -e

cd /home/watertemp/WaterTemp/sensor_Interface
./target/release/sensor_interface --debug

exit 0

If all goes well when you power cycle your Pi it should automatically start the sensor server.

First solder the sensor to the Raspberry Pi with the data line connecting to Pi pin 4 and a 4.7pull-up resistor. A diagram for how to connect the sensor to the pi can be found here.

Then start up the pi and ssh into it to enable 1wire with this command

$ sudo raspi-config

Go to Interface options then 1-Wire then enable. Now select finish and restart.

Now to make sure the sensor has been connected properly and to get the device ID use this command.

$ ls /sys/bus/w1/devices/ | grep 28-*

It should show an ID that looks something like this, '28-00000d0ab505'. If so, copy this ID and put it in the sensor interface config file with this command.

$ vim ~/WaterTemp/sensor_Interface/config.ini

Now edit the /etc/rc.local file again to make it start without debug mode. Run this command to open it

$ sudo vim /etc/rc.local

Make sure the file contents are the same as this

#!/bin/sh -e

cd /home/watertemp/WaterTemp/sensor_Interface
./target/release/sensor_interface

exit 0

Now restart your Pi, and it should connect to the sensor and start pulling data from it!

To check in your web browser, go to [Public IP]:[Port]/temp. This should give you the current temperature.

Now connect the battery charger, Battery and solar panel into the system. The cables to the solar panel and temperature sensor should be through the waterproof connectors. Let it boot up and make sure it is still all working. If so, then de solder the connectors from the solar panel and temperature sensor.

Drill two holes in the box for the temperature sensor and solar panel cables. Then put the cable glands in the holes and hold them in with the nuts. The nuts may need to be sanded down a bit to fit in the box. Now put the waterproof connectors through the cable glands and re solder them to the battery charger and Perma-Proto board. Just put everything in the box now. Everything fits with the battery on the bottom, the Perma-Proto board on top and the battery charger on the side.

If you want to be able to know if your servers go down, you can use free services like Uptime Robot to monitor your servers.

First make an account, Then click add new monitor Here select 'HTTP(s)' and enter your Web Server's URL / IP. Make a Name for this monitor, something like 'Water Temp Web' or 'Water Temp Backend'. Now you can repeat this so both your Raspberry Pi and Web server are monitored.

To install the PWA on your device, check out this page.

Now to add the widget will be a bit more work... It only works on iPhones.

1. First, download the Scriptable app from the app store.
2. Now download the .scriptable file from here.
3. Now in the Files app, find the file and open it
4. Go to the share button on the bottom left
5. Chose Scriptable
6. Click Add To my scripts
7. On line 3 change the URL in quotes to be the URL / IP of your Web Server
8. Click Done
9. Exit the app
10. Press and hold on the home screen to enter edit mode
11. Click the Plus in the top left corner
12. Pick the scriptable App
13. Pick any Widget size
14. Press Add Widget
15. Tap the new widget
16. Click Chose next to script
17. Select Water Temperature

Main Page

On the top right there are three buttons.

• ✅ / ❌ - If web sockets are connected. Clicking this will reconnect the web socket.
• 📈 - Show / Hide Graph
• °F / °C / °K - Change unit. At the time of writing, this unit does not affect the graph.

At the bottom of the page, there are two links:

• Code - Brings you to the GitHub Repo
• Data - Brings you to the Data page

Data Page

You get here by clicking the data link on the bottom of the main page. This page shows lots of info about the data. It also lets you download it as a CSV or JSON file and links to the public REST API.

• Data Points - Number of data points stored
• Data Rate - How many data points are collected per hour
• Total Min - The Lowest temperature of the water recorded
• Total Max - The Highest temperature of the water recorded
• Total Mean - Total average water temperature
• Data Start - The date of the first reading
• Data end - The Date of the latest reading

The Download Data section shows the estimated file size of the CSV file in kilobytes.

REST API

This part is more advanced because it is intended to let you easily interface your new sensor system with code. By clicking the link under Access API, you will be brought to the API docs. This page gives you all the information about the API and some basic examples in python. You can check out these examples on Replit.com.

Status Page

This page is only accessible by going to server-Address/status. For example, I would go to water.connorcode.com/status. The information on this page is very simple and doesn't really need an explanation.

That's all! You did it!

Be sure to star my GitHub repo :P