JSmol

Installation ↑

Pour faire fonctionner cette page, vous devriez l'installer sur un serveur et placer dans le même répertoire les fichiers suivants de la distribution JSmol: jquery.min.js, JSmol.min.nojq.js, le dossier j2s et (accessoirement) le dossier idioma. Il semble cependant que tout puisse fonctionner sans serveur (testé avec Firefox 115.21.0); récupérez cette page par un simple enregister sous > page web HTML uniquement, sous Firefox et placez-là au même niveau que les fichiers énumérés précédemment.

Pour la démonstration, cette page charge la molécule d'adénine. N'hésitez pas à faire tourner la molécule (cliquez et glissez le curseur souris), à zoomer (appuyez sur majuscule et glissez le curseur souris de bas en haut ou utilisez la molette de défilement).

JSmol ne se contente pas d'afficher une molécule en 3D. Avec la plupart des navigateurs, le glisser-déposer est supporté, ce qui veut dire que vous pouvez remplacer la molécule affichée par une autre, pourvu que vous en ayez le fichier de description. JSmol est capable de reconnaitre automatiquement un grand nombre de fichiers (les fichiers d'extension .mol ou .pdb sont gérés sans problème).

Si cependant si vous éditez un fichier qui vous semble correct (tous les fichiers modélisant les molécules sont des fichiers textes) et que vous ayez un message d'erreur lors du chargement avec JSmol, vérifiez avec un bon éditeur de texte (comme TextWrangler) que le format est bien "UTF-8 sans BOM" ; la présence d'un BOM (Byte Order Mark) en début de fichier provoque une erreur avec JSmol. Le BOM est normalement invisible dans la fenêtre de l'éditeur de texte, mais l'application précise généralement le type d'encodage du fichier et c'est là que vous pourez faire la modification.

Le menu ↑

Si vous faites un clic droit dans le canvas de JSmol (de préférence à proximité du nom "JSmol" dans le coin en bas à droite), un menu "popup" s'affiche qui donne accès à de nombreuses options. Ce menu varie avec les versions de JSmol, mais vous pourrez le remplacer par un menu personnalisé. Ce menu est trop complexe pour une première approche et peu pratique à utiliser. Nous ne nous intéresserons qu'à une seule de ses options.

La console ↑

Dans le menu "popup", choisissez l'option Console. Un cadre s'affiche que vous pouvez déplacer dans la fenêtre en le saisissant par sa barre supérieure); cette console contient deux zones de texte et des boutons à cliquer en partie inférieure.

Si vous cliquez sur le bouton History la partie supérieure affichera les commandes passées depuis la création du canvas (l'espace utilisé pour afficher la molécule), elle affiche aussi les erreurs.

La partie inférieure est destinée à accueillir vos propres commandes: tapez spacefill 100% et validez par la touche entrée.

La puissance de la console s'explique parce que c'est le moyen d'accéder au langage de script de Rasmol / JSmol: elle permet d'exécuter des commandes, de charger et d'enregistrer des scripts. Ces aspects seront développés dans les pages plus spécialisées. Je ne vous conseille pas à ce stade de cliquer sur Help: l'action affichera dans un nouvel onglet une page d'aide issue du web qui risque de vous impressionner. Le langage de script de JSmol est très étendu (et donc très puissant); une approche en douceur est recommandée (d'autant que vous pouvez vous passer en grande partie de ce langage...).

Dans les autres pages consacrées à JSmol, nous verrons comment améliorer la présentation, comment gérer les fichiers, comment utiliser le langage de commande par sa saisie au clavier ou en utilisant des boutons de contrôle.

Pour profiter des informations qui suivent concernant les codes HTML et Javascript utilisés, il est nécessaire que vous soyez déjà un peu familiarisé avec ces deux langages (lire ici et ici).

Cliquez pour afficher / masquer le code à placer dans l'en-tête ou dans le corps du document HTML 

La variable JmolInfo (que vous pouvez d'ailleurs renommer) est un tableau associatif; dans la réalité, il est plus étendu que celui affiché, mais les valeurs qui ne figurent pas ici sont prédéfinies et donc facultatives.

Cliquez pour afficher / masquer le code à placer dans le corps du document HTML 

Vous devez placer cet appel de fonction à l'endroit où vous voulez afficher le canvas (l'espace de travail de JSmol) dans le corps de la page.

La documentation de JSmol est assez peu structurée; il existe un manuel (payant) que je n'ai pas eu l'occasion de consulter et qui n'est pas dédié à JSmol (il couvre à le fois Jmol (programme Java) et JSmol et certaines aspects ne sont implémentés (et n'ont d'intérêt) que pour la version en Java).