[RESOLU] Bouton poussoir avec image

Eléphant du PHP | 160 Messages

06 mai 2013, 16:46

Bonjour,

Bon pour commencer ça va mal, je n'arrive pas à poser ma question sur votre forum :

This message was flagged as spam and has been denied.

J'avais ça avant de m'être inscrit, je me suis dis, aller bon, ok les bots sont relou je comprend, je m'inscrit pour éviter la discrimination, et BAM lol, la même chose.

Comment vous poser ma question vu que mon message ne passe pas ?

(Bon certes ça c'est déjà une première question :p)

Édit : .... Nan mais nan... J'ai voulu vous mettre mon problème en piece jointe en .txt, rejeté... .pdf, .jpg, .gif, .probleme, .docx tout à été rejeté... Et là dans un dernier élan je le met en .rar et là ça passe... Je n'y comprend rien...

Bref mon problème en pieces jointe, enlevé juste le .rar ;)


Modération : ajout du message d'origine


Bonjour bonjour,

Je suis un pauvre automaticien qui se retrouve avec un client qui veux piloté son système depuis son PC tranquillement de chez lui.
Son automate ne permet pas une supervision digne de se nom donc je suis en train de lui faire une bidouille comme je sais si bien les faire ^^'.

Je requière votre aide parce que j'ai commencé le PHP il y à environs une semaine (avec la demande du client) j'ai mis en place wamp et tout, j'ai appris plein de chose je m'amuse comme un ptit fou mais là...

Il y a un truc que je ne comprend pas, voyez vous j'ai se code :

Code : Tout sélectionner

echo '<form><input type="image" name="image_envoi1" img src="1.png" OnMousedown="window.location.href=\'Commande1.php?mot=1&valeur=10\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"></form>';
Qui me permet en restant appuyé sur l'image de mon bouton poussoir, d'envoyer un valeur dans une BDD (après avec un programme interface je récupère ce qui est dans la BDD pour forcer les mots de l'automate, bref), qui correspond donc à une action sur l'automate. Quand je relâche, rebelote, une autre valeur est envoyé et cette valeur correspond au repos.

Or mon soucis, c'est que ça ne fonctionne pas. Enfin si, mais bizarrement :p

Quand je clic dessus et relache, je devrais être au repos... Et bien je suis en marche. Et si je clic à coté et que je glisse dessus pour ensuite relacher, je revient bien au repos. Fort non :)

Non ? Plus fort ? Ok.

Quand je change le type="image" en type="radio"||"checkbox"||"button" le fonctionnement est bien comme je l'attends !!! Mais j'ai pas d'image :'(

Bon aller j'espère que je vous ai bien fait rire :) mais quelqu'un aurait une idée pour solutionner mon problème ? ;)

Merci de m'avoir lu.
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

06 mai 2013, 17:12

salut,

le problème c'est que spam n'est pas fait que par les bot.
Le fait t'interdire les liens évite ce genre de chose (idem pour mes pj qui peuvent contenir des codes 'malicieux').


Pour poser ta question tu peux nous faire de belle phrase et indiquer ton code avec ;)

Cela permettra a tout le monde de voir de quoi il en retourne sans devoir télécharger une archive ou un fichier text


Tu effectue une redirection c'est louche. Une requête ajax semble être plus indiqué.
Une fonction javascript qui prend en paramètre la valeur à envoyer et qui effectue la requête ajax.

L'avantage c'est que tu peux contrôler le déroulement de la chose et afficher un erreur en cas de besoin, modifier une image pour indiquer l'état etc etc.

Si tu as besoin de pas mal de truc du genre tu peux t'orienter vers un framework javascript comme JQuery qui te simplifiera la tache (rien que pour la requête ajax mais aussi pour la gestion des éventements).

@+
Il en faut peu pour être heureux ......

Eléphant du PHP | 160 Messages

07 mai 2013, 08:36

Bon s'il vous plait, faut m'expliquer ce que j'écris qui ne va pas...

Mon message en image...

