11521 sujets

JavaScript, DOM et API Web HTML5

Interface de controlle web pour un robot

Bonjour,

Je suis actuellement entrain de réaliser une interface en html permettant de contrôler un robot. Je suis novice et j'ai seulement commencé il y 2 jours donc je créé l'interface tout en apprenant.
Voici le html que j'ai créé :


<html>

<head>
	<title>CommandeRobotSpectro</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>

	<script src="C:\Users\Maxime\Desktop\HTML\page robot\jquery-1.12.3.min.js">
	</script>
	
	<script>


	$(document).ready(function(){
		$("#stop").click(function(){
			$("#stop").css({background:'#F20D0D'});
		});
	});

	$(document).ready(function(){
		$("#fh").click(function(){
			$("#fl1").attr("src","haut1.png");
		});
	});

	$(document).ready(function(){
		$("#fb").click(function(){
			$("#fl2").attr("src","bas1.png");
		});
	});

	$(document).ready(function(){
		$("#fg").click(function(){
			$("#fl3").attr("src","gauche1.png");
		});
	});

	$(document).ready(function(){
		$("#fd").click(function(){
			$("#fl4").attr("src","droite1.png");
		});
	});

	$(document).ready(function(){
    		$("#acq").click(function(){
        		$("#cadreacq").animate({height: "470px"}); 
        	});
    	});

	</script>
</head>

<body>
	<button id="acq">ACQUISITION</button>
	<h1 id="t1">COMMANDE ROBOT</h1>
	<h2 id="stoptxt">STOP</h2>
	<button id="fh"><img id="fl1" src="haut.png" alt="haut" /></button>
	<button id="fb"><img id="fl2" src="bas.png" alt="bas" /></button>
	<button id="fg"><img id="fl3" src="gauche.png" alt="gauche" /></button>
	<button id="fd"><img id="fl4" src="droite.png" alt="droite" /></button>
	<div id="c1"></div>
	<div id="c2"></div>
	<div id="c3"></div>
	<div id="c4"></div>
	<div id="stop"></div>
	<div id="cadre"></div>
	<h2 id="ctrl">CONTRÔLE</h2>
	<div id="cadreacq"></div>
</body>

</html>




Pour l'instant mon interface fonctionne de cette façon :

Je dispose de 5 boutons :
- 4 flèches directionnelles qui sont des png
- un bouton stop qui est une div
Lorsqu'on clic sur un des boutons il change de couleur (partie du code en script) ( il passe du bleu au vert pour les flèches et du bleu au rouge pour le bouton stop). Pour l'instant la couleur reste fixe et ne se modifie plus par la suite.

Mon objectif est le suivant:

Lorsqu'on clic sur un bouton, je veux que ce bouton en question change de couleur mais que tous les autres retournent à leurs couleurs d'origines. Par exemple, je clic sur la flèche du haut, le bouton passe en vert, ensuite je clic sur la flèche de droite; ce bouton passe en vert et le bouton de la flèche du haut redevient bleu (la couleur de base).

Pour cela j'ai pensé à utiliser une condition "if":

if -> on clic sur le b1 (bouton1)
instructions -> b1>vert & b2>bleu & b3>bleu etc....

else if -> on clic sur b2 (bouton2)
instructions -> b1>bleu & b2>vert & b3>bleu etc....

Problème: je ne peux pas créer de liste d'instruction. De plus, je pensais utilisé des class mais la différence entre mes boutons pose problème. En effet, vu que mon "#stop" et une div qui change de background-color; et mes flèches des png qui change de sources ( en gros j'ai un png avec une flèche bleu et un second avec la meme flèche en verte).

Donc voilà je commence à sécher en termes de solutions, si vous avez des petits indices à me donner je suis prenneur Smiley biggrin
Tu dois à mon avis passer par des addclass et removeclass,

tu dis que tu ne peux pas passer par une liste d'instruction ? pourquoi ? c'est quand même la base.
et ensuite, tu peux gérer cela en javascript pure, avec un event onclick HTML qui passe en argument le nom de ta source pour chaque button et qui supprime tous les autres effet appliquer (via là aussi, des if).

edit:

et ton jquery , si tu compte le garder, adapte le en terme de place Smiley smile 

	$(document).ready(function(){
		$("#stop").click(function(){
			$("#stop").css({background:'#F20D0D'});
		});

		$("#fh").click(function(){
			$("#fl1").attr("src","haut1.png");
		});

		$("#fb").click(function(){
			$("#fl2").attr("src","bas1.png");
		});

		$("#fg").click(function(){
			$("#fl3").attr("src","gauche1.png");
		});

		$("#fd").click(function(){
			$("#fl4").attr("src","droite1.png");
		});

    		$("#acq").click(function(){
        		$("#cadreacq").animate({height: "470px"}); 
        	});
    	});

