Créer une interface Web pour piloter votre Raspberry Pi

Xukyo

il y a 3 ans

Le Raspberry Pi est un microordinateur très puissant qui a la particularité d’intégrer une puce permettant de gérer la connexion Wifi. Cela en fait un objet idéal pour développer des objets connectés et, notamment, des serveurs Web. Nous allons voir dans ce tutoriel comment créer et héberger une interface web permettant de piloter votre Raspberry Pi.

Prérequis: Programmer votre Raspberry Pi, Connecter votre Raspberry au Wifi

Matériel

Ordinateur
Raspberry Pi 3 B+ ou Zero (avec Raspbian et connexion à distance VNC)
Source d’alimentation 5V 2A

N.B.: Ce tutoriel a été écrit autour d’un Raspberry Pi mais il peut très bien s’appliquer à n’importe quel ordinateur sur lequel Python est installé avec un accès Wifi.

Code

Pour créer une page web, il faut une structure de fichiers. Un fichier HTML en combinaison d’un fichier CSS pour décrire la page (front-end) et un script Python pour gérer les requêtes provenant du navigateur et à destination du serveur (back-end). Il est possible de rajouter des fichiers PHP et JavaScript afin de structurer et rajouter des fonctionnalités à l’application Web.

Pour organiser ces fichiers, nous allons les placer dans des sous-dossier:

Dans le dossier principale (acwebapp), le script RaspWebInterface.py
Un sous-dossier static, dans lequel on va placer le script css
Un sous-dossier templates, dans lequel on va placer le script HTML

Code Python avec Flask

Nous allons créer un script Python en utilisant Flask afin d’afficher la page rpi3b_webcontroller.html lorsque demandé par le navigateur web. La librairie utilisée pour générer simplement une application web est le micro-framework Flask.

Fonctions à retenir:

app=Flask(name) pour instancier l’application Flask
@app.route(‘/’) décorateur pour gérer les requêtes URL
return render_template(‘rpi3b_webcontroller.html’,**templateData) pour envoyer la page web au navigateur
return « OK 200 » pour valider la réception d’une requête
app.run(debug=True, port=5000, host=’0.0.0.0′,threaded=True) pour lancer l’application sur l’IP locale avec le port 5000

import os
import RPi.GPIO as GPIO
from flask import Flask, render_template, Response
import datetime

GPIO.setmode(GPIO.BCM)
dataPin=[i for i in range(2,28)]
for dp in dataPin: GPIO.setup(dp,GPIO.IN)#,pull_up_down=GPIO.PUD_UP)

data=[]
now=datetime.datetime.now()
timeString=now.strftime("%Y-%m-%d %H:%M")
templateData={
	'title':'Raspberry Pi 3B+ Web Controller',
	'time':timeString,
	'data':data,
}

def getData():
	data=[]
	for i,dp in enumerate(dataPin): data.append(GPIO.input(dataPin[i]))
	
	return data

app=Flask(__name__)
	
@app.route('/')
def index():
	#return 'hello world!'
	now=datetime.datetime.now()
	timeString=now.strftime("%Y-%m-%d %H:%M")
	data=getData()
	templateData={
		'title':'Raspberry Pi 3B+ Web Controller',
		'time':timeString,
		'data':data,
	}
	#return render_template('rpi_index.html',**templateData)
	return render_template('rpi3b_webcontroller.html',**templateData)           

@app.route('/<actionid>') 
def handleRequest(actionid):
	print("Button pressed : {}".format(actionid))
	return "OK 200"   
	                      	
if __name__=='__main__':
	os.system("sudo rm -r  ~/.cache/chromium/Default/Cache/*")
	app.run(debug=True, port=5000, host='0.0.0.0',threaded=True)
	#local web server http://192.168.1.200:5000/
	#after Port forwarding Manipulation http://xx.xx.xx.xx:5000/

Code HTML de la page

Le fichier .html contient le descriptif de la page web ainsi que le code JavaScript permettant de gérer les boutons.