Édit : Je viens d'essayer avec des boutons radio et label pour les associer à leur image et le soucis c'est que l'image n'a pas les propriété de la puce :'( Ma puce remplis bien la fonction que je demande, mais donc l'image non.

Je cherche encore :)
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Eléphant du PHP | 160 Messages

07 mai 2013, 10:37

Désolé pour le double post, mais c'est parce que je me répond.

Bon ce que j'ai fait n'est certainement pas très propre, c'est pour cela que j'attends encore vos conseille mais ça fonctionne comme je le désirais.

En fait, j'ai juste affiché une image avec la propriété OnMousedown et OnMouseup comme ceci :
echo '<img src="1.png" onmousedown="window.location.href=\'Commande1.php?mot=1&valeur=10\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/>';
Et cela fonctionne.

Qu'en pensez vous ?

(Ohh du premier coup il passe mon message :D, est-ce que la longueurs du message pourrait jouer dans le filtre de spam ? Je sais que je m'étale pas mal ^^')

Édit : j'ai maintenant une autre question par contre. En effet mes "boutons" sont sur deux étages (deux rangées de 5 boutons), entre mes boutons d'une même ligne, aucun espace, c'est chouette. Par contre entre les deux lignes, j'ai un espace assez conséquent qui n'est pas du plus bel effet :/
Y a t-il autre chose que le <br> pour revenir à la ligne sans espace ?

Merci :)
Modifié en dernier par Lyssorus le 07 mai 2013, 10:58, modifié 1 fois.

Mammouth du PHP | 619 Messages

07 mai 2013, 10:57

Bonjour,

comme la dit moogli cela ne reste pas tres propre de faire une redirection

1 ) tu mets ton image avec un id
2 ) tu creer une fonction

[javascript]

function sendPhp(statut){

$.ajax({
type: "POST",
data: {statut : statut},
url: "./fichier.php",
success:function(data){
//ici tu peux ajouter ajouter une image ou text pour dire que cela c'est bien passe
}
});

}

[/javascript]


3 ) en ajax jquery tu mets sur ton id deux événements et tu appelles la fonction sendPhp('1'); ou 0 a ton fichier php

Eléphant du PHP | 160 Messages

07 mai 2013, 11:16

Bonjour Ghost5922 et merci.

Alors je pense que j'ai à peu près compris comment faire ce que tu as expliqué, mais la fonction sendPhp fait une redirection aussi non ? (désolé hein, mes connaissances sont vraiment limitée :/)

En fait dans ma deuxième page j'effectue des opérations sur un BDD.

Bah je vais mettre tout le code il n'y en a pas pour bien long ^^'

L'index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page de test</title>
</head>
<?
echo '<img src="1.png" onmousedown="window.location.href=\'Commande1.php?mot=1&valeur=10\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/>';
echo '<img src="2.png" onmousedown="window.location.href=\'Commande1.php?mot=1&valeur=01\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/>';
echo '<img src="3.png" onmousedown="window.location.href=\'Commande1.php?mot=2&valeur=00\'"/>';
echo '<img src="4.png" onmousedown="window.location.href=\'Commande1.php?mot=3&valeur=10\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/>';
echo '<img src="5.png" onmousedown="window.location.href=\'Commande1.php?mot=3&valeur=01\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/><br>';
echo '<img src="6.png" onmousedown="window.location.href=\'Commande1.php?mot=4&valeur=10\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/>';
echo '<img src="7.png" onmousedown="window.location.href=\'Commande1.php?mot=5&valeur=10\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/>';
echo '<img src="8.png" onmousedown="window.location.href=\'Commande1.php?mot=5&valeur=01\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/>';
echo '<img src="9.png" onmousedown="window.location.href=\'Commande1.php?mot=4&valeur=01\'" OnMouseup="window.location.href=\'Commande1.php?mot=1&valeur=00\'"/>';
?>
<body>
</body>
</html>
Commande1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Envoi</title>
</head>
<?
mysql_connect("localhost","user",""); 
mysql_select_db("test");

