Manipuler JSON avec CANVAS via WEBSOCKET

Bonjour,


Je débute en HTML 5, et actuellement je travaille sur une application en HTML5 pour afficher un diagramme ( diagramme de l’œil ) sur ma page web.( voir image du canvas ci-dessous)
Les points du diagramme (côté serveur en langage C = carte électronique) seront remontés par un programme, et convertis en format Json avant d'être envoyer via les websockets.
Donc mon application ( coté client ) doit pouvoir récupérer ces points et les affichés autour du "trapéze-rectagle" du milieu.
Le fichier JSON aura une forme simple :

Code:

---

1 2 3 4 5 6 7 8 9

"EYE DIAGRAM" : [ { "X" : " $$$", // coordonnées X du point a afficher "Y" : " $$$", // coordonnées Y du point a afficher "BER": " $$$",}, // précise la couleur du point a afficher en fonction d'un code couleur { "X" : " $$$", "Y" : " $$$", "BER": " $$$",}, .... ]

---

Bien sur une conversion doit se faire pour convertir ces valeurs reçu en pixels.


1/ J'aimerai savoir comment on manipule un fichier JSON en local pour faire test et m'exercer avant de recevoir le reel fichier?
2/ comment je pourrai manipuler ce genre de fichier JSON pour positionner mes points sur mon graphe?
3/ comment je pourrai gérer l'interopérabilité WebSocket-JSON-CANVAS , recevoir le fichier JSON avec les websockets et le manipuler avec Canvas?

toutes réponses est la bienvenue.
Merci d'avance.

Bonjour,

Tes questions ne sont pas précises du tout, le mieux serait de nous dire exactement ce qui te pose problème.

Tu parles d'interopérabilité entre Websockets, json et canvas. Mais ce sont des choses bien différentes :
- Websockets est ton protocole d'échange
- JSON est le format dans lequel tu sérialises tes données
- Canvas te permet de dessiner ton diagramme

Donc si tu sais utiliser ces API indépendamment, tu ne devrais pas avoir de mal à les mettre bout à bout pour réaliser ton application. Avec les websockets tu échanges tes données en JSON. Tu les traduis côté client avec JSON.parse puis tu complètes ton modèle de données avec, puis tu appelles ta fonction de dessin pour mettre à jour le diagramme.

Je te suggère dans un premier temps de séparer dans différents javascript ta couche communication, ta couche modèle et ta couche UI/dessin.