[quasi ot] jQuery API .change()

[quasi ot] jQuery API .change()

Ciao,

Grazie all' aiuto di pablos71, che sentitamente ringrazio,
sto cercando di capire TinyWebServer, argomento ostico paragonabile, :blush: almeno per me,
a javascript e il suo framework jQuery.
La pagina html che genera un slider i cui valori vengono visualizzati in una textbox
vengono mandati all' Arduino tramite un bottone.
Fi qui tutto bene, 8) ma volendo automatizzare il processo escludendo il bottone di invio e
quindi spedire i dati onchange, banalmente si potrebbe utilizzare onchange='this.form.submit().
Però non mi pare sia la cosa + elegante!
Vorrei fare uso tra le API jQuery .change() ma non so come fare.
di seguito la pagina index.htm

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<style>
	#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<script>
	$(function() {
		$( "#slider-vertical" ).slider({
			orientation: "vertical",
                        //orientation: "horizontal",
			range: "min",
                         animate: true,
			min: 0,
			max: 255,
			value: 0,
			slide: function( event, ui ) {
				$( "#testo3" ).val( ui.value );
			}
		});
		$( "#testo3" ).val( $( "#slider-vertical" ).slider( "value" ) );
	});
	</script>
	<script>
var msg="";
var ind= "/Istruzioni_da_web";
function elabora_dato()
{
    var testo=document.form1.testo3.value;
  document.form1.areatesto.value  + testo + "\n";    
  $.ajax({type: "POST", data: testo, dataType: "text", cache: false, url: ind,   
      success:function(risposta) 
      {	              
        document.form1.areatesto.value  += risposta ;
      }  
   });
}
$(document).ready(
    function(){ 
    msg="Connessione.....#";
    invia_dati("/Istruzioni_da_web");
    });
	
	</script>
	
	<title>prova TinyWebServer  e slider 1</title>
	 </head>
  <body>
  <div class="demo">
	 <form name="form1">
	<textarea cols="80" rows="1" id="textareaname" name="areatesto">
</textarea>
	<p><input type="text"  name="testo3" id="testo3"  style="border:1; color:#ff0000; font-weight:bold;" />
	 <input type="button" value="Invia > Arduino" id="invia"  onclick="elabora_dato()">
		</p>
  </form> 
  <div id="slider-vertical" style="height:200px;"></div>
  </div>
  </body>
</html>

Grazie

Luca

Noto, osservo, che spippolando su e giù lo slider, cambiano i valori nella textbox senza aggiornare la pagina, ma in tempo reale.

Come avviene la comunicazione in tempo reale tra slider e TBox?

Se ho capito bene tu vuoi che quel valore che cambia in tempo reale, possa essere passato all'Arduino.

Mi pare che possa esserci un problema di velocità, o se preferisci, di isteresi tra il valore che vedi e modifichi a video e quello che fa effettivamente l'Arduino.

Cmq ti seguo con interesse visto che avrà immediata applicazione nella dimmerazione delle luci nel progetto "BaBBuino".

