S'inscivant dans la tradition de Rasmol, JSmol offre deux manières de contrôler la visualisation: les options de son menu et le langage de commande. Mais l'insertion dans une page web offre des possibilités d'interaction en quelque sorte intermédiaires entres les deux citées. Ce site a déjà énoncé son intérêt pour le langage de commande; nous avons aussi pointé que la pratique approfondie de ce langage demande un temps considérable de familiarisation, ce qui la réserve à des spécialistes. Le degré de proximité affimé ou non avec ce langage de commande est une question pédagogique importante. Il est possible de développer une interface proche du menu de JSmol (toute en étant plus ergonomique) qui masque totalement le langage de commande donc conçue comme une boite noire, ou au contraire proche de ce langage, la position extrême étant de ne proposer que la console.

JSmol offre un grand nombre de fonctions permettant de créer des contrôles (plutôt présentes pour maintenir la compatibilité avec d'anciennes pages écrites pour l'applet Java), mais il est possible d'utiliser Vanilla JS (Javascript) pour le faire, la page sera sans doute plus rapide et vous aurez bien plus de possibilités dans l'interface. La fonction essentielle dont vous avez besoin est Jmol.script(JmolObject, 'votre script') à placer dans du code Javascript. JmolObject est le nom de la variable utilisée dans la création du canvas et votre script est une chaine de caractères (entre guillemets); le script peut être contenu dans une variable (sans les guillemets). L'exécution du script est asynchrone.

En complémentarité, le formulaire affiché sous le canvas de JSmol (déjà présenté dans la page interface) peut remplacer la console pour afficher, éditer ou envoyer d'autres commandes de contrôle. Il permet aussi de démystifier ce langage de commande.

Pour maintenir visible le canvas de JSmol, il est positionné en "position: sticky;" et l'affichage du texte a été limité à la partie gauche de l'écran pour éviter son masquage.

Cliquez pour afficher / masquer le code du formulaire 

Le code Javascript peut être déclenché par un clic sur un lien ou par la modification d'un élément <imput />. La case à cocher <input type="checkbox" /> convient parfaitement pour gérer les choix binaires. Un ensemble de boutons radios <input type="checkbox" name="same" /> pourrait être utilisé pour présenter des choix qui s'excluent. <imput type="range" /> permet de choisir une valeur numérique comprise entre deux bornes; ce n'est pas précis, mais c'est rapide; (<imput type="number" /> apporte plus de précision, mais cette précision ne semble pas indispensable pour la visualisation des molécules). La plupart du temps, pour les commandes utilisant des paramètres texte particuliers, un lien appelant une fonction Javascript exécutant le script de commande est un excellent moyen de contrôler JSmol.

Contrôles concernant les petites molécules (et aussi les grandes)

wireframe (bâtons)

spacefill (sphères)

dots (nuage de points) (Off / On)

 

qualité d'image

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

Les deux premiers contrôles "wirerame" et "spacefill" ainsi que le quatrième "qualité d'image" utilisent <imput type="range" /> et sont affichés de façon standard; le contrôle "dots (On / Off)" est en fait une case à cocher dont le style est redéfini par une CSS assez complexe. Ces contrôles sont utiles pour les petites molécules comme pour les macromolécules. La qualité d'image se paye par un ralentissement de l'affichage.

Contrôles concernant les macromolécules

Pour cette démonstration, nous allons charger le fichier décrivant la molécule de FSH ou le fichier décrivant la molécule d'ADN (bDNA) à la place de la précédente.


La FSH, comme les autres hormones de l'hypophyse antérieure est une glycoprotéine formée par l'assemblage de deux chaines d'acides aminés dénommées α ou a² et β. La chaine a² est commune à toutes ces hormones. Cet ensemble de deux chaines est tiré du fichier 1fl7 de la Protein Data Bank, simplifié (le fichier original est un dimère à 4 chaines). Pour l'ADN le fichier 1d29 est une double hélice d'une dizaine de paires de nucléotides.

display {objet} et select {objet} sont deux commandes complémentaires: display limite l'affichage au groupe d'atomes désigné dans {objet}; les atomes non désignés ne sont plus affichés; l'effet de cette commande est immédiatement visble; l'effet de "display *:a;" limite l'affichage à la chaine "A" de la protéine ou de l'ADN. il est annulable par "display all;"

