Go Down

Topic: [quasi ot] jQuery API .change() (Read 2 times) previous topic - next topic

BaBBuino

Sei riuscito a farlo funzionare?

ARGH!

Devo provarlo subito su un BaBBuino di prova...

llluca

#16
Dec 12, 2011, 07:23 pm Last Edit: Dec 12, 2011, 09:08 pm by llluca Reason: 1

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);


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

pablos

#17
Dec 12, 2011, 11:34 pm Last Edit: Dec 12, 2011, 11:46 pm by pablos71 Reason: 1
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 :)

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
             

no comment

BaBBuino


[quasi ot]  jQuery API .change()

Ciao,

Grazie all' aiuto di pablos71, che sentitamente ringrazio,
sto cercando di capire TinyWebServer, argomento ostico paragonabile, :smiley-red:  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
Code: [Select]
<!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





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

pablos

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.
no comment

BaBBuino

Ok, io la ho in PROGMEM e client.println(). Non dovrebbe cambiare una fava direi.

L'ultima che sono riuscito a fare è inserire nella pagina un pulsante (a cul0 perchè nemmeno ricordo come ho fatto) che preleva il valore spippolato dallo slider e lo spedisce come stringa ad arduino.

In realtà non spedisce niente, ma mi apre la finestra del BaBBuino con già il valore passato.

Un pò come se avessi digitato nella barra degli indirizzi, non solo l'IP, ma anche la stringa con il valore:

http:\\192.168.1.4\?L=50  dove L=50 significa luce al 50%

pablos


Ok, io la ho in PROGMEM e client.println(). Non dovrebbe cambiare una fava direi.

chiaro come il sole... si se la inserisci nel PROGMEM  non cambia una fava LOL
no comment

BaBBuino



Ok, io la ho in PROGMEM e client.println(). Non dovrebbe cambiare una fava direi.

chiaro come il sole... si se la inserisci nel PROGMEM  non cambia una fava LOL


Mi sono sbagliato nel confondermi e tu sei un pò strunz XD che non me lo hai detto subito (ci sono stato anche 2 min a pensarci sopra!!!).

Adesso guardo bene e ricompilo perchè non funziona!

pablos

Quote
Mi sono sbagliato nel confondermi e tu sei un pò strunz smiley-lol

anch'io mi sono sbagliato nel confondermi pensavo che tu fossi più strunz di me !!!  :D :D :D :D :D :D :D
no comment

llluca

ciao,
Chiedo scusa per la mia assenza, ma per motivi di lavoro sono fuori sede.
Non posso quindi fare le prove, per integrare il codice  di   pablos71

(il mio Arduino è rimasto a casa al calduccio.) :)

Pablos ti ringrazio per i suggerimenti. Mi permetterò di disturbarti quando torno.

Luca

P.S. il sito  se uso una chiavetta è lentissimo !


BaBBuino

Luca, ho infilato il tuo codice dentro il baBBuino, si apre la pagina, ma muovendo il cursore non si muove...

Cioè, il cursore dello slider rimane in basso, però i numeri nella TBox, clikkando e tirando su il mouse, si modificano correttamente.

Insomma il cursore grigio rimane piantato in basso.

Un'altra domanda: come passi il valore dello slider al codice del BaBBuino?

P.s. Il forum è LENTISSIMO con chiavetta o senza chiavetta!

llluca


Luca, ho infilato il tuo codice dentro il baBBuino, si apre la pagina, ma muovendo il cursore non si
...
Cioè, il cursore dello slider rimane in basso, però i numeri nella TBox, clikkando e tirando su il mouse, si modificano correttamente.
Insomma il cursore grigio rimane piantato in basso.

Ciao,
il codice :
Sul mio Arduino funziona benissimo e modifico l' intensità di un led senza problemi.
Ti ricordo  che devi essere collegato a internet o devi mettere tutto su sd card per avere jquery.

Un'altra domanda: come passi il valore dello slider al codice del BaBBuino?

Allora.....
< :)>
Prima di far cadere dalla sedia Pablos che poi ti dice di .....
una parola che inizia col La S e finisce con la ARE
</ :)>
Molto semplicemente uso javascript:
Code: [Select]
$.ajax({type: "POST", data: $( "#testo3" ).val( ui.value ), dataType: "text", cache: false, url: ind,   
                                              success:function(risposta)
                                                     { document.form1.areatesto.value  += risposta ;}    });
                        }    });


Spero di essere stato di aiuto

Luca

BaBBuino

Zio can, l'ho scritto 2 volte in maniera diversa!

Eppure lanciato come file HTML, sul PC funziona.

Non si muove lo slider...

Code: [Select]
   //Scrivo l'intestazione
          client.println("<!DOCTYPE html><html>");
      //   client.println("<META http-equiv=REFRESH content=3; url=/ >");
      //  client.println("<meta http-equiv=\"Refresh\" content=\"2; URL=192.168.1.4>");
          client.println("<head>");
          client.println("<link href=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css\" rel=\"stylesheet\" type=\"text/css\"/>");
          client.println("<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js\"></script>");
          client.println("<script src=\"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js\"></script>");
          client.println("</head>");
          client.println("<style>#demo-frame > div.demo { padding: 10px !important; };</style>");         
         
          client.println("<script>");
          client.println("$(function() {");
          client.println("$( \"#slider-vertical\" ).slider({");
          client.println("orientation: \"vertical\",");
          client.println("range: \"min\",");
          client.println(" animate: true,");
          client.println("min: 0,");
          client.println("max: 255,");
          client.println("value: 0, ");
          client.println("slide: function( event, ui ) {");
          client.println("$( \"#testo3\" ).val( ui.value );");
          client.println("$.ajax({type: \"POST\", data: $( \"#testo3\" ).val( ui.value ), dataType: \"text\", cache: false, url: ind,   ");
          client.println(" success:function(risposta) ");
          client.println(" { document.form1.areatesto.value  += risposta ;}    });");
          client.println("  }    });");
          client.println("$( \"#testo3\" ).val( $( \"#slider-vertical\" ).slider( \"value\" ) );");
          client.println("});</script><script>var msg="";");
          client.println("var ind= \"/Istruzioni_da_web\"");
          client.println("$(document).ready(");
          client.println("function(){ ");
          client.println("msg=\"Connessione.....#\";");
          client.println("invia_dati(\"/Istruzioni_da_web\");");
          client.println("});</script><title>prova TinyWebServere e slider on change OK</title></head><body><div class=\"demo\">");
          client.println(" <form name=\"form1\"><textarea cols=\"80\" rows=\"1\" id=\"textareaname\" name=\"areatesto\"></textarea>");
          client.println("<p><input type=\"text\"  name=\"testo3\" id=\"testo3\"  style=\"border:1; color:#ff0000; font-weight:bold;\" /></p>");
          client.println("</form><p><div id=\"slider-vertical\" style=\"height:200px;\"></div></p></div></body></html>");


//client.println("</table>");
//--------------------------------------------

         
break;

lesto

sicuro non sia un problema del browser?
sei nuovo? non sai da dove partire? leggi qui: http://playground.arduino.cc/Italiano/Newbie

BaBBuino

Ho ripreso pari pari il codice, l'ho copiato su un editor HTML, gli ho levato le sovrastrutture del C (client.println, parentesi e virgole varie) e così rifunziona, lo slider si muove su e giù.

Solo quando è infilato dentro l'Arduino lo slider (pur comparendo) rimane piantato in basso a zero.

Il Browser è Mozilla, visto che Explorer non lo supporta.

Go Up