Aide pour changer une interface graphique php/CSS

Si vous cherchez des liens invisibles avec ce code ou des redirections que vous ne trouvez pas, sachez que ce code (donc le fichier remote.php) est jumelé avec un autre fichier m.php. Ceci est un fichier de "liaison/connexion" entre le terminal utilisé/contrôlé et l'interface de commande. qui possède ce code :

<?php 
$role = $_GET['role'];   //We handle the role of the client that can be 'robot' or 'remote'

switch ($role) {
    case "robot": //For the case 'robot', we fetch the command from the data.txt file
    $fp = fopen("data.txt","r");
	$order = fgets($fp,255);
	fclose($fp);
	echo $order;		
	break;
    
	case "remote"://For the case 'remote', we write the command passed by the 'order variable in the data.txt file
		$order = $_GET['order'];
		$fp = fopen("data.txt","w");
		fseek($fp,0);
		fputs($fp,$order);
		fclose($fp);
		break;
    default: echo 'Ooops, there is a problem'; //We should never arrive here [smile]
}
?>

Bonjour,

En gros ce que tu cherches c'est de faire une jolie interface html/css pour ton interface de commande?

1) Trouver quelqu'un qui maîtrise un petit peu ces techniques pour t'aider (ce n'est pas bien sorcier)
2) Apprendre un peu les bases de html/css pour essayer de te débrouiller seul (ce n'est pas une perte de temps au vu de ton métier. Le boutton Apprendre ci-dessus te donnera une bonne base.
3) Dans le cas #1 ou #2, tu trouveras ici des gens ravis de t'aider et répondre à tes questions, autrement je t'invite à lire ceci: http://forum.alsacreations.com/help.php#regle8

#edit: OUPS, j'avais pas bien lu le sujet exact, je me suis perdu un peu dans tous les détails du post:
Pour ce qui est du mobile, ben tel quel ça fonctionnera sans trop de soucis. Pour aller plus loin, il y a de bon articles spécifiques au mobile dans la section «apprendre». Et le meieux est de tester!
Modifié par kustolovic (01 May 2013 - 20:52)

kustolovic a écrit :
Bonjour,

En gros ce que tu cherches c'est de faire une jolie interface html/css pour ton interface de commande?

Non pas vraiment, je m'explique
Si vous voulez, ce programme fonctionne sur un ordinateur (voir l'aperçu), comme vous le voyez, ce sont des boutons standards qui "s'enfoncent" lorsque l'on clique dessus.
Pour ma part, le programme fonctionne quand le bouton est enfoncé, autrement dit, mon robot que je contrôle à distance grâce à ce programme sur l'ordinateur ne roule QUE LORSQUE le bouton "forward" par exemple est enfoncé. S'il n'est plus enfoncé, le robot s'arrête.

Ce que je recherche comme je l'ai expliqué, c'est une interface de boutons html/css différente comme tu le mentionne mais pas pour faire joli, pour qu'il soit compatible avec un smartphone.

kustolovic a écrit :
1) Trouver quelqu'un qui maîtrise un petit peu ces techniques pour t'aider (ce n'est pas bien sorcier)

Bien-sûr ! J'ai déjà tenté de contacter de nombreux développeur web, aucune réponse pour l'instant. J'ai aussi tenté de contacter un étudiant en DUT Informatique via un IUT, sans succès.

kustolovic a écrit :
2) Apprendre un peu les bases de html/css pour essayer de te débrouiller seul (ce n'est pas une perte de temps au vu de ton métier. Le boutton Apprendre ci-dessus te donnera une bonne base.

Je voudrais bien ! Cela fait 2 semaines que je me suis penché dessus et je vous explique mon parcours jusqu'ici :

- Au début, j'ai tenté de créer une application iphone/ipod pour palier à mon problème en utilisant Intel XDK. (logiciel très bien conçu par ailleurs)

- Au moment où j'en venais à l'interface de commande de mon application, je cherchais comment créer justement une interface de commande.

- J'ai trouvé un tutoriel détaillé pour la création d'un D-pad Joystick assez bien expliqué :
http://iphonegamekit.com/how-to-program-a-d-pad-joystick-for-iphone/
(en anglais cependant) mais l'installation de Cocos2D a été un échec sur mon windows. Il ne fonctionne pas en dépit de toutes les solutions auxquelles j'ai pu trouver.
(Cocos2D est un programme conçu au départ pour Mac OS)

Donc j'ai du laisser tomber cette affaire d'application.

- Au lieu de créer une application et de me compliquer la vie, j'ai chercher à rendre tout simplement ces boutons de commandes compatibles sur Iphone. Et voici où j'en suis actuellement.

/!\ edit /!\ : J'ai déjà essayé des générateurs de boutons CSS comme http://css3button.net/ ; http://www.cssbuttongenerator.com/ mais ils ne proposent pas d'autres types de boutons. Et je recherche une interface/un bouton CSS qui ne s'enfonce pas forcément. Ça peut être un joystick (mais déjà essayé sauf si vous avez trouvé autre chose), un glissement de doigt... etc

kustolovic a écrit :
3) Dans le cas #1 ou #2, tu trouveras ici des gens ravis de t'aider et répondre à tes questions, autrement je t'invite à lire ceci: http://forum.alsacreations.com/help.php#regle8/

