Inscris-toi au e-camp "Héberge ton jeu Facebook sur Azure" de Microsoft vendredi 25 mai à 13h30 !

> Le Site du Zéro - Informatique

> Les forums

> Communauté des zéros

> Présentation de vos projets

> [Application Web] Le chat graphique

> Lecture du sujet

[Application Web] Le chat graphique

Alliez le dessin aux mots

Pour accéder à cette section
Connectez-vous !

Auteur	Message
Page 1
1 visiteur sur ce sujet (1 Anonyme)
Page 1
Agent-H	# Posté le 12/11/2011 à 16:21:04
agir avec finesse Ville : Fortschwihr Pays : France métropolitaine	Bonjour, Je m'appelle Hadrien MILANO (alias Agent-H) et je suis actuellement en terminale S SI (les SI vaincrons !). Je viens vous présenter aujourd'hui mon petit projet de chat graphique. Un quoi ? L'idée de base est la suivante : Il est certaines situations où l'un ou l'autre camarade de classe vous demande de l'aide sur un DM à rendre pour le lendemain... et il/elle le fait sur la mini-messagerie de facebouque ou encore pire, par sms . Or il est bien connu que certains concepts sont bien compliqués à expliquer uniquement par écrit. C'est pourquoi je me suis dit qu'il serait intéressant de créer une application permettant aux protagonistes d'une séance de chat de pouvoir dessiner en même temps qu'ils parlent ! Je vous averti donc, à la base j'ai créé cette application pour un usage personnel et donc tout le développement a été orienté dans ce sens. En bref, il n'y a rien de superflu, uniquement les fonctionnalités dont j'avais besoin le plus rapidement. C'est seulement en voyant que ça marchait bien que je me suis dit que je pourrais en faire profiter les autres (particulièrement mes confrères zéros) donc gardez bien cela en tête avant de sortir vos critiques assassines Ô bourreaux du web. Les quelques tests que j'ai pu faire jusqu'à présent montrent que ce concept de dessin ajoute une dimension intéressante à la discussion. Ainsi, on a une expérience qui s'éloigne du chat basique comme on a l'habitude d'en voir, sans se rapprocher de l'effet d'une discussion par webcam, c'est quelque chose de totalement différent. Au final, on se retrouve à l'utiliser principalement pour le fun . C'est pourquoi je vous invite tous à venir le tester au plus vite en cliquant sur le lien en bas de page (et voilà comment on offre une transition pour ceux qui ne veulent pas se taper tous les détails techniques). Détails techniques J'ai choisi pour réaliser cette application d'utiliser des technologies d'avenir, à savoir html5. Je me sert donc de l'objet <canvas> pour réaliser le dessin, et les données sont ensuite échangées sous forme d'objets json représentant les tracés, formes, styles, ... Ces objets passent par une base de données ce qui permet à une personne se connectant au milieu d'une discussion de reconstruire le dessin jusqu'à son état actuel. Ainsi, toutes les vues sont synchronisées. Malheureusement, ces technologies sont tellement "d'avenir" que certains navigateurs ne les implémentent pas et que dans tous les cas, aucun ne le fait de la même manière, ce qui conduit irrémédiablement à des bugs d'incompatibilité. Compatibilité Pour le moment, les navigateurs sur lesquels le site a été testé sont : compatibles : - friefox 5 - chrome 14 - safari 5 - Opera 11 non compatibles : - IE 8 N'hésitez pas à poster vos tests avec d'autres navigateurs et d'autres versions pour que je puisse compléter cette liste. Fonctionnalités Dans l'état actuel, les fonctionnalités suivantes sont disponibles : - création d'une salle de discussion avec mot de passe - partage du dessin et discussion instantané avec un nombre illimité de clients - 4 outils : pinceau, ligne, rectangle, ellipse (possibilité de gommer en peignant en blanc mais je vais quand même rajouter une gomme ça sera plus simple) - choix de la couleur de remplissage et de contour avec transparence alpha et choix de l'épaisseur du trait - curseur qui s'adapte à l'outil et au style choisi - sauvegarder le dessin en format .png sur le disque - avertissement sonore lorsqu'un nouveau message arrive (pratique pour faire semblant de suivre ) - annuler l'action en cours avec clic droit - dessiner en mode "hors ligne" - avertissement lors de la déconnexion d'un utilisateur - adaptation automatique de la taille du canvas en fonction de celle du navigateur pour éviter les distortions du dessin - un mode d'emploi est disponible en cliquant sur le bouton d'aide (point d'interrogation) Vous voyez qu'il y a déjà de quoi s'amuser ! Liens et photo(s) Vous trouverez le site à cette adresse : http://dessinez.webou.net Attention à ceux qui ont sauté le chapitre sur la compatibilité ! Le site est hébergé chez webou (je leur fait un petit coup de pub parce que je trouve leur service super). ps: oui, j'ai odieusement pompé les émoticônes du sdz et je suis prenant si quelqu'un veux bien m'en proposer d'autres un peu plus réglos sur les droits edit : Suite à une demande, j'ai créé un salon juste pour les zéros : nom : siteduzéro mdp : zozor99 Édité le 21/12/2011 à 22:54:08 par Agent-H Venez tester mon Chat graphique ! Tuto exclusif ==> Comment se masturber allégrement avec un étui à lunettes, tout en chantant une chanson paillarde ?
Publicité	# Posté le 12/11/2011 à 16:21:04

