Carte mentale "Carmen"

Qu'est ce que c'est ?

Une carte mentale (ou carte heuristique de son vrai nom) est un diagramme représentant une arborescence d'idées, construites hierarchiquement. En bref : c'est un arbre.

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

Vous pouvez consulter les exemples ci-dessous afin de voir le rendu (en développement) :

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échargements

[Voir les anciennes versions]

(Note : la version de développement est disponible sur Github. À noter qu'il se présente sous la forme d'un test (avec un dossier déjà rempli), et non d'une carte mentale vierge. Elle n'est pas directement installable avec un simple pull. Il est toutefois possible d'aller y piocher les dernières versions des scripts.)

Copie des fichiers sur le serveur

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

Concernant les mises à jour, pour l'instant, il s'agit d'écraser les fichiers déjà existants. Le fichier "parametres.php" et le dossier "dossier" ne sont pas écrasés. (Dans ce cas, les paramères supplémentaires éventuels prennent les valeurs par défaut)

Pour information :

  • Tous les fichiers annexes (parametres.php, dossier, "sources") doivent rester tels qu'ils sont, en chemin relatif, par rapport au fichier "index.php".
  • Le fichier "index.php" peut être renommé à votre guise.
  • Par défaut, le dossier "racine" de votre carte mentale est le dossier "dossier". Il pourra être renommé (voir le paragraphe sur la configuration). En attendant, pour tout le reste de cette page, on considérera que "dossier" est la racine.

Utilisation

Utilisation principale

Mettez tous vos fichiers ressources dans les dossiers racine : "dossier". Dans votre navigateur Web, lancez la page index.php.

La carte-mentale se dessine alors, faisant apparaitre les "bulles" correspondant aux sous-dossiers et fichiers contenus dans votre dossier racine : "dossier". Les titres des bulles correspondront aux noms des fichiers ou dossiers (parfois légèrement modifiés. Voir ci-après). Chaque fois vous ajouterez de nouveaux fichiers ou nouveaux dossiers dans votre dossier racine "dossier", la carte-mentale se mettra automatiquement à jour au prochain chargement de la page.

Types de "bulles"

Actuellement, il existe 3 types de bulles que peut afficher la carte-mentale :

  • Les bulles "dossier" : contenant des dossiers/sous-dossiers (eux même pouvant contenir d'autres éléments...). Lorsque l'on double clique dessus, ils développent leur contenu.
  • Les bulles "fichier" : Cela peut être tout type de fichier (texte, word, etc.). Lorsque l'on clique dessus, les fichiers sont simplement ouverts ou téléchargés par le navigateur. Le programme affiche automatiquement une icône associée au type de fichier (La liste des icônes que j'ai rentré n'est pas illimité... si une icône est absente de la liste, n'hésitez pas à m'en faire part)
  • Les bulles "lien hypertexte" : Si vous souhaitez faire un lien vers une autre page internet, cette bulle est là pour ça ! Pour l'obtenir, il faut créer un fichier texte avec pour extention ".rac". Le nom du fichier correspondra au nom affiché sur la bulle (sans le .rac). Dans ce fichier, il vous suffit d'écrire (avec un éditeur de texte) l'adresse web vers laquelle vous souhaitez faire le lien. Enregistrez, et c'est fini !

Faire des titres avec sauts de ligne

Comme dit précédemment, les titres des bulles correspondent aux noms de fichiers ou des dossiers. Si vous souhaitez sauter une ligne, dans le titre d'une bulle, il faudra l'indiquer dans le nom de votre fichier, par le caractère "paragraphe" : § (Si ce caractère ne vous convient pas, vous pouvez le changer via la variable $caractereSautLigneTitre. Voir le paragraphe sur la configuration).

Par exemple, le dossier "X-Files§(confidentiel)" s'affichera dans la bulle comme dans l'exemple ci-dessous :

Ce comportement peut être supprimé via le paramètre $autoriseSautLigneTitre (Voir le paragraphe sur la configuration).

Zoomer / dézoomer

Le zoom et le dézoom sur un point de l'écran s'obtiennent en faisant rouler la roulette de la souris.

Déplacer la carte mentale

Pour déplacer la carte-mentale, deux possibilités :

  • Déplacer la bulle-racine en cliquant et maintenant la souris (avec le clic-gauche) puis déplaçant.
  • Cliquer et maintenir le clic-molette (bouton du milieu) sur l'arrière plan. (À l'heure où j'écris, des bugs subsistent avec Internet Explorer... N'hésitez pas à m'en faire part)

Se connecter

Le programme possède une partie privée accessible pour des utilisateurs possédant un login et un mot de passe. En effet, le programme gère 3 types d'utilisateurs :

  • Le public : (par défaut quand on arrive sur la page) Il ne peut voir que les bulles qui ne sont pas bloquées, et ne peut faire aucune modification.
  • Les utilisateurs enregistrés : Ils peuvent voir les bulles cachées du grand public, mais ne peuvent pas les modifier.
  • Les utilisateurs privilégiés : Ils peuvent voir les bulles cachées, et les modifier (les bloquer/débloquer, les renommer, etc.).
Pour les utilisateurs enregistrés et privilégiés, la connection se fait via la clé en haut à droite de l'écran :
Pour gérer les utilisateurs, voir le paragraphe de configuration.

Bloquer l'accès à certaines bulles

Si vous êtes utilisateur privilégié, et que vous ne souhaitez pas que le grand public accède à toutes les branches de l'arborescence, un système de login/mot de passe vous permet de "bloquer" ou non certaines bulles.

Rajouter une icône à une bulle "dossier"

Rien de plus simple : il suffit de placer une image portant le nom "icone" dans le dossier concerné, au format JPEG, PNG ou GIF (au choix):

  • icone.jpg
  • icone.jpeg
  • icone.png
  • icone.gif

Renommer les bulles

Coming soon...

Les bulles interdites

Certains fichiers sont automatiquement invisibles, car souvent créés par le système d'exploitation, de manière involontaire. En voici la liste :

  • Thumbs.db : qui enregistre les miniatures des fichiers sous Windows.
  • desktop.ini : paramètres d'affichage de certains dossiers Windows.
  • .htaccess : fichier de configuration pour le serveur Apache.
  • .htpasswd : Liste d'identifiants/mots de passe pour Apache.
  • icone.jpg, icone.png, icone.gif : ce sont les icônes des dossiers. Elles n'apparaissent pas en tant que fichier.

Configuration

Les paramètres réglables

Tous les paramètres sont exprimés sous forme de variables PHP, dans le fichier "parametres.php". On les modifies en éditant ce fichier avec un éditeur de texte. Ils se présentent sous la forme suivante : $maVariable="la_valeur_de_mon_paramètre".

Le tableau ci-dessous recence la liste de ces paramètres :

Configurations principale

Variable Rôle Valeur par défaut
$rootDefaut (string) Chemin du dossier qui correspond à la racine de l'arborescence (lorsqu'on ne le passe pas via méthode $_GET). "./dossier"
$ouvrirPremiereBulle (booléen) Indique s'il faut déployer la 1ere bulle ou non dès le chargement de la page. true
$autoriseDossierParent (booléen) Dans l'adresse de la racine de l'arborescence (voir $rootDefaut), ce paramètre autorise (ou non) le pointage d'un dossier situé en amont de "index.php" (l'utilisation de "../" de manière générale). false
$nomBulleRacine (Entier) Nom de la bulle principale. Lorsqu'on laisse du texte vide (""), le nom du dossier principale (racine) est utilisé. ""
$autoriseModifierOptions (booléen) Autorise (ou non) l'affichage du bouton "Option", permettant à l'utilisateur de modifier certaines options pendant sa navigation. true
$titrePage (string) Titre de la page HTML. Si cette variable est un texte vide (""), c'est le titre de la bulle principale qui est choisi par défaut (lui-même étant par défaut le nom du dossier "racine"). ""
$activeMiroir (booléen) Active la redirection, lorsque l'on veut télécharger un fichier. Une fois activé (true), le lien de téléchargement sera le fichier "sources/PHP/miroir.php". Ce fichier se charge de récupérer les données du fichier voulu, et les renvoie, à la manière d'un miroir true

