Chaîne fonctionnelle interactive

Qu'est ce que c'est ?

Cet outil est une petite application web permettant d'afficher une chaine fonctionnelle interactive faisant le lien avec divers ressources (documentation, autre site web, raccourcis...).

Ce dessin de chaîne fonctionnelle se dessine (et s'actualise) automatiquement à partir d'un système de fichiers simple stockés sur un disque de votre serveur.

Vous pouvez consulter les exemples ci-dessous afin de voir le rendu :

Installation

Avant de télécharger...

Cette application utilise du php et nécessite donc d'être installée sur un serveur web. Si vous êtes en réseau local (ou sur un unique ordinateur), vous pouvez installer votre propre serveur. Si vous avez un fournisseur d'accès Internet, il est probable que celui-ci vous propose un "espace-perso" pour y stocker des sites web (renseignez-vous).

De plus, il est à noter que cette appli utilise les normes du HTML 5 (utilisation de canvas pour dessiner) ainsi que de Javascript (activé, of course !). Vos ordinateurs clients doivent avoir un navigateur "suffisamment" récent (voir la section "Ça ne marche pas !")

Téléchargement

Je vous propose 4 types de téléchargement :

Copie des fichiers sur le serveur

Copiez les fichiers téléchargés (après les avoir dezippé) sur n'importe quel dossier de votre serveur. C'est tout.

Pour information :

Préparation du dossier contenant les ressources

Avant de lancer votre chaîne fonctionnelle, il vous faut préparer le dossier de ressource. C'est le dossier qui va contenir tous vos fichiers "acquérir", "traiter", etc.

Utilisation

Utilisation principale

Une fois tous vos dossiers créés, mettez tous vos fichiers ressources (capteurs, etc.) dans les dossiers adéquats ("ACQUERIR", etc.). Dans votre navigateur Web, lancez la page contenant votre dessin (par défaut : "index.php").

La chaîne fonctionnelle se dessine alors avec des liens vers vos fichiers. À chaque fois vous ajouterez de nouveaux fichiers, la chaîne fonctionnelle se mettra automatiquement à jour au prochain chargement de la page.

Ajout de dossiers supplémentaires

Lorsque vous ajoutez d'autres sous-dossiers dans votre dossier "ressource" (autres que ceux cités dans le paragraphe précédent), ils seront alors automatiquement insérés en dessous de la chaîne fonctionnelle.

Ajouter des liens hypertextes

Il est possible de créer des liens hypertexte vers d'autres sites (ou fichers, ou autre...). Pour ce faire, il vous faudra créer un fichier texte avec l'extention .rac.

Insérer la chaîne fonctionnelle dans une autre page web

Pour insérer la chaîne fonctionnelle dans votre propre page web, il vous faudra d'abord vous assurer que c'est bien une page PHP. Dans le cas contraire, à vous de faire en sorte qu'elle le deviennent (un simple changement d'extention peut faire l'affaire).

Ensuite, dans le code HTML de votre page, inserez les lignes suivantes :

<?php include "chaine-fonctionnelle.php"; ?>
Si le fichier "chaine-fonctionnelle.php" ne se trouve pas dans le même dossier que votre page Web, indiquez son chemin d'accès dans les guillemets. Par exemple :
<?php include "chemin/dossier/chaine-fonctionnelle.php"; ?>

Configuration

Les paramètres réglables

Lorsque vous éditez le fichier "chaine-fonctionnelle.php", vous avez la possibilité de modifier un certain nombre de variables PHP.
Variable Rôle Valeur par défaut
$dossierSource (string) Indique l'emplacement du dossier source (où aller chercher les ressources) ""
$autoriseGet (booléen) Autorise (ou non) de définir l'emplacement du dossier source "à la vollée", en l'indiquant directement dans l'adresse (méthode GET) false
$autoriseCreeDossiers (booléen) Autorise (ou non) à créer les dossiers "ACQUERIR", etc. lors de la première utilisation. ATTENTION : après installation, cette variable a tout intérêt à garder la valeur false pour une utilisation "publique", afin d'éviter que des petits malins ne vous créent des dossiers un peu partout... false
$autoriseSousDossiers (booléen) Autorise (ou non) d'afficher les autres sous-dossiers qui ne sont pas des fonctions de la chaîne fonctionnelle (autres que "ACQUERIR", etc.) true
$largeur (entier) Largeur (en px) de la zone de dessin (canvas). 1200
$hauteur (entier) Hauteur (en px) de la zone de dessin (canvas). 700
$couleurCI (string) Couleur de la grande boite "chaine d'information". "#FFCCCC"
$couleurCE (string) Couleur de la grande boite "chaine d'énergie". "#CCCCFF"
$dossierACQUERIR
$dossierTRAITER
$dossierCOMMUNIQUER
$dossierALIMENTER
$dossierDISTRIBUER
$dossierCONVERTIR
$dossierTRANSMETTRE
$dossierAGIR
$dossierENSEMBLE		 (strings) Nom de tous les dossiers dans lesquelles aller chercher les fichiers de la chaîne fonctionnelle. "ACQUERIR"
"TRAITER"
"COMMUNIQUER"
"ALIMENTER"
"DISTRIBUER"
"CONVERTIR"
"TRANSMETTRE"
"AGIR"
"ENSEMBLE"
Bon, on pourrait rajouter plein d'autres paramètres, mais je n'ai pas eu le courage de le faire. Je les rajouterai selon la demande.

Ça ne marche pas ?

Le message "⌛ Chargement..." reste affiché, et rien d'autre ne se passe...

Si cela vous arrive, c'est que le dessin de la chaîne fonctionnelle n'a pas été réalisée par javascript. Trois raisons essentielles à cela :

Message d'erreur : "Warning: mkdir(): Permission denied in [...]"

L'application essaye de créer les dossiers "ACQUERIR", "TRAITER", etc. automatiquement dans un dossier sur lequel elle n'a pas de droit d'écriture.
Pour y remédier, deux solutions :

Navigateur trop ancien ?

Cet applications utilise la norme HTML 5, notamment avec la balise <canvas> (pour dessiner...). De plus, pour piloter les canvas, la bibliothèque javascript kineticJS V5.1.0. D'après ce site, cette version devrait fonctionner pour :

À noter que je n'ai pas vérifié si cela fonctionnait vraiment avec ces versions. Si vous avez des remarques à ce sujet, merci de me contacter.

A propos

Cette appli a été développée par Raphaël ALLAIS, inspiré des travaux de mes collègues de TSI. Pour toute remarque, commentaire, bugs ou autre, merci de me contacter via le formulaire ci-dessous :

[ @ ]