Ciao,
non riesco a richiamare la funzione con il moviemento delllo slider. Ho provato con la funzione .live() ma ho scoperto:
As of jQuery 1.7, the .live() method is deprecated.
prontamente sostituita con .on()
Non riesco a trovare una soluzione. Mi dareste una mano perfavore =(

<!DOCTYPE html>

<html>

<head>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

</head>

<style>

	#demo-frame > div.demo { padding: 10px !important; };

	</style>

	<script>

	$(function() {

		$( "#slider-vertical" ).slider({

			orientation: "vertical",

                        //orientation: "horizontal",

			range: "min",

                         animate: true,

			min: 0,

			max: 255,

			value: 0,

			slide: function( event, ui ) {

				$( "#testo3" ).val( ui.value );

			}

		});

		$( "#testo3" ).val( $( "#slider-vertical" ).slider( "value" ) );

	});

	</script>

	<script>

var msg="";

var ind= "/Istruzioni_da_web";



  $( "#slider-vertical" ).on("click", "p", function(){



    var testo=document.form1.testo3.value;

  document.form1.areatesto.value  + testo + "\n";    

  $.ajax({type: "POST", data: testo, dataType: "text", cache: false, url: ind,   

      success:function(risposta) 

      {	              

        document.form1.areatesto.value  += risposta ;

      }  

   });

   

});

$(document).ready(

    function(){ 

    msg="Connessione.....#";

    invia_dati("/Istruzioni_da_web");

	

	



    });

	

	</script>





	<title>prova TinyWebServere slider 1</title>

	 </head>

  <body>

  <div class="demo">

	 <form name="form1">

	<textarea cols="80" rows="1" id="textareaname" name="areatesto">

</textarea>
	<p><input type="text"  name="testo3" id="testo3"  style="border:1; color:#ff0000; font-weight:bold;" />

		</p>
  </form> 
  <p><div id="slider-vertical" style="height:200px;"></div></p>
  </div>
  </body>

</html>

Grazie

Luca

slide: function( event, ui ) {

$( "#testo3" ).val( ui.value );

}

questa è la funzione di cosa fare uqando coambito lo slide: al momento modifica testo3. IO aprirei un WebSocket (sempre HTML5) e comunicherei con quello, c'è molta meno hoverhead degli header.

Ciao nel pezzo di codice che mi hai evedenziato
posso aggiungere $.post?
qualcosa tipo:

$.post("bo.htm", { intensi: "#testo3" } );

Ma $.post vuole un URL a chi lo mando?

Grazie
Luca

l'avevo fatta questa cosa dello slider sul tinyweb, ma visualizzando la pagina sul mio cell android non riuscivo col ditino a muovere il cursore, così ritenendo che avrei dovuto creare un'applicazione android apposita ho lasciato perdere ed eliminato quella parte, stavo cercando nella dispensa (non butto mai nulla :slight_smile: ) quel pezzo che funzionava, se la trovo te la posto.

ma sei riuscito a far funzionare l'ambaradan alla fine?

ciao

Pablo e lo slider non si può modificare nei suoi elementi grafici? Anchio avrei poi problemi con l'android (o iPhone).

Però c'è da considerare una cosa: è davvero necessario lo slider per un controllo remoto da telefono? Perchè io mi immagino l'uso del telefono da fuori casa. E che faccio? L'alòbero di natale con dentro casa nessuno? :smiley:

Ciao,
GRAZIE non vedo l'ora di vederlo.

l'ambaradan non mi funziona ancora ma è fonte di ispirazione
per quanto riguarda android pensavo che:

petesse darmi una mano.
Se esistesse qualche cosa di simile che tratti di webserver+Arduino sarei felicissimo.

Luca

No infatti non è strettamente necessario, ma io non ho pensato a un home domotic per essere controllato da fuori casa, trovo del tutto inutile poter spegnere la luce del bagno a 100 km di distanza mentre qualcuno fa la pupù :). Trovo utile un sistema domotico automatizzato io non devo fare niente... altrimenti diventa un telecomando e non è quello che voglio, poter interagire si è importante, ma io non vorrei mai entrare in casa e dover aprire una pagina dello schermo touch per accendere la luce, non è affatto una cosa comoda. Io entro in casa e il sistema mi saluta e mi accende la luce, appena lascio l'ingresso la luce si spegne, arriva una chiamata al citofono? viene passata agli altoparlanti oppure al telefono normale di casa senza scomodarmi :slight_smile: questa è un esempio di domotica.
Hai un computer sempre acceso dedicato mettici il voice .... mettici il riconoscimento vocale, io l'ho fatto un po' di tempo fa e funzionava, purtroppo mi obbligava ad aver un microfono Bluetooth sempre attaccato all'orecchio, peccato era una figata, ma non usavo arduino era una scheda infilata direttamente nel PCI del computer, feci un sistema tipo Hall 9000 con microfono e casse audio in tutte le stanze il computer mi rispondeva con sistema Text to Speech. Bello bello, ma obbediva solo a me.... opzione abbandonata, forse in futuro chissà

