element14 Community
element14 Community
    Register Log In
  • Site
  • Search
  • Log In Register
  • Members
    Members
    • Benefits of Membership
    • Achievement Levels
    • Members Area
    • Personal Blogs
    • Feedback and Support
    • What's New on element14
  • Learn
    Learn
    • Learning Center
    • eBooks
    • STEM Academy
    • Webinars, Training and Events
    • More
  • Technologies
    Technologies
    • 3D Printing
    • FPGA
    • Industrial Automation
    • Internet of Things
    • Power & Energy
    • Sensors
    • More
  • Challenges & Projects
    Challenges & Projects
    • Design Challenges
    • element14 presents
    • Project14
    • Arduino Projects
    • Raspberry Pi Projects
    • More
  • Products
    Products
    • Arduino
    • Dev Tools
    • Manufacturers
    • Raspberry Pi
    • RoadTests & Reviews
    • Avnet Boards Community
    • More
  • Store
    Store
    • Visit Your Store
    • Choose Another Store
      • Europe
      •  Austria (German)
      •  Belgium (Dutch, French)
      •  Bulgaria (Bulgarian)
      •  Czech Republic (Czech)
      •  Denmark (Danish)
      •  Estonia (Estonian)
      •  Finland (Finnish)
      •  France (French)
      •  Germany (German)
      •  Hungary (Hungarian)
      •  Ireland
      •  Israel
      •  Italy (Italian)
      •  Latvia (Latvian)
      •  
      •  Lithuania (Lithuanian)
      •  Netherlands (Dutch)
      •  Norway (Norwegian)
      •  Poland (Polish)
      •  Portugal (Portuguese)
      •  Romania (Romanian)
      •  Russia (Russian)
      •  Slovakia (Slovak)
      •  Slovenia (Slovenian)
      •  Spain (Spanish)
      •  Sweden (Swedish)
      •  Switzerland(German, French)
      •  Turkey (Turkish)
      •  United Kingdom
      • Asia Pacific
      •  Australia
      •  China
      •  Hong Kong
      •  India
      •  Korea (Korean)
      •  Malaysia
      •  New Zealand
      •  Philippines
      •  Singapore
      •  Taiwan
      •  Thailand (Thai)
      • Americas
      •  Brazil (Portuguese)
      •  Canada
      •  Mexico (Spanish)
      •  United States
      Can't find the country/region you're looking for? Visit our export site or find a local distributor.
  • Translate
  • Profile
Raspberry Pi
  • Products
  • More
Raspberry Pi
Blog Raspberry Pi 3 HTML User Interface part.1
  • Blog
  • Forum
  • Documents
  • Events
  • Members
  • Mentions
  • Sub-Groups
  • Tags
  • More
  • Cancel
  • New
Raspberry Pi requires membership for participation - click to join
Blog Post Actions
  • Subscribe by email
  • More
  • Cancel
  • Share
  • Subscribe by email
  • More
  • Cancel
Group Actions
  • Group RSS
  • More
  • Cancel
Engagement
Author: violet
Date Created: 10 Oct 2016 6:59 PM
Views: 391
Likes: 2
Comments: 4
  • rpi3
  • ras pi 3
  • raspberrypi3
Related
Recommended

Raspberry Pi 3 HTML User Interface part.1

violet
violet
10 Oct 2016

I've always loved the idea of being able to access popular single board computers and their hardware using a HTML browser. Nearly every gadget we own e.g. mobile phones, ipods, tablets, laptops etc.. all have web browser functionality so it stands to reason that if we were to make a user interface that is based around web browsers then all of these gadgets will be able to use it. Many people have at least some knowledge of writing programs for web browsers that they can build upon, most school children are leaving secondary education with some ability to make their own web page too so it's a great way for people to interact with their Raspberry Pi!!

 

Things I have done to prepare the Raspberry Pi 3 before commencing the steps in this blog are:

 

1) Setting up the wireless network adapter with a static ip address (required for simplicity)

2) Installed and configured Lighttpd (A lightweight webserver that is an excellent choice for the Raspberry Pi)

 

--------------------------------------------------------------------------------------------------------

 

This interface is in it's very early stages, currently the rpi3 is able to serve a webpage out to any device with a web browser on the same network as itself, once the webpage loads up there's a button to start live updates and a button to stop live updates. When the start button is pressed, a Javascript module polls a Python script on the rpi3 at 1 second intervals. The Python script returns the current time on the Raspberry Pi to the javascript and that information is displayed on the webpage. - SEE VIDEO BELOW FOR EXAMPLE

 

There might not seem like a great deal of point in just getting and displaying the time remotely but it can be expanded to send/receive data from/to the i2c or spi bus, set/clear gpio pins etc.. any data processing can be done either on the server side using python (raspberry pi) or the processing can be done on the client side using javascript (any device with webbrowser).

 

There are just 2 files used to make this system work at the minute, a standard index.html file and a basic.py file below.

 

index.html

 

