Cette page présente les fonctions qui permettent d'afficher une molécule, d'afficher son fichier texte et d'enregistrer le fichier sur la machine cliente. Les commandes qui permettent de contrôler la visualisation de la molécule ne sont pas présentées ici mais dans la page Contrôler JSmol).

Afficher une molécule

Nous avons déjà vu que la commande load placée dans un script (ou dans le champ d'entrée de la console) charge le fichier représentant la molécule (un modèle dans le vocabulaire de JSmol), la commande est suivie d'un espace puis du chemin relatif ou absolu du fichier par rapport à la page. Si le chemin est une URL vers un serveur différent du serveur qui exécute le programme, la commande peut échouer pour des raisons de sécurité mais JSmol peut interroger des bases de données sur certains serveurs, ce qui sera présenté un peu plus bas.

Vous pouvez exécuter un script en dehors de la définition du tableau associatif JmolInfo, il suffit d'exécuter la fonction JSmol: Jmol.script().

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

La fonction s'exécute lors du chargement de la page; si vous souhaitez différer l'exécution, une façon simple est d'appeler la fonction dans un lien: cliquer sur le lien qui suit charge une molécule d'insuline à la place du fichier initial: <a href="javascript: Jmol.script(instance0, 'load 1aph.pdb');">texte du lien</a>. Il est possible d'ajouter un filtre à la commande load pour ne charger qu'une partie d'un modèle sans avoir à éditer le fichier; on peut laisser de côté les molécules d'eau ou ne charger qu'une chaine de molécules complexes à plusieurs chaines (protéines, acides nucléiques).
<a href="javascript: Jmol.script(instance0, 'load 1aph.pdb filter \'![HOH]\' ');">texte du lien</a> charge le même fichier que précédement mais laisse de côté les molécules d'eau.

Choisir un fichier et l'afficher

Le moyen le plus simple pour afficher une molécule à partir d'un fichier présent sur la station cliente sans que ce fichier soit défini à l'avance est de faire un glisser déposer. Il existe cependant des alternatives. Si on souhaite être averti d'un glisser-déposer, il faut installer un dragdropCallback.

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

JSmol possède deux interfaces prédéfinies pour gérer les fichiers, l'une qui permet d'interroger des serveurs de bases de données, activée de manière permanente par l'entrée addSelectionOptions du tableau associatif JmolInfo, l'autre activée de façon temporaire par un script s'efface une fois le fichier chargé et pour parcourir l'arborescence des fichiers locaux (sur la station cliente).

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

Le problème est que vous ne maitrisez pas du tout l'endroit où s'affiche ce menu (par défaut sous le canvas de JSmol). IL est possible de le déplacer à l'aide des CSS (le résultat est visible en bas de page à à gauche sous le canvas), mais vous pouvez remplacer ce menu par de simples liens:

Charger un fichier (ces commandes sont à compléter par le nom du fichier recherché):
petites molécules depuis NCI/CADD, , petites molécules depuis PubChem, .pdb depuis le site RCSB, .pdb depuis EBI

ou par votre propre menu de sélection (à venir).

Pour charger un fichier en parcourant l'arborescence des fichiers locaux, il est possible de lancer un script "load ?". c'est assez peu documenté mais cette commande figure dans un exemple comme: chemapps.stolaf.edu/jmol/jsmol/simple.htm

Cette fois l'interface s'affiche au dessus du canvas donc vous ne maitrisez toujours pas son emplacement, de plus, elle est particulièrement laide. Le bouton cancel permet la fermeture de l'interface (si vous n'avez chargé aucun fichier); le bouton URL ouvre une boite de dialogue mais quel que soit l'URL que vous indiquerez vous avez peu de chance d'obtenir un résultat (il serait préférable d'invisibiliser ce bouton). Le bouton Parcourir et le champ voisin sont affichés par le navigateur et permettent de proposer le dialogue qui explore l'arborescence des fichiers.

Nous verrons ci-dessous comment faire la même chose sans passer par JSmol. L'avantage d'utiliser JSmol est que la suite des opérations (jusqu'au chargement de la molécule dans le canvas de visualisation) vont s'effectuer sans avoir à écrire une seule ligne de code supplémentaire. De plus JSmol gère de nombreux formats de fichiers et décompressera automatiquement les fichiers .gz qui sont populaires pour les macromolécules.

Mais écire ces lignes de code vous donnera une meilleure maitrise des opérations et si vous n'avez pas besoin de la décompression ce n'est pas si compliqué. A noter que l'utilitaire d'archive de macOS compresse et décompresse les fichiers au format .gz (l'extension créée est .cpgz, mais vous pouvez la renommer en .gz (En fait le format de l'archive créée dépend du choix sélectionné dans le menu Préférences de l'utilitaire, l'autre choix étant .zip).

Le standard est d'utiliser le code suivant 

Un clic sur le bouton Submit (que vous pouvez renommer) enverra le nom du fichier en paramètre en rechargeant la page, mais pour éviter une confirmation inutile, vous pouvez supprimer la balise <form></form> et le bouton Submit. Il est alors nécessaire d'ajouter un gestionnaire d'événement sur l'élément <imput type="file" />. Le texte qui apparait par défaut dans le champ de saisie et celui du bouton "Parcourir" sont définis par le navigateur et ne peuvent être modifiés; en contrepartie, le navigateur s'adaptera automatiquement à la langue de l'utilisateur.

Par défaut, l'attribut value de <imput type="file" /> contient le nom du domaine; après validation, il contient le nom du fichier (ou du premier fichier) choisi précédé de C:/fakepath/. Pour des raisons de sécurité il n'est pas possible de récupérer le chemin réel du fichier et c'est ce qui complique la suite. Voici l'aspect de ce formulaire modifié:

Sélectionner le fichier

Et le code nécessaire à l'affichage de ce formulaire (à placer où vous voulez qu'il s'affiche) 

La fonction loadFileFromSelect() appelée par le gestionnaire d'événement est définie généralement dans l'en-tête ou ailleurs dans le document avec quelques variables supplémentaires (et facultatives).

Cliquez pour afficher / masquer le code de cette fonction 

Ajouter un fichier

Il est possible d'afficher simultanément plusieurs molécules (modèles) dans le même canvas: en ajoutant le paramètre append après la commande load le nouveau modèle s'ajoute au lieu de remplacer l'ancien. <a href="javascript: Jmol.script(instance0, 'load 1gcn.pdb');">Glucagon</a> charge le modèle du glucagon. <a href="javascript: Jmol.script(instance0, 'load append 7d3s_p.pdb');">Sécrétine</a> ajoute le modèle de la secrétine.

Toutefois après cette commande, vous ne voyez que le deuxième modèle chargé: frame 1 affiche le premier modèle chargé, frame 2 affiche le deuxième modèle chargé, frame all les affiche tous. frame 1, 2 aurait donné le même résultat. La commande frame est également indispensable pour un fichier unique contenant plusieurs modèles.

A noter qu'ici les deux fichiers ont été alignés pour favoriser la comparaison. Un programme comme Chimera X en est capable tout comme l'outil en ligne: Pairwise Structure Alignment.

Enregistrer un fichier

La commande show url ouvre une nouvelle fenêtre affichant le contenu du fichier s'il s'agit de texte (vous pouvez le visualiser et l'enregistrer où vous voulez) ou propose directement l'enregistrement si ce sont des données binaires (fichier compressé). L'enregistrement à lieu dans le dossier prédéfini dans les préférences dun navigateur. A noter que JSmol considère les fichiers .pdb comme des données binaires.

show url

Le succès de cette commande dépend de la manière dont le fichier a été chargé:
- elle ne fonctionne pas si le fichier est chargé par glisser-déposer;
- elle ne fonctionne pas si le fichier provient de la machine cliente (mais pourquoi vouloir réenregister un fichier qui était déjà sur cette machine ?);

La commande show file est moins directe que la précédente, mais elle fonctionne presque à tous les coups. Cette commande de script envoie le contenu du fichier tel qu'il a été chargé, sur la console; si la console n'est pas active, vous ne verrez rien. Un copier / coller depuis la console vers un éditeur texte vous permettra de récupérer le fichier si nécessaire. Il est possible avec un callBack de détourner le message vers une fonction Javascript qui le prend en charge; c'est ce qui a été fait ici avec l'affichage dans une fenêtre d'alerte.

Jmol.script(instance0,"show file"); alert(msg);.

Le lien qui précède lance la commande de script "show file", mais echoCallback le détourne le message de la console vers la fonction isMessage qui définit la variable msg.

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

Une fonction en VanillaJS plus élaborée peut remplacer la fenêtre d'alerte:

saveFromFileOrigin();

Le code de cette fonction à définir quelque part dans le document est ici: 

Utiliser le menu "pop up"

Ce menu apparait par un clic droit dans le canvas de JSmol. L'emplacement de l'option pertinente dépend de la version (et sous réserve que le menu n'ait pas été modifié par le webmestre car il est personnalisable); avec les versions récentes de JSmol, la deuxième option du menu (sous l'option Fichier) affiche le nom de la molécule récupéré dans le fichier. Un clic sur ce nom affiche un sous-menu avec en bas l'option Voir suivie du nom du fichier. Cette option permet d'enregistrer le fichier au format .mol (même si ce n'est pas le format d'origine) et est adaptée au petites molécules; c'est l'équivalent de la commande show url et elle échouera dans les mêmes conditions. L'option Afficher située plus bas dans le menu est l'équivalent de la commande show file déjà vue précédement.

Bibliographie