$sql = 'UPDATE mots SET Valeurs = '.$valeur.' WHERE ID = '.$mot;
mysql_query($sql);

mysql_close();
?>

<script>
window.history.go(-1); 
</script>
<body>
</body>
</html>
Et voilà à quoi ressemble ma "Boite à boutons" à l'écran avec le fameux espace entre les deux lignes de boutons.

Le truc c'est que ça sert à piloter un appareille motorisé. Donc il faut qu'un appuis sur un bouton lance le mouvement, et que le fait de relâcher le bouton stop le mouvement.
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Mammouth du PHP | 619 Messages

07 mai 2013, 11:23

Bonjour,

non avec ajax tu ne pas pas recharger ta page en faite quand tu vas cliquer sur ton image il va simplement passer des paramètre a ta page php comme si tu avait créer une fonction sur la même page

Eléphant du PHP | 160 Messages

07 mai 2013, 11:41

Et donc exécuter le code comme si j'étais aller dessus ?

C'est clair que se serait mieux qu'il n'y ai pas le petit saut de l'image au moment du clic.

Je vais essayer de faire ça.

:)

Merci bien.

Heuu par contre, je dois mettre d'autre chose avec mes pages php dans mon répertoire ou le ajax sera interprété comme il faut par le serveur ?

Mammouth du PHP | 619 Messages

07 mai 2013, 11:44

Bonjour,

ajax va récupérer comme si la page été appelle par un navigateur

Mammouth du PHP | 619 Messages

07 mai 2013, 11:54

un petit exemple grossier donc a améliorer mais pour te faire voir un peu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title>Page de test</title>
<script type="text/javascript">

$(document).ready(function () {

	function sendPhp(id,statut){
	  $.ajax({
		  type: "POST",
		  data: {statut : statut},  
		  url: "./fichier.php",
		  success:function(data){
				  //ici tu peux ajouter ajouter une image ou text pour dire que cela c'est bien passe
		  }
	  });
	}
	  
	  $(".gauche").click(function(){
		  var id=$(this).attr("id");
		  sendPhp(id,'1');		  
	  });
	  
	  $(".droite").click(function(){
		  var id=$(this).attr("id");
		  sendPhp(id,'0');		  
	  });
  
  

});

</script>
</head>

<body>
<img src="1.png" id="1" class="gauche"/>
<img src="2.png" id="1" class="droite"/>
<img src="3.png" id="2" class="gauche"/>
<img src="3.png" id="2" class="droite"/>
</body>
</html>
 
et dans php si statut==0 alors -10 si statut==1 +10 et a chaque clique tu peu modifie l'angle ou apres un mouseover et un stop sur un autre event

Eléphant du PHP | 160 Messages

07 mai 2013, 12:18

