Récupérér la valeur d'un slider

**Dylan38** · 16/12/2014, 13h53

Bonjour a tous , j'ai un petit soucis avec mon bout de code.

J'aurais besoin d'aide , le but de ma manœuvre est :

Avoir un curseur récupérer la valeur est l'ajouter dans une url , cela réagirai sur une caméra distante.

Le but est que quand je bouge mon curseur sa modifie l'url , par exemple ptz.cgz?pan=Valeur du potentiomettre

Voila mon bout de code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$level = "<output name='amount' for='rangeInput'>0</output>";
<form oninput='amount.value=rangeInput.value'>
        <input type='range' id='rangeInput' name='rangeInput' min='0' max='100'>
        <a href='ptz.cgi?pan=$level'>".$level."</a>
</form>

A mon second $level j'ai bien la valeur , mais apres mon ?pan=$level j'ai la forumle qui apparait ..

Je vous remercie d'avance ,

Cordialement , Dylan

**ryan** · 16/12/2014, 16h43

Yop!

Je crains que tu ne mélanges allègrement scripting côté serveur (PHP, avec ses variables qui commencent par $) et scripting côté client (javascript )

La première chose à savoir est: quand tu bouges ton curseur, est-ce que la caméra réagit automatiquement, ou bien dois-tu cliquer sur un hyperlien pour voir la caméra réagir?

**Dylan38** · 16/12/2014, 21h20

Merci d'avoir répondu

Je suis en train de regarder pour faire un curseur en jquery , seul soucis je n'y connais pas grand chose j'aimerais en fais , faire en sorte que quand je bouge mon slider sa envoie une requête "ptz.cgi?pan= valeur du slider" je sais pas si on peut vraiment appeler sa une requête car quand on ce connecte au lien et quon met une valeur la caméra bouge toute seul jusqu'à la valeur.

Merci d'avance
Cordialement , Dylan

**ryan** · 16/12/2014, 21h59

Yop!

Je ne connais pas du tout ce truc de caméra...tu peux nous montrer ce que tu as pour l'instant?

**Dylan38** · 23/12/2014, 10h09

Salut , désoler d’avoir mis un peut de temps a répondre j'ai eu pas mal d'occupation , donc je vais te faire parevenir un exemple d'ici la fin de journée , si tu veux je peut t'envoyer une page que j'ai fais avec des bouton par MP car la caméra utiliser est dans le dépot au boulot et donc je ne veux partager qu'aux personne qui m'aider pour eviter que tout le monde fasse joujoue avec

J'aimerais faire un slider qui en fait bougerai la camera en fonction de sa valeur ,

Le principe serai qu'a chaque fois qu'on déplace le curseur sa envoie une "requête" .
Ce n'est pas vraiment une requête car ce qu'on lui demande c'est en cliquant sur car en fais pour lui dire de tourner a droite voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href=ptz.cgi?move=right style=text-align:right ><img src=images/droite.png></img></a>

Et la ce que je suis en train de faire a mon curseur j'arrive a faire apparaitre la valeur mais je n'arrive pas a intégrer un lien qui serai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="ptz.cgi?rpan=100"> </a>

directement au déplacement du curseur

L'état du curseur actuel : Regarde ICI

Voila le script que j'utilise mais c'est très basique étant limiter dans la connaissance du javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery(function($) {
    $('.range').each(function(){
       var cls = $(this).attr('class');
       var elem = $(this).parent();
       var options = {};
 
       elem.append('<div class="uirange"></div>');
 
       options.slide = function(event, ui){
           elem.find('label span').empty().append(ui.value);
           elem.find('input').val(ui.value);
       }
       elem.find('.uirange').slider(options);
       elem.find('input').hide();
    });
});

Merci a toi

**ryan** · 24/12/2014, 14h13

Yop!

En gros, tu voudrais simuler un clic sur un lien avec ton slider. Je crains que simuler un clic sur un hyperlien en javascript ne pose quelques problèmes de sécurité, mais on peut par contre utiliser window.location.href pour recharger la page avec une nouvelle URL.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
	<script type="text/javascript"> 
	jQuery(function($) {
		var slider;
		$('.range').each(function(){
			var cls = $(this).attr('class');
			var elem = $(this).parent();
			var options = {};
 
			elem.append('<div class="uirange"></div>');
 
 
			options.slide = function(event, ui){
				elem.find('label span').empty().append(ui.value);
				elem.find('input').val(ui.value);
 
				// place la bonne valeur dans l'hyperlien avec l'id panoramix
 
				$("#panoramix").attr("href","http://monlien/ptz.cgi?pan=" + ui.value);
 
			}
 
 
			elem.find('.uirange').slider(options);
			elem.find('input').hide();
 
			// quand on relache la souris, provoque le saut vers la page de l'hyperlien panoramix
 
			$('.uirange').mouseup(function() {
				window.location.href = $("#panoramix").attr("href") ;
			});
 
		});
 
	});
	</script>
 
    </head>
	<body>
		<div class="input"></div>
		<a id="panoramix" href="http://monlien/ptz.cgi?pan=0"></a>
		<input class="range">
    </body>
</html>

Si cela fonctionne effectivement, ce que je ne peux tester, il reste à régler un problème: le code javascript "window.location.href...." n'est exécuté que quand on relache la souris en étant sur le curseur en lui-même. Si tu sors du curseur en fin de mouvement, rien ne se passe. Il faudrait donc ajouter un peu de code pour gérer cela. Peut-être placer le code "mouseup" sur la fenêtre au lieu du curseur, avec un variable qui permettrait de détecter un changement dans la valeur du curseur et n'exécuterait le ""window.location.href...." qui si elle a été modifiée.

