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:
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:
<!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
)