{"id":1249,"date":"2024-07-19T14:22:19","date_gmt":"2024-07-19T12:22:19","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=1249"},"modified":"2024-08-02T09:39:35","modified_gmt":"2024-08-02T07:39:35","slug":"jsxgraph-molecules-projet-emolgine","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=1249","title":{"rendered":"JSXGraph Mol\u00e9cules  &#8212; Projet Emolgine"},"content":{"rendered":"\n<link rel='stylesheet' id='639-css'  href='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/639.css?ver=1722513477' type='text\/css' media='all' \/>\n\n\n<script type=\"text\/javascript\" charset=\"UTF-8\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph\/distrib\/jsxgraphcore.js\"><\/script>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph\/distrib\/jsxgraph.css\" \/>\r\n<script type=\"text\/javascript\"   src ='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.1\/jquery.min.js'><\/script>\r\n\r\n<p style=\"text-align:center\">Projet <a href=\"https:\/\/emolgine.org\">Emolgine<\/a> 2024 <\/p>\r\n<hr\/>\r\n<p style=\"text-align:center\" >Illustration de l&#8217;interpr\u00e9tation des fichiers SDF pour reconstruire les structures de mol\u00e9cules<\/p>\r\n<br\/>\r\n\r\n<div id=\"jsmol-molecules-div\" class=\"grid-molecules\" style=\"width:1000px; height:300px;overflow-x: auto;\">\r\n\t\r\n<\/div>\n\n<script type='text\/javascript'>\nvar id = \"1247\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/1247.js?ver=1722350845'><\/script>\n\n\n\n<p class=\"titre_espace has-vivid-cyan-blue-color has-text-color has-link-color has-medium-font-size wp-elements-55d57214f20be609145ad55cd3855aec\">Explication sur la mise en oeuvre :<\/p>\n\n\n\n<p>Le chargement des mol\u00e9cules se fait \u00e0 partir de fichier sdf de description. Ces fichiers sont constitu\u00e9s de la mani\u00e8re suivante : <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Pseudo Entete <br><br>Information sur le nombre de nodes et de links<br>Description des nodes <br>&#8230;&#8230;.<br>&#8230;&#8230;.<br>Description des links<br>node   node type <br>&#8230;&#8230;..<br>&#8230;&#8230;..<\/p>\n\n\n\n<p>&#8230;&#8230;..<\/p>\n\n\n\n<p><br><br><br>M END<br>Informations compl\u00e9mentaires <br>&#8230;&#8230;<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code><code>-OEChem-07302410092D<\/code>\n<code>\n43 46 0 1 0 0 0 0 0999 V2000\n4.4487 2.0026 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0\n4.2213 -0.1610 0.0000 S 0 0 0 0 0 0 0 0 0 0 0 0\n.........<\/code>.........\n.........\n.........\n<code>9 1 1 6 0 0 0\n1 13 1 0 0 0 0\n10 2 1 1 0 0 0\n2 16 1 0 0 0 0\n3 16 1 0 0 0 0\n3 25 1 0 0 0 0\n4 15 1 0 0 0 0\n4 40 1 0 0 0 0\n5 26 2 0 0 0 0\n....\nM END\n......\n<\/code><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Interpr\u00e9tation du fichier de description pour reconstruire \u00e0 l&#8217;aide des primitives de JSXGraph la repr\u00e9sentation de la mol\u00e9cule. <\/p>\n\n\n\n<p>Plusieurs probl\u00e8mes sont \u00e0 prendre en compte : centrer la mol\u00e9cule dans le graphe et repr\u00e9senter les diff\u00e9rentes natures de liens entre la atomes. Plusieurs types de liens sont \u00e0 prendre en compte : lien simple, lien double, lien triple, liens complexes. De plus il faut pouvoir recentrer de fa\u00e7on automatique la mol\u00e9cule dans le graphe afin d&#8217;avoir la repr\u00e9sentation la plus lisible.<\/p>\n\n\n\n<p>Repr\u00e9sentation des liens : <\/p>\n\n\n\n<p><strong>Lien simple<\/strong> : se r\u00e9alise simplement avec un objet de type segment. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>board.create(\"segment\",&#91;tab_p&#91;link&#91;0]-1],tab_p&#91;link&#91;1]-1]],{strokeColor:'blue',name:'',visible:true,fixed:true,strokeWidth:1});<\/code><\/pre>\n\n\n\n<p><strong>Lien double<\/strong> : le lien double a \u00e9t\u00e9 \u00e9labor\u00e9 \u00e0 partir d&#8217;une combinaison entre deux segments de largeur diff\u00e9rente trac\u00e9 l&#8217;un au dessus de l&#8217;autre. Le segment trac\u00e9 par dessus a la m\u00eame couleur que le fond du graphe ce qui donne l&#8217;illusion d&#8217;avoir deux segments.<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-link-color has-small-font-size wp-elements-ea972c7fe5d3ab072a18cb0a1a75d321\"><code>board.create(\"segment\",&#91;tab_p&#91;link&#91;0]-1],tab_p&#91;link&#91;1]-1]],{name:'',visible:true,fixed:true,strokeWidth:5});\nboard.create(\"segment\",&#91;tab_p&#91;link&#91;0]-1],tab_p&#91;link&#91;1]-1]],{strokeColor:\"#E5E4E2\", name:'',visible:true,fixed:true,strokeWidth:2});<\/code><\/pre>\n\n\n\n<p><strong>Lien triple<\/strong> : cette r\u00e9alisation se fait en plusieurs \u00e9tapes, d&#8217;abord g\u00e9n\u00e9rer des points \u00e0 partir d&#8217;une rotation, et ensuite on trace des parall\u00e8les sur ces points.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let t2 = board.create('transform', &#91;Math.PI\/30, tab_p&#91;link&#91;1]-1]], {type: 'rotate'});\nlet t2_ = board.create('transform', &#91;-Math.PI\/30, tab_p&#91;link&#91;1]-1]], {type: 'rotate'});\nlet pnew = board.create('point', &#91;tab_p&#91;link&#91;0]-1], &#91;t2]], {visible:false,fixed:true});\nlet pnew2 = board.create('point', &#91;tab_p&#91;link&#91;0]-1], &#91;t2_]], {visible:false,fixed:true});\nlet l1=board.create(\"segment\",&#91;tab_p&#91;link&#91;0]-1],tab_p&#91;link&#91;1]-1]],{name:'',visible:true,fixed:true,strokeWidth:1});\nlet pl1 = board.create('parallel', &#91;tab_p&#91;link&#91;0]-1],tab_p&#91;link&#91;1]-1], pnew],{fillColor:'blue',strokeColor:'blue',straightFirst: false, straightLast: false});\nlet pl2 = board.create('parallel', &#91;tab_p&#91;link&#91;0]-1],tab_p&#91;link&#91;1]-1], pnew2],{fillColor:'blue',strokeColor:'blue',straightFirst: false, straightLast: false});\n<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"465\" src=\"https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_triple-1024x465.png\" alt=\"\" class=\"wp-image-1340\" style=\"width:842px\" srcset=\"https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_triple-1024x465.png 1024w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_triple-300x136.png 300w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_triple-768x349.png 768w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_triple.png 1119w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><a href=\"https:\/\/jsfiddle.net\/spgoo\/j1cbqmko\/21\/\">Lien vers jsfiddle pour exemple <br><\/a><strong>Liens complexes<\/strong> :deux configurations ont \u00e9t\u00e9 r\u00e9alis\u00e9es pour effectuer ces repr\u00e9sentations. La premi\u00e8re consiste \u00e0 tracer un polygone \u00e0 partir de trois points. Les points suppl\u00e9mentaires sont obtenus par une transformation de type rotation. Pour la deuxi\u00e8me forme complexe qui se formalise par des segments de taille diff\u00e9rente entre les deux points \u00e0 relier, une premi\u00e8re solution a \u00e9t\u00e9 mise en oeuvre \u00e0 partir d&#8217;une solution de type hatch qui permet de positionner sur un segment ou ligne des ticks (comme pour un axe d&#8217;un rep\u00e8re). Mais le probl\u00e8me est la taille variable de ces ticks, on n&#8217;a pas trouv\u00e9 la fa\u00e7on de d\u00e9finir la taille variable. Du coup, il a fallu construire une petite fonction qui \u00e9value les caract\u00e9ristiques du segment (y=ax+b) et qui reconstruit sur ce segment les ticks \u00e0 intervalle r\u00e9gulier.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Premi\u00e8re forme :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let t2 = board.create('transform', &#91;Math.PI\/20, tab_p&#91;link&#91;0]-1]], {type: 'rotate'});\nlet t2_ = board.create('transform', &#91;-Math.PI\/20, tab_p&#91;link&#91;0]-1]], {type: 'rotate'});\nlet pnew = board.create('point', &#91;tab_p&#91;link&#91;1]-1], &#91;t2]], {color: 'blue',visible:false,fixed:true});\nlet pnew2 = board.create('point', &#91;tab_p&#91;link&#91;1]-1], &#91;t2_]], {color: 'blue',visible:false,fixed:true});\nboard.create(\"polygon\",&#91;tab_p&#91;link&#91;0]-1],pnew,pnew2],{ fillOpacity:1,strokeColor:'blue',fillColor:'blue',name:'',visible:true,fixed:true,strokeWidth:1});<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"480\" src=\"https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_1-1024x480.png\" alt=\"\" class=\"wp-image-1328\" style=\"width:842px;height:auto\" srcset=\"https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_1-1024x480.png 1024w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_1-300x141.png 300w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_1-768x360.png 768w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_1.png 1170w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><a href=\"https:\/\/jsfiddle.net\/spgoo\/2aswf7tv\/11\/\">Lien vers jsfiddle pour <\/a><a href=\"https:\/\/jsfiddle.net\/spgoo\/2aswf7tv\/12\/\">exemple<\/a><\/p>\n\n\n\n<p>Deuxi\u00e8me forme :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_2-1024x423.png\" alt=\"\" class=\"wp-image-1333\" style=\"width:842px\" srcset=\"https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_2-1024x423.png 1024w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_2-300x124.png 300w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_2-768x317.png 768w, https:\/\/spgoo.org\/wp-content\/uploads\/2024\/08\/trace_molecule_2.png 1251w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><a href=\"https:\/\/jsfiddle.net\/spgoo\/ft3x5vje\/16\/\">Lien  vers Jsfiddle <\/a><a href=\"https:\/\/jsfiddle.net\/spgoo\/ft3x5vje\/17\/\">exemples<\/a><a href=\"https:\/\/jsfiddle.net\/spgoo\/ft3x5vje\/16\/\"> :<\/a><\/p>\n\n\n\n<p>Recentrage des repr\u00e9sentations : <\/p>\n\n\n\n<p>Lors de la lecture des coordonn\u00e9es des points , on extrait le min et le max sur les deux axes X et Y. Une fois les valeurs connues on dimensionne le boudingBox du graphe pour garantir que la repr\u00e9sentation se trouve au centre de l&#8217;image.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explication sur la mise en oeuvre : Le chargement des mol\u00e9cules se fait \u00e0 partir de fichier sdf de description. Ces fichiers sont constitu\u00e9s de la mani\u00e8re suivante : Pseudo Entete Information sur le nombre de nodes et de linksDescription des nodes &#8230;&#8230;.&#8230;&#8230;.Description des linksnode node type &#8230;&#8230;..&#8230;&#8230;.. &#8230;&#8230;.. M ENDInformations compl\u00e9mentaires &#8230;&#8230; Interpr\u00e9tation du [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1249","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/1249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1249"}],"version-history":[{"count":77,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/1249\/revisions"}],"predecessor-version":[{"id":1376,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/1249\/revisions\/1376"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}