Go Down

Topic: Arduino web server: aggiornare pagina html (Read 1 time) previous topic - next topic

nagy

Salve a tutti,
sto usando arduino uno come webserver e ho impostato una pagina html per accendere e spegnere un led. Supponiamo che mi collego al server contemporaneamente da due pc. Da un pc premo il pulsante che mi fa accendere il led. Nella pagina html visualizzo con un rettangolino verde l'avvenuta accensione. Sull'altro pc invece continuo a visualizzare la pagina non aggiornata.
La mia domanda è come posso far aggiornare la pagina html al cambiamento di uno stato in tempo reale? Non voglio fare il refresh automatico dopo un tot di secondi.
Allego un'immagine di ciò che vedo attualmente

lesto

l'HTTP non prevede un real time. Puoi usare il refresh o i WebSocket, però l'unica libreria WebSocket che ho mai visto è single client.
Ci stiamo lavorando, se ti va di partecipare (anche solo come tester, velocizzeresti un sacco lo sviluppo visto che io NON ho una EthernetShield e quind per debuggare il codice mi devo affidare a vlontari) vedi quì: http://forum.arduino.cc/index.php?topic=173783.0
sei nuovo? non sai da dove partire? leggi qui: http://playground.arduino.cc/Italiano/Newbie

nagy

Purtroppo non sono un esperto di programmazione ma se posso essere utile eseguendo dei test lo faccio volentieri.
Leggerò quella discussione sperando di capirci qualcosa e nel caso testerò il codice  :)

superlol

un'altra possibilità è usare ajax per il refresh del solo box facendo un
Code: [Select]
<script type="text/javascript">
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","?sensore",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
</script>

ovviamente il capo di interesse dev'essere scritto così:
Code: [Select]
<div id="myDiv">contnuto iniziale</div>

nel codice dovrai anche mettere che quando gli arriva come parametro "sensore" lui invii solo il valore del sensore.

te lo adatti un attimo ma con 20 righe di js lo fai.

mi chiedo perchè pochi usino questa funzione, in fondo arduino sopporta fino a 5 connessioni in simultanea quindi 2 utenti in contemporanea.
Il nuovo forum italiano sull'elettronica: http://www.electroit.tk/ <--- Nuovamente online!

nagy

Mi è venuta in mente una cosuccia... ma prima però ho bisogno di sapere se si può fare un refresh un pò particolare... quando premo sul pulsante  di accensione del led nella barra degli indirizzi del browser mi esce scritto

http://192.168.1.3:6789/?LED1=ON

Quando faccio il refresh usando

<meta http-equiv=\"refresh\" content=\"2\">

Il browser mi esegue il refresh dell'ultimo indirizzo e cioè http://192.168.1.3:6789/?LED1=ON.
Io vorrei invece eseguire il refresh di http://192.168.1.3:6789/
Si può fare? Oppure esiste un modo per ritornare in quella pagina "principale"?

superlol


Mi è venuta in mente una cosuccia... ma prima però ho bisogno di sapere se si può fare un refresh un pò particolare... quando premo sul pulsante  di accensione del led nella barra degli indirizzi del browser mi esce scritto

http://192.168.1.3:6789/?LED1=ON

Quando faccio il refresh usando

<meta http-equiv=\"refresh\" content=\"2\">

Il browser mi esegue il refresh dell'ultimo indirizzo e cioè http://192.168.1.3:6789/?LED1=ON.
Io vorrei invece eseguire il refresh di http://192.168.1.3:6789/
Si può fare? Oppure esiste un modo per ritornare in quella pagina "principale"?

ma hai letto il mio intervento?  :smiley-sweat:
usa ajax che è il sistema più carino ed efficace.

il tuo script sarà:
Code: [Select]
<script type="text/javascript">
var xmlhttp;
var status;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

function cambiastato() {
document.getElementById("myButton").disabled = true; // disabilitiamo il bottone fino alla fine così non invia 2 comandi per errore
xmlhttp.open("GET","?LED1="+status,true);
xmlhttp.send();
}

xmlhttp.onreadystatechange=function() // funzione che si attiva con la risposta della pagina
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    if(xmlhttp.responseText == '1') { // led acceso
      document.getElementById("myButton").style.background='GREEN';
      document.getElementById("myButton").innerHTML = 'ON';
      status='OFF'; // il prossimo status sarà on
    }
    else { // led spento
        document.getElementById("myButton").style.background='GRAY';
        document.getElementById("myButton").innerHTML = 'OFF';
        status = 'ON'; // il prossimo status sarà on
      }
    }
document.getElementById("myButton").disabled = true; // riattiviamo il pulsante
  }
</script>

ed il tuo bottone sarà:
Code: [Select]
<button id="myButton" onclick="cambiastato">OFF</button>

nel tuo codice arduino dovrai mettere che quando arriva ?LED1=ON la pagina risponda solamente con 1
mentre se arriva ?LED1=OFF dovrà rispondere col carattere 0 o un altro carattere
Il nuovo forum italiano sull'elettronica: http://www.electroit.tk/ <--- Nuovamente online!

lesto

Ajax è un refresh nascosto,... per il metà puoi specificare l'url, se non lo fai lui usa quello attuale, google è tuo amico
sei nuovo? non sai da dove partire? leggi qui: http://playground.arduino.cc/Italiano/Newbie

superlol

però pensandoci con i socket potrebbe implementare html5, so che c'era qualcosa a riguardo...
http://www.html.it/articoli/html5-websocket-1/
Il nuovo forum italiano sull'elettronica: http://www.electroit.tk/ <--- Nuovamente online!

lesto

ci sto lavorando con pablos :)

qualcosa esiste ma è socket-singolo... limitazioni della libreria Ethernet http://forum.arduino.cc/index.php?topic=173783.0
sei nuovo? non sai da dove partire? leggi qui: http://playground.arduino.cc/Italiano/Newbie

nagy

Quote

ma hai letto il mio intervento?  :smiley-sweat:
usa ajax che è il sistema più carino ed efficace.

Scusami ma non l'avevo visto  :smiley-roll-blue:
Cerco di capire di cosa si tratta anche perchè non conosco nè ajax nè js.
Comunque grazie ti farò sapere  :)

lesto

ajax più o meno funziona così: divide la pagina in sotto pagine, le cui variabili sono scollegate dall'HTML della pagina e contenute in un XML. Quindi anzichè fare un refresh di tutta la pagina refreshi solo un pezzo.

A me non piace, visto che spesso il grosso della richiesta sono la negoziazione TCP e gli header, non i html (salvo che siano farciti di script, i quali però, come immagini e css, sono spesso esterni e quindi cachati dal browser)
sei nuovo? non sai da dove partire? leggi qui: http://playground.arduino.cc/Italiano/Newbie

Go Up
 

Quick Reply

With Quick-Reply you can write a post when viewing a topic without loading a new page. You can still use bulletin board code and smileys as you would in a normal post.

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it's been approved by a moderator.
Name:
Email:

shortcuts: alt+s submit/post or alt+p preview