BaBBuino:
lo slider non si può modificare nei suoi elementi grafici?

SI ! usa i CSS se lo vuoi ad esempio rosso:

        <style>
	#rosso .ui-slider-range { background: #ff0000; }
	#rosso .ui-slider-handle { border-color: #DC143C; }
	</style>

pablos71:
No infatti non è strettamente necessario, ma io non ho pensato a un home domotic per essere controllato da fuori casa, trovo del tutto inutile poter spegnere la luce del bagno a 100 km di distanza mentre qualcuno fa la pupù :). Trovo utile un sistema domotico automatizzato io non devo fare niente... altrimenti diventa un telecomando e non è quello che voglio, poter interagire si è importante, ma io non vorrei mai entrare in casa e dover aprire una pagina dello schermo touch per accendere la luce, non è affatto una cosa comoda. Io entro in casa e il sistema mi saluta e mi accende la luce, appena lascio l'ingresso la luce si spegne, arriva una chiamata al citofono? viene passata agli altoparlanti oppure al telefono normale di casa senza scomodarmi :slight_smile: questa è un esempio di domotica.
Hai un computer sempre acceso dedicato mettici il voice .... mettici il riconoscimento vocale, io l'ho fatto un po' di tempo fa e funzionava, purtroppo mi obbligava ad aver un microfono Bluetooth sempre attaccato all'orecchio, peccato era una figata, ma non usavo arduino era una scheda infilata direttamente nel PCI del computer, feci un sistema tipo Hall 9000 con microfono e casse audio in tutte le stanze il computer mi rispondeva con sistema Text to Speech. Bello bello, ma obbediva solo a me.... opzione abbandonata, forse in futuro chissà

Ehilà! Ma è quello che intendo io per Domotica! Il telecomando è un di più.

Cmq, per esperienza provata, ti dico che però un'eccessiva automazione è fastidiosa, molto fastidiosa, specie passato l'enusiasmo del momento. Quindi il telecomando è sempre necessario.

Ora sto sviluppando la procedura di entrata. Ho abbandonato l'opzione BlueThoot del telefono come chiave di accesso (troppo poca sicurezza) e ho optato per un dispositivo RFID, che appena viene rilevata la presenza, mi apre la porta, mi disinserisce l'antifurto, mi accende le luci dell'ingresso e mi fa un report su cosa è successo durante la mia assenza.

pablos71:
Hai un computer sempre acceso dedicato mettici il voice .... mettici il riconoscimento vocale, io l'ho fatto un po' di tempo fa e funzionava, purtroppo mi obbligava ad aver un microfono Bluetooth sempre attaccato all'orecchio, peccato era una

Bellissimo!
Cosa hai usato ?
festival , api java, ecc..
ora Google ti aiuta e si fa anche Cloud computing che va tanto di moda
vedi pubblicità apple

basta cercare: Google Text-To-Speech API

Luca

Nono io avevo proprio comprato il software allo Smau di Milano il Dragon Dictate e il Text To Speech con chiavi hardware e con le API di visualbasic attuavo i comandi..... funziona se vivi da solo e non ci sono rumori :slight_smile:
Se fosse possibile piazzare un dente elettronico che funge da microfono sei a cavallo :grin: :smiley:

Ciao,
Grazie alla dritta di Lesto sono riuscito nel mio intento,
lo slider durante lo spostamento trasmette il suo valore ad Arduino

<!DOCTYPE html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<style>
	#demo-frame > div.demo { padding: 10px !important; };
</style>
<script>
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
 //orientation: "horizontal",
range: "min",
     animate: true,
			min: 0,
			max: 255,
			value: 0,  //devo fargli prendere il valore da Arduino !!!
			slide: function( event, ui ) {
			$( "#testo3" ).val( ui.value );
			$.ajax({type: "POST", data: $( "#testo3" ).val( ui.value ), dataType: "text", cache: false, url: ind,   
                                              success:function(risposta) 
                                                     { document.form1.areatesto.value  += risposta ;}    });
                        }    });
		$( "#testo3" ).val( $( "#slider-vertical" ).slider( "value" ) );
	});
	</script>
	<script>
