Accueil
Raspberry – 6 – Jouons avec la page web qui pilote les PINS
Créé le : 6 juillet 20144 Commentaires
Catégorie: Raspberry
Mise à jour : 6 juillet 2014
Raspberry – 6 – Jouons avec la page web qui pilote les PINS
Maintenant que le montage est fonctionnel, je me plonge un peu plus dans la page web qui pilote les PINS du Raspberry.
Par défaut la page de idleman est fonctionnelle mais avec mes 8 PINS j’aimerai faire un bouton « Allumer Tout » et « Éteindre Tout »
Modification du fichier index.php
- Ajout d’un bouton Allumer tout
- Ajout d’un bouton Éteindre tout
- Ajout d’un mode guirlande rapide
- Suppression de la colonne qui affiche les n°dePIN (ligne commentée)
<?php
require_once('configuration.php');
require_once('functions.php');
?>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PiHome</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table class="materialTab">
<tr><th>Objet</th><!-- <th>PIN</th> --><th>Etat</th></tr>
<?php foreach($materials as $material=>$pin){ ?>
<tr>
<td><?php echo $material; ?></td>
<!-- <td><?php echo $pin.' ('.$pins[$pin] .')'; $pinState = getPinState($pin,$pins); ?></td> -->
<td><div onclick="changeState(<?php echo $pin; ?>,this)" class="pinState <?php echo $pinState; ?>"></div></td></tr>
<?php } ?>
<tr>
<td colspan="2"><div onclick="allume();">Tout allumer</div></td>
</tr>
<tr>
<td colspan="2"><div onclick="eteind();">Tout eteindre</div></td>
</tr>
<tr>
<td colspan="2"><div onclick="demo();">Mode guirlande !!</div></td>
</tr>
<tr>
<td colspan="2"><div onclick="demovite();">Mode guirlande rapide!!</div></td>
</tr>
</table>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Modification du fichier action.php
- Ajout de tous les PINS dans le mode guirlande
- Ajout d’un case Guirlande plus rapide
- Ajout d’un case Allumer tout
- Ajout d’un case Eteindre tout
<?php
require_once('common.php');
$result['state'] = 0;
$result['error'] = '';
switch($_['action']){
case 'changeState':
//Definis le PIN en tant que sortie
system("gpio mode ".$pins[$_['pin']]." out");
//Active/d\Uffffffffctive le pin
system("gpio write ".$pins[$_['pin']]." ".$_['state']);
$result['state'] = 1;
break;
case 'allume':
//allume tous les PIN
system("gpio write ".$pins['11']." 1");
system("gpio write ".$pins['12']." 1");
system("gpio write ".$pins['7']." 1");
system("gpio write ".$pins['13']." 1");
system("gpio write ".$pins['15']." 1");
system("gpio write ".$pins['16']." 1");
system("gpio write ".$pins['18']." 1");
system("gpio write ".$pins['22']." 1");
break;
case 'eteind':
//eteind tous les PIN
system("gpio write 0 0");
system("gpio write 1 0");
system("gpio write 2 0");
system("gpio write 3 0");
system("gpio write 4 0");
system("gpio write 5 0");
system("gpio write 6 0");
system("gpio write 7 0");
break;
case 'demo':
system("gpio write ".$pins['11']." 1");
sleep(1);
system("gpio write ".$pins['11']." 0");
system("gpio write ".$pins['12']." 1");
sleep(1);
system("gpio write ".$pins['12']." 0");
system("gpio write ".$pins['7']." 1");
sleep(1);
system("gpio write ".$pins['7']." 0");
system("gpio write ".$pins['13']." 1");
sleep(1);
system("gpio write ".$pins['13']." 0");
system("gpio write ".$pins['15']." 1");
sleep(1);
system("gpio write ".$pins['15']." 0");
system("gpio write ".$pins['16']." 1");
sleep(1);
system("gpio write ".$pins['16']." 0");
system("gpio write ".$pins['18']." 1");
sleep(1);
system("gpio write ".$pins['18']." 0");
system("gpio write ".$pins['22']." 1");
sleep(1);
system("gpio write ".$pins['22']." 0");
break;
case 'demovite':
system("gpio write ".$pins['11']." 1");
sleep(0.5);
system("gpio write ".$pins['11']." 0");
system("gpio write ".$pins['12']." 1");
sleep(0.5);
system("gpio write ".$pins['12']." 0");
system("gpio write ".$pins['7']." 1");
sleep(0.5);
system("gpio write ".$pins['7']." 0");
system("gpio write ".$pins['13']." 1");
sleep(0.5);
system("gpio write ".$pins['13']." 0");
system("gpio write ".$pins['15']." 1");
sleep(0.5);
system("gpio write ".$pins['15']." 0");
system("gpio write ".$pins['16']." 1");
sleep(0.5);
system("gpio write ".$pins['16']." 0");
system("gpio write ".$pins['18']." 1");
sleep(0.5);
system("gpio write ".$pins['18']." 0");
system("gpio write ".$pins['22']." 1");
sleep(0.5);
system("gpio write ".$pins['22']." 0");
break;
default:
$result['error'] = 'Aucune action définie';
break;
}
echo '('.json_encode($result).')';
?>
Modification du fichier js/script.js
Au début j’avais oublié de modifier ce fichier et mes nouveaux boutons ne fonctionnaient pas (je suis un peu une bille en PHP)
Bref, voici mes modifs
- Ajout d’une fonction demovite pour le mode de guirlande rapide
- Ajout d’une fonction allume pour tout allumer
- Ajout d’une fonction eteind pou tout éteindre
function changeState(pin,elem){
var newState = ($(elem).hasClass('on')?0:1);
$.ajax({
type: "POST",
url: "./action.php?action=changeState",
data:{pin:pin,state:newState},
success: function(r){
var result = eval(r);
if(result.state == 1){
$(elem).removeClass('on');
$(elem).removeClass('off');
$(elem).addClass((newState==1?'on':'off'));
}else{
alert('Erreur : '+result.error);
}
}});
}
function demo(){
$.ajax({
type: "POST",
url: "./action.php?action=demo",
success: function(r){
}});
}
function demovite(){
$.ajax({
type: "POST",
url: "./action.php?action=demovite",
success: function(r){
}});
}
function allume(){
$.ajax({
type: "POST",
url: "./action.php?action=allume",
success: function(r){
}});
}
function eteind(){
$.ajax({
type: "POST",
url: "./action.php?action=eteind",
success: function(r){
}});
}
Salut
Super tuto merci !
Je suis tombé sur ton site après avoir trouvé celui de idleman et ça m’a pas mal aidé à comprendre certaines choses.
Tu utilises quel programme pour modifier le php ?
Merci pour le commentaire, depuis le Raspberry j’utilise nano, l’editeur de texte simple en mode terminal
c’est très intéressant merci pour ce tuto 🙂
svp j’ai besoin de connaitre comment créer un serveur web et par détails.
merci
Merci olfa pour ton commentaire… Pour créer le site web il faut regarder l’article n°2 sur le Raspberry – http://wiki.vanessalionel.fr/raspberry-installer-un-serveur-web/