<html>
<body>
Raspberry Pi Network Interface Test

<p>
<input type="button" onClick="startLiveUpdates()" value="Begin Updates">
<input type="button" onClick="stopLiveUpdates()" value="Stop Updates">
</p>

<div id="outputarea">output area</div>

<script>

var timer_interval

function getPiTime(){
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("outputarea").innerHTML = this.responseText;
        }
    };
req.open("POST","/cgi-bin/basic.py",true);
req.send();

}

function startLiveUpdates(){
getPiTime();
timer_interval=setInterval(getPiTime,1000);
}
function stopLiveUpdates(){
clearInterval(timer_interval);
}
</script>

</body>
</html>

 

basic.py

 

#! /usr/bin/python
#

import os
import threading
import time
import subprocess

localtime = time.asctime( time.localtime(time.time()) )

print "Content-Type: text/html\n\n"
print '<html><head><meta content="text/html; charset=UTF-8" />'
print "time on rapsberry pi: ", localtime
print "</body></html>"

 

most of the imports in the basic.py file arent required in the code, they are future relics!!

 

You don't have permission to edit metadata of this video.
Edit media
x
Upload Preview

Anonymous

Top Comments

  • violet
    violet over 5 years ago in reply to DAB +2

    Im not sure how the raspberry pi would cope with multiple devices using the interface, a small number wouldnt cause any issues but it could soon become overloaded resource wise. The basic operation of…

  • texadactyl
    texadactyl over 5 years ago +1

    Interesting approach and useful for someone else as a starter kit to build on for another application.  You could really run the Pi side on almost any model - like one that is gathering dust in a drawer…

  • texadactyl
    texadactyl over 5 years ago

    Interesting approach and useful for someone else as a starter kit to build on for another application.  You could really run the Pi side on almost any model - like one that is gathering dust in a drawer having been replaced by a more powerful Pi.

     

    I developed a Raspberry Pi based web server for a different purpose (Do-It-Yourself Certificate Authority on a Raspberry Pi).  It got complicated enough that I resorted to using a Python package called "Flask" to provide the web server infrastructure.  Maybe I overkilled this but my users in Asia are far away and I did not want them calling me in the middle of their afternoon (I'm in Texas USA).  Note that this could run on almost any model - maybe every model (only tested on models 2 and 3 so far in Hong Kong and here in Texas).

     

    If you follow-up this project with an enhancement or a "left-turn" to the approach, please publish.  Thank you.

    • Cancel
    • Up +1 Down
    • Reply
    • More
    • Cancel
  • violet
    violet over 5 years ago in reply to DAB

    Im not sure how the raspberry pi would cope with multiple devices using the interface, a small number wouldnt cause any issues but it could soon become overloaded resource wise. The basic operation of it works in the same way as dynamic webpages on most modern websites do where individual components can update themselves by reading/writing to a database without having to refresh the entire webpage (the mail icon on this website is such an example, it automatically updates the number when you receive new mail) Im just expanding on that system by reading/writing to hardware connected to the raspberry pi rather than to a database.

     

    The next part of the blog is going to implement an i2c interface tested by sending a string of text from the webpage to a 16x2 text lcd connected to the pi. In the same way as the time can be retrieved from the raspberry pi, sensor data from the i2c bus could be read in a similar fashion which is where I expect multiple reads of such a device would cause issues, some kind of "lock file" that python scripts must interact with before they are given clearance to use the i2c bus interface would be my first thoughts towards a solution.

    • Cancel
    • Up +2 Down
    • Reply
    • More
    • Cancel
  • DAB
    DAB over 5 years ago

    Interesting project.

     

    I will be following your progress with interest.

     

    Who knows, I might be inspired to implement it on my PI.

     

    I am curious, are you planning to run more than one device sending data to the interface at a time?

     

    It could provide some interesting collision/recovery data for a simple network.

     

    DAB

    • Cancel
    • Up 0 Down
    • Reply
    • More
    • Cancel
  • violet
    violet over 5 years ago

    Just done some quick performance tests and the time it takes to send and receive this data over our wireless network takes between 1ms and 2.5ms in most cases. It went as high as 5ms just once in the 500 test samples taken.

    • Cancel
    • Up 0 Down
    • Reply
    • More
    • Cancel
Element14

element14 is the first online community specifically for engineers. Connect with your peers and get expert answers to your questions.

  • Members
  • Learn
  • Technologies
  • Challenges & Projects
  • Products
  • Store
  • About Us
  • Feedback & Support
  • FAQs
  • Terms of Use
  • Privacy Policy
  • Legal and Copyright Notices
  • Sitemap
  • Cookies

An Avnet Company © 2022 Premier Farnell Limited. All Rights Reserved.

Premier Farnell Ltd, registered in England and Wales (no 00876412), registered office: Farnell House, Forge Lane, Leeds LS12 2NE.

ICP 备案号 10220084.

Follow element14

  • Facebook
  • Twitter
  • linkedin
  • YouTube