5545 sujets

Sémantique web et HTML

Problème HTML lié a PHP et Jscript

Salut ! Smiley smile
J'ai les bases en HTML et CSS mais en therme de PHP et JS la c'est 0...
J'ai un raspberry B+ et je souhaite faire un peu de domotique avec, j'ai donc une page web, qui ressemble a sa:
http://i.imgur.com/f7sSswX.png
et c'est relié a une breadbord avec deux 8 digitaux en LED :
http://i.imgur.com/2Anq85Z.jpg
Quand je clique sur le bouton on/off de mon tableau, les LED du premier 8 s'allument:
http://i.imgur.com/jdmhkrA.jpg
et le bouton On/off change:
[?img]http://i.imgur.com/C4h8Wea.png?1
Sauf que là, si j'actualise la page, les deux boutons on/off vont êtres allumé, alors que le deuxième 8 digital est éteint...
Voici les codes (Je précise que j'ai trouvé ces codes sur internet, j'ai juste rajouté le tableau et l'image du bouton on/off)
HTML/PHP:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Ma Chambre</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body style="background-color: white;">
     <!-- On/Off button's picture -->
     <table width="100%">
         <tr>
       <th>Objet</th>
       <th>Statut</th>
   </tr>

<tr>
    <td>8 n°1</td>
    <td>

     <?php
     //this php script generate the first page in function of the gpio's status
     $status = array (0);
     for ($i = 0; $i < count($status); $i++) {
        //set the pin's mode to output and read them
        system("gpio mode ".$i." out");
        exec ("gpio read ".$i, $status[$i], $return );
        //if off
        if ($status[$i][0] == 0 ) {
        echo ("<img id='button_0' src='data/off/off_0.png' alt='off'/>");
        }
        //if on
        if ($status[$i][0] == 1 ) {
        echo ("<img id='button_0' src='data/on/on_0.png' alt='on'/>");
        }   
     }




     ?>

    </td>

</tr>

<tr>
    <td>8 n°2</td>
    <td>
     <?php
     //this php script generate the first page in function of the gpio's status
     $statusx = array (0);
     for ($x = 0; $x < count($statusx); $x++) {
        //set the pin's mode to output and read them
        system("gpio mode ".$x." out");
        exec ("gpio read ".$x, $statusx[$x], $returnx );
        //if off
        if ($statusx[$x][0] == 0 ) {
        echo ("<img id='button_1' src='data/off/off_1.png' alt='off'/>");
        }
        //if on
        if ($status[$x][0] == 1 ) {
        echo ("<img id='button_1' src='data/on/on_1.png' alt='on'/>");
        }   
     }




     ?>
  
     </td>
     </tr>

    </table>
     <!-- javascript -->
         <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Le JAVASCRIPT:
//JavaScript, use pictures as buttons, sends and receives values to/from the Rpi
//These are all the buttons
var button_0 = document.getElementById("button_0");
var button_1 = document.getElementById("button_1");


//this function sends and receives the pin's status
function change_pin (pin, status) {
    //this is the http request
    var request = new XMLHttpRequest();
    request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
    request.send(null);
    //receiving information
    request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
            return (parseInt(request.responseText));
        }
    //test if fail
        else if (request.readyState == 4 && request.status == 500) {
            alert ("server error");
            return ("fail");
        }
    //else
        else { return ("fail"); }
    }
}

//these are all the button's events, it just calls the change_pin function and updates the page in function of the return of it.
button_0.addEventListener("click", function () {
    //if red
    if ( button_0.alt === "off" ) {
        //use the function
        var new_status = change_pin ( 0, 0);
        var new_status = change_pin ( 1, 0);
        var new_status = change_pin ( 2, 0);
        var new_status = change_pin ( 3, 0);
        var new_status = change_pin ( 4, 0);
        var new_status = change_pin ( 5, 0);  
        var new_status = change_pin ( 7, 0);      
        if (new_status !== "fail") {
            button_0.alt = "on"
            button_0.src = "data/on/on_0.png";
            return 0;
            }
        }
    //if green
    if ( button_0.alt === "on" ) {
        //use the function
        var new_status = change_pin ( 0, 1);
        var new_status = change_pin ( 1, 1);
        var new_status = change_pin ( 2, 1);
        var new_status = change_pin ( 3, 1);
        var new_status = change_pin ( 4, 1);
        var new_status = change_pin ( 5, 1);  
        var new_status = change_pin ( 7, 1);  
        if (new_status !== "fail") {
            button_0.alt = "off"
            button_0.src = "data/off/off_0.png";
            return 0;
            }
        }
} );

button_1.addEventListener("click", function () {
    //if red
    if ( button_1.alt === "off" ) {
        //use the function
        var new_status = change_pin ( 6, 0);
        var new_status = change_pin ( 21, 0);
        var new_status = change_pin ( 22, 0);
        var new_status = change_pin ( 23, 0);
        var new_status = change_pin ( 24, 0);
        var new_status = change_pin ( 25, 0);  
        var new_status = change_pin ( 29, 0);      
        if (new_status !== "fail") {
            button_1.alt = "on"
            button_1.src = "data/on/on_0.png";
            return 0;
            }
        }
    //if green
    if ( button_1.alt === "on" ) {
        //use the function
        var new_status = change_pin ( 6, 1);
        var new_status = change_pin ( 21, 1);
        var new_status = change_pin ( 22, 1);
        var new_status = change_pin ( 23, 1);
        var new_status = change_pin ( 24, 1);
        var new_status = change_pin ( 25, 1);  
        var new_status = change_pin ( 29, 1);
        if (new_status !== "fail") {
            button_1.alt = "off"
            button_1.src = "data/off/off_0.png";
            return 0;
            }
        }
} );

Et le PHP pour les GPIO
PHP:
<?php
//Getting and using values
if (isset ($_GET["pin"]) && isset($_GET["status"]) ) {
    $pin = strip_tags($_GET["pin"]);
    $status = strip_tags($_GET["status"]);
    //Testing if values are numbers
    if ( (is_numeric($pin)) && (is_numeric($status)) && ($pin <= 7) && ($pin >= 0) && ($status == "0") || ($status == "1") ) {
        //set the gpio's mode to output      
        system("gpio mode ".$pin." out");
        //set the gpio to high/low
        if ($status == "0" ) { $status = "1"; }
        else if ($status == "1" ) { $status = "0"; }
        system("gpio write ".$pin." ".$status );
        //reading pin's status
        exec ("gpio read ".$pin, $status, $return );
        //printing it
        echo ( $status[0] );
    }
    else { echo ("fail"); }
} //print fail if cannot use values
else { echo ("fail"); }
?>


Je ne suis pas sur mais je crois que le problème vient du faite que lorsque j'actualise ma page, il demande l'état de mes pin de 0 à 29 sauf que ceux de 0 à 7 sont allumé mais ceux de 7 a 29 ne le sont pas donc il dit quand même aux deux boutons qu'ils sont allumés donc qu'il faut se mettre en position ON...
Sujet clos
Aller à