Et je vous invite à reformuler votre directive qui me paraît assez inappropriée en dépit de tous mes efforts fournis pour remédier à mon problème.

a écrit :
Ceci est une communauté d'entraide, pas de travail à votre place

Ce forum a pour vocation d'échanger des connaissances. Les membres ne sont pas là pour faire le travail à votre place. Il est donc inutile de demander des scripts tout faits, des codes à faire pour vous. On vous donnera les moyens d'y parvenir vous-même, sans vous apporter le code sur un plateau d'argent.

Il est écrit noir sur blanc, que c'est une communauté d'entraide. Je ne cherche pas à avoir le script sur un plateau d'argent, je cherche à savoir comment le concevoir et avec quelles fonctions car je ne m'y connais pas vraiment en programmation !
Là vous faîtes passer ce forum non pas comme une communauté d'entraide mais comme un test pour vérifier l'exactitude de tel ou tel programme. Est-ce le but ?
Et si l'on est coincé comme pour ma part, je suis censé faire quoi quand on ne possède pas les bons outils ?

kustolovic a écrit :
#edit: OUPS, j'avais pas bien lu le sujet exact, je me suis perdu un peu dans tous les détails du post:
Pour ce qui est du mobile, ben tel quel ça fonctionnera sans trop de soucis. Pour aller plus loin, il y a de bon articles spécifiques au mobile dans la section «apprendre». Et le mieux est de tester!

C'est justement ce dont j'ai écris dans mon post ; j'ai déjà lu ce tutoriel (http://www.alsacreations.com/apprendre/ ; rubrique : "Un site pour le Web mobile") et il y a effectivement des indications abondantes pour des menus déroulants. Or ce n'est pas ce que je recherche ...

D'avance merci.

Cameron
Modifié par cameron69210 (01 May 2013 - 23:27)

Bon je comprend un peu mieux le problème,

en gros il y a deux choses à bien faire la différence dans ce cas:

– La partie visuelle, à quoi ça ressemble: en gros un joystick, des pads, un boutton, des liens etc. pouvant avoir de nombreuses balises html différentes et tous les styles imaginables.

– La partie logique en javascript qui gère les évènements.

Dans ton cas, le problème est que le mousedown et mouseup se déclenchent simultanément en lachant le doigt sur une interface tactile, donc ça démarre et stoppe le robot simultanément

Viennent à la rescousse les évènements touchstart et touchend.

$("#FORWARD").bind('mousedown touchstart', function(){
    $.get("m.php?role=remote&order=1") //for items with the ID Forward, we send '1' on mousedown
  });
  
  $("#BACKWARD").bind('mousedown touchstart',function(){
    $.get("m.php?role=remote&order=2") //For items with the ID Backward, we send '2' on mousedown
  });

  $("#LEFT").bind('mousedown touchstart',function(){
    $.get("m.php?role=remote&order=3") //For items with the ID Left, we send '3' on mousedown
  });

  $("#RIGHT").bind('mousedown touchstart',function(){
    $.get("m.php?role=remote&order=4") //For items with the ID Right, we send '4' on mousedown
  });

  $("#STOP").bind('mousedown touchstart',function(){
    $.get("m.php?role=remote&order=0") //For items with the ID Stop, we send '0' on mousedown
  });

  $(".remoteControl").bind('mouseup touchend',function(){
    $.get("m.php?role=remote&order=0") //For all items with the class remoteControl, we send 0 on mouseup
  });

