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!!
Top Comments