cfillion	# Posté le 12/11/2011 à 16:51:26
Have a lot of fun... Blog Twitter close Ville : Québec Pays : Canada	Ce projet est très intéressant ! Je te suggère d'ajouter des boutons pour changer de salon sans faire F5. P.S. Je ne sais pas comment tu as testé, mais ça fonctionne très bien sous Opera. Édité le 12/11/2011 à 19:24:35 par cfillion Robot ? Mon chat : cfiChat État : Un excellent zDesign : Blue Wave Avertissement à ceux qui veulent m'ajouter comme "ami" sur le SdZ : Envoyez-moi un MP contenant votre motivation. Tant que je n'ai pas reçu ce MP, je n'accepte pas la demande. Certaines candidatures peuvent êtres refusés sans aucune réponse de ma part (vous serez seulement notifiés par MP).
softcadbury	# Posté le 12/11/2011 à 17:50:52
	Salut, tres sympa!! Le seul truc que je n'apprecie pas trop c'est les boites qui permettent le changement de couleur. Elle se superposent au dessin, tu pourrais pas les mettre dans le bottom de la page? Je suis sur un netbook ca explique peut etre le pb.
Pripoko	# Posté le 12/11/2011 à 19:13:05
www.ct2c.fr	Un projet très sympathique et bien réalisé ! Il me rappelle beaucoup le "dessin en ligne" de Dessinateur Na!, qui est malheureusement devenu "obsolète". (Il n'a même pas été intégré dans le nouveau site du dessinateur et donc difficile à trouver, à mon grand regret !) Je pense sincèrement que tu devrais t'en inspirer pour certains icônes, afin de rendre ta plateforme encore plus intuitive et ergonomique (la corbeille n'est pas forcément très intuitive contrairement à l'éponge, comme un tableau qu'on efface, l'icône d'exportation non plus...). D'ailleurs, je n'ai pas bien compris comment fonctionnait l'exportation ? Je vois un cadre avec mes dessins, mais que se passe-t-il ensuite ? Je dois faire un imprim écran pour pouvoir le copier-coller dans un logiciel qui me permettra de le sauvegarder ? Sinon, j'ai quelques problèmes de fluidité pour prendre plaisir à y dessiner véritablement: lorsque je fais des courbes, j'ai des saccades qui me font faire des traits horizontaux ou verticaux... J'ai l'impression que c'est surtout lorsque je commence une nouvelle courbe. (Comme s'il n'avait pas encore détecté que c'est en mode "libre" que je dessinais une fois que je lève mon stylet !) Si ce petit problème est résolu, il y a de fortes chances que certains graphistes prendront bien plaisir à faire une fresque commune et discuter en même temps ! (C'est ce qui se passait sur le site précédent). C'était vraiment sympa ! En tous les cas, merci de m'avoir profité de ton site, je n'hésiterai pas à en faire les éloges ! Pripoko Graphiste CT2C Notre site - Notre Blog - Notre Boutique
anonyme	# Posté le 12/11/2011 à 19:31:35
	Bon projet personnellement, en lisant chat Graphique je pensais à l'animal en graphisme mdr"
NicoGo	# Posté le 12/11/2011 à 19:38:48
	Sympa le site, j'avoue que je ne trouverais pas l’intérêt d'y aller tout les jours mais de temps en temps ça peut-être cool. Bonne chance Classement de serveurs Minecraft : Mineserver.fr
Zakatchi	# Posté le 12/11/2011 à 20:05:04
	Moi ça rame un peu (beaucoup) mais sinon c'est sympa Bravo ! Zakatchi ~ Co-developper et directeur financier du projet Factus Scribo Présentation du projet
Agent-H	# Posté le 12/11/2011 à 20:05:14
agir avec finesse Ville : Fortschwihr Pays : France métropolitaine	Merci pour vos retours positifs et constructifs . @cfillion : tu peux quitter le salon en cliquant sur la porte. Mais étant donné que c'est la dernière icone de la liste, il y a des chances pour qu'elle ne rentre pas dans la hauteur de la fenêtre >< J'avoue que l'ergonomie est à revoir, je vais aller vers un truc plus simple qui ne dépasse pas sur la zone de dessin, j'ai aussi remarqué que c'est des fois soulant... Sinon, pour le test, quelle version d'opera ? (j'avais des problèmes avec l'ellipse, vérifie bien que ça marche). @Pripoko : merci pour le lien Question fluidité, c'est du à plusieurs choses : le canvas est en 19201080, (mais ça influence pas tellement), javascript est un langage non compilé donc lent et surtout un path dessiné en une fois ne donnera pas le même rendu qu'un path dessiné au fur et à mesure, résultat je suis obligé de redessiner l'ensemble du path qui est en train d'être dessiné dans une zone tampon à chaque fois que le curseur bouge un peu... c'est très gourmand :s Aussi, safari est plus lent* et je sais pas pourquoi Pour exporter, tu fait un clic droit sur l'image qui apparait avec le bouton exporter et, si ton navigateur accepte de sauvegarder les images, tu devrais pouvoir la sauvegarder comme n'importe quelle autre image. chose que tu ne peux pas faire directement sur le canvas. chat graphique... dit comme ça avec ton avatar à côté, oui ça évoque des petits animaux x) Venez tester mon Chat graphique ! Tuto exclusif ==> Comment se masturber allégrement avec un étui à lunettes, tout en chantant une chanson paillarde ?
cfillion	# Posté le 12/11/2011 à 20:11:34
Have a lot of fun... Blog Twitter close Ville : Québec Pays : Canada	Citation : Agent-H @cfillion : tu peux quitter le salon en cliquant sur la porte. Mais étant donné que c'est la dernière icone de la liste, il y a des chances pour qu'elle ne rentre pas dans la hauteur de la fenêtre >< J'avoue que l'ergonomie est à revoir, je vais aller vers un truc plus simple qui ne dépasse pas sur la zone de dessin, j'ai aussi remarqué que c'est des fois soulant... Sinon, pour le test, quelle version d'opera ? (j'avais des problèmes avec l'ellipse, vérifie bien que ça marche). La dernière version, Opera 11.52. Je n'ai eu aucun problèmes avec les ellipses; seul le bouton Exporter ne fonctionne pas. P.S. Je pense que tu devrais placer ce navigateur dans le tableau "Acceptable", avec Safari. Édité le 12/11/2011 à 20:14:37 par cfillion Robot ? Mon chat : cfiChat État : Un excellent zDesign : Blue Wave Avertissement à ceux qui veulent m'ajouter comme "ami" sur le SdZ : Envoyez-moi un MP contenant votre motivation. Tant que je n'ai pas reçu ce MP, je n'accepte pas la demande. Certaines candidatures peuvent êtres refusés sans aucune réponse de ma part (vous serez seulement notifiés par MP).
Klywen	# Posté le 13/11/2011 à 10:30:23
Un petit n'est pas un faible.	En fait, faudrait peut-être un outil Texte, non ? Sinon très bon projet ! #LGDF: Analyse vaincra ! Unixienne n°2080 du SDZ - ControlWeight (sujet sur le SDZ)
Zakatchi	# Posté le 13/11/2011 à 11:54:59
	Bah il y a le chat textuel à coté Zakatchi ~ Co-developper et directeur financier du projet Factus Scribo Présentation du projet
Klywen	# Posté le 13/11/2011 à 12:40:11
Un petit n'est pas un faible.	Mouuééé... Enfin bref, voici un dessin rien que pour vous : C'est bien parce que c'est vous ! #LGDF: Analyse vaincra ! Unixienne n°2080 du SDZ - ControlWeight (sujet sur le SDZ)
Funkumo	# Posté le 23/11/2011 à 11:16:51
Codeur le jour, maker la nuit	Ton chat graphique m'a l'air bien sympathique Dommage qu'il soit désert :S On devrait faire une salle protégée rien que pour les Zér0s Bonne chance pour la suite. Un jour, lorsqu'on naît, quelqu'un meurt... Lorsque quelqu'un rit, quelqu'un pleure... Et ce fait est un crime. Mon site internet => RPG Maker Life
Silversthem	# Posté le 23/11/2011 à 14:08:19
rien à dire	Bravo pour ton chat mais quelques remarques : Le chat tout court est pas assez développé Le design est.. pas terrible, sa manque de couleurs. Ton chat graphique est super (bravo ) mais il faut rajouter des choses (prend exemple sur paint & après sur d'autre Bon courage Suivez moi sur twitter !
Funkumo	# Posté le 23/11/2011 à 14:23:08
Codeur le jour, maker la nuit	Je propose qu'on fasse un salon appelé siteduzero avec mot de passe. Un jour, lorsqu'on naît, quelqu'un meurt... Lorsque quelqu'un rit, quelqu'un pleure... Et ce fait est un crime. Mon site internet => RPG Maker Life
Agent-H	# Posté le 21/12/2011 à 22:52:27
agir avec finesse Ville : Fortschwihr Pays : France métropolitaine	Salut tout le monde, Je up ce topic pour vous annoncer que le projet n'est pas mort. Je bosse actuellement sur une version plus complète de l'application. A vrai dire, je compte l'intégrer dans un site complet afin de pouvoir intégrer des choses plus avancées comme l'espace membre : amis, sauvegarde des dessins, ... L'application dans l'état actuelle n'était qu'un test pour voir si c'était techniquement réalisable, et ça à l'air de fonctionner plutôt bien. Je tiendrais compte de toutes les remarques que vous avez faites pour pouvoir améliorer l'ergonomie et la fluidité entre autres. Bon, par contre il y a du taf et le bac qui approche petit à petit donc je ne vous garanti pas de résultat rapide ... @Funkumo : Ok pour le salon siteduzéro mais ça ne sert vraiment pas à grand chose puisque 99% des utilisateurs sont des membres du siteduzéro... donc ça sera : siteduzéro / zozor99 Venez tester mon Chat graphique ! Tuto exclusif ==> Comment se masturber allégrement avec un étui à lunettes, tout en chantant une chanson paillarde ?