var msg="";
var ind= "/Istruzioni_da_web"
$(document).ready(
    function(){ 
    msg="Connessione.....#";

    invia_dati("/Istruzioni_da_web");
 });
</script>
	<title>prova TinyWebServere e slider on change OK</title>
	 </head>
  <body>
  <div class="demo">
	 <form name="form1">
	<textarea cols="80" rows="1" id="textareaname" name="areatesto">
</textarea>
	<p><input type="text"  name="testo3" id="testo3"  style="border:1; color:#ff0000; font-weight:bold;" />
	</p>
  </form> 
  <p><div id="slider-vertical" style="height:200px;"></div></p>
  </div>
  </body>
</html>

.

Ora Manca la possibilità di prendere il vaolre dello slider dall' Arduino stesso che per ora parte da 0.
Idee in proposito....

Luca

Vuoi in pratica che lo slider si sposti da solo quando di connetti col client... dico bene?

Aggiungi il valore alla stringa dove già mandi tutti gli altri con un separatore oppure crei una voce per conto suo
Client.print (valore della PWM)
intercetti da js il valore intero 0-255 e lo mandi al css che aggiorna la pos dello slider

stessa cosa che avevo fatto per la progressbar

// progress bar visualizzazione valore 0-1024 file.js dove analog_dato[0] è quello che mi arriva
//-----------------------------------------------------------------------------
var percent1 = ((analog_dato[0]/1024)*100)+"%"; //fondoscala 1024
document.getElementById("progressbarnum1").innerHTML = analog_dato[0]+" D"; //<<<-- riga che va a modif il testo
document.getElementById("progressbar-complete1").style.width = percent1; //<<<-- riga che va a modific la %

il css style che viene modificato è questo

#progressbar-background1 {background-color: #F7F8E0; width: 100%; height: 100%; position: relative; top: 0; left: 0; }
#progressbar-complete1 {background-color: red; width: 0%; height: 100%; position: relative; top: -14px; left: 0; } //<<<-- riga %
#progressbar1{width: 300px; height: 14px; border: 2px black solid; }
#progressbarnum1{text-align:center;width:250px;}

la parte HTML del client

0

bye

Sei riuscito a farlo funzionare?

ARGH!

Devo provarlo subito su un BaBBuino di prova...

pablos71:
Aggiungi il valore alla stringa dove già mandi tutti gli altri con un separatore oppure crei una voce per conto suo
Client.print (valore della PWM)

Se ho ben capito:
lato server
Come faccio ad identificare a cosa si riferisce il valore che trasmetto?
esempio:
Client.print("valore");
Client.print(r);

pablos71:
intercetti da js il valore intero 0-255 e lo mandi al css che aggiorna la pos dello slider

lato client:
in js una cosa tipo:
var valore = document.getElementById('valore');

poi al posto di:

value: 0,
metto

value: valore,

Mille Grazie

Luca

se guardi l'esempio mio del tinyserver
potrai vedere che arduino invia al client queste 3 stringhe

send_dato_client_DOP = "DOP"+st40+st41+st42+st43+st44+st45+st46+st47+st48+st49; //Digi-Out-Port
send_dato_client_DIP = "DIP"+st38; //input ... pulsante sul pin 39 //Digit-In-Port
send_dato_client_AIP1= "An%0@"+stA0+"#"+"An%1@"+stA1+"#"+"An%2@"+stA2+"#"+"An%10@"+stA10+"#"; //Analogic-Port

client.println(send_dato_client_DOP);
client.println(send_dato_client_DIP);
client.println(send_dato_client_AIP1);
client.println(send_dato_client_AIP2);

stA0 ... stA1 sono i valori ricavati con:
String stA0 = analogRead(PinA0);
String stA1 = analogRead(PinA1);

