Discussion :

[imikado]

Journal de bord: création d’une application de création de schéma en HTML5: Jour 1

Introduction
Depuis quelques temps déjà j’ai besoin de créer des schémas, si possible interactif.
Principalement des schémas d’architecture avec des serveurs, des bases de données ainsi que des liens entre eux.

Avec le développement des derniers jeux RTS et Bomberman en HTML5, j’ai appris à utiliser les canvas.

Je viens donc vous présenter ici l’application sur laquelle je travaille en ce moment: MkDraw.

Présentation fonctionnelle de l’application
Cette application, basée sur le mkframework, permet de créer des schémas si besoin interactif.
Vous pouvez actuellement:

• gérer des calques
• afficher/cacher des calques/objets
• créer des rectangles, lignes, flèches et bases de données
• créer des liens entre certains éléments
• placer des éléments de manière fixe ou relative (comme un aimant)
• définir une couleur de fond, de bord ainsi que son épaisseur
• écrire un texte sur un rectangle/base de données
• créer une infobulle (avec html si besoin)
• enregistrer votre schéma

Présentation technique
Dans cette application, je créé autant de canvas que de calques, chaque objet ajouté sur la map est un objet javascript.
Chaque objet est une instanciation de la classe Data dans le fichier public/js/data.js
Le constructeur:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function Data(type,idLayer){
    this.type=type;
    this.idLayer=idLayer;
    this.x;
    this.y;
    this.x2;
    this.y2;
 
    this.texte='';
    this.id=oApplication.idObject;
    this.size=11;
    this.visible=1;
 
    this.fillStyle='#ffffff';
    this.lineWidth=2;
    this.strokeStyle='#000000';
 
    this.from;
    this.to;
 
    this.comment='comment';
 
    this.info='';
 
    this.relativeObject='';
 
    this.relativeX=0;
    this.relativeY=0;
 
    this.points='';
 
    oApplication.tObject[this.id]=this;
 
    oApplication.idObject++;
 
    if(!oApplication.tMenuLayerObject[idLayer]){
        oApplication.tMenuLayerObject[idLayer]=Array();
    }
 
 
    oApplication.tMenuLayerObject[idLayer].unshift(this.id);
 
 
}