Modifié par JENCAL (14 Apr 2016 - 13:44)
et puis au pire, rien ne t'empeche de faire ceci : 

$("#fh").click(function(){
			$("#fl1").attr("src","haut1.png");
			$("#fl2").attr("src","bas.png");
			$("#fl3").attr("src","gauche.png");
			$("#fl4").attr("src","droite.png");
		});

		$("#fb").click(function(){
			$("#fl1").attr("src","haut.png");
			$("#fl2").attr("src","bas1.png");
			$("#fl3").attr("src","gauche.png");
			$("#fl4").attr("src","droite.png");
		});

		$("#fg").click(function(){
			$("#fl1").attr("src","haut.png");
			$("#fl2").attr("src","bas.png");
			$("#fl3").attr("src","gauche1.png");
			$("#fl4").attr("src","droite.png");
		});

		$("#fd").click(function(){
			$("#fl1").attr("src","haut.png");
			$("#fl2").attr("src","bas.png");
			$("#fl3").attr("src","gauche.png");
			$("#fl4").attr("src","droite1.png");
		});
Ok je vois mon erreur de départ, je récupéré $(document).ready(function(){ pour chaque condition, du coup ça ne fonctionnait pas.

T'as deuxième méthode fonctionne bien, mais vu que j'ai envie d'en apprendre un peu plus, je vais essayer de réaliser le event onclick HTML.

Qu'est-ce que tu veux dire par passer en argument le nom de la source pour chaque bouton ? Tu serais ou je peux chercher pour trouver des tutos qui explique ce genre de fonctionnement ?
en gros dans mon idée, tu pourrais avoir une méthode JS ressemblant à cela : 

function my_function(monIDImage, nomSourceImage){
   document.getElementById(monIDImage).src= nomSourceImage;
}


Et dans chaque boutton tu aurais un

<button onclick="my_function('IdDeLimageCible','sourceVoulue');"> </button>

exemple concret : 

<button id="fh" onclick="my_function('fl1','haut1.png');" ><img id="fl1" src="haut.png" alt="haut" /></button>
à adapter pour chaque button.

Bien entendu, cette fonction seul ne reglera pas ton probleme pour revenir sur l'image du début. Mais c'est très simple à faire.
Modifié par JENCAL (14 Apr 2016 - 14:26)
MatthieuR a écrit :
Salut,

Si j'ai bien compris ton idée, je viens de faire ça : http://codepen.io/korell/pen/dMmmzB
Est-ce un truc comme ça que tu cherches à faire ?
J'utilise un sprite en image de fond que je déplace en fonction des éléments.
https://i.imgsafe.org/3b25699.png


Yep c'est bien ce système. Je vois à peu près le système que tu utilises. Pour l'instant la méthode précédente fonctionne, mais je garde ton lien parce que je pense que je peux faire des effets beaucoup plus propre avec, merci!
JENCAL a écrit :
en gros dans mon idée, tu pourrais avoir une méthode JS ressemblant à cela : 

function my_function(monIDImage, nomSourceImage){
   document.getElementById(monIDImage).src= nomSourceImage;
}


Et dans chaque boutton tu aurais un

&lt;button onclick="my_function('IdDeLimageCible','sourceVoulue');"&gt; &lt;/button&gt;

exemple concret : 

&lt;button id="fh" onclick="my_function('fl1','haut1.png');" &gt;&lt;img id="fl1" src="haut.png" alt="haut" /&gt;&lt;/button&gt;
à adapter pour chaque button.

Bien entendu, cette fonction seul ne reglera pas ton probleme pour revenir sur l'image du début. Mais c'est très simple à faire.


Ok je vois le principe, ben je vais continuer à m'interesser au sujet parce que j'en suis pas encore là dans mon apprentissage Smiley biggrin . Merci à tous pour votre aide, ça me sera utile pour la suite je pense Smiley cligne
JENCAL a écrit :
en gros dans mon idée, tu pourrais avoir une méthode JS ressemblant à cela : 

function my_function(monIDImage, nomSourceImage){
   document.getElementById(monIDImage).src= nomSourceImage;
}


Et dans chaque boutton tu aurais un

&lt;button onclick="my_function('IdDeLimageCible','sourceVoulue');"&gt; &lt;/button&gt;

exemple concret : 

&lt;button id="fh" onclick="my_function('fl1','haut1.png');" &gt;&lt;img id="fl1" src="haut.png" alt="haut" /&gt;&lt;/button&gt;
à adapter pour chaque button.

Bien entendu, cette fonction seul ne reglera pas ton probleme pour revenir sur l'image du début. Mais c'est très simple à faire.


Ok je vois le principe, ben je vais continuer à m'interesser au sujet parce que j'en suis pas encore là dans mon apprentissage Smiley biggrin . Merci à tous pour votre aide, ça me sera utile pour la suite je pense Smiley cligne
Sujet clos
Aller à