prendiamo la stringa analogica che è piu difficile AIP1 che è composta da 3 separatori che si ripetono in sequenza
il js principalmente riconosce che la stinga contiene AIP quindi si ferma ed entra in un ciclo di lettura di quella stringa
cerco An e so che subito dopo trovo il numero della porta
poi cerco la @ e # il valore che puo avere sono tutte le cifre che vogliamo, non ha limiti anche le virgole non danno fastidio

| num port | valore analog | num port | valore analog |
An%.....0.......@......25.6................# + An%.....1...........@......855.......................# ecc ecc

quindi otteniamo che tra An% e @so di sicuro di avere il num della porta analog
tra @ e # sono sicuro di leggere il valore intero o con la virgola, chi se ne importa tanto è una stringa che va copiata su una casella


quindi con lo stesso sistema crei un flusso di dati per le PWM

lato arduino sketch:

analogWrite(9, 100);
stP9= analogRead(9); // read the input pin

send_dato_client_PWM= "Pw%9@"+stP9+"#"+"Pw%3@"+stP3+"#"+"Pw%5@"+stP5+"#"; //PWM-Port
client.println(send_dato_client_PWM);

stP9 stP3 stP5 li ho inventati metti tu il num corretto dopo la P

lato js
for (i=0;i<=3;i++) // tante volte quante sono le porte da cercare
{
str_search = "PW%"; // cerca le PWMPort
matchPos = stringa.search(str_search);
if(matchPos != -1)
{
// trovato PW%
// cerchi il carattere sucessivo che è matchpos +1 e lo metti da parte (numero della porta)
// cerchi la @ e il # e prendi tutto quello che c'e' tra pos @ e pos # che puo' essere 1,2 o 3 cifre

//prendi il valore finito e lo butti nel css dello slider
document.getElementById("nome").style.******= valore;
}
}

in pratica devi memorizzarti le posizioni dei marcatori fatto una volta vale per tutte
l'ho fatto qui sul momento quindi qualche errore ci puo' stare :slight_smile:

comunque io invio al client tutte le porte dalla 0 alla 69, il js lo mette in un array [69] e poi mi prendo quelle che mi servono e sono numerate correttamente

ciao

llluca:
[quasi ot] jQuery API .change()

Ciao,

Grazie all' aiuto di pablos71, che sentitamente ringrazio,
sto cercando di capire TinyWebServer, argomento ostico paragonabile, :blush: almeno per me,
a javascript e il suo framework jQuery.
La pagina html che genera un slider i cui valori vengono visualizzati in una textbox
vengono mandati all' Arduino tramite un bottone.
Fi qui tutto bene, 8) ma volendo automatizzare il processo escludendo il bottone di invio e
quindi spedire i dati onchange, banalmente si potrebbe utilizzare onchange='this.form.submit().
Però non mi pare sia la cosa + elegante!
Vorrei fare uso tra le API jQuery .change() ma non so come fare.
di seguito la pagina index.htm

<!DOCTYPE html>
      #demo-frame > div.demo { padding: 10px !important; }; var msg=""; var ind= "/Istruzioni_da_web"; function elabora_dato() {    var testo=document.form1.testo3.value;  document.form1.areatesto.value  + testo + "\n";      $.ajax({type: "POST", data: testo, dataType: "text", cache: false, url: ind,        success:function(risposta)      {                      document.form1.areatesto.value  += risposta ;      }     }); } $(document).ready(    function(){    msg="Connessione.....#";    invia_dati("/Istruzioni_da_web");    });
</script>

<title>prova TinyWebServer  e slider 1</title>
 </head>


 








 
 

 

 

> ``` > > > > Grazie > > Luca

Luca, sto provando la pagina, ma non capisco come ti connetti all'Arduino. Non capisco dove infilare l'indirizzo IP del WebServer

Eccoci babbuino, ci ritroviamo dopo lungo tempo.....
Questa è una pagina caricata sulla SD che si chiama index.htm è lo sketch che la invia al browser quando cerchi arduino sul suo ip.