Dans ce constructeur, on définit les variables par défaut, incrément l’id général et on ajoute le nouvel objet en début de tableau d’objet.
Au moment de dessiner un objet sur la map, on appelle la méthode build() de l’objet:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Data.prototype={
    build:function(){
 
        if(this.relativeObject!=''){
            var tmpRelativeObject=oApplication.getObject(this.relativeObject);
            if(tmpRelativeObject){
                this.x=this.relativeX+tmpRelativeObject.x;
                this.y=this.relativeY+tmpRelativeObject.y;
            }
        }
 
        if(this.type=='carre'){
            oApplication.tLayer[this.idLayer].drawRect(this.x,this.y,this.width,this.height,this.lineWidth,this.strokeStyle,this.fillStyle);
            oApplication.tLayer[this.idLayer].fillText(this.x+10,this.y+10,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='texte'){
            oApplication.tLayer[this.idLayer].fillText(this.x,this.y,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='ligne'){
            oApplication.tLayer[this.idLayer].line(this.x,this.y,this.x2,this.y2,this.strokeStyle,this.lineWidth);
        }else if(this.type=='fleche'){
            oApplication.tLayer[this.idLayer].arrow(this.x,this.y,this.x2,this.y2,this.strokeStyle,this.lineWidth);
        }else if(this.type=='bdd'){
            oApplication.tLayer[this.idLayer].drawBdd(this.x,this.y,this.width,this.height,this.lineWidth,this.strokeStyle,this.fillStyle);
            oApplication.tLayer[this.idLayer].fillText(this.x+10,this.y+30,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='link'){
 
            var oFrom=oApplication.getObject(this.from);
            var oTo=oApplication.getObject(this.to);
            console.log('build link from:'+this.from+' to:'+this.to);
 
            if(!oFrom || !oTo){
            }else if(this.points!=''){
                oApplication.tLayer[this.idLayer].linkPoint(oFrom,oTo,this.points,this.strokeStyle,this.lineWidth);
            }else{
                console.log('oFrom et oTo'+oFrom+' '+oTo);
                oApplication.tLayer[this.idLayer].link(oFrom,oTo,this.strokeStyle,this.lineWidth);
 
            }
        }
 
        this.updateInfo();
    },

La suite dans le bilet: http://blog.developpez.com/ducodeetdulibre/

[SylvainPV]

Bonjour,

Une question me taraude : puisque vous parlez de gérer différents calques ainsi que d'apporter des fonctions d'interactivité, le tout avec un code très orienté objet, pourquoi ne pas avoir opté pour SVG plutôt que canvas ? Il me semble que la techno se prête davantage à la réalisation de schémas interactifs comparé au canvas qui offre plus des fonctions de "dessin" à proprement parler.

[imikado]

Pour plusieurs raisons j'ai choisi les cancas plutot que le svg

• Possibilité de dessiner des images
• Capitaliser sur les librairies developpées pour les 2 derniers jeux
• Je connais canvas, je connais peu svg

D'ailleurs c'est possible de faire la même chose en svg ?
Comment gerer les différents calques ? (avec les différents plans)

[SylvainPV]

Je vous suggère de vous y intéresser par la suite, car les possibilités sont très nombreuses :
http://snapsvg.io/
http://bonsaijs.org/
http://d3js.org/

Pour faire simple, canvas = bitmap et SVG = vectoriel.

Gérer les calques en SVG est très simple, on définit des groupes d'éléments <g> et ils seront affichés dans l'ordre dans lequel ils sont déclarés, un peu comme si l'on posait un à un des éléments sur une feuille de papier. De la même façon gérer l'interactivité est un jeu d'enfant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<circle onclick="mafonction(evt)" cx="300" cy="225" r="100" fill="red"/>

http://www.w3.org/TR/SVG/images/script/script01.svg

Effectivement si vous êtes amenés à manipuler des images ou des sprites, canvas est plus approprié. Mais ce n'est pas ce qui m'est venu à l'esprit en premier pour un schéma interactif

[imikado]

Merci pour ces informations, j'y jetterai un coup d'oeil (peut etre pour un fork vectoriel

QUand je dis que le schema doit etre interactif c'est assez limité, je veux 2 choses
1. permettre de mettre des infobulle sur certains elements
2. pouvoir sur ces infobulles mettre un lien vers la doc associé (doc d'un serveur par exemple)
3. permettre via des liens de faire des cartes avec des zones "zoomable" pour avoir plus de détail (qui switcherai entre un shema macro et le shema detaillé d'un serveur par exemple)

Et ces 3 choses sont possible avec la version actuelle

[imikado]

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetd...n-html5-jour-1

Dans ce billet je vais un peu plus expliquer comment fonctionne l’application, puis dans un second temps j’indiquerai les modifications du jour.

Les calques
L’application à la manière d’un photoshop/inkscape ou Gimp gère les calques: il y a un bouton pour ajouter des calques qui fait appel à la méthode addLayer de la classe application
Dans le fichier public/js/application.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
addLayer:function(){
    this.addMenuLayer(this.idLayer);
 
    var sCanvas='';
 
    this.addContent('tCanvas',sCanvas);
 
 
    this.tLayer[this.idLayer]=new Canvas('canvas_'+this.idLayer);
 
    this.tLayer[this.idLayer].fillText(0,0,'Nouveau calque '+this.idLayer,'#000');
 
    this.selectLayer(this.idLayer);
 
    this.idLayer++;
},

Cette méthode créé un canvas sur la page + instancie un objet Canvas puis le stoque dans un tableau indexé par un id pour que l’on puisse interagir par la suite à chaque calque.
Puis le selectionne, pour que l’on puisse facilement lui ajouter des éléments

Pour information la classe Canvas se situe dans public/js/canvas.js elle permet de simplifier le dessin sur le canvas.

Les calques objets
Plutot que de dessiner simplement sur le canvas, comme on le ferait sur paint, l’idée est de créer des objets que l’on dessine sur les calques afin de pouvoir les modifier individuellement par la suite.
Pour cela, à chaque fois que l’on dessine un élement, on instancie un objet en utilisant la classe Data ( et en lui indiquant son calque).
Puis on lui demande de se dessiner sur le calque en appelant sa méthode build
Fichier public/js/data.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
build:function(){
 
        if(this.relativeObject!=''){
            var tmpRelativeObject=oApplication.getObject(this.relativeObject);
            if(tmpRelativeObject){
                this.x=this.relativeX+tmpRelativeObject.x;
                this.y=this.relativeY+tmpRelativeObject.y;
            }
        }
 
        if(this.type=='carre'){
            oApplication.tLayer[this.idLayer].drawRect(this.x,this.y,this.width,this.height,this.lineWidth,this.strokeStyle,this.fillStyle);
            oApplication.tLayer[this.idLayer].fillText(this.x+10,this.y+10,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='texte'){
            oApplication.tLayer[this.idLayer].fillText(this.x,this.y,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='ligne'){
            oApplication.tLayer[this.idLayer].line(this.x,this.y,this.x2,this.y2,this.strokeStyle,this.lineWidth);
        }else if(this.type=='fleche'){
            oApplication.tLayer[this.idLayer].arrow(this.x,this.y,this.x2,this.y2,this.strokeStyle,this.lineWidth);
        }else if(this.type=='bdd'){
            oApplication.tLayer[this.idLayer].drawBdd(this.x,this.y,this.width,this.height,this.lineWidth,this.strokeStyle,this.fillStyle);
            oApplication.tLayer[this.idLayer].fillText(this.x+10,this.y+30,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='link'){
 
            var oFrom=oApplication.getObject(this.from);
            var oTo=oApplication.getObject(this.to);
            console.log('build link from:'+this.from+' to:'+this.to);
 
            if(!oFrom || !oTo){
            }else if(this.points!=''){
                if(oApplication.pointIdSelected!==''){
                    oApplication.tLayer[this.idLayer].linkPointWithSelected(oFrom,oTo,this.points,oApplication.pointIdSelected,this.strokeStyle,this.lineWidth);
                }else{
                    oApplication.tLayer[this.idLayer].linkPoint(oFrom,oTo,this.points,this.strokeStyle,this.lineWidth);
                }
            }else{
                console.log('oFrom et oTo'+oFrom+' '+oTo);
                oApplication.tLayer[this.idLayer].link(oFrom,oTo,this.strokeStyle,this.lineWidth);
 
            }
        }
 
        this.updateInfo();
    },

Comme vous pouvez le voir: en fonction du type d’element on va appeler une méthode différente de dessin sur le layer où est dessiné l’objet.

A partir de là on peut cocher/decocher un objet pour l’afficher ou non sur son calque.
Pour ce faire, on joue sur la propriété visible de l’objet et on demande à l’application de redessiner le calque:
Fichier public/js/application.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
showHideObject:function(idObject){
        var a=getById('checkbox_object_'+idObject);
        if(a){
            var oObject=this.getObject(idObject);
 
            if(a.checked){
                oObject.visible=1;
            }else{
                oObject.visible=0;
            }
 
            this.buildLayer(oObject.idLayer);
        }
 
    },

Qui appelle ensuite la methode de reconstruction du calque (toujours dans le même fichier)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
buildLayer:function(idLayer){
        oApplication.tLayer[idLayer].clear();
 
        var iLength=this.tMenuLayerObject[idLayer].length-1;
 
        for(var i=iLength;i>=0;i--){
            var tmpObj=this.getObject(this.tMenuLayerObject[idLayer][i]);
            if(tmpObj && tmpObj.visible==1){
                tmpObj.build();
            }
        }
 
    },

Qui comme vous le voyez efface le calque (canvas) avant de boucler sur les claques objets pour dessiner ou non celui-ci en fonction de sa propriété visible.

Voila pour ce premier tour d’explication du fonctionnement de l’application

Le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-2