element14 Community
element14 Community
    Register Log In
  • Site
  • Search
  • Log In Register
  • Community Hub
    Community Hub
    • What's New on element14
    • Feedback and Support
    • Benefits of Membership
    • Personal Blogs
    • Members Area
    • Achievement Levels
  • Learn
    Learn
    • Ask an Expert
    • eBooks
    • element14 presents
    • Learning Center
    • Tech Spotlight
    • STEM Academy
    • Webinars, Training and Events
    • Learning Groups
  • Technologies
    Technologies
    • 3D Printing
    • FPGA
    • Industrial Automation
    • Internet of Things
    • Power & Energy
    • Sensors
    • Technology Groups
  • Challenges & Projects
    Challenges & Projects
    • Design Challenges
    • element14 presents Projects
    • Project14
    • Arduino Projects
    • Raspberry Pi Projects
    • Project Groups
  • Products
    Products
    • Arduino
    • Avnet & Tria Boards Community
    • Dev Tools
    • Manufacturers
    • Multicomp Pro
    • Product Groups
    • Raspberry Pi
    • RoadTests & Reviews
  • About Us
  • 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
      • Japan
      •  Korea (Korean)
      •  Malaysia
      •  New Zealand
      •  Philippines
      •  Singapore
      •  Taiwan
      •  Thailand (Thai)
      • Vietnam
      • 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
  • Settings
Raspberry Pi
  • Products
  • More
Raspberry Pi
Blog Raspberry Pi 3 HTML User Interface part. 2
  • Blog
  • Forum
  • Documents
  • Quiz
  • Events
  • Polls
  • Files
  • Members
  • Mentions
  • Sub-Groups
  • Tags
  • More
  • Cancel
  • New
Join Raspberry Pi to participate - click to join for free!
Featured Articles
Announcing Pi
Technical Specifications
Raspberry Pi FAQs
Win a Pi
GPIO Pinout
Raspberry Pi Wishlist
Comparison Chart
Quiz
  • Share
  • More
  • Cancel
Group Actions
  • Group RSS
  • More
  • Cancel
Engagement
  • Author Author: Former Member
  • Date Created: 11 Oct 2016 9:45 PM Date Created
  • Views 764 views
  • Likes 4 likes
  • Comments 3 comments
Related
Recommended
  • rpi3
  • ras pi 3
  • raspberrypi3

Raspberry Pi 3 HTML User Interface part. 2

Former Member
Former Member
11 Oct 2016

This post is a demonstration of controlling an i2c device connected to a raspberry pi from a remote device.

 

How it works:

 

The Raspberry Pi sends a webpage to a remote device that contains a text field and a button, when the button is pressed, the text in the field is sent from the web page back to the raspberry pi where a Python script receives the text and forwards it on to an LCD screen connected to the Pi's i2c bus using a library.

 

To achieve this I followed these steps:

 

Step 1

 

Locate and download a library to simplify the use of the LCD, there are some great examples online and finding someone who has already done the hard work and willing to share it is a bonus to any project! I finally settled on a library and an example script of how to use that library from https://gist.github.com/DenisFromHR/cc863375a6e19dce359d thanks Dennis from HR!! I believe that the Pi library didn't fully originate from this source but there are details of that in the Libraries header.

 

The i2c capability on the raspberry pi needs to be turned on before it can be used by typing sudo raspi-config into a terminal and changing the option in the advanced menu. Next the user needs to be added to the i2c group in the linux system sudo adduser pi i2c it's a good idea to add the web server to that group too so remote use is possible sudo adduser www-data i2c.

 

  running the example LCD code in a terminal showed that everything was working correctly with the i2c bus.

 

Step 2

 

A Python script will need to be made that can accept POST data from web browsers and forward that information to the LCD using the library that was downloaded.

 

lcdnetwrite.py

#! /usr/bin/python
#

import os
import sys
import threading
import time
import subprocess
import RPi_I2C_driver


os.getenv("QUERY_STRING")
inputtext = sys.stdin.read()

mylcd = RPi_I2C_driver.lcd()
mylcd.lcd_clear()
mylcd.lcd_display_string(inputtext, 1)


print "Content-Type: text/html\n\n"
print '<html><head><meta content="text/html; charset=UTF-8" />'
print "return 1"
print "</body></html>"

print "Content-Type: text/html\n\n"
print '<html><head><meta content="text/html; charset=UTF-8" />'
print "return 1"
print "</body></html>"

 

 

Step 3

 

Modify the html file that was created in the first part of the blog to include a text field, button and some java script that can send the information entered into the text field to the Python script that was just made.

 

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>

<br>
I2C LCD FUNCTIONS
<br>
<p>
<input type="text" id="lcdtext" maxlength="16" size="16" value="text here">
<input type="button" onClick="lcdWriteText()" value="Go">
</p>

<script>

function lcdWriteText(){
var text = document.getElementById("lcdtext").value;
var req = new XMLHttpRequest();
req.open("POST","/cgi-bin/lcdnetwrite.py",true);
req.send(text);
}





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>

 

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

The video below demonstrates this system working. There is still much to do!!

 

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

  • Sign in to reply
  • Former Member
    Former Member over 9 years ago

    Easy to read and modular code.  That's the best experience for a reader.  Nice job.

    • Cancel
    • Vote Up 0 Vote Down
    • Sign in to reply
    • More
    • Cancel
  • DAB
    DAB over 9 years ago

    Great update.

     

    I like the code examples and the nice step by step approach.

     

    DAB

    • Cancel
    • Vote Up 0 Vote Down
    • Sign in to reply
    • More
    • Cancel
  • Jan Cumps
    Jan Cumps over 9 years ago

    Tough hé, to capture a back-lit LCD screen correct on video or photo?

    I have most success when dimming the screen's backlight way down, and film in a bright room.

    • Cancel
    • Vote Up 0 Vote Down
    • Sign in to reply
    • More
    • Cancel
element14 Community

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 © 2026 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

  • X
  • Facebook
  • linkedin
  • YouTube