Go Down

Topic: Confuso tra GET, jQuery, slider con TinyWebServer (Read 1 time) previous topic - next topic

llluca

Jan 24, 2012, 07:17 pm Last Edit: Jan 24, 2012, 07:24 pm by llluca Reason: 1
Ciao
Grazie a pablos71 che mi ha aiutato tantissimo, sono riuscito a variare l' intensità di un led utilizzando
uno slider via jquery.
La parte post non è perfetta ma comunque è funzionante!
ora devo modificare la posizione_slider non da un valore arbitrario di solito 0 ma dal valore passato da arduino,
lo stesso valore che comanda il pwm del led
per intenderci dallo sketck:
Code: [Select]

analogWrite(Pin3, pwm1);
client.print(";");
       client.print(pwm1);
       client.print(";");

 Pensavo che una chiamata GET  jQuery fosse la cosa giusta, come l' esempio messo a disposizione da Alessandro Migliorini,
 ma aimè non funziona.
 ecco 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>
var posizione_slider;
  var arduino_url = "http://192.168.0.200";
var get_url = "getdata";
var arduino_values = new Array();
var values_separator = ";";  // valore per separare i valori in ricezione
//   Funzione per prendere il valore dello slider
function ricevi-dati()
{
$.ajax({             //usiamo jQuery.ajax per la chiamata a/sincrona - http://api.jquery.com/jQuery.ajax/
        type: "GET",
cache: false,
        url: arduino_url,
        data:  get_url,
        success:
        function(result) //creiamo un array dei valori tornati da Arduino, separati da values_separator (es: 13;24;166)
{

arduino_values = result.split(values_separator);
posizione_slider = parseFloat(arduino_value[0] );
//var posizione_slider2 = parseFloat(arduino_value[1] ); //futuri slider
//var posizione_slider3 = parseFloat(arduino_value[2] ); //futuri slider
//risposta-server all'utente?
                    $("#risposta-server").append("Comando ESEGUITO con successo");
                },
      error:
        function()
{
$("#risposta-server").append("Comando Non ESEGUITO ci sono degli errori!");
                }
  });
};
//   Funzione per creare uno slider con jquery
$(function() {


$( "#slider-vertical" ).slider({
orientation: "vertical",
                       //orientation: "horizontal",
//range: "min",
            animate: true,
min: 0,
max: 255,

//value: 0,
value: posizione_slider,// <===Valore dello slider alla partenza della pagina
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" ) );
});

var msg="";
var ind= "/Istruzioni_da_web";


$(document).ready(
   function(){
   msg="Connessione.....#";
   invia_dati("/Istruzioni_da_web");

var posizione = document.getElementById('testo3');
     ricevi-dati();  
   });
var posizione = document.getElementById('slider-vertical');
</script>
<title>prova TinyWebServere slider nono</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>
<div id="risposta-server">risopsta dal server: </div>
 </body>
</html>

 
 
 
 leggo sempre:  Comando Non ESEGUITO ci sono degli errori!
 anche se lo slider fa il suo lavoro  ovviamente al Refresh della pagina lo slider parte da 0.
 
 Grazie

 Luca

pablos

#1
Jan 25, 2012, 12:03 am Last Edit: Jan 25, 2012, 12:14 am by pablos Reason: 1
Ciao Luca, bhe vedo che ti sei dato da fare col jquery  :D, bel lavoro, scusami se ho sospeso il discorso slider, ci sono state le vacanze e ho sospeso un po' tutto.  Se vuoi aggiornarmi ti prometto che in queste sere riprendo l'ambaradan e ci lavoro su, una  una soluzione si trova sempre, se mi vuoi aggiornare su cosa non funziona o cosa non è perfetto, riprendo a studiare i file.

Rimembrami :), il tuo problema era che quando il client si connette ad arduino lo slider varialuce sul browser ti parte da 0 invece di andare sul valore reale del pin pwm?

ciao
no comment

llluca

ciao  pablos ( ?71 :) )
GRAZIE per il tuo preziosissimo aiuto.

Hai esattamente centrato il problema, che io dividerei in due per ragioni di studio.
La pagina iniziale con il valore richiesto
Code: [Select]
var posizione_slider;
E in un secondo tempo un aggiornamento dello stesso valore dovuto ad altro browser o a
Routine future dello  sketck.


Luca

H2SO4

Ho da poco iniziato anch'io a smanettare con l'ethernet shield. Avete, per caso, risolto il problema dello slider?

Grazie

pablos

#4
Jun 29, 2012, 12:57 pm Last Edit: Jun 29, 2012, 01:24 pm by pablos Reason: 1
il problema dello slider lo risolvi leggendo la posizione ogni x tempo,
ad esempio:

se nella stessa funzione js leggi la pos e hai un send dati verso arduino della posizione ottieni una montagna di informazioni da far digerire ad arduino con conseguente crash

la lettura della posizione va fatta ogni xxx ms (400-500) e poi inviata ad arduino per aggiornarlo.


contrariamente per aggiornare la posizione dello slider usando la tinywebserver devi inviare il valore PWM del pin alla funzione ajax che provvederà a spostarlo usando i parametri del CSS


concludendo:
quando sposti tu lo slider a video arduino varierà il valore pwm sul pin
se sarà il software arduino a variare il valore del pin pwm lo slider a video si sposterà da solo

ciao  
no comment

H2SO4

Siccome sono alle prime armi, ti sarei grato se potessi postare le modifiche da aggiungere nel codice di Illuca.

Grazie mille

pablos

Non le ho le sue modifiche a me lo slider non serviva, lo dovrei scrivere il codice, però ti ho detto come si fa.
butta giù qualcosa e ti possiamo aiutare
no comment

Go Up