Discussion :

[tio]

Bonjour à tous.
Je travaille actuellement sur un projet en PHP pour lequel je dois dessiner sur une page un grafcet (schéma avec étapes et conditions, et multibranches).
J'ai mon grafcet en bdd, mais je n'ai aucune idée de la manière de faire cela, tant au niveau de l'algorithme de placement que de la technique de dessin (div ?).
Merci de votre aide.

[SpiceGuid]

Je suis allé voir à quoi ressemble un grafcet sur wikipédia et ça n'a pas l'air trop difficile à dessiner automatiquement.

L'algorithme consiste à :

• pour un noeud numéro/action il faut calculer la taille de la boîte englobante (suivant notamment la longueur du texte action)
• les autres constructions se répartissent en vbox (des boîtes verticales) et en hbox (des boîtes horizontales). pour mon code j'ai utilisé la même convention que wikipédia, les séquences uniques sont des vbox tandis que les séquences multiples simultanées et les séquences multiples exclusives sont des hbox
  propager les contraintes de taille englobante du bas vers le haut (des noeuds vers le graphe)
• la boîte englobante d'une vbox ou d'une hbox se calcule facilement à l'aide de ses sous-boîtes englobantes

Le type des boîtes englobantes largeur/hauteur :

Code Objective Caml :

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

1
2
type box =
  {mutable width: int; mutable height: int}

Le type des schémas grafcet :

Code Objective Caml :

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

1
2
3
4
5
type 'a grafcet =
  | ActionNode of int * string * 'a
  | Sequence  of 'a grafcet list * 'a
  | Simultaneous of 'a grafcet list * 'a
  | Exclusive of 'a grafcet list * 'a

Dans un langage POO il faudrait créer une classe Grafcet avec 4 classes filles (ActionNode, Sequence, Simultaneous, Exclusive).

La fonction de calcul de toutes les boîtes englobantes :

Code Objective Caml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
let rec grafcet_box = function
  | ActionNode(_,_,b) -> b 
  | Sequence(l,b)     -> List.iter (grafcet_vbox b) l; b
  | Simultaneous(l,b) -> List.iter (grafcet_hbox b) l; b
  | Exclusive(l,b)    -> List.iter (grafcet_hbox b) l; b
and grafcet_vbox b0 g =
  let bg = grafcet_box g in
  if bg.width > b0.width then b0.width <- bg.width;
  b0.height <- b0.height + bg.height;
and grafcet_hbox b0 g =
  let bg = grafcet_box g in
  if bg.height > b0.height then b0.height <- bg.height;
  b0.width <- b0.width + bg.width

Où tu vois que pour une vbox il faut addition la hauteur et maximiser la largeur tandis que pour une hbox il faut addition la largeur et maximiser la hauteur.

Une fois toutes les boîtes englobantes calculées à l'aide de la fonction ci-dessus, il faut à nouveau retraverser le grafcet et compléter les informations de largeur/hauteur par des informations de position afin de pouvoir dessiner chacune des boîtes à sa place.

Bien sûr tout ça est très schématique et à enrichir/étendre/adapter en fonction des informations que tu dois afficher.

[Mac LAK]

Si tu n'es pas spécialement contre les outils externes, tu peux essayer de voir si GraphViz ne pourrait pas répondre à ton besoin... L'outil "dot" est par exemple celui utilisé par Doxygen pour générer les divers graphes d'appel et/ou de dépendances.

L'avantage, c'est que tu n'as que le fichier de définition de graphe à générer via PHP, puis tu obtiens directement une image affichable telle quelle.

[tio]

Merci de vos conseils !