{"id":1793,"date":"2011-09-13T22:05:08","date_gmt":"2011-09-13T20:05:08","guid":{"rendered":"http:\/\/www.alphak.net\/news\/?p=1793"},"modified":"2017-05-15T20:50:53","modified_gmt":"2017-05-15T18:50:53","slug":"youfo-le-front-end-pour-youpi","status":"publish","type":"post","link":"https:\/\/www.alphak.net\/news\/2011\/09\/youfo-le-front-end-pour-youpi\/","title":{"rendered":"Youfo : le front-end pour Youpi"},"content":{"rendered":"

\"\"<\/p>\n

Avec la fin de mes travaux sur le back-end du robot Youpi<\/strong>, sauf remont\u00e9e de bugs \u00e9ventuelle, j’\u00e9tais arriv\u00e9 \u00e0 la conclusion que je pouvais enfin passer \u00e0 autre chose. Mais en m\u00eame temps, j’avais sous la main un back-end plut\u00f4t abouti et pas avare en possibilit\u00e9s, et rien d’autre pour faciliter la manipulation du robot ou l’\u00e9laboration de scripts.<\/p>\n

Je devais me rendre \u00e0 l’\u00e9vidence : il fallait que je r\u00e9alise rapidement un petit front-end<\/strong> pour que le sujet soit boucl\u00e9. Libre ensuite aux gens de l’utiliser, de l’autopsier, et de l’adapter.<\/p>\n

J’ai voulu un front-end pour un pilotage \u00e0 la souris<\/strong> qui soit dans la mesure du possible l\u00e9ger et multiplateformes<\/strong>. Quoi de mieux qu’un front-end client l\u00e9ger accessible depuis n’importe quel navigateur\u00a0\u2014 N’importe quel navigateur r\u00e9cent, s’entend. Fuck off IE6.<\/p>\n

C’est de cette mani\u00e8re qu’est n\u00e9 Youfo<\/strong> (pour YOUpi FrOnt-end), une interface web ridiculement sobre, d\u00e9velopp\u00e9e en quelques heures, articul\u00e9e autour du framework jQuery et communiquant avec le back-end gr\u00e2ce \u00e0 des messages Ajax\/JSONP.<\/p>\n

\"L'interface<\/a>

L’interface utilisateur de Youfo<\/p><\/div>\n

L’interface permet de piloter chacun des moteurs en cliquant sur le bouton appropri\u00e9. Pour le fun, lors d’un survol des boutons, la partie du robot concern\u00e9e par le mouvement se colorise sur l’image d’\u00e0 c\u00f4t\u00e9.<\/p>\n

En plus de cet aspect \u00ab\u00a0pilotage en temps r\u00e9el\u00a0\u00bb, \u00e0 chaque fois que la position de l’ensemble du robot est satisfaisante, un clic sur le bouton au centre de l’\u00e9cran permet de r\u00e9cup\u00e9rer la position de tous les moteurs et enrichit le script dans la zone de texte. Il est ainsi possible de copier\/coller le contenu de cette zone dans un shell qui, lorsqu’il est ex\u00e9cut\u00e9, rejoue les positions enregistr\u00e9es de mani\u00e8re fluide et rapide.<\/p>\n

Si vous consid\u00e9rez ces explications un peu abstraites, la vid\u00e9o suivante sera peut-\u00eatre plus parlante :<\/p>\n

\nhttp:\/\/cdn.alphak.net\/videos\/04-Youfo.mp4<\/a><\/video><\/div>\n

Au final, m\u00eame si cette interface reste d\u00e9pouill\u00e9e et souffre parfois d’un peu de lag, elle est facilement utilisable et elle d\u00e9montre surtout un des gros avantages<\/strong> du back-end Youba : la possibilit\u00e9 d’\u00e9crire et d’int\u00e9grer au projet le front-end de son choix en tr\u00e8s peu de temps. J’invite les bidouilleurs un peu curieux \u00e0 regarder le code du c\u0153ur du front-end (resources\/youfo.js) qui ne d\u00e9passe pas les 150 lignes.<\/p>\n

\u00c0 partir de l\u00e0, on peut aussi envisager d’autres front-ends pour un pilotage au clavier, au joystick, \u00e0 la Wiimote… Les plus motiv\u00e9s pourront d\u00e9cliner le produit en version un poil plus r\u00e9active gr\u00e2ce \u00e0 une r\u00e9\u00e9criture Java ou Qt… Il y a de quoi faire : amusez-vous, faites-vous plaisir.<\/p>\n

Derni\u00e8res recommandations :<\/p>\n