Le but de ce mini-projet est de réaliser une interface web de contrôle des LEDs de la carte BeagleBone mise à disposition en TP.
Pour ce projet, nous avons utilisé les dépendences suivantes :
Pour installer les dépendences, il faut d'abord mettre à jour les références des paquets disponibles :
apt updateEnsuite, nous pouvons installer les paquets (ou les mettre à jour si déjà installés)
apt install nginx php-fpmIl nous faut ensuite installer la librairie jquery dans le dossier
/var/www/html. Pour cela, nous avons utilisé la version 3.7.1 disponible sur
le site officiel :
cd /var/www/html
wget https://code.jquery.com/jquery-3.7.1.min.jsLa configuration de nginx se fait dans le fichier
/etc/nginx/sites-available/default. Par défaut, nginx est déjà installé sur la
BeagleBone et une configuration est déjà présente dans ce fichier. Dans notre
cas, nous avons modifié la configuration de la section server qui écoute sur
le port 8080. La configuration de cette section est la suivante :
server {
listen 8080 default_server;
listen [::]:8080 default_server;
root /var/www/html;
index index.html;
# Cette section permet de servir les fichiers statiques
location / {
try_files $uri $uri/ =404;
}
# Cette section permet d'intéragir avec le serveur php-fpm et interpréter
# les fichiers php
location ~ \.php$ {
include snippets/fastcgi-php.conf;
# La version de php-fpm peut être différente selon la version de php,
# mais dans notre cas, la dernière version disponible sur les dépôts
# est la 7.3
fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
}
}Il est également nécessaire d'ajouter le groupe gpio à l'utilisateur
www-data pour que le serveur web puisse intéragir avec les GPIOs de la carte
BeagleBone :
usermod -a -G gpio www-dataIl faut ensuite redémarrer le serveur nginx et php-fpm pour que les modifications soient prises en compte :
systemctl restart nginx
systemctl restart php7.3-fpmLe développement de l'interface web se fait dans le dossier /var/www/html.
Dans notre cas, nous avons développé une interface web permettant de contrôler les LEDs de la carte BeagleBone. Cette interface est composée de plusieurs fichiers :
index.html: page webjquery-3.7.1.min.js: librairie jqueryget_button_state.php: script php permettant de récupérer l'état du bouton poussoirget_potentiometer_value.php: script php permettant de récupérer la valeurget_led3_state.php: script php permettant de récupérer l'état de la LED 3get_led2_state.php: script php permettant de récupérer l'état de la LED 2get_ledG_state.php: script php permettant de récupérer l'état de la LED verteget_ledB_state.php: script php permettant de récupérer l'état de la LEDget_ledR_state.php: script php permettant de récupérer l'état de la LED rougeset_led3_state.php: script php permettant de modifier l'état de la LED 3set_led2_state.php: script php permettant de modifier l'état de la LED 2set_ledR_state.php: script php permettant de modifier l'état de la LED rougeset_ledG_state.php: script php permettant de modifier l'état de la LEDset_ledB_state.php: script php permettant de modifier l'état de la LED bleue
Dans cet exemple nous ne montrons que le code de la page web index.html et
des scripts php get_potentiometer_value.php et set_led3_state.php. Les
autres scripts php sont similaires à ceux-ci.
Le fichier index.html a besoin de 3 parties pour fonctionner :
- La librairie jquery
- Le code html
- Le code javascript
La librairie jquery est incluse dans <head> le fichier index.html avec la
ligne suivante :
<script src="jquery-3.7.1.min.js"></script>L'état de la led 3 est contrôlé par l'élément <input> de type checkbox :
<input type="checkbox" name="led3" />Le code javascript permet de récupérer l'état de la led 3 et de la modifier
lorsque l'utilisateur clique sur l'élément <input> :
$('input[type="checkbox"]').click(function() {
var led = $(this).attr("name");
var state = $(this).prop("checked") ? 1 : 0;
var file = "set_" + led + "_state.php";
$.ajax({
url: file,
method: 'POST',
data: {
state: state
},
});
});L'utilité de jquery est de simplifier le code javascript. En effet, sans jquery le code javascript serait beaucoup plus long et complexe.
Le script php set_led3_state.php permet de modifier l'état de la led 3. Voici
son code :
<?php
$state = $_POST['state'];
$filename = "/sys/class/leds/beaglebone:green:usr3/brightness";
$file = fopen($filename, "w") or die("Impossible d'ouvrir le fichier");
fwrite($file, $state);
fclose($file);Ce script récupère l'état de la led 3 dans la variable $_POST['state'] et
l'écrit dans le fichier /sys/class/leds/beaglebone:green:usr3/brightness.
Pour récupérer l'état du potentiomètre, nous avons utilisé une méthode similaire.
Le code html permettant d'afficher la valeur du potentiomètre est le suivant :
<p>Valeur du potentiomètre : <span id="valeur_potentiometre"></span></p>Le script php get_potentiometer_value.php permet de récupérer la valeur du
potentiomètre. Voici son code :
<?php
$filename = "/sys/bus/iio/devices/iio:device0/in_voltage3_raw";
$file = fopen($filename, "r") or die("Unable to open file!");
echo fread($file, filesize($filename));
fclose($file);Ce script lit la valeur du potentiomètre dans le fichier
/sys/bus/iio/devices/iio:device0/in_voltage3_raw et l'affiche sur la page
web grâce au code javascript suivant :
setInterval(function() {
$.ajax({
url: 'get_potentiometer_value.php',
method: 'GET',
success: function(data) {
$('#valeur_potentiometre').html(data);
}
});
}, 50);Ce code javascript permet de mettre à jour la valeur du potentiomètre toutes les 50ms.
Le code complet de ce projet est disponible sur le dépôt git suivant : https://github.com/sehnryr/linux-embarque-mini-projet
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent