Aiuto javascript valore variabile

**ravemanroby** · 18-01-2013, 13:57

Buongiorno,
mi rivolgo a voi sperando che possiate risolvere questo problema che mi fa dannare.
Sto lavorando ad un progetto di un'apparecchiatura domotica, dove un server linux con PHP/Apache pilota alcuni moduli domotici tramite porta seriale.
Non ho alcun problema a impartire comandi e leggere le risposte da seriale, ma ho problemi ad imbastire codice javascript dal lato client per far aggiornare un'immagine senza ricaricare la pagina a seconda di quello che leggo dalla seriale.
Premetto che sul sever ho attivo un polling che comunica su seriale scritto in C, il quale interroga i moduli ed invia la risposta dello stato su tcp/ip ogni secondo, lasciando lo spazio necessario per inviare richieste specifiche.
Quindi la configurazione è questa:
Modulo domotico il quale ha sull'ingresso un pulsante, mentre sull'uscita dello stesso modulo è connessa una lampada e questo modulo è connesso con la porta seriale al server.
Veniamo al dunque del mio problema:
Lato client ho l'immagine di una lampada spenta, se qualcuno dal pulsante connesso al modulo la accende, la stringa che viene inviata su tcp/ip cambia di valore e dato che il valore è associato ad una immagine specifica (in questo caso la lampada accesa), cambia l'immagine.
Chiaramente anche nel caso in cui io clicco sull'immagine della lampada spenta devo poter inviare il comando su tcp/ip per poi veder cambiare l'immagine dopo.
Spero che mi possiate aiutare, nonostante i miei sforzi non sono riuscito ad ottenere esattamente quello che ho descritto.

In questo codice che allego, il cambio immagine funziona già, però oltre all'immagine che passa da on a off a seconda del click, la stessa cosa dovrebbe farla la variabile action passando da 1 a 2, visto che il valore 1 accende la lampada mentre il valore 2 la spenge.

Qualsiasi aiuto è gradito.
Grazie.

prova.php

codice:

<script type="text/javascript">
function readPHPResponse () {
	var oResponse = JSON.parse(this.responseText);
	if (oResponse.change) {
		document.getElementById("immagine").src = oResponse.change;
	}
}

function checkForImage () {
	var oReq = new XMLHttpRequest();
	oReq.onload = readPHPResponse;
	if (action==undefined) {
		var action;
		action="1";
		}
	oReq.open("get", "seriale/invio_seriale.php?action=" + action, true);
	oReq.send();
}
</script>

</head>
<body>




[img]img/lightbulb_off.png[/img]
</p>

invio_seriale.php

codice:

{ "change": "img/lightbulb_on.png" }

**lucavizzi** · 18-01-2013, 14:53

La variabile action, essendo definita localmente, sarà sempre undefined quindi assumerà sempre valore 1, è necessaria una variabile globale.

codice:

<script type="text/javascript">
var action="2"; //variabile globale (inizialmente la luce è spenta, lightbulb_off.png) 
function readPHPResponse () {
	var oResponse = JSON.parse(this.responseText);
	if (oResponse.change) {
		document.getElementById("immagine").src = oResponse.change;
	}
}

function checkForImage () {
	var oReq = new XMLHttpRequest();
	oReq.onload = readPHPResponse;
              action=action=='1'? '2' : '1';//"inverto" la variabile 
	oReq.open("get", "seriale/invio_seriale.php?action=" + action, true);
	oReq.send();
}
</script>

</head>
<body>




[img]img/lightbulb_off.png[/img]
</p>

**ravemanroby** · 18-01-2013, 16:34

Grazie della risposta!
Provo a modificare il codice.

**lucavizzi** · 19-01-2013, 12:59

Originariamente inviato da ravemanroby
Grazie della risposta!
Provo a modificare il codice.

Risolto?

**ravemanroby** · 24-01-2013, 11:20

Vedo adesso il messaggio.
Le tue indicazioni hanno funzionato alla grande, grazie!
Però ho risolto in parte, nel senso che funziona tutto a dovere a patto che utilizzi una sola immagine/lampadina nella pagine, se invece io inserisco più di una immagine/lampadina pur modificando l'ID dell'immagine lo script non funziona correttamente, nel senso che agisce sempre sull'ultima immagine anche se clicco sulle altre.

A livello di codice:

codice:

var action="rl4-2"; //variabile globale (inizialmente la luce è spenta, lightbulb_off.png)
function readPHPResponse () {
	var oResponse = JSON.parse(this.responseText);
	if (oResponse.change) {
		document.getElementById("immagine").src = oResponse.change;
	}
}

function readPHPResponse () {
	var oResponse = JSON.parse(this.responseText);
	if (oResponse.change) {
		document.getElementById("immagine2").src = oResponse.change;
	}
}

function checkForImage () {
	var oReq = new XMLHttpRequest();
	oReq.onload = readPHPResponse;
	action=action=='rl4-1'? 'rl4-2' : 'rl4-1';//"inverto" la variabile 
	oReq.open("get", "seriale/invio_seriale.php?action=" + action, true);
	oReq.send();
}
</script>

e

codice:



[img]img/lightbulb_off.png[/img]
</p>




[img]img/lightbulb_off.png[/img]
</p>

**lucavizzi** · 24-01-2013, 11:25

Passa l'id dell'immagine alla funzione checkForImage (parametrizzazione)

codice:

[img]img/lightbulb_off.png[/img]

[img]img/lightbulb_off.png[/img]

e poi accendi o spegni l'id preso in ingresso.

**ravemanroby** · 24-01-2013, 11:39

Scusa sono piuttosto negato in merito...

il document.getElementById

codice:

document.getElementById("immagine").src = oResponse.change;

come cambierebbe in questo caso? visto che punta a "immagine"

**lucavizzi** · 24-01-2013, 12:39

codice:

var action="rl4-2"; //variabile globale (inizialmente la luce è spenta, lightbulb_off.png)
function readPHPResponse (imgId) {
	var oResponse = JSON.parse(this.responseText);
	if (oResponse.change) {
		document.getElementById(imgId).src = oResponse.change;
	}
}

function checkForImage (imgId) {
	var oReq = new XMLHttpRequest();
              //2) L'id viene passato da checkForImage a readPHPResponse
	oReq.onload = readPHPResponse(imgId);
	action=action=='rl4-1'? 'rl4-2' : 'rl4-1';//"inverto" la variabile 
	oReq.open("get", "seriale/invio_seriale.php?action=" + action, true);
	oReq.send();
}


[img]img/lightbulb_off.png[/img]

**ravemanroby** · 24-01-2013, 13:13

Ho provato come mi dici ma adesso sembra non funzionare più nè il click nè il cambio immagine....

codice:

var action="rl4-2"; //variabile globale (inizialmente la luce è spenta, lightbulb_off.png)
function readPHPResponse (imgId) {
	var oResponse = JSON.parse(this.responseText);
	if (oResponse.change) {
		document.getElementById(imgId).src = oResponse.change;
	}
}

function checkForImage (imgId) {
	var oReq = new XMLHttpRequest();
              //2) L'id viene passato da checkForImage a readPHPResponse
	oReq.onload = readPHPResponse(imgId);
	action=action=='rl4-1'? 'rl4-2' : 'rl4-1';//"inverto" la variabile 
	oReq.open("get", "seriale/invio_seriale.php?action=" + action, true);
	oReq.send();
}




[img]img/lightbulb_off.png[/img]
</p>



[img]img/lightbulb_off.png[/img]
</p>

**lucavizzi** · 24-01-2013, 13:50

Così a occhio, mi pare ci sia un unico interruttore per due lampadine:

codice:

action=action=='rl4-1'? 'rl4-2' : 'rl4-1';//"inverto" la variabile

Discussione: Aiuto javascript valore variabile

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto javascript valore variabile

Re: Aiuto javascript valore variabile

Permessi di invio