<!DOCTYPE HTML>
	<html>
		<head>
			<title> AranaCorp </title>

			<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
			<meta name='apple-mobile-web-app-capable' content='yes' />
			<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
			<meta http-equiv='refresh' content='10'>

			<link rel="stylesheet" href='../static/rpi_style.css'/>
			<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		</head>
		
		<body bgcolor = '#70706F'> 
			<hr/><hr>
			<h1 style='color : #3AAA35;'><center> AranaCorp - {{title}} </center></h1>
			<hr/><hr>
			<br><br>
			<h2><center><p>Date and time :  {{time}}</p></center></h2>
			<br><br><h2> Digital Inputs/Ouputs </h2>
			<div id='btnContainer'>
				  <center>
				  Pin GPIO2
				  <input value={{data[0]}} readonly></input>
				  <button id='dig2on'>Turn On </button></a>
				  <button id='dig2off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO3
				  <input value={{data[1]}} readonly></input>
				  <button id='dig3on'>Turn On </button></a>
				  <button id='dig3off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO4
				  <input value={{data[2]}} readonly></input>
				  <button id='dig4on'>Turn On </button></a>
				  <button id='dig4off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO5
				  <input value={{data[3]}} readonly></input>
				  <button id='dig5on'>Turn On </button></a>
				  <button id='dig5off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO6
				  <input value={{data[4]}} readonly></input>
				  <button id='dig6on'>Turn On </button></a>
				  <button id='dig6off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO7
				  <input value={{data[5]}} readonly></input>
				  <button id='dig7on'>Turn On </button></a>
				  <button id='dig7off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO8
				  <input value={{data[6]}} readonly></input>
				  <button id='dig8on'>Turn On </button></a>
				  <button id='dig8off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO9
				  <input value={{data[7]}} readonly></input>
				  <button id='dig9on'>Turn On </button></a>
				  <button id='dig9off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO10
				  <input value={{data[8]}} readonly></input>
				  <button id='dig10on'>Turn On </button></a>
				  <button id='dig10off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO11
				  <input value={{data[9]}} readonly></input>
				  <button id='dig11on'>Turn On </button></a>
				  <button id='dig11off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO12
				  <input value={{data[10]}} readonly></input>
				  <button id='dig12on'>Turn On </button></a>
				  <button id='dig12off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO13
				  <input value={{data[11]}} readonly></input>
				  <button id='dig13on'>Turn On </button></a>
				  <button id='dig13off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO14
				  <input value={{data[12]}} readonly></input>
				  <button id='dig14on'>Turn On </button></a>
				  <button id='dig14off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO15
				  <input value={{data[13]}} readonly></input>
				  <button id='dig15on'>Turn On </button></a>
				  <button id='dig15off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO16
				  <input value={{data[14]}} readonly></input>
				  <button id='dig16on'>Turn On </button></a>
				  <button id='dig16off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO17
				  <input value={{data[15]}} readonly></input>
				  <button id='dig17on'>Turn On </button></a>
				  <button id='dig17off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO18
				  <input value={{data[16]}} readonly></input>
				  <button id='dig18on'>Turn On </button></a>
				  <button id='dig18off'>Turn Off </button></a><br /> 
				  </center><center>
				  Pin GPIO19
				  <input value={{data[17]}} readonly></input>
				  <button id='dig19on'>Turn On </button></a>
				  <button id='dig19off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO20
				  <input value={{data[18]}} readonly></input>
				  <button id='dig20on'>Turn On </button></a>
				  <button id='dig20off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO21
				  <input value={{data[19]}} readonly></input>
				  <button id='dig21on'>Turn On </button></a>
				  <button id='dig21off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO22
				  <input value={{data[20]}} readonly></input>
				  <button id='dig22on'>Turn On </button></a>
				  <button id='dig22off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO23
				  <input value={{data[21]}} readonly></input>
				  <button id='dig23on'>Turn On </button></a>
				  <button id='dig23off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO24
				  <input value={{data[22]}} readonly></input>
				  <button id='dig24on'>Turn On </button></a>
				  <button id='dig24off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO25
				  <input value={{data[23]}} readonly></input>
				  <button id='dig25on'>Turn On </button></a>
				  <button id='dig25off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO26
				  <input value={{data[24]}} readonly></input>
				  <button id='dig26on'>Turn On </button></a>
				  <button id='dig26off'>Turn Off </button></a><br /> 
				  </center>
				  <center>
				  Pin GPIO27
				  <input value={{data[25]}} readonly></input>
				  <button id='dig27on'>Turn On </button></a>
				  <button id='dig27off'>Turn Off </button></a><br /> 
				  </center>
			 </div>

			 <script>
				// Event Listener
				var buttonClick = document.getElementById('btnContainer').addEventListener('click', function(event) {
				  if (event.target.nodeName == "BUTTON") {
					var tar = event.target.id;
					console.log(tar);
					$.getJSON('/'+tar,
						function(data) {
					  //do nothing
					});

					return false;
				  }
				});
			</script>
	</body>
</html>

Zoom sur le code Javascript

Le code JavaScript va nous permettre de gérer l’appui sur les boutons de l’interface. Pour cela nous allons créer un écouteur d’évènement « click » (eventListener) sur l’élément « btnContainer » qui va détecter si un bouton (Button) est cliqué et qui va renvoyer son identifiant via une requête json.

// Event Listener

		var buttonClick = document.getElementById('btnContainer').addEventListener('click', function(event) {

		  if (event.target.nodeName == "BUTTON") {

			var tar = event.target.id;

			console.log(tar);

			$.getJSON('/'+tar,

                function(data) {

              //do nothing

            });

            return false;

		  }

		});

Fichier rpi_style.css

Le fichier css contient le style de la page et notamment des boutons afin que la page ait un aspect personnalisé.

body{
background-color:#70706F;
}

h1{
	color:#3AAA35;
}

h3{
	#width:100%;
	border: 3px solid #3AAA35;
	border-radius: 6px;
	overflow: hidden; 
	text-align:center;
	padding:20px;
}


button{
  width:auto;
  height:60px;
  background-color: #3aaa35;/* Green */
  border: none;
  color: white;
  /*padding: 15px 32px;*/
  text-align: center;
  vertical-align:middle;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 12px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  margin: 5px;
}
button:hover{
  background-color: #4CAF50; /* Green */
  color: white;
}

Récupérer l’adresse IP du Raspberry Pi

Afin d’accéder à la interface web hébergée sur le Raspberry Pi, il nous faut connaitre l’adresse IP afin de pouvoir se connecter sur le réseau local à partir d’un navigateur Web. Pour cela, il vous suffit d’entrer la ligne de commande ifconfig dans le terminal du Raspberry Pi.

N.B.: Il est possible d’accéder au Raspberry Pi en dehors du réseau local en faisant une manipulation sur la box à laquelle est connecté le Raspberry Pi. Cette procédure est appelée Port Forwarding.

Résultat

Lorsque vous lancer le script Python sur le Raspberry Pi, vous pouvez ensuite entrer l’adresse IP de votre Raspberry Pi suivi du port (ici 192.168.1.200:5000) sur votre ordinateur ou smartphone. La page internet devrait s’afficher