Tu vas rire (enfin j'espère) mais je crois que je suis en train de me paumer sévère ^^'

Bon on met le script dans le head ça j'ai vu, la fonction sendPhp, elle à deux paramètres c'est ça ? id et statut ? et elle les envoie vers fichier.php jusque là je crois que je suis ^^'.

Après les $(".gauche") et droite c'est là que je met les paramètres que je veux passer c'est ça ? Donc l'id de l'image est passé en paramètre dans sendPhp ? Mais je peux mettre ce que je veux je suppose.

Par contre comment les images "appelles" gauche et droite ? Grâce à classe= ??

Ton explication me semble clair hein ! Je ne veux pas que tu pense que tu as mal expliqué. C'est moi qui n'ai pas les bases nécessaires à la compréhension ^^' bien que je face mon possible.

Je me suis déjà fait engueuler par un mec qui m'a aidé avec wamp, qui m'a dit qu'on apprends pas le php en deux jours ^^', il à bien raison, mais je n'ai pas trop le choix.

J'espère que je ne vous dérange pas trop...

Merci encore.

Mammouth du PHP | 619 Messages

07 mai 2013, 12:30

Bonjour,

pas de souci,

alors je vais commentait mon code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Ici on appelle jquery depuis google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title>Page de test</title>
<script type="text/javascript">

$(document).ready(function () {

	// ici on creer une fonction on lui passe un paramettre un id et un statut
	function sendPhp(id,statut){
	  $.ajax({
		  type: "POST",//je dis a ajax d'envoiyer les donnees en post
		  data: {statut : statut,id : id},  //ici j'envoi les variable statut et id a fichier.php 
		  url: "./fichier.php",//le fichier php
		  success:function(data){
				  //ici tu peux ajouter ajouter une image ou text pour dire que cela c'est bien passe
		  }
	  });
	}
	  //ici on ecoute la class gauche
	  $(".gauche").click(function(){
		  //on recupere l'id de l'image qui a ete clique
		  var id=$(this).attr("id");
		  //ici on appelle la fonction avec les paramettres qu'on souhaite transmettre pour le moment on envoi l'id de l'image ainsi que 1 en gros gauche aura pour effet +x
		  sendPhp(id,'1');		  
	  });
	  
	   //ici on ecoute la class droite
	  $(".droite").click(function(){
		  //on recupere l'id de l'image qui a ete clique
		  var id=$(this).attr("id");
		  //ici on appelle la fonction avec les paramettres qu'on souhaite transmettre pour le moment on envoi l'id de l'image ainsi que 1 en gros droite aura pour effet -x
		  sendPhp(id,'0');		  
	  });
  
});

</script>
</head>

<body>
<!-- 
ici je mets une image je mets une class car plus facile pour ecouter les evenements si il en a plusieurs
et je mets un id qui n'ai pas top car un id ne peu pas commence par un numerique puis ne peu pas etre un doublons mais bon ici je c'est sur element jouer

 -->
<img src="1.png" id="1" class="gauche"/>
<img src="2.png" id="1" class="droite"/>
<img src="3.png" id="2" class="gauche"/>
<img src="4.png" id="2" class="droite"/>
</body>
</html>
 
donc class gauche droite c'est juste pour eviter davoir a faire plusieurs sur tous les id alors je mets une class et pour id c'est pour savoir sur quel camera je dois tournee


dit moi si cela et un peu plus claire apres regarde sur google jquery il a beaucoup d'option et si tu as du mal existe pas :)

car la j'ai repris un peux ton idée mais avec jquery tu peux faire vraiment beaucoup de chose sympa

Eléphant du PHP | 160 Messages

07 mai 2013, 14:45

Alors là, je dis chapeau !!

Si ce n'est pas déjà le cas devient prof ;) (fait juste gaf à l'écriture, enfin je suis pareille lol)

Avec tes commentaires j'ai compris à quoi tout servait et j'ai pu, avec un poile de retouche, avoir ce que je voulais

[javascript]
$(".gauche") .mouseup(function(){
sendPhp('1','00');
})
.mousedown(function(){
sendPhp('1','10');
});
[/javascript]

C'est vraiment presque parfait, maintenant mon soucis c'est que j'ai un écart entre les images.

Va t-il falloir que je passe par une feuille de style ? Ou, est-ce que je peux rester dans ma page pour réduire à néant se petit jour entre les boutons ?

En tout cas grâce à toi je devient un pro du php et autres script :D Merci.
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Mammouth du PHP | 619 Messages

07 mai 2013, 14:55

Bonjour,

essaye de mettre sur les images un style="float:left; margin:0;"

<img src="2.png" id="1" class="droite" style="float:left; margin:0;"/>

si vraiment tu veux pas mettre de style :)

ps : oui désolé pour mon français j'essaie de faire vite pour travailler en même temps a cote et j'ai aussi quelque lacune

Eléphant du PHP | 160 Messages

07 mai 2013, 15:18

Oui c'est sur qu'au boulot c'est pas forcement l'idéal ^^'

En tout cas merci.

Bon alors pour ce que tu m'as donné, ça fonctionne bien pour la première ligne, mais ça me colle la deuxième ligne au bout de la première au lieu de la mettre en dessous en suivant le <br> que j'ai mis.

Je suppose qu'il y à une astuce mais j'ai pas trouvé ^^'