Auto Refresh Na Promenu Stanja

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Imam jednu PHP skriptu pracenu JavaScript-om koje se sluze za kontrolu GPIO Pinova na Raspberry Pi-u putem interneta. E sada. Fajl GPIO.PHP sluzi da preuzme status sa Raspberry-ja o tome da li su pinovi HIGH ili LOW. Kada se pristupi preko interneta fajl INDEX.PHP prikaze dugmice koji po kliku postave odredjeni pin na HIGH ili LOW. Tu je i SCRIPT.JS koji bez refresovanja stranice nakon sto GPIO.PHP dojavi da je status promenjen postavi dugmice na GREEN ili RED, e sada ako ja npr. sa mobilnog postavim neki pin na HIGH na racunaru gde je skripta ucitana dugme za taj pin ostaje na RED. Sada bih ja zeleo da nekako izmenim JS i/ili dodam jos nesto kako bi se status osvezavao svaki put kada dodje do promene stanja bez refresovanja stranice. Dakle ako se ko razume i zeli da pomogne dobrodosao je, probacu sve sto preporucite. Pozz
SCRIPT.JS:
//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"); var button_2 = document.getElementById("button_2"); var button_3 = document.getElementById("button_3"); var button_4 = document.getElementById("button_4"); var button_5 = document.getElementById("button_5"); var button_6 = document.getElementById("button_6"); var button_7 = document.getElementById("button_7"); //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" , "data/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);       if (new_status !== "fail") {          button_0.alt = "on"          button_0.src = "data/img/green/green_0.png";          return 0;          }       }    //if green    if ( button_0.alt === "on" ) {       //use the function       var new_status = change_pin ( 0, 1);       if (new_status !== "fail") {          button_0.alt = "off"          button_0.src = "data/img/red/red_0.png";          return 0;          }       } } );     button_1.addEventListener("click", function () {    //if red    if ( button_1.alt === "off" ) {       //use the function       var new_status = change_pin ( 1, 0);       if (new_status !== "fail") {          button_1.alt = "on"          button_1.src = "data/img/green/green_1.png";          return 0;          }       }    //if green    if ( button_1.alt === "on" ) {       //use the function       var new_status = change_pin ( 1, 1);       if (new_status !== "fail") {          button_1.alt = "off"          button_1.src = "data/img/red/red_1.png";          return 0;          }       } } );     button_2.addEventListener("click", function () {    //if red    if ( button_2.alt === "off" ) {       //use the function       var new_status = change_pin ( 2, 0);       if (new_status !== "fail") {          button_2.alt = "on"          button_2.src = "data/img/green/green_2.png";          return 0;          }       }    //if green    if ( button_2.alt === "on" ) {       //use the function       var new_status = change_pin ( 2, 1);       if (new_status !== "fail") {          button_2.alt = "off"          button_2.src = "data/img/red/red_2.png";          return 0;          }       } } );     button_3.addEventListener("click", function () {    //if red    if ( button_3.alt === "off" ) {       //use the function       var new_status = change_pin ( 3, 0);       if (new_status !== "fail") {          button_3.alt = "on"          button_3.src = "data/img/green/green_3.png";          return 0;          }       }    //if green    if ( button_3.alt === "on" ) {       //use the function       var new_status = change_pin ( 3, 1);       if (new_status !== "fail") {          button_3.alt = "off"          button_3.src = "data/img/red/red_3.png";          return 0;          }       } } );     button_4.addEventListener("click", function () {    //if red    if ( button_4.alt === "off" ) {       //use the function       var new_status = change_pin ( 4, 0);       if (new_status !== "fail") {          button_4.alt = "on"          button_4.src = "data/img/green/green_4.png";          return 0;          }       }    //if green    if ( button_4.alt === "on" ) {       //use the function       var new_status = change_pin ( 4, 1);       if (new_status !== "fail") {          button_4.alt = "off"          button_4.src = "data/img/red/red_4.png";          return 0;          }       } } );     button_5.addEventListener("click", function () {    //if red    if ( button_5.alt === "off" ) {       //use the function       var new_status = change_pin ( 5, 0);       if (new_status !== "fail") {          button_5.alt = "on"          button_5.src = "data/img/green/green_5.png";          return 0;          }       }    //if green    if ( button_5.alt === "on" ) {       //use the function       var new_status = change_pin ( 5, 1);       if (new_status !== "fail") {          button_5.alt = "off"          button_5.src = "data/img/red/red_5.png";          return 0;          }       } } );     button_6.addEventListener("click", function () {    //if red    if ( button_6.alt === "off" ) {       //use the function       var new_status = change_pin ( 6, 0);       if (new_status !== "fail") {          button_6.alt = "on"          button_6.src = "data/img/green/green_6.png";          return 0;          }       }    //if green    if ( button_6.alt === "on" ) {       //use the function       var new_status = change_pin ( 6, 1);       if (new_status !== "fail") {          button_6.alt = "off"          button_6.src = "data/img/red/red_6.png";          return 0;          }       } } );     button_7.addEventListener("click", function () {    //if red    if ( button_7.alt === "off" ) {       //use the function       var new_status = change_pin ( 7, 0);       if (new_status !== "fail") {          button_7.alt = "on"          button_7.src = "data/img/green/green_7.png";          return 0;          }       }    //if green    if ( button_7.alt === "on" ) {       //use the function       var new_status = change_pin ( 7, 1);       if (new_status !== "fail") {          button_7.alt = "off"          button_7.src = "data/img/red/red_7.png";          return 0;          }       } } );    

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Citat:Tu je i SCRIPT.JS koji bez refresovanja stranice nakon sto GPIO.PHP dojavi da je status promenjen postavi dugmice na GREEN ili RED, e sada ako ja npr. sa mobilnog postavim neki pin na HIGH na racunaru gde je skripta ucitana dugme za taj pin ostaje na RED.

Za početak, napisao si da SCRIPT.JS bez refreshovanja stranice vrši promenu dugmića nakon što mu GPIO.PHP to javi. Gde je taj deo koda u SCRIPT.JS?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Nismo se razumeli. Ta JS skripta bez refreshovanja promeni sliku u GREEN ili RED na osnovu HIGH i LOW statusa koje GPIO.PHP prijavi. E sada je problem ako neko drugi sa svog racunara setuje neki pin na HIGH kod mene u browseru se status prikazuje kao LOW ili ti RED. Ja hocu da kada neko klikne sa racunara status bude promenjen na svim ostalim konektovanim racunarima. Pozz

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

To se ranije radilo sa long-polling i comet ajax metodama.
http://en.wikipedia.org/wiki/Comet_(programming)
HTML5 je uveo web sockete (layer preko TCP-a) baš radi soft real-time komunikacije kakvu ti želiš.
Setup je lakši za ajax jer već imaš sve neophodno, potreban ti je samo kod, ali znatno veći kod u odnosu na web sockete sa kojima se jelte, lakše radi, ali je setup komplikovaniji i mnogo više zavisi od mogućnosti tog backenda na kome radi tvoj PHP.

Drugim rečima, nauči da barataš sa ovim pomenutim i znaćeš kako da napraviš komponente reaktivnim.

Postoji i još jedan pristup ovome, a to je bukvalno izdvojeni servis kao RPC server/klijent na koji se kačiš i sa svog servera (sa PHP-om) i sa klijenta (Javascriptom). Moja preporuka ti je http://crossbar.io/ (imaš još mnogo sličnih).

p.s. ja opet iz tvoje druge poruke mogu da zaključim da ti nisi pejstovao sav kod jer pominješ da tvoj JS bez refreshovanja (bez manuelnog requesta ka php-u) menja podatke na stranici? Je l postoji neko dugme umesto refresha koje to isto radi samo što update radi putem Ajaxa?
U suštini na tren razumem da već imaš polovinu posla napravljeno i da ti fali samo PHP koji treba da triggeruje to što si već napravio, a na tren, a iz tvojeg poslednjeg posta isto razumem da nemaš ništa što radi komunikaciju backenda i klijenta ili pak ja uopšte ne kontam šta ti pokrećeš na Raspberry Pi-u...

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Evo ovako, imam sledece:

INDEX.PHP:
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title>Raspberry Pi Gpio</title>     </head>     <link rel="stylesheet" type="text/css" href="data/style.css" media="screen">     <body>     <h2><center>Dobrodošli u Smart Home Kontrolni Centar</center><h2>    <br />    <br />         <!-- On/Off button's picture -->     <center><?php     //this php script generate the first page in function of the gpio's status     $status = array (0, 0, 0, 0, 0, 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_".$i."' src='data/img/red/red_".$i.".png' width='250' height='250' alt='off'/>");       }       //if on       if ($status[$i][0] == 1 ) {       echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".png' width='250' height='250' alt='on'/>");       }        }     ?></center>    <br />    <br />    <center><p>Autor projekta: Miljan Ilić, OŠ"Branko Radičević" Vranje<p/></center>         <!-- javascript -->     <script src="script.js"></script>     </body> </html>

GPIO.PHP:
<!-- This page is requested by the JavaScript, it updates the pin's status and then print it --> <?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"); } ?>

SCRIPT.JS:
//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"); var button_2 = document.getElementById("button_2"); var button_3 = document.getElementById("button_3"); var button_4 = document.getElementById("button_4"); var button_5 = document.getElementById("button_5"); var button_6 = document.getElementById("button_6"); var button_7 = document.getElementById("button_7"); //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" , "data/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);       if (new_status !== "fail") {          button_0.alt = "on"          button_0.src = "data/img/green/green_0.png";          return 0;          }       }    //if green    if ( button_0.alt === "on" ) {       //use the function       var new_status = change_pin ( 0, 1);       if (new_status !== "fail") {          button_0.alt = "off"          button_0.src = "data/img/red/red_0.png";          return 0;          }       } } );     button_1.addEventListener("click", function () {    //if red    if ( button_1.alt === "off" ) {       //use the function       var new_status = change_pin ( 1, 0);       if (new_status !== "fail") {          button_1.alt = "on"          button_1.src = "data/img/green/green_1.png";          return 0;          }       }    //if green    if ( button_1.alt === "on" ) {       //use the function       var new_status = change_pin ( 1, 1);       if (new_status !== "fail") {          button_1.alt = "off"          button_1.src = "data/img/red/red_1.png";          return 0;          }       } } );     button_2.addEventListener("click", function () {    //if red    if ( button_2.alt === "off" ) {       //use the function       var new_status = change_pin ( 2, 0);       if (new_status !== "fail") {          button_2.alt = "on"          button_2.src = "data/img/green/green_2.png";          return 0;          }       }    //if green    if ( button_2.alt === "on" ) {       //use the function       var new_status = change_pin ( 2, 1);       if (new_status !== "fail") {          button_2.alt = "off"          button_2.src = "data/img/red/red_2.png";          return 0;          }       } } );     button_3.addEventListener("click", function () {    //if red    if ( button_3.alt === "off" ) {       //use the function       var new_status = change_pin ( 3, 0);       if (new_status !== "fail") {          button_3.alt = "on"          button_3.src = "data/img/green/green_3.png";          return 0;          }       }    //if green    if ( button_3.alt === "on" ) {       //use the function       var new_status = change_pin ( 3, 1);       if (new_status !== "fail") {          button_3.alt = "off"          button_3.src = "data/img/red/red_3.png";          return 0;          }       } } );     button_4.addEventListener("click", function () {    //if red    if ( button_4.alt === "off" ) {       //use the function       var new_status = change_pin ( 4, 0);       if (new_status !== "fail") {          button_4.alt = "on"          button_4.src = "data/img/green/green_4.png";          return 0;          }       }    //if green    if ( button_4.alt === "on" ) {       //use the function       var new_status = change_pin ( 4, 1);       if (new_status !== "fail") {          button_4.alt = "off"          button_4.src = "data/img/red/red_4.png";          return 0;          }       } } );     button_5.addEventListener("click", function () {    //if red    if ( button_5.alt === "off" ) {       //use the function       var new_status = change_pin ( 5, 0);       if (new_status !== "fail") {          button_5.alt = "on"          button_5.src = "data/img/green/green_5.png";          return 0;          }       }    //if green    if ( button_5.alt === "on" ) {       //use the function       var new_status = change_pin ( 5, 1);       if (new_status !== "fail") {          button_5.alt = "off"          button_5.src = "data/img/red/red_5.png";          return 0;          }       } } );     button_6.addEventListener("click", function () {    //if red    if ( button_6.alt === "off" ) {       //use the function       var new_status = change_pin ( 6, 0);       if (new_status !== "fail") {          button_6.alt = "on"          button_6.src = "data/img/green/green_6.png";          return 0;          }       }    //if green    if ( button_6.alt === "on" ) {       //use the function       var new_status = change_pin ( 6, 1);       if (new_status !== "fail") {          button_6.alt = "off"          button_6.src = "data/img/red/red_6.png";          return 0;          }       } } );     button_7.addEventListener("click", function () {    //if red    if ( button_7.alt === "off" ) {       //use the function       var new_status = change_pin ( 7, 0);       if (new_status !== "fail") {          button_7.alt = "on"          button_7.src = "data/img/green/green_7.png";          return 0;          }       }    //if green    if ( button_7.alt === "on" ) {       //use the function       var new_status = change_pin ( 7, 1);       if (new_status !== "fail") {          button_7.alt = "off"          button_7.src = "data/img/red/red_7.png";          return 0;          }       } } );    

Eto to si svi kodovi koje koristim, to sve radi negde do pola. Odnosno dok neko sa drugog racunara postavi pin na HIGH kod mene ostaje LOW