{"id":5692,"date":"2021-06-02T05:03:44","date_gmt":"2021-06-01T22:03:44","guid":{"rendered":"https:\/\/www.phidgets.com\/education\/?page_id=5692"},"modified":"2023-01-10T23:53:15","modified_gmt":"2023-01-10T16:53:15","slug":"pi-website-2","status":"publish","type":"page","link":"https:\/\/www.phidgets.com\/education\/learn\/projects\/pi-website-2\/","title":{"rendered":"Raspberry Pi – Display Data on Website"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ custom_padding=”||0px|” z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ use_custom_gutter=”on” gutter_width=”3″ _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Raspberry Pi – Display Data on Website” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n

Projects<\/a> <\/div>\n

<\/p>\n

Display Data on Website(Raspberry Pi)<\/h1>\n

[\/et_pb_code][et_pb_code admin_label=”Description” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]In this project, you will improve your previous website and display data from a Humidity Phidget!<\/pee>[\/et_pb_code][et_pb_code admin_label=”ph-button-cta: Start” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”] <\/p>\n

<\/div>\n

Start<\/a>[\/et_pb_code][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_image src=”https:\/\/www.phidgets.com\/education\/wp-content\/uploads\/2021\/06\/pi_website_title2.jpg” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ use_custom_gutter=”on” gutter_width=”3″ specialty=”on” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column type=”1_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”ph-vertical-nav” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” saved_tabs=”all” global_colors_info=”{}”]<\/p>\n

Setup<\/a> Review<\/a> Displaying Sensor Data<\/a> Create Python Script<\/a> Modify Website<\/a> Practice<\/a><\/div>\n

[\/et_pb_code][\/et_pb_column][et_pb_column type=”3_4″ specialty_columns=”3″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_row_inner module_id=”setup” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Setup” module_id=”setup” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n

Setup<\/h2>\n

Before getting started, make sure you have the following parts.<\/strong><\/pee>[\/et_pb_code][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner column_structure=”1_3,1_3,1_3″ _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ custom_padding=”||0px|” z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner type=”1_3″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Part: GSK” _builder_version=”4.18.0″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_module=”8489″ saved_tabs=”all” global_colors_info=”{}”]<\/p>\n

<\/p>\n
<\/p>\n
<\/p>\n
Kit\/<\/a> Getting Started Kit<\/a> <\/div>\n

<\/div>\n

<\/p>\n

<\/p>\n

Getting Started Kit<\/h3>\n

<\/div>\n

<\/div>\n

<\/p>\n

<\/div>\n

<\/div>\n

[\/et_pb_code][\/et_pb_column_inner][et_pb_column_inner type=”1_3″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Part: Pi” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” saved_tabs=”all” global_colors_info=”{}”]<\/p>\n

<\/p>\n
<\/p>\n
<\/p>\n
<\/div>\n

<\/div>\n

<\/p>\n

<\/p>\n

Any Raspberry Pi<\/h3>\n

<\/div>\n

<\/div>\n

<\/p>\n

<\/div>\n

<\/div>\n

[\/et_pb_code][\/et_pb_column_inner][et_pb_column_inner type=”1_3″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner column_structure=”1_2,1_2″ admin_label=”Row” _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column_inner type=”1_2″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][\/et_pb_column_inner][et_pb_column_inner type=”1_2″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner column_structure=”1_2,1_2″ admin_label=”Row” _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column_inner type=”1_2″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Step 1″ _builder_version=”4.19.2″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ hover_enabled=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}” sticky_enabled=”0″]<\/p>\n

Step 1<\/h3>\n

Simply connect your Getting Started Kit to your Raspberry Pi. Note:<\/strong> make sure your Humidity Phidget is connected (not shown in image).<\/pee>If you haven’t set up your Raspberry Pi with Phidgets yet, visit this project<\/a>.<\/i><\/pee>[\/et_pb_code][\/et_pb_column_inner][et_pb_column_inner type=”1_2″ saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_image src=”https:\/\/www.phidgets.com\/education\/wp-content\/uploads\/2022\/08\/kit4003_2_pi.jpg” show_in_lightbox=”on” _builder_version=”4.18.0″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner module_id=”review” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Review” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n

Review<\/h2>\n

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<\/a>.<\/pee>[\/et_pb_code][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner module_id=”display” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Displaying Sensor Data” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n

Displaying Sensor Data<\/h2>\n

There are two ways to display sensor data on your website:<\/pee><\/p>\n

    <\/p>\n
  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.<\/li>\n

    <\/p>\n

  2. Access sensors directly from your web page using the Phidget22 Javascript API.<\/li>\n

    <\/ol>\n

    For now, we will simply access a data file. Be on the lookout for future projects that use the Javascript API.<\/pee>[\/et_pb_code][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner module_id=”write-code” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Write code Python” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n

    Write Code<\/h2>\n

    Copy the code below into a new Python project. If you need a reminder of how to do this, revisit the Getting Started Course<\/a>.<\/pee>[\/et_pb_code][et_pb_code admin_label=”Code Sample” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n

      #Add Phidgets libraryfrom Phidget22.Phidget import *from Phidget22.Devices.TemperatureSensor import *from Phidget22.Devices.DigitalOutput import *#Required for sleep statementimport time#CreatetemperatureSensor = TemperatureSensor()statusLED = DigitalOutput()#AddressstatusLED.setHubPort(1)statusLED.setIsHubPortDevice(True)#OpentemperatureSensor.openWaitForAttachment(1000)statusLED.openWaitForAttachment(1000)#Use your Phidgetswhile (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)  <\/code><\/pre>\n
    [\/et_pb_code][et_pb_code admin_label=”Run Your Program” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]Run your program. You will see the red LED on your Getting Started Kit blink, indicating the program is running.<\/pee>[\/et_pb_code][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner module_id=”modify” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Modifying Your Web Page” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
    Modify Your Website<\/h2>\n
    Overwrite your index.html file with the following:<\/pee>[\/et_pb_code][et_pb_code admin_label=”Code Sample” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
      <!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] + \"\u00b0C\";        })    }<\/script>    <body onload=\"connectPhidgets()\">        <div>            <h1>Phidget Data<\/h1>            <h2 id=\"dataLabel\">?<\/h2>        <\/div>    <\/body><\/html>  <\/code><\/pre>\n
    [\/et_pb_code][et_pb_code admin_label=”Modifying Your Web Page” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]JavaScript code has been added to your web page. This code runs in the browser when the website is opened. The function connectPhidgets<\/strong> will run when the webpage loads. It will grab data from your data file and display the latest reading on your website.<\/pee>[\/et_pb_code][et_pb_image src=”https:\/\/www.phidgets.com\/education\/wp-content\/uploads\/2021\/06\/pi_website_title2.jpg” show_in_lightbox=”on” align=”center” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ width=”60%” z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column_inner][\/et_pb_row_inner][et_pb_row_inner module_id=”next” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”][et_pb_column_inner saved_specialty_column_type=”3_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_code admin_label=”Practice” _builder_version=”4.16″ vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” global_colors_info=”{}”]<\/p>\n
    Practice<\/h2>\n
    <\/p>\n