Display Data on Website
(Raspberry Pi)

In this project, you will improve your previous website and display data from a Humidity Phidget!

Setup

Before getting started, make sure you have the following parts.

Getting Started Kit

Any Raspberry Pi

Step 1

Simply connect your Getting Started Kit to your Raspberry Pi. Note: make sure your Humidity Phidget is connected (not shown in image).

If you haven't set up your Raspberry Pi with Phidgets yet, visit this project.

Review

In the previous project, you installed a web server on your Raspberry Pi and modified your website. If you have not completed the previous project, check it out now.

Displaying Sensor Data

There are two ways to display sensor data on your website:

  1. Write a program on your Raspberry Pi that logs sensor data to a file. Open the file from your website and display the data.
  2. Access sensors directly from your web page using the Phidget22 Javascript API.

For now, we will simply access a data file. Be on the lookout for future projects that use the Javascript API.

Write Code

Copy the code below into a new Python project. If you need a reminder of how to do this, revisit the Getting Started Course.

  
#Add Phidgets library
from Phidget22.Phidget import *
from Phidget22.Devices.TemperatureSensor import *
from Phidget22.Devices.DigitalOutput import *
#Required for sleep statement
import time

#Create
temperatureSensor = TemperatureSensor()
statusLED = DigitalOutput()

#Address
statusLED.setHubPort(1)
statusLED.setIsHubPortDevice(True)

#Open
temperatureSensor.openWaitForAttachment(1000)
statusLED.openWaitForAttachment(1000)

#Use your Phidgets
while (True):
    #Write data to file in CSV format
    with open ('/var/www/html/data.csv','a') as datafile:
        datafile.write(str(temperatureSensor.getTemperature()) + "\n")    
    #Blink LED
    statusLED.setState(not statusLED.getState())
    
    time.sleep(1.0)
  

Run your program. You will see the red LED on your Getting Started Kit blink, indicating the program is running.

Modify Your Website

Overwrite your index.html file with the following:

  
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Phidgets</title>
</head>
<script>
    function connectPhidgets(){
        fetch('data.csv') 
        .then(response => response.text())
        .then(text => {
            var data = text.split("\n");
            document.getElementById("dataLabel").innerHTML = data[data.length - 2] + "°C";
        })
    }
</script>
    <body onload="connectPhidgets()">
        <div>
            <h1>Phidget Data</h1>
            <h2 id="dataLabel">?</h2>
        </div>
    </body>
</html>
  

JavaScript code has been added to your web page. This code runs in the browser when the website is opened. The function connectPhidgets will run when the webpage loads. It will grab data from your data file and display the latest reading on your website.

What are Phidgets?

Phidgets are programmable USB sensors. Simply plug in your sensor, write code in your favorite language and go!

Phidgets have been used by STEM professionals for over 20 years and are now available to students.

Learn more

Set your preferences

Windows

Mac OS

Raspberry Pi

Java

Python

C#

Swift

NetBeans

Processing

Eclipse

Thonny

PyCharm

PyScripter

Visual Studio

Xcode

Setting your preferred operating system, programming language and environment lets us display relevant code samples for the Getting Started Tutorial, Device Tutorials and Projects

Done