select {objet} sélectionne un groupe d'atomes qui sera seul destinataire des commandes ultérieures. il faut donc associer cette commande à d'autres commandes de visualisation pour en voir l'effet. "select all; spacefill 0%; select *:a; spacefill 40%; select *;" affiche en boules les atomes de la seule chaine a et en fil de fer les autres (si la molécule vient d'être chargée avec l'affichage par défaut).

les objets:
{all} ou {*} {*:a}, {*:b}, {*:c}, les chaines d'une protéine ou d'ADN;
{a} le nucléotide à adénine, t le nucléotide à thymine, c le nucléotide à cystosine, g le nucléotide à guanine;
un nom d'acide aminé en 3 lettres: exemple {ala} pour l'Alanine;
{protein} les atomes d'une protéine (à l'exclusion d'un ligand, d'un groupe d'hétéro atomes;
{nucleic} les atomes d'un acide nucléique
{nucleic and not dna} les atomes d'acide nucléique excluant l'ADN {dna} les atomes de l'adn
{hetero} les atomes qui ne font ni partie d'une protéine, ni d'un acide nucléique;
{water} les molécules d'eau associées (si elles sont absentes du fichier le canvas sera vide).

backbone (squelette)

Affiche le squelette d'une protéine ou d'un acide nucléique en reliant les carbones α. Le carbone α des acides aminés est celui qui participe à la liaison peptidique. Le carbone α dans les acides nucléiques est le carbone 1' du sucre (ribose ou désoxyribose). La commande trace a un effet presque identique à backbone en plus lissé. La cohérence de la visualisation demande de régler spacefill et surtout wireframe à 0.
cartoon (effigie) (Off / On)

 

Met en évidence l'hélice α (une conformation d'une grande partie des chaines peptidiques) ou les parties rubanées. Pour l'ADN cette commande permet une visualisation proche du célèbre dessin d'Odile Crick de l'article relatant l'élucidation de la structure de l'ADN. La commande cartoon on s'associe bien avec une coloration de la structure (ci-après).

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

Les liaisons faibles entre atomes de soufre ont une grande importance dans les replis de la chaine d'acides aminés d'une protéine, donc de la forme globale et souvent de l'activité de cette protéine.

ssbonds (Off / On)

 

affiche ou non les liens entre atomes de soufre des acides aminés cystéine.

Les liaisons faibles entre atomes d'hydrogène associent les nucléotides par paires et maintiennent la liaison entre les deux chaines de la double hélice; elles jouent aussi un rôle dans la transcription et la réplication.

hbonds (Off / On)

 

affiche ou non les liens hydrogène.

"show sequence" affiche la séquence (par défaut dans la console, ici dans une fenêtre d'alerte).

color {nom ou code}; les noms ou codes de couleurs:

color cpk (Corey/Pauling/Kultun) la coloration par défaut:  C  O  N  H  S  P 

"color structure" colorie différement les hélices α (colorées en magenta), les parties rubanées (colorées en jaune et les autres éléments d'une chaine protéique (en blanc). Les acides nucléiques sont colorés en violet.

"color chain" colorie différement les chaines d'acides aminés d'une protéine ou les deux chaines de l'ADN.

"color amino" colorie différement les différents acides aminés

Distinguer les différents nucléotides est plus complexe car il n'existe pas de commande dédiée: il faut donc selectionner successivement chacun des 4 nucléotides et lui affecter une couleur: "select a; color gold; select c; color darkorchid; select g; color limegreen; select t; color dodgerblue; select u; color dodgerblue; select *;"

Le code des couleurs utilise 3 nombres décimaux (de 0 à 255) correspondant aux canaux rouge, vert et bleu, entre crochets et séparés par des virgules: color red et color [240,0,0] sont équivalents.

background {nom ou code} détermine la couleur du fond du canvas; le code utilisé est le même qu'expliqué plus haut; par exemple, "background [240,0,0]" met en place un fond rouge (pas franchement conseillé, il faut éviter d'utiliser une couleur de fond correspondant aux couleurs CPK des atomes, sauf le blanc, valeur par défaut qui est aussi celle de l'hydrogène, même si l'ombrage leur donne quand même une certaine visibilité). Les couleurs CPK sont: gray [200,200,200]; red [240,0,0]; lavender [143,143,255], white [255,255,255]; yellow [255,200,50]; orange [255,165,0] (à chaque fois nom et code sont équivalents).

Références