Graphismes et apparance

Variable Rôle Valeur par défaut
$autoriseOmbres (booléen) Permet de mettre/supprimer les ombres (pour les PC un peu lents...). true
$afficheExtensions (booléen) Affiche (ou non) les extensions en fin de fichier (L'îcone peut suffir à identifier les fichiers...). false
$couleurBullesDossiers (string) Couleur des bulles "dossier". Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) "#CCDDFF"
$couleurBullesFichiers (string) Couleur des bulles "fichier". Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) "#FFCC99"
$couleurBullesLiens (string) Couleur des bulles "Lien". Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) "#BBEEBB"
$couleurConnecteurs (string) Couleur des connecteurs entre les bulles. Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) "#CCDDFF"
$afficheBackground (booléen) Affiche (ou non) une couleur d'arrière plan. Si "False", alors l'arrière plan sera transparent. true
$couleurBackground (string) Couleur de l'arrière plan (quand il est visible). Cela peut être une couleur connue ("red", "white", etc.) ou hexadécimale ("#FF0000", etc.) "#FFFFFF"
$autoriseSautLigneTitre (booléen) Formate les titres des bulles en remplaçant (ou non) les caractères "|" par des sauts de ligne "/n". true
$caractereSautLigneTitre (string) Caractère qui servira de séparateur de ligne dans le nom des bulles (i.e. nom des fichiers ou dossiers). Ce caractère peut être n'importe lequel à condition qu'il soit accepté par le système de fichier de l'OS de votre serveur (voir cet article de forum). "§"

Animations