**Dylan38** · 28/12/2014, 12h06

Salut Ryan , merci beaucoup a toi pour ton aide , ton script est fonctionnel comme je cherchais a faire mais avec mes peux de connaissance je cherchais plein de tutos afin de comprendre le javascript , aurais tu un lien pour que je puisse comprendre comment ton script marche ?

Sinon il a les bonne fonctionnalité et fais tourner la camera comme il faut.

Merci encore tu ma refais ma journée

**ryan** · 28/12/2014, 16h01

Yop!

Envoyé par Dylan38

aurais tu un lien pour que je puisse comprendre comment ton script marche ?

Une introduction à Jquery: http://pckult.developpez.com/tutorie.../introduction/
Le manuel en français : http://www.jquery-fr.com/

Mais pour commencer, un cours de base sur javascript, histoire de comprendre les fondamentaux, ne peut pas faire de tort: http://javascript.developpez.com/cours/

Si ton problème est résolu, n'oublie pas de marquer cette discussion comme résolue également.

**Dylan38** · 28/12/2014, 16h55

Salut

Il est bientot résolu , il me reste juste a trouver comment faire pour avoir 3 slider ,

_ Le premier est celui qui permet de faire tourner la camera gauche et droite (Fonctionne parfaitement avec ton script et qui a pour valeur ptz.cgi?pan=Valeurslide)
_ Le second est celui qui permettera de faire tourner la camera (Qui a pour valeur ptz.cgi?tilt=Valeurslide)
_ Le troisieme servira a faire des zoom

Le soucis est que quand je duplique ton script , je n'arrive pas a dissocier les commande

Main.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
jQuery(function($) {
		var slider;
		$('.range').each(function(){
			var cls = $(this).attr('class');
			var elem = $(this).parent();
			var options = {
      range: "min",
      min: -90,
      max: 0,
      value: -45};
 
			elem.append('<div class="uirange"></div>');
 
 
			options.slide = function(event, ui){
				elem.find('label span').empty().append(ui.value);
				elem.find('input').val(ui.value);
 
				// place la bonne valeur dans l'hyperlien avec l'id panoramix
 
				$("#panoramix").attr("href","ptz.cgi?pan=" + ui.value);
 
			}
 
 
			elem.find('.uirange').slider(options);
			elem.find('input').hide();
 
			// quand on relache la souris, provoque le saut vers la page de l'hyperlien panoramix
 
			$('.uirange').mouseup(function() {
				window.location.href = $("#panoramix").attr("href") ;
			});
 
		});
 
		var slider2;
		$('.range2').each(function(){
			var cls2 = $(this).attr('class');
			var elem2 = $(this).parent();
			var options2 = {orientation: "vertical",
      range: "min2",
      min: -180,
      max: 180,
      value: 0};
 
			elem2.append('<div class="uirange2"></div>');
 
 
			options2.slide = function(event, ui){
				elem2.find('label2 span2').empty().append(ui.value);
				elem2.find('input2').val(ui.value);
 
				// place la bonne valeur dans l'hyperlien avec l'id panoramix
 
				$("#panoramix2").attr("href","ptz.cgi?tilt=" + ui.value);
 
			}
 
 
			elem2.find('.uirange2').slider(options);
			elem2.find('input2').hide();
 
			// quand on relache la souris, provoque le saut vers la page de l'hyperlien panoramix
 
			$('.uirange2').mouseup(function() {
				window.location.href = $("#panoramix2").attr("href") ;
			});
 
		});
 
 
	});

Et mon index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/1.8.4/themes/excite-bike/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
	<script type="text/javascript" src="main.js"></script>
    </head>
	<body>
		<div class="input"></div>
		<a id="panoramix" href="ptz.cgi?pan=-45"></a><label><span></span></label>
		<input class="range">
 
 
		<br/>
 
		<div class="input2"></div>
		<a id="panoramix2" href="ptz.cgi?tilt=-45"></a><label><span></span></label>
		<input class="range2">
		<br></br>
 
    </body>
</html>

Soucis , j'ai qu'un slider qui apparait.

Merci encore Ryan

Et pour voir a quoi sa ressemble c'est ICI

Merci encore pour ton aide

**Dylan38** · 29/12/2014, 08h47

Salut !

Voilai j'ai pas mal rechercher pour savoir comment rajouter des curseurs et c'est chose faite , j'aurais une derniere question , est-ce possible de chaque coter du slider mettre des bouton (gauche et droite) afin que quand on clique sur celui ci sa déplace le slider ?

Merci encore

**ryan** · 29/12/2014, 10h45

Yop!

Tout est possible, ou presque.

Mais il faut se poser quelques questions préalables:
- est-ce que tu vas travailler "au clic": un clic sur le bouton déplace le curseur du slide d'une valeur donnée (déterminer un pas d'incrémentation)
- est-ce que tu vas travailler "à la pression" (rien à voir avec la bière): tant que le bouton de la souris est enfoncé, le curseur bouge (dans ce cas, il faut déterminer un pas d'incrémentation ET un certain intervalle de mise à jour, du genre un clic d'une seconde provoque 10 sauts d'incrémentation)

La réponse à ces questions va évidement influencer le nombre de fois que tu feras un appel au cgi qui gère la caméra.

Dans les deux cas, l'événement à surveiller sera le mouseup des boutons.

Reste la question de faire bouger le curseur sur le slide. L'input de type range a une propriété "value", ce qui est certain c'est qu'elle peut être lue, mais il faut tester pour voir si elle peut être écrite.

Récupérér la valeur d'un slider

JavaScript

Discussions similaires

Partager

Partager