Cela devrait faire le truc pour les deux situations. à Tester car avec les multiples events là en relachant il recevra 3 ordres… il y a des moyens de rendre ça plus propre…
Modifié par kustolovic (01 May 2013 - 23:46)

Merci de ton aide ! Je teste et je te tiens au jus' !

J'ai médité sur le programme et j'ai pensé qu'il serait plus simple d'enlever la dernière fonction non ? Elle permet de stopper le robot dès que je cesse d'appuyer sur la touche "forward" par exemple.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NXT Command Center</title>
<!--We load jquery as we use the Ajax GET fucntion of the library -->
<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
  $("#FORWARD").mousedown(function(){
    $.get("/m.php?role=remote&order=1") //for items with the ID Forward, we send '1' on mousedown
  });
$("#BACKWARD").mousedown(function(){
    $.get("/m.php?role=remote&order=2") //For items with the ID Backward, we send '2' on mousedown
  });

$("#LEFT").mousedown(function(){
    $.get("/m.php?role=remote&order=3") //For items with the ID Left, we send '3' on mousedown
  });

$("#RIGHT").mousedown(function(){
    $.get("/m.php?role=remote&order=4") //For items with the ID Right, we send '4' on mousedown
  });

$("#STOP").mousedown(function(){
    $.get("/m.php?role=remote&order=0") //For items with the ID Stop, we send '0' on mousedown
  });
});
</script>
</head>
<body>
<!--
Each Button has an ID allowing to perform the associated action on mousedown.
All buttons have the same class 'remoteControl' in order to send a STOP commend on the mouseup event
-->

<button id="FORWARD" class="remoteControl">FORWARD</button>
<button id="BACKWARD" class="remoteControl">BACKWARD</button>
<button id="LEFT" class="remoteControl">LEFT</button>
<button id="RIGHT" class="remoteControl">RIGHT</button>
<button id="STOP" class="remoteControl">STOP</button>
</body>
</html>

Du coup, si je reprends ta modification est-ce que ça pourrait marcher avec ça ? Ou il y aurait un conflit de commande ? :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NXT Command Center</title>
<!--We load jquery as we use the Ajax GET fucntion of the library -->
<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
  $("#FORWARD").bind('mousedown touchstart', function(){
    $.get("m.php?role=remote&order=1") //for items with the ID Forward, we send '1' on mousedown
  });
  
  $("#BACKWARD").bind('mousedown touchstart',function(){
    $.get("m.php?role=remote&order=2") //For items with the ID Backward, we send '2' on mousedown
  });

  $("#LEFT").bind('mousedown touchstart',function(){
    $.get("m.php?role=remote&order=3") //For items with the ID Left, we send '3' on mousedown
  });

  $("#RIGHT").bind('mousedown touchstart',function(){
    $.get("m.php?role=remote&order=4") //For items with the ID Right, we send '4' on mousedown
  });

  $("#STOP").bind('mousedown touchstart',function(){
    $.get("m.php?role=remote&order=0") //For items with the ID Stop, we send '0' on mousedown
  });
});
</script>
</head>
<body>
<!--
Each Button has an ID allowing to perform the associated action on mousedown.
All buttons have the same class 'remoteControl' in order to send a STOP commend on the mouseup event
-->

<button id="FORWARD" class="remoteControl">FORWARD</button>
<button id="BACKWARD" class="remoteControl">BACKWARD</button>
<button id="LEFT" class="remoteControl">LEFT</button>
<button id="RIGHT" class="remoteControl">RIGHT</button>
<button id="STOP" class="remoteControl">STOP</button>
</body>
</html>

D'avance merci.

Et bien en mettant de côté le côté doigt pressé, la compatibilité est beaucoup plus simple:

Remplacer tous les events par des clicks et cela fonctionnera sur tous les systèmes.

$("#LEFT").bind('click',function(){
    $.get("m.php?role=remote&order=3") //For items with the ID Left, we send '3' on mousedown
  });

Thanks ! Je te tiens au courant du résultat.
Bon week-end !