Variable Rôle Valeur par défaut
$vitesseZoom (flottant) Vitesse de zoom à chaque coup de molette. Pour inverser l'effet de la molette, il suffit de changer le signe (par exemple : mettre -1) 1.
$autoCentre (Booléen) Centre automatiquement (ou non) les bulles-dossiers lorsqu'elle s'ouvrent. Seule les bulles "suffisamment loin du centre" sont impactées (Voir $rayonAutoCentre pour régler la distance limite). true
$rayonAutoCentre (Entier) Distance minimale (en pixel) entre bulle-dossier et le centre de l'écran à partir de laquelle une bulle-dossier est auto-centrée à l'ouverture. 200
$delaiAutoCentre (Entier) Temps d'attente (en millisecondes (ms)) avant de faire l'auto-centrage (0 pour un autocentrage qui démarre de suite après le clic). 200
$vitesseAutoCentre (Entier) Temps (en millisecondes (ms)) que met le programme pour faire l'animation d'auto-centrage. 700
$dureeOuvertureFermeture (Entier) Temps (en millisecondes (ms)) que met le programme pour faire l'animation d'ouverture (ou de fermeture) des bulles. 200
$autoFermeFreres (Booléen) Autorise le programme à fermer automatiquement les bulles "soeurs" (dans le même dossier) lorsqu'on ouvre une bulle dans ce dossier. false

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.

Gérer les utilisateurs

Dans le fichier "sources/parametres.php", les utilisateurs sont listés dans un tableau PHP. Ce tableau se compose d'une ligne par utilisateur. Chaque ligne contient : le nom d'utilisateur (login), son mot de passe, et éventuellement le mot "admin" si l'utilisateur est un utilisateur "privilégié".

Pour rajouter une utilisateur, il suffit de rajouter une ligne avec la syntaxe suivante :

array( "nom_dutilisateur","Mot_de_passe","admin"),

Il suffit donc de remplacer les éléments entre guillemets par votre nom d'utilisateur et votre mot de passe. Vers la fin de la ligne, la chaîne "admin" indique que l'utilisateur est "administrateur". Dans le cas contraire, il faut laisser des guillemets vides : "". Voici un exemple un peu plus parlant :

$listeUsers =array(  array( "proviseur","123456789","admin"),
             array( "proviseur-adjoint","azerty","admin"),
             array( "professeur","jf1832",""),
             array( "élève","5Juillet",""),
   );

Dans l'exemple précédent, l'utilisateur proviseur (dont le mot de passe est 123456789) peut se connecter, voir les bulles "cachées" et modifier la carte-mentale (car il est administrateur). Il en est de même pour l'utilisateur proviseur-adjoint (dont le mot de passe est azerty)
L'utilisateur professeur (dont le mot de passe est jf1832) peut se connecter et voir les bulles cachées. Il ne peut en revanche pas les modifier (il n'est pas administrateur ; la dernière case est laissée vide entre les guillemets). Il en est de même pour l'utilisateur élève (dont le mot de passe est 5Juillet).

J'avoue que ce n'est pas très éléguant comme méthode, mais c'est en attendant de faire mieux !

Par défaut, il y a un login : "root" (mot de passe : "root"), sans les guillemets. A vous de modifier !

Ç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 :

  • Soit la connexion est VRAIMENT très lente. Dans ce cas, le script Javascript n'a pas encore eu le temps de créer le dessin. Soyez patient... Ou changez de fournisseur d'accès.
  • Soit vous n'avez pas activé Javascript. Dans ce cas, il vous faudra l'activer dans les configuration de votre navigateur.
  • Soit c'est qu'il y a un bug dans le script Javascript. Dans ce cas, c'est de ma faute. Merci de reporter les bugs via la messagerie en bas de page !

Au bout d'un moment, on ne peut plus cliquer sur rien... (seule le "drop & drag" fonctionne)

Je ne sais pas... Ce bug avait lieu avec une ancienne version de Carmen. Je ne l'ai plus revu depuis. Si cela se produit : un truc qui marche chez moi : dans votre navigateur, prenez l'onglet contenant la carte mentale, et sortez-là de votre navigateur (remettez là éventuellement après). Ça suffit à débloquer l'ensemble, mais je ne sais pas encore pourquoi.

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 CreateJS (version du 12 Octovre 2017, me semble-t-il). Il utilise des définitions des classes (au sens de la POO) d'après la norme introduites avec ECMAScript 2015. D'après ce site, cette version devrait fonctionner pour :

  • Firefox (V45 et +)
  • Firefox for Android (V45 et +)
  • Chrome (V49 et +)
  • Chrome Android (V49 et +)
  • Edge (V13 et +)
  • Opéra (V36 et +)
  • Opéra Android (V36 et +)
  • Safari (V9 et +)
  • Safari on iOS (V9 et +)
À 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.

Attention, il n'est pas compatible avec Internet Explorer .

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 en cliquant sur l'icone ci-dessous :

[ @ ]

À faire...

  • Permettre le renommage des bulles,
  • Insérer des nouvelles bulles directement à partir de la carte mentale,
  • Un bouton pour télécharger les fichiers sans les ouvrir dans le navigateur,
  • Mettre des lecteurs (image, son, vidéo...) directement dans les bulles,
  • Déconnexion automatique au bout d'un certain temps.
  • Séparerer le "index.php" en deux fichiers, pour permettre une éventuelle intégration dans une autre page.
  • Rendre l'ajout des utilisateurs plus simple...
  • Créer des bulles "fantôme" (sans qu'elles n'existent sur le disque dur)...
  • Sécuriser la 1ere connection.