{"id":98,"date":"2024-05-22T09:34:05","date_gmt":"2024-05-22T07:34:05","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=98"},"modified":"2024-05-22T14:33:04","modified_gmt":"2024-05-22T12:33:04","slug":"vci-arn","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=98","title":{"rendered":"VCI-Arn"},"content":{"rendered":"<script type='text\/javascript'>\nvar id = \"93\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/93.js?ver=1716363146'><\/script>\n\n\n<script type='text\/javascript'>\nvar id = \"91\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/91.js?ver=1716380732'><\/script>\n\n\n<script type='text\/javascript'>\nvar id = \"95\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/95.js?ver=1716363170'><\/script>\n\n\n    <script type=\"text\/javascript\" charset=\"UTF-8\" src=\".\/personnalisation\/scripts\/d3.js\"><\/script>\r\n    <script type=\"text\/javascript\" charset=\"UTF-8\" src=\".\/personnalisation\/scripts\/fornac.js\"><\/script>    \r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.10.5\/font\/bootstrap-icons.css\">\r\n    <link ref=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" \/>\r\n    <script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/js\/all.min.js\"><\/script>\r\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  \r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\".\/personnalisation\/css\/cbm_style.css\" \/>\r\n    <link rel=\"stylesheet\" type=\"text\/css\" href=\".\/personnalisation\/css\/fornac.css\" media=\"screen\" \/>\r\n\r\n\r\n<script>\r\nwindow.MathJax = {\r\n  tex: {\r\n    inlineMath: [ ['$','$'], [\"\\\\(\",\"\\\\)\"] ],\r\n    displayMath: [ ['$$','$$'], [\"\\\\[\",\"\\\\]\"] ],\r\n    packages: ['base', 'ams']\r\n  },\r\n  options: {\r\n    ignoreHtmlClass: 'tex2jax_ignore',\r\n    processHtmlClass: 'tex2jax_process'\r\n  }\r\n};\r\n<\/script>  \r\n<script type=\"text\/javascript\" id=\"MathJax-script\"  src=\"https:\/\/cdn.jsdelivr.net\/npm\/mathjax@3\/es5\/tex-mml-chtml.js\"><\/script>\r\n\r\n    <!-- --------------------------------------------------------------------------------------->\r\n    <!-- -----                      FENETRE DE SAISIE DES PONDERATIONS                ---------->\r\n    <!-- --------------------------------------------------------------------------------------->\r\n    <div id=\"mydivPonderations\" class=\"fen_arrondie\" style=\"opacity: 1;width:300px;margin-bottom:10px;display:none\" >\r\n        <div id=\"mydivPonderationsheader\" class=\"fen_arrondie\" style=\"height:70px;\">\r\n            Fen\u00eatre de saisie des Pond\u00e9rations \r\n            <span id=\"titre_commentaire\" ><\/span>\r\n            <button type=\"button\" class=\"close\" onclick=\"closeModal('mydivPonderations');\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">\u00d7<\/span>\r\n            <\/button>\r\n        <\/div>\r\n        <div class=\"modele_local_Comments fen_arrondie\" id=\"div_corps_Comments\" \r\n        style=\"background-color:#aaa9a8;color:#130b8c;padding:10px 0px 10px 20px;margin:-15px 0px 0px 0px\">\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-12\">\r\n                    <label class=\"form-check-label\" id=\"action_identifiant\">Contenu :<\/label>\r\n                <\/div>\r\n            <\/div>\t\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-5\">\r\n                    <label class=\"form-check-label\" >$Action :$<\/label>\r\n                <\/div>\r\n                <div class=\"col-sm-5\">\r\n                    <label class=\"form-check-label\" id=\"action_origine\">Contenu :<\/label>\r\n                <\/div>\r\n            <\/div>\t\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-5\">\r\n                    <label class=\"form-check-label\" >$Seuil :$<\/label>\r\n                <\/div>\r\n                <div class=\"col-sm-5\">\r\n                    <label class=\"form-check-label\" id=\"action_seuil\">contenu :<\/label>\r\n                <\/div>\r\n            <\/div>\t\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-5\">\r\n                    <label class=\"form-check-label\" >$Segment :$<\/label>\r\n                <\/div>\r\n                <div class=\"col-sm-5\">\r\n                    <label class=\"form-check-label\" style=\"display: inline-block;width:100px;color:green\" id=\"action_base\">contenu :<\/label>\r\n                <\/div>\r\n            <\/div>\t\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-2\">\r\n                    <label class=\"form-check-label\" >$x1 :$<\/label>\r\n                <\/div>\r\n                <div class=\"col-sm-4\">\r\n                    <label class=\"form-check-label\" style=\"display: inline-block;width:100px;color:green\" id=\"action_x1\">cont<\/label>\r\n                <\/div>\r\n                <div class=\"col-sm-2\">\r\n                    <label class=\"form-check-label\" >$x2 :$<\/label>\r\n                <\/div>\r\n                <div class=\"col-sm-4\">\r\n                    <label class=\"form-check-label\" style=\"display: inline-block;width:100px;color:green\" id=\"action_x2\">cont<\/label>\r\n                <\/div>\r\n\r\n            <\/div>\t\r\n\r\n            <hr>\t\t            \t\t\r\n            <div class=\"row\">                           \r\n                <div class=\"col-sm-4\">\r\n                    <p class=\"text-dark\">Acide A:<\/p>\r\n                <\/div>\r\n                <div class=\"col-sm-6\">\r\n                    <div class=\"input-group w-auto align-items-center\" style=\"justify-content:space-between\">\r\n                        <input type=\"button\" value=\"-\" class=\"button-minus border rounded-circle  icon-shape icon-sm mx-1 \" data-field=\"quantity\">\r\n                        <input id=\"baseA\"  type=\"number\" step=\"1\" max=\"50\" value=\"1\" name=\"quantity\" class=\"quantity-field border-0 text-center\" style=\"width:50px;\">\r\n                        <input type=\"button\" value=\"+\" class=\"button-plus border rounded-circle icon-shape icon-sm \" data-field=\"quantity\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"row\">                                       \r\n                <div class=\"col-sm-4\">\r\n                    <p class=\"text-dark\">Acide G:<\/p>\r\n                <\/div>\r\n                <div class=\"col-sm-6\">\r\n                    <div class=\"input-group w-auto align-items-center\" style=\"justify-content:space-between\" >\r\n                        <input type=\"button\" value=\"-\" class=\"button-minus border rounded-circle  icon-shape icon-sm mx-1 \" data-field=\"quantity\">\r\n                        <input id=\"baseG\"  type=\"number\" step=\"1\" max=\"50\" value=\"1\" name=\"quantity\" class=\"quantity-field border-0 text-center \" style=\"width:50px;\">\r\n                        <input type=\"button\" value=\"+\" class=\"button-plus border rounded-circle icon-shape icon-sm lh-0\" data-field=\"quantity\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"row\">                                                   \r\n                <div class=\"col-sm-4\">\r\n                    <p class=\"text-dark\">Acide U:<\/p>\r\n                <\/div>\r\n                <div class=\"col-sm-6\">\r\n                    <div class=\"input-group w-auto align-items-center\" style=\"justify-content:space-between\">\r\n                        <input type=\"button\" value=\"-\" class=\"button-minus border rounded-circle  icon-shape icon-sm mx-1 lh-0\" data-field=\"quantity\">\r\n                        <input id=\"baseU\"  type=\"number\" step=\"1\" max=\"50\" value=\"1\" name=\"quantity\" class=\"quantity-field border-0 text-center\" style=\"width:50px;\" >\r\n                        <input type=\"button\" value=\"+\" class=\"button-plus border rounded-circle icon-shape icon-sm lh-0\" data-field=\"quantity\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"row\">                                                   \r\n                <div class=\"col-sm-4\">\r\n                    <p class=\"text-dark\">Acide C:<\/p>\r\n                <\/div>\r\n                <div class=\"col-sm-6\">\r\n                    <div class=\"input-group w-auto align-items-center\" style=\"justify-content:space-between\">\r\n                        <input type=\"button\" value=\"-\" class=\"button-minus border rounded-circle  icon-shape icon-sm mx-1 lh-0\" data-field=\"quantity\">\r\n                        <input id=\"baseC\" type=\"number\" step=\"1\" max=\"10\" value=\"1\" name=\"quantity\" class=\"quantity-field border-0 text-center\" style=\"width:50px;\">\r\n                        <input type=\"button\" value=\"+\" class=\"button-plus border rounded-circle icon-shape icon-sm lh-0\" data-field=\"quantity\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"row \">\r\n                <div class=\"col-sm-12\" style=\"text-align:center;\">\r\n                    <div  id=\"z_btnreactuali\" class=\"col col-sm-6\" style=\"text-align:center;padding:0px 0px 10px 50px\" >\r\n                        <button  type=\"button\" class=\"btn btn-warning\" onclick=\"valide_action(this,event);\">Valider<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\t\t\t\r\n        <\/div>\r\n    <\/div>\r\n    <!-------      FIN     FENETRE DE SAISIE DES PONDERATIONS                ---------->\r\n\r\n    <!-- --------------------------------------------------------------------------------------->\r\n    <!-- -----                      FENETRE DE VISUALISATION 2D                       ---------->\r\n    <!-- --------------------------------------------------------------------------------------->\r\n\r\n    <div id=\"mydivVisualisation\" style=\"opacity: 1;width:1280px;margin-bottom:10px;display:none;\" class=\"fen_arrondie\" >\r\n        <div id=\"mydivVisualisationheader\" class=\"fen_arrondie\" style=\"height:70px;\">\r\n            $Fen\u00eatre~de~visualisation~2D$\r\n            <span ><\/span>\r\n            <button type=\"button\" class=\"close\" onclick=\"closeModal('mydivVisualisation');\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">\u00d7<\/span>\r\n            <\/button>\r\n        <\/div>\r\n        <div class=\"modele_local_Comments fen_arrondie\" id=\"div_corps_Comments\"  style=\"background-color:#aaa9a8;color:#130b8c;padding:10px 0px 10px 20px;margin:-15px 0px 0px 0px\">\r\n            <div class=\"row\">\r\n                <a href=\"http:\/\/rna.tbi.univie.ac.at\/forna\/gallery.html\">ViennaRNA Web Services<\/a>\r\n                <div class=\"col-sm-12 fen_arrondie\">\r\n                    <div id='rna_ss' class=\"fen_arrondie\" style=\"width:1230px; height:300px;\"> <\/div>\r\n                <\/div>\r\n            <\/div>\t\r\n\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-12\">\r\n                    <div id=\"boxVisu\" class=\"jxgbox\" style=\"width:1230px; height:300px;\"><\/div>                \r\n                <\/div>\r\n            <\/div>\t\r\n        <\/div>\r\n    <\/div>\r\n     \r\n    <div id=\"mydivSPGoO\" class=\"fen_arrondie\" style=\"opacity: 1;width:450px;margin-bottom:10px;display:none\" >\r\n        <div id=\"mydivSPGoOheader\" class=\"fen_arrondie\" style=\"height:70px;\">\r\n            $Scientific~Programing~Group~Of~Orleans~~$ \r\n            <button type=\"button\" class=\"close\" onclick=\"closeModal('mydivSPGoO');\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n              <span aria-hidden=\"true\">\u00d7<\/span>\r\n            <\/button>\r\n        <\/div>\r\n        <div class=\"modele_local_Comments fen_arrondie\" id=\"div_corps_Comments\" \r\n        style=\"background-color:#aaa9a8;color:#130b8c;padding:2px 0px 10px 2px;margin:-15px 0px 0px 0px\">\r\n        <br\/>    \r\n        <div class=\"row\">\r\n                <div class=\"col-sm-5\">\r\n                    <label class=\"form-check-label\" style=\"color:red\" >$Members~:$<\/label>\r\n                <\/div>\r\n                <div class=\"col-sm-5\">\r\n                    <label class=\"form-check-label\" id=\"action_origine\"><\/label>\r\n                <\/div>\r\n            <\/div>\t\r\n            <hr>\t\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-4\" style=\"text-align:center;\">\r\n                    <img decoding=\"async\"  src=\".\/personnalisation\/images\/e_eveno.jpg\" style=\"width:40px; height:40px;display:inner-block;\" ><\/img>\r\n                <\/div>\r\n                <div class=\"col-sm-8\" style=\"text-align:left;\">\r\n                    <label class=\"form-check-label\" style=\"display:inner-block;\" >$E.~Eveno~(CNRS)$ <\/label>\r\n                <\/div>\r\n            <\/div>\t\r\n            <hr>\t\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-4\" style=\"text-align:center;\">\r\n                    <img decoding=\"async\"  src=\".\/personnalisation\/images\/p_krezel.jpg\" style=\"width:40px; height:40px;display:inner-block;\" ><\/img>\r\n                <\/div>\r\n                <div class=\"col-sm-8\" style=\"text-align:left;\">\r\n                    <label class=\"form-check-label\" style=\"display:inner-block;\" >$P.~Krezel~(CNRS)$ <\/label>\r\n                <\/div>\r\n            <\/div>\t\r\n            <hr>\t\r\n            <div class=\"row\">\r\n                <div class=\"col-sm-4\" style=\"text-align:center;\">\r\n                    <img decoding=\"async\"  src=\".\/personnalisation\/images\/c_piatecki.png\" style=\"width:40px; height:40px;display:inner-block;\" ><\/img>\r\n                <\/div>\r\n                <div class=\"col-sm-8\" style=\"text-align:left;\">\r\n                    <label class=\"form-check-label\" style=\"display:inner-block;\" >$C.~Piatecki~(UO)$ <\/label>\r\n                <\/div>\r\n            <\/div>\t\r\n            <hr>\t\t     \r\n            <div class=\"row\">\r\n                <div class=\"col-sm-4\" style=\"text-align:center;\">\r\n                    <img decoding=\"async\"  src=\".\/personnalisation\/images\/y_stroppa.jpg\" style=\"width:40px; height:40px;display:inner-block;\" ><\/img>\r\n                <\/div>\r\n                <div class=\"col-sm-8\" style=\"text-align:left;\">\r\n                    <label class=\"form-check-label\" style=\"display:inner-block;\" >$Y.~Stroppa~(CNRS)$ <\/label>\r\n                <\/div>\r\n\r\n            <\/div>\t\r\n            <hr>\t\r\n\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- --------------------------------------------------------------------------------------->\r\n    <!-- -----                      FENETRE PRINCIPALE                                ---------->\r\n    <!-- --------------------------------------------------------------------------------------->\r\n    <div id=\"box1\" class=\"jxgbox\" style=\"width:1230px; height:300px;\"><\/div>\r\n    <div id=\"box6\" class=\"jxgbox\" style=\"width:1230px; height:100px;\"><\/div>\r\n    <div id=\"box5\" class=\"jxgbox\" style=\"width:1230px; height:250px;\"><\/div>\r\n    <aside>\r\n    <!-- <div id=\"box3\" class=\"jxgbox\" style=\"width:400px; height:300px;\"><\/div> -->\r\n    <div id=\"box4\" class=\"jxgbox\" style=\"width:300px; height:950px;\"><\/div>\r\n    <\/aside>  \r\n    <div id=\"box2\" class=\"jxgbox\" style=\"width:1230px; height:300px;\"><\/div>\r\n    <textarea style=\"display:none\" id=\"output\" rows=\"5\" cols=\"50\"><\/textarea>\r\n\r\n\r\n\r\n<script type=\"text\/javascript\">\r\nvar L=5;\r\nvar Col=N=4;\r\nvar Lig=5;\r\nvar R=[Col];\r\n\r\nvar ex1=tab_exemples[0][\"ARN\"];\r\n\r\nJXG.Options.text.cssDefaultStyle = 'font-family:KaTeX_Main, serif;font-size:4 vmin';\r\n\/\/ JXG.Options.text.highlightCssDefaultStyle = 'font-family:KaTeX_Main, serif;font-size:4 vmin';\r\nJXG.Options.text.useMathJax = true;\t\r\nJXG.Options.line.highlightStrokeWidth = 5;\r\n\r\nvar boardVisu = null; \r\n\r\nvar board = JXG.JSXGraph.initBoard(\"box1\", {pan: {enabled:false},boundingbox: [-7,110, 140,-30], axis:true,\r\nwithLines:false,defaultAxes: {    x: { ticks: {visible: true} },    y: { ticks: {visible: true} }  },showNavigation:false,showCopyright:false});\r\nboard.jc = new JXG.JessieCode();\r\nboard.jc.use(board);\r\nboard.renderer.container.style.backgroundColor='#E5E4E2';\r\n\r\nconst button_gauche = board.create('button', [-5, 60, '<i style=\"height:40px;color:green;\" class=\"fa-solid fa-chevron-left\" aria-hidden=\"true\"><\/i>', function() {\r\n        application_ponderations();\r\n    }], {});\r\nconst button_droit = board.create('button', [135, 60, '<i style=\"height:40px;color:green;\" class=\"fa-solid fa-chevron-right\" aria-hidden=\"true\"><\/i>', function() {\r\n        application_ponderations();\r\n     }], {});    \r\n\/\/ trac\u00e9 de la regle pour la visualisation sur le graphe \r\n\/\/ board \r\nlet p1_regle=null, p2_regle=null,regle_board = null; \r\nlet p1_regl=null,p2_regl=null,regl_board=null; \r\nlet poly_selection=null;\r\n\r\n\/\/ board5\r\nlet p1_regle_board5=null, p2_regle_board5=null,regle_board5 = null; \r\nlet p1_regl_base=null, p2_regl_base=null, regl_board_base=null;\r\nlet poly_selection_base=null;\r\n\r\n\/\/ BoardVisu \r\nlet p1_regl_boardVisu=null, p2_regl_boardVisu=null, regl_boardVisu=null;\r\nlet p1_regle_visu=null, p2_regle_visu=null, regle_boardVisu=null;\r\nlet poly_selection_boardVisu=null;\r\n\t\r\nlet tab_motif=[];\r\n\r\nconst checkbox = board.create('checkbox', [-3, -7, '']);\r\nconst cbtext = board.create(\"text\",[-5,-15, '$\\\\text{All}$'],{fontsize:10,fixed:true,highlight:false});\r\nJXG.addEvent(checkbox.rendNodeCheckbox, 'change', function() {\r\n    if (this.Value()) {\r\n      document.getElementById(\"box2\").style.display=\"block\";\r\n    } else {\r\n      document.getElementById(\"box2\").style.display=\"none\"; \r\n    }\r\n}, checkbox);\r\nconst text0 = board.create('text',[110,100,'$\\\\text{SPGoO (2024) }$'],{fixed:true,fontsize:14, color: venetianRed});\r\ntext0.on(\"up\", function() {\r\n    document.getElementById(\"mydivSPGoO\").style.display=\"block\";\r\n});\r\nconst text0_1 = board.create('text',[130,100,'$\\\\text{Orl\u00e9ans}$'],{fixed:true,fontsize:14, color: venetianRed});\r\nconst text0_2 = board.create('text',[20,100,'$\\\\text{Prototype exp\u00e9rimental de mise au point ARN '+'$\\\\rightarrow$'+ ' Image}$'],{fixed:true,fontsize:22, color: venetianRed});\r\nconst ind_board = board.create('text',[-7,100,'$\\\\text{Board}$'],{fixed:true,fontsize:12, color: venetianRed});\r\nconst lien_exploitation = board.create('text',[40,90,'<a href=\".\/?page_id=116\" >Exploitation<\/a>'],{fixed:true,fontsize:12, color: venetianRed});\r\n\r\n\/\/ -------------------------------------------------------\r\n\/\/ fabrication du board2   --  commandes \r\n\/\/ -------------------------------------------------------\r\nvar board2 = JXG.JSXGraph.initBoard(\"box2\", {boundingbox: [-1, 1.33, 7, -0.5],axis:false,visible:false, showNavigation:false,showCopyright:false});\r\n\/\/ board2.dehighlightAll();\r\nboard2.renderer.container.style.backgroundColor = '#E5E4E2';\r\n\r\n\r\n\/\/ variables qui permettent de positionner sur le board les elements \r\nlet d_col1=[-0.4,0.3,1,1.7,2.4,3.1];\r\nlet d_lig=[1.2,0.9,0.6,0.3,0,-0.3];\r\nlet size_f=\"11px\";\r\nlet ecart=0.5;\r\nvar cbtext1 = board2.create(\"text\",[d_col1[0]+0.3,d_lig[0], '$\\\\text{A%}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkbox1 = board2.create('checkbox', [d_col1[0]+ecart, d_lig[0], ''],{fixed:true,highlight:false});\r\nvar cbtext2 = board2.create(\"text\",[d_col1[1]+0.3,d_lig[0], '$\\\\text{G%}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkbox2 = board2.create('checkbox', [d_col1[1]+ecart, d_lig[0], ''],{fixed:true,highlight:false});\r\nvar cbtext3 = board2.create(\"text\",[d_col1[2]+0.3,d_lig[0], '$\\\\text{U%}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkbox3 = board2.create('checkbox', [d_col1[2]+ecart, d_lig[0], ''],{fixed:true,highlight:false});\r\nvar cbtext5 = board2.create(\"text\",[d_col1[3]+0.3,d_lig[0], '$\\\\text{C%}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkbox5 = board2.create('checkbox', [d_col1[3]+ecart, d_lig[0], ''],{fixed:true,highlight:false});\r\n\r\nvar cbtextAC = board2.create(\"text\",[d_col1[0],d_lig[1], '$\\\\text{Aire A-C}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxAC = board2.create('checkbox', [d_col1[0]+ecart, d_lig[1], ''],{fixed:true,highlight:false});\r\nvar cbtextAG = board2.create(\"text\",[d_col1[1],d_lig[1], '$\\\\text{Aire A-G}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxAG = board2.create('checkbox', [d_col1[1]+ecart, d_lig[1], ''],{fixed:true,highlight:false});\r\nvar cbtextAU = board2.create(\"text\",[d_col1[2],d_lig[1], '$\\\\text{Aire A-U}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxAU = board2.create('checkbox', [d_col1[2]+ecart, d_lig[1], ''],{fixed:true,highlight:false});\r\nvar cbtextCG = board2.create(\"text\",[d_col1[3],d_lig[1], '$\\\\text{Aire C-G}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxCG = board2.create('checkbox', [d_col1[3]+ecart, d_lig[1], ''],{fixed:true,highlight:false});\r\nvar cbtextCU = board2.create(\"text\",[d_col1[4],d_lig[1], '$\\\\text{Aire C-U}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxCU = board2.create('checkbox', [d_col1[4]+ecart, d_lig[1], ''],{fixed:true,highlight:false});\r\nvar cbtextGU = board2.create(\"text\",[d_col1[5],d_lig[1], '$\\\\text{Aire G-U}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxGU = board2.create('checkbox', [d_col1[5]+ecart, d_lig[1], ''],{fixed:true,highlight:false});\r\n\/\/ deuxi\u00e8me ligne \r\nvar cbtextCA = board2.create(\"text\",[d_col1[0],d_lig[2], '$\\\\text{Aire C-A}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxCA = board2.create('checkbox', [d_col1[0]+ecart, d_lig[2], ''],{fixed:true,highlight:false});\r\nvar cbtextGA = board2.create(\"text\",[d_col1[1],d_lig[2], '$\\\\text{Aire G-A}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxGA = board2.create('checkbox', [d_col1[1]+ecart,d_lig[2], ''],{fixed:true,highlight:false});\r\nvar cbtextUA = board2.create(\"text\",[d_col1[2],d_lig[2], '$\\\\text{Aire U-A}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxUA = board2.create('checkbox', [d_col1[2]+ecart, d_lig[2], ''],{fixed:true,highlight:false});\r\nvar cbtextGC = board2.create(\"text\",[d_col1[3],d_lig[2], '$\\\\text{Aire G-C}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxGC = board2.create('checkbox', [d_col1[3]+ecart, d_lig[2], ''],{fixed:true,highlight:false});\r\nvar cbtextUC = board2.create(\"text\",[d_col1[4],d_lig[2], '$\\\\text{Aire U-C}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxUC = board2.create('checkbox', [d_col1[4]+ecart, d_lig[2], ''],{fixed:true,highlight:false});\r\nvar cbtextUG = board2.create(\"text\",[d_col1[5],d_lig[2], '$\\\\text{Aire U-G}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxUG = board2.create('checkbox', [d_col1[5]+ecart, d_lig[2], ''],{fixed:true,highlight:false});\r\n\/\/ zones d'entree des motifs utilisateur\r\nlet zone_trace = create_polygon(board2,[[d_col1[0]-0.2,d_lig[3]+0.1],[d_col1[5],d_lig[3]+0.1],[d_col1[5],d_lig[5]-0.1],[d_col1[0]-0.2,d_lig[5]-0.1]],{fixed:true,name:'',visible:true,fillColor:'black',withLines:false } );\r\nvar motif1 = board2.create('input', [d_col1[0]-0.2,d_lig[3], '', 'Motif 1: '], {fontsize:size_f,cssStyle: 'width: 40px'});\r\nvar motif2 = board2.create('input', [d_col1[1],d_lig[3], '', 'Motif 2: '], {fontsize:size_f,cssStyle: 'width: 40px'});\r\n\r\nvar cbtextM1 = board2.create(\"text\",[d_col1[0]-0.2,d_lig[4], '$\\\\text{Motif 1}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxM1 = board2.create('checkbox', [d_col1[0]+ecart, d_lig[4], ''],{fixed:true,highlight:false});\r\n\r\nvar cbtextM2 = board2.create(\"text\",[d_col1[1]+0.2,d_lig[4], '$\\\\text{Motif 2}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxM2 = board2.create('checkbox', [d_col1[1]+ecart+0.4,d_lig[4], ''],{fixed:true,highlight:false});\r\n\r\nvar cbtextM1M2 = board2.create(\"text\",[d_col1[0]-0.2,d_lig[5], '$\\\\text{Aire M1-M2 :}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxM1M2 = board2.create('checkbox', [d_col1[0]+ecart, d_lig[5], ''],{fixed:true,highlight:false});\r\n\r\nvar cbtextM2M1 = board2.create(\"text\",[d_col1[1]+0.2,d_lig[5], '$\\\\text{Aire M2-M1 :}$'],{fontsize:size_f,fixed:true,highlight:false});\r\nvar checkboxM2M1 = board2.create('checkbox', [d_col1[1]+ecart+0.4,d_lig[5], ''],{fixed:true,highlight:false});\r\n\r\nzone_trace.on(\"mouseover\", function() {\r\n  console.log(\"zone de trac\");\r\n  this.setAttribute({backgroundColor:\"red\"});\r\n})\r\n\r\nvar button1 = board2.create('button', [d_col1[2], d_lig[3], '$Update$', function() {\r\n  \/\/ v\u00e9rifier si les zones sont renseign\u00e9es et lancer la construction des \u00e9l\u00e9ments \r\n  if (motif1.Value()!=\"\" && motif2.Value()!=\"\") {\r\n    let regexM1 = new RegExp( motif1.Value(),\"g\" );\r\n    let regexM2 = new RegExp( motif2.Value(),\"g\" );\r\n    generation_visuel(regexM1,regexM2 )\r\n  }\r\n}], {});\r\n\r\nvar ind_board2 = board2.create('text',[-1,1.2,'$\\\\text{Board2}$'],{sise:20, color: venetianRed});\r\n\r\n\/\/ controler la saisie dans les zones d'input entre A C G ou U \r\nmotif1.rendNodeInput.onkeypress=function(evt) {\r\n  return verif_clavier(evt);\r\n};\r\nmotif2.rendNodeInput.onkeypress=function(evt) {\r\n  return verif_clavier(evt);\r\n};\r\n\r\nboard2.addChild(board);\r\n\/\/ --------------------------------------------\r\n\/\/ d\u00e9fintion des sliders \r\n\/\/ --------------------------------------------\r\nvar sl0 = board2.create('slider', [[4.7, 0.9], [6, 0.9], [1, 3, 100]],{\r\n    baseline: { strokeColor: 'blue'},\r\n    highline: { strokeColor: 'red'},\r\n    fillColor: '#0061a8',\r\n    strokeColor: '#0061a8',\r\n    label: {fontSize: 14, strokeColor: 'Black'},\r\n    name: '$a$', \/\/ Not shown, if suffixLabel is set\r\n    suffixLabel: '$\\\\,\\\\,\\\\,Fen\u00eatre = \\\\, $',\r\n    snapWidth: 1       \r\n});\r\n\r\n\/* sl0.on('move', function() {\r\n    reset_intervalles();\r\n}); *\/\r\n\r\nvar sl1 = board2.create('slider', [[4.7, 0.7], [6, 0.7], [1, 1,20]],{\r\n    baseline: { strokeColor: 'blue'},\r\n    highline: { strokeColor: 'red'},\r\n    fillColor: '#0061a8',\r\n    strokeColor: '#0061a8',\r\n    label: {fontSize: 14, strokeColor: 'Black'},\r\n    name: '$a$', \/\/ Not shown, if suffixLabel is set\r\n    suffixLabel: '$\\\\,\\\\,\\\\,Pas = \\\\, $',\r\n    snapWidth: 1       \r\n});\r\n\/* sl1.on('move', function() {\r\n    reset_intervalles();\r\n});*\/\r\n\r\n\/\/ ---------------------------------------------------------\r\n\/\/ Traitement de la partie affichage Board4 \r\n\/\/ ---------------------------------------------------------\r\nvar board4 = JXG.JSXGraph.initBoard(\"box4\", {pan: {enabled:false},boundingbox: [-10,110, 120,-20], axis:false,\r\nwithLines:false,defaultAxes: {    x: { ticks: {visible: true} },    y: { ticks: {visible: true} }  },\r\nshowNavigation:false,showCopyright:false});\r\nboard4.jc = new JXG.JessieCode();\r\nboard4.jc.use(board);\r\nboard4.renderer.container.style.backgroundColor='#E5E4E2';\r\n\/\/ board4.dehighlightAll();\r\n\r\n\r\n\/\/ affiche les \u00e9l\u00e9ment\u00e0 partir de la liste_actions\r\nfunction drawGrid() {\r\n    JXG.JSXGraph.freeBoard(board4);\r\n    board4 = JXG.JSXGraph.initBoard(\"box4\", {pan: {enabled:false},boundingbox: [1-2, 80, 20, -2], axis:false,\r\n    withLines:true, defaultAxes: {x: { ticks: {visible: true} },y: { ticks: {visible: true} }\r\n    },showNavigation:false,showCopyright:false});\r\n    var ind_board4 = board4.create('text',[0,79,'$\\\\text{Board4}$'],{sise:20, color: venetianRed});\r\n    let ligne=76;\r\n    board4.create('text',[3, ligne,'$\\\\text{Liste des actions}$'],{fontsize:16,fixed:true,highlight:false});\r\n    ligne-=2.5;\r\n    Object.keys(Liste_actions).forEach((key_act)=>\r\n        {\r\n            let act=Liste_actions[key_act];\r\n\r\n            let chaine=act.identifiant.substr(0,8)+\"--\"+act.aire+\"-\"+act.seuil;\r\n            var checkboxAct = board4.create('checkbox', [0,ligne, ''],{color:'red',checked:act.status, fixed:true,highlight:true});\r\n            checkboxAct.act=act;\r\n            checkboxAct.on(\"up\", function() {\r\n                this.act.status=!this.Value();\r\n            });\r\n            let item_act=board4.create('text',[2, ligne,'$\\\\text{'+chaine+'}$'],{color:\"blue\",fontsize:14,fixed:true,highlight:false});\r\n            item_act.Act=act;\r\n            item_act.on('over', function() {\r\n                   board4.containerObj.style.cursor = 'pointer';\r\n            });\r\n            item_act.on('out', function() {\r\n                board4.containerObj.style.cursor = 'default';\r\n            });            \r\n            var button_on = board4.create('button', [15, ligne, '<i style=\"height:15px;color:grey;\" class=\"fa-solid fa-trash\" title=\"Suppression\" aria-hidden=\"true\"><\/i>', function() {\r\n                        suppression_action(this);}], {});\r\n            button_on.identifiant=act.identifiant; \r\n            \/\/ permet de conserver le line entre la chekbox et la zone de texte \r\n            item_act.checkbox=checkboxAct;\r\n            item_act.on(\"up\", function() {\r\n                \/\/ rechargement de la fenetre pour modification \r\n                recharge_fen_ponderation(this.Act);\r\n            });\r\n            \/\/ attention \u00e0 cette hauteur car l'effet over et out si trop proche ne fonctionne pas \r\n            ligne-=3.5;\r\n    });\r\n    \/\/ bouton d'application des pond\u00e9rations    \r\n    ligne-=5;\r\n    \/\/ bouton d'application des pond\u00e9rations \r\n    var button_on = board4.create('button', [1, ligne, '<i style=\"height:40px;color:green;\" title=\"Mise en place des pond\u00e9rations.\" class=\"fa-solid fa-circle-down\" aria-hidden=\"true\"><\/i>', function() {\r\n        application_ponderations();\r\n    }], {});\r\n    var button_off = board4.create('button', [8, ligne, '<i style=\"height:40px;color:red\" title=\"R\u00e9initialisation des images.\" class=\"fa-solid fa-circle-up\" aria-hidden=\"true\"><\/i>', function() {\r\n        reinit_ponderations();\r\n    }], {});  \r\n    var button2 = board4.create('button', [15, ligne, '<i style=\"height:40px;color:blue\" title=\"Sauvegarde des actions.\" class=\"fa-solid fa-save\" aria-hidden=\"true\"><\/i>', \r\n        function() {sauvegarde_actions();}], \r\n        {strokeColor:\"blue\"});  \r\n    \r\n    let indice_tab=document.getElementById(\"select_adn\").value; \r\n    let element=lot_1[indice_tab];\r\n    \/\/ informations sp\u00e9cifiques associ\u00e9es a la sequence \r\n    ligne-=5;\r\n    board4.create('text',[3, ligne,'$\\\\text{Caract\u00e9ristiques}$'],{fontsize:16,fixed:true,highlight:false});\r\n    ligne-=2;\r\n    board4.create('text',[1, ligne,'$\\\\text{Genome : '+element[\"Genome\"]+'}$'],{fontsize:12,fixed:true,highlight:false});\r\n    ligne-=2;\r\n    board4.create('text',[1, ligne,'$\\\\text{'+element[\"names_seq\"]+'}$'],{fontsize:12,fixed:true,highlight:false});\r\n    ligne-=2;\r\n    board4.create('text',[1, ligne,'$\\\\text{PiPeek : '+element[\"PiPeak\"]+'}$'],{fontsize:12,fixed:true,highlight:false});\r\n    ligne-=2;\r\n    board4.create('text',[1, ligne,'$\\\\text{PfPeak : '+element[\"PfPeak\"]+'}$'],{fontsize:12,fixed:true,highlight:false});\r\n    ligne-=2;\r\n    board4.create('text',[1, ligne,'$\\\\text{Strand : '+element[\"strand\"]+'}$'],{fontsize:12,fixed:true,highlight:false});\r\n    ligne-=2;\r\n    board4.create('text',[1, ligne,'$\\\\text{Classe : '+element[\"ClassID\"]+'}$'],{fontsize:12,fixed:true,highlight:false});\r\n    ligne-=2;\r\n    board4.create('text',[1, ligne,'$\\\\text{Classe 1 : '+element[\"Classes1\"]+'}$'],{fontsize:12,fixed:true,highlight:false});\r\n    ligne-=2;\r\n    board4.create('text',[1, ligne,'$\\\\text{Mfe : '+element[\"mfe\"]+'}$'],{fontsize:12,fixed:true,highlight:false});\r\n\r\n\r\n    ligne-=4;\r\n    board4.create('text',[3, ligne,'$\\\\text{Valeurs calcul\u00e9s :}$'],{fontsize:16,fixed:true,highlight:false});\r\n    let ind_i=0;\r\n    ligne-=2;\r\n    for (var i = 0; i < Col; i++) {\r\n       for (var j = 0; j < Lig; j++) {\r\n\t      board4.create('text',[7, ligne, '$\\\\text{p'+R[j][i].name+' : '+R[j][i].value.toFixed(2)+'%}$'],{fontsize:12,fixed:true,highlight:false});\r\n          ligne-=1.4;\r\n          ind_i++;\r\n       }\r\n    }  \r\n    \r\n}\r\n\r\nconst sauvegarde_actions=function() {\r\n    sauvegarde_local_storage(\"CBM_Actions\",Liste_actions);\r\n}\r\n\r\nconst suppression_action=function(obj) {\r\n    delete Liste_actions[obj.identifiant];\r\n    drawGrid();\r\n}\r\n\r\nconst pourc=function(ex, motif) {\r\n    const regexp=new RegExp(motif,\"g\");\r\n    let r=-1;\r\n    let Pc_=ex.substr(0).match(regexp);\r\n    Pc_==null?r=0:r=Pc_.length\/ex.length*100;\r\n    return {\"name\":motif,\"value\":r}\r\n}\r\n\r\n\/\/ -----------------------------------------------------------------------------\r\n\/\/ sert \u00e0 extraire et \u00e9valuer toutes les grandeurs s\u00e9pcifiques \u00e0 la description \r\n\/\/ -----------------------------------------------------------------------------\r\nconst caract=function(exemple) {\r\n  \/\/ nb de A, U,T,G,C\r\n    ex1=exemple[\"mRna\"];\r\n    \/\/ % des proportions simples et combin\u00e9es \r\n    let PcA_=ex1.substr(0).match(regexpA).length;\r\n    let PcC_=ex1.substr(0).match(regexpC)==null?0:ex1.substr(0).match(regexpC).length;\r\n    let PcG_=ex1.substr(0).match(regexpG)==null?0:ex1.substr(0).match(regexpG).length;\r\n    let PcU_=ex1.substr(0).match(regexpU)==null?0:ex1.substr(0).match(regexpU).length;\r\n    for (let i=0; i<Lig;i++) {\r\n    R[i]=[Col];\r\n    }\r\n    for (let i=0; i<Lig;i++) {\r\n    for (let j=0; j<Col;j++) {\r\n    R[i][j]={\"name\":\"AD\",\"value\":1}\r\n    }\r\n    }\r\n    let r=-1;\r\n    \/\/ Calcul premiere ligne\r\n    R[0][0]=pourc(ex1,\"A\");  R[0][1]=pourc(ex1,\"U\");  R[0][2]=pourc(ex1,\"G\");  R[0][3]=pourc(ex1,\"C\");\r\n    \/\/ Calcul deuxi\u00e8me ligne\r\n    R[1][0]=pourc(ex1,\"AA\");  R[1][1]=pourc(ex1,\"AU\");  R[1][2]=pourc(ex1,\"AG\");  R[1][3]=pourc(ex1,\"AC\");\r\n    \/\/ Calcul troisi\u00e8me ligne\r\n    R[2][0]=pourc(ex1,\"UA\");  R[2][1]=pourc(ex1,\"UU\");  R[2][2]=pourc(ex1,\"UG\");  R[2][3]=pourc(ex1,\"UC\");\r\n    \/\/ Calcul cinquieme ligne\r\n    R[3][0]=pourc(ex1,\"GA\");  R[3][1]=pourc(ex1,\"GU\");  R[3][2]=pourc(ex1,\"GG\");  R[3][3]=pourc(ex1,\"GC\");\r\n    \/\/ Calcul cinquieme ligne\r\n    R[4][0]=pourc(ex1,\"CA\");  R[4][1]=pourc(ex1,\"CU\");  R[4][2]=pourc(ex1,\"CG\");  R[4][3]=pourc(ex1,\"CC\");\r\n\r\n    let dec=90; \r\n    let inter=5;\r\n    let cbtextA_sup = board5.create(\"text\",[dec+10,8, '$\\\\text{nA}$'],{fontsize:12,fixed:true,highlight:false});\r\n    let cbtextA = board5.create(\"text\",[dec+5,0, '$\\\\text{A}$'],{fontsize:50,fixed:true,highlight:false});\r\n    let cbtextA_sub = board5.create(\"text\",[dec+10,-8, '$\\\\text{pca}$'],{fontsize:12,fixed:true,highlight:false});\r\n\r\n    let cbtextG_sup = board5.create(\"text\",[dec+20,8, '$\\\\text{nG}$'],{fontsize:12,fixed:true,highlight:false});\r\n    let cbtextG = board5.create(\"text\",[dec+15,0, '$\\\\text{G}$'],{fontsize:40,fixed:true,highlight:false});\r\n    let cbtextG_sub = board5.create(\"text\",[dec+20,-8, '$\\\\text{pcg}$'],{fontsize:12,fixed:true,highlight:false});\r\n\r\n    let cbtextU_sup = board5.create(\"text\",[dec+30,8, '$\\\\text{nU}$'],{fontsize:12,fixed:true,highlight:false});\r\n    let cbtextU = board5.create(\"text\",[dec+25,0, '$\\\\text{U}$'],{fontsize:40,fixed:true,highlight:false});\r\n    let cbtextU_sub = board5.create(\"text\",[dec+30,-8, '$\\\\text{pcu}$'],{fontsize:12,fixed:true,highlight:false});\r\n\r\n    let cbtextC_sup = board5.create(\"text\",[dec+40,8, '$\\\\text{nC}$'],{fontsize:12,fixed:true,highlight:false});\r\n    let cbtextC = board5.create(\"text\",[dec+35,0, '$\\\\text{C}$'],{fontsize:40,fixed:true,highlight:false});\r\n    let cbtextC_sub = board5.create(\"text\",[dec+40,-8, '$\\\\text{pcc}$'],{fontsize:12,fixed:true,highlight:false});\r\n    \/\/ on reactualise les valeurs  \r\n    cbtextA_sup.content=[\"\\$\"+PcA_+\"\\$\"];\r\n    cbtextG_sup.content=[\"\\$\"+PcG_+\"\\$\"];\r\n    cbtextU_sup.content=[\"\\$\"+PcU_+\"\\$\"];\r\n    cbtextC_sup.content=[\"\\$\"+PcC_+\"\\$\"];\r\n\r\n    cbtextA_sub.content=[\"\\$\"+R[0][0].value.toFixed(2)+\"\\$%\"];\r\n    cbtextU_sub.content=[\"\\$\"+R[0][1].value.toFixed(2)+\"\\$%\"];\r\n    cbtextG_sub.content=[\"\\$\"+R[0][2].value.toFixed(2)+\"\\$%\"];\r\n    cbtextC_sub.content=[\"\\$\"+R[0][3].value.toFixed(2)+\"\\$%\"];\r\n\r\n    document.getElementById('output').value=\"\";\r\n    document.getElementById('output').value = \"A:\" + iA.Value() + \"\\n\"+ \"G:\" + iG.Value() + \"\\n\"+\r\n                                    \"U:\" + iU.Value() + \"\\n\"+ \"C:\" + iC.Value() ;\r\n    board2.update();\r\n}\r\n\r\nfunction bulleY(x, regexp) {\r\n\tlet res = ex1.substr(x,sl0.Value()).match(regexp);\r\n\tif (res==null) {\r\n        return 0;\r\n    }\r\n\treturn (res.length\/sl0.Value())*100;\r\n  \/\/return res.length*10;\r\n}\r\n\r\n\/\/ pas compris pourquoi il faut passer par la constitution d'une liste poiur les abcisses\r\nlet  DatX=[];\r\n\r\nfor (var i = 0; i < ex1.length-sl0.Value(); i++) {\r\n     DatX.push(i);\r\n}\r\nfunction fct_datx() {\r\n    let datx=[]\r\n    for (var i = 0; i < ex1.length-sl0.Value(); i++) {\r\n        datx.push(i);\r\n    }\r\n    console.log(datx);\r\n    return datx;\r\n}\r\n\r\n\/\/ let curA = board.create('curve',[function(x) { return x;},function(x){return bulleY(x,regexpA);},0,function() {return ex1.length-sl0.Value();}],{dash:1,strokecolor:function() \u00a0{return get_rgb_hsv(\"A\");},strokeWidth:3,layer:2, visible:function(){return checkbox1.Value();}});\r\nlet curC = board.create('curve',[DatX,function(ttt){return bulleY(ttt,regexpC);},0,function() {return ex1.length-sl0.Value();}],{dash:1,strokecolor:function() \u00a0{return get_rgb_hsv(\"C\");},strokeWidth:3,layer:2, visible:function(){return checkbox5.Value();}});\r\nlet curA = board.create('curve',[DatX,function(ttt){return bulleY(ttt,regexpA);},0,function() {return ex1.length-sl0.Value();}],{dash:1,strokecolor:function() \u00a0{return get_rgb_hsv(\"A\");},strokeWidth:3,layer:2, visible:function(){return checkbox1.Value();}});\r\nlet curG = board.create('curve',[DatX,function(x){return bulleY(x,regexpG);},0,function() {return ex1.length-sl0.Value();}],{dash:1,strokecolor:function() \u00a0{return get_rgb_hsv(\"G\");},strokeWidth:3,layer:2, visible:function(){return checkbox2.Value();}});\r\nlet curU = board.create('curve',[DatX,function(x){return bulleY(x,regexpU);},0,function() {return ex1.length-sl0.Value();}],{dash:1,strokecolor:function() \u00a0{return get_rgb_hsv(\"U\");},strokeWidth:3,layer:2, visible:function(){return checkbox3.Value();}});\r\n\/\/ let curC = board.create('curve',[function(x) { return x;},function(x){return bulleY(x,regexpC);},0,function() {return ex1.length-sl0.Value();}],{dash:1,strokecolor:function() \u00a0{return get_rgb_hsv(\"C\");},strokeWidth:3,layer:2, visible:function(){return checkbox5.Value();}});\r\n\r\nlet iA = board.create('integral', [[0, function() {return ex1.length-sl0.Value();}], curA],{withLabel:false,fillColor:function() {return get_rgb_hsv(\"A\");},visible:function(){return checkbox1.Value();}});\r\nlet iG = board.create('integral', [[0, function() {return ex1.length-sl0.Value();}], curG],{withLabel:false,fillColor:function() {return get_rgb_hsv(\"G\");},visible:function(){return checkbox2.Value();}});\r\nlet iU = board.create('integral', [[0, function() {return ex1.length-sl0.Value();}], curU],{withLabel:false,fillColor:function() {return get_rgb_hsv(\"U\");},visible:function(){return checkbox3.Value();}});\r\nlet iC = board.create('integral', [[0, function() {return ex1.length-sl0.Value();}], curC],{withLabel:false,fillColor:function() {return  get_rgb_hsv(\"C\");},visible:function(){return checkbox5.Value();}});\r\n\r\nconst tab_I=[iA,iG,iU,iC]\r\n\r\n\/\/ pour enlever les points de construction de l'integrale \r\ntab_I.forEach((e)=> {\r\n    e.baseLeft.setAttribute({visible:false});\r\n    e.baseRight.setAttribute({visible:false});\r\n    e.curveLeft.setAttribute({visible:false});\r\n    e.curveRight.setAttribute({visible:false});\r\n})\r\n\r\n \r\nvar select_adn = board2.create('text',[4,1.2,\r\n    '<div style = \"font-family:Computer Modern,serif;font-size:16px;font-style:italic;\">'+\r\n    '<select id=\"select_adn\" onchange=\"chargement_();\" class=\"mybox\"> '+\r\n    '<\/select>'+\r\n    '<\/div>'],{fixed:true,size:14});\r\n\r\n\r\nvar select_motif = board2.create('text',[1.7,0.2,\r\n    '<div style = \"font-family:Computer Modern,serif;font-size:10px;font-style:italic;\">'+\r\n    '<select id=\"select_motif\" onchange=\"chargement_motif();\" class=\"mybox1\"> '+\r\n    '<\/select>'+\r\n    '<\/div>'],{fixed:true,size:14});\r\n\r\n\/\/ --------------------------------------------\r\n\/\/ Sl\u00e9ection du motif \r\n\/\/ --------------------------------------------\r\nconst chargement_motif=function() {\r\n    let indice_motif=document.getElementById(\"select_motif\").value; \r\n    \/\/ il faut remplir les deux inputs correspondant motif1 et motif2\r\n    let atb= indice_motif.split(\"-\");\r\n    motif1.set(atb[0]);\r\n    motif2.set(atb[1]);\r\n    const  regexM1exp = new RegExp(atb[0],\"g\");\r\n    const  regexM2exp = new RegExp(atb[1],\"g\");\r\n    generation_visuel(regexM1exp,regexM2exp )\r\n}\r\n\r\nlet curMotif1=null, iMotif1=null ;\r\nlet curMotif2=null, iMotif2=null ;\r\n\r\n\/\/ fonction de construction et de generation du visuel d'un motif s\u00e9lectionn\u00e9 ou saisie \r\n\/\/ a parametrer le check \u00e0 fournir et la regexp \u00e0 appliquer \r\nconst generation_visuel=function(regexpMotif1, regexpMotif2) {\r\n    \/\/ il faut \u00e9valuer les pourcentages de la s\u00e9quence s\u00e9lectionn\u00e9e \u00e0 l'aide d'un nouveau regexp \r\n    \/\/console.log(regexpMotif);\r\n    \/\/ il faut :generer la repr\u00e9sentation de l'allure de la courbe \r\n    if (curMotif1!=null){\r\n        board.removeObject(curMotif1);board.removeObject(iMotif1);\r\n    }\r\n    if (curMotif2!=null) {\r\n        board.removeObject(curMotif2);board.removeObject(iMotif2);\r\n    }\r\n    curMotif1 = board.create('curve',[DatX,function(x){return bulleY(x,regexpMotif1);},0,ex1.length-sl0.Value()-1],{dash:1,strokecolor:function() \u00a0{return get_rgb_hsv(\"M1\");},strokeWidth:3,layer:2, visible:function(){return checkboxM1.Value();}});\r\n    curMotif2 = board.create('curve',[DatX,function(x){return bulleY(x,regexpMotif2);},0,ex1.length-sl0.Value()-1],{dash:1,strokecolor:function() \u00a0{return get_rgb_hsv(\"M2\");},strokeWidth:3,layer:2, visible:function(){return checkboxM2.Value();}});\r\n    iMotif1 = board.create('integral', [[0, ex1.length-sl0.Value()-1], curMotif1],{withLabel:false,fillColor:function() {return get_rgb_hsv(\"M1\");},visible:function(){return checkboxM1.Value();}});\r\n    iMotif2 = board.create('integral', [[0, ex1.length-sl0.Value()-1], curMotif2],{withLabel:false,fillColor:function() {return get_rgb_hsv(\"M2\");},visible:function(){return checkboxM2.Value();}});\r\n    \/\/let clip = board.create('curvedifference', [curMotif1, curMotif2], {fillColor: 'yellow', fillOpacity: 0.6});\r\n    iMotif1.baseLeft.setAttribute({visible:false});\r\n    iMotif1.baseRight.setAttribute({visible:false});\r\n    iMotif1.curveLeft.setAttribute({visible:false});\r\n    iMotif1.curveRight.setAttribute({visible:false});\r\n    iMotif2.baseLeft.setAttribute({visible:false});\r\n    iMotif2.baseRight.setAttribute({visible:false});\r\n    iMotif2.curveLeft.setAttribute({visible:false});\r\n    iMotif2.curveRight.setAttribute({visible:false});\r\n    tab_motif=[];\r\n    tab_motif.push({\"name\":areaM1_M2,\"curves\":[curMotif1,curMotif2]});\r\n    tab_motif.push({\"name\":areaM2_M1,\"curves\":[curMotif2,curMotif1]});\r\n\r\n    creation_aire_M1_M2();\r\n}\r\n\r\n\/\/ -----------------------------------------------------------\r\n\/\/ S\u00e9lection de la s\u00e9quence \r\n\/\/ -----------------------------------------------------------\r\nconst chargement_=function() {\r\n   let indice_tab=document.getElementById(\"select_adn\").value; \r\n   reset_intervalles();\r\n   bande_couleur_visu();                                          \r\n   caract(lot_1[indice_tab]);\r\n   drawGrid();\r\n   \/\/ laisser au plus simple car le fauit de nettoyer et de retracer pose plus de pb\r\n   document.getElementById('output').value=\"\";\r\n   document.getElementById('output').value = \"A:\" + iA.Value()\/100 + \"\\n\"+  \r\n                                            \"G:\" + iG.Value()\/100 + \"\\n\"+  \r\n                                            \"U:\" + iU.Value()\/100 + \"\\n\"+  \r\n                                            \"C:\" + iC.Value()\/100 ;     \r\n}\r\n\r\n\/\/ -----------------------------------------------\r\n\/\/ Chargement de la liste des \u00e9l\u00e9ments d'exemple a partir du lot_1\r\n\/\/ -----------------------------------------------\r\nconst charge_adn=function() {\r\n  \/\/ balaye le tableau et charge les options \r\n  let texte=\"ARN_\";\r\n  var sele = document.getElementById('select_adn');\r\n    let i=0;\r\n    for (var jeu of Object.keys(lot_1)){\r\n        var option = document.createElement(\"option\");\r\n        option.text = lot_1[jeu][\"names_seq\"];\r\n        option.value = jeu;  \/\/ on donne l'indice de la s\u00e9quence \r\n        sele.add(option);\r\n        i=i+1;\r\n    }\r\n\r\n    var sele_motif = document.getElementById('select_motif');\r\n    i=0;\r\n    for (var jeu of tab_motifs){\r\n        var option = document.createElement(\"option\");\r\n        option.text = jeu;\r\n        option.value = jeu;  \/\/ on donne l'indice de la s\u00e9quence \r\n        sele_motif.add(option);\r\n        i=i+1;\r\n    }\r\n\r\n}\r\nvar board5=null; \r\nvar board6=null; \r\nvar im=null;  \/\/ image dans board 5 \r\nlet sliderNavigation=null; \r\n\r\nconst creation_board5=function () {  \r\n    board5 = JXG.JSXGraph.initBoard(\"box5\", {boundingbox: [-7,80, 140,-20], axis:false,visible:true,\r\n    withLines:false,\r\n    defaultAxes: {x: { ticks: {visible: true} },y: { ticks: {visible: true} }  },showNavigation:false,showCopyright:false});\r\n    board5.renderer.container.style.backgroundColor='#E5E4E2';\r\n\r\n    var ind_board5 = board5.create('text',[-7,70,'$\\\\text{Board5}$'],{sise:20, color: venetianRed});\r\n    sliderNavigation=board5.create('slider',[[0,20],[130,20],[0,1,130]],{snapWidth: 0.5});\r\n  \r\n    \/\/ -----------------------------------------------------------\r\n    \/\/ traitement associ\u00e9 a la definition de la zone \u00e0 pond\u00e9rer\r\n    \/\/ -----------------------------------------------------------\r\n    sliderNavigation.on(\"dblclick\" , function () {\r\n        \/\/ ----------------------\r\n        \/\/ dans le board \r\n        \/\/ ----------------------\r\n        p1_regl=board.create('point', [this.Value(),0],{visible:false});\r\n        p2_regl=board.create('point', [this.Value(),90],{visible:false});\r\n        regl_board = board.create('segment', [p1_regl, p2_regl]);\r\n        poly_selection=board.create('polygon',[p1_regle, p2_regle, p2_regl, p1_regl],{fillColor:\"red\",fillOpacity:0.2});\r\n        \/\/ ----------------------\r\n        \/\/ dans le board5\r\n        \/\/ ----------------------\r\n            \/\/ generation du polygone pour les bases \r\n        p1_regl_base=board5.create('point', [this.Value(),21],{visible:false});\r\n        p2_regl_base=board5.create('point', [this.Value(),80],{visible:false});\r\n        regl_board_base = board5.create('segment', [p1_regl_base, p2_regl_base]);\r\n        poly_selection_base =board5.create('polygon',[p1_regle_board5, p2_regle_board5, p2_regl_base, p1_regl_base],{fillOpacity:0.2,fillColor:\"red\", withLines:true});\r\n        poly_selection_base.on('over', function() {\r\n                board5.containerObj.style.cursor = 'pointer';\r\n        });\r\n        poly_selection_base.on('out', function() {\r\n                board5.containerObj.style.cursor = 'default';\r\n        });\r\n        poly_selection_base.on(\"hit\",function() {\r\n            let Act=new Action(uuidv4(), \"SaisieManuelle\",\"saisie\",100, ex1,parseInt(p1_regl.X()),parseInt(p1_regle.X()), true);\r\n            recharge_fen_ponderation(Act);\r\n        });\r\n        \/\/ ----------------------\r\n        \/\/ dans le boardVisu\r\n        \/\/ ----------------------\r\n        if (boardVisu!=null && boardVisu!=undefined) {\r\n            p1_regl_boardVisu=boardVisu.create('point', [this.Value(),0],{visible:false});\r\n            p2_regl_boardVisu=boardVisu.create('point', [this.Value(),80],{visible:false});\r\n            regl_boardVisu = boardVisu.create('segment', [p1_regl_boardVisu, p2_regl_boardVisu]);\r\n            poly_selection_boardVisu =boardVisu.create('polygon',[p1_regle_visu, p2_regle_visu, p2_regl_boardVisu, p1_regl_boardVisu],{fillOpacity:0.2,fillColor:\"red\", withLines:true});\r\n        }\r\n\r\n    });\r\n\r\n    \/\/ il faut relier les regles a la valeur du slider mais il n'est pas necssaire de reconstruire les \u00e9l\u00e9ments une fois d\u00e9finis \r\n    \/\/ surtout ne pas les d\u00e9truire \u00e7a ne sert \u00e0 rien \r\n    if (p1_regle==undefined || p1_regle==null) {\r\n        p1_regle=board.create('point', [function() {return sliderNavigation.Value();},0],{visible:false});\r\n        p2_regle=board.create('point', [function() {return p1_regle.X();},90],{visible:false});\r\n        regle_board = board.create('segment', [p1_regle, p2_regle]);\r\n    }\r\n    \/\/ board on reconstruit \r\n    p1_regle_board5=board5.create('point', [function() {return sliderNavigation.Value();},21],{visible:false});\r\n    p2_regle_board5=board5.create('point', [function() {return p1_regle_board5.X();},80],{visible:false});\r\n    regle_board5 = board5.create('segment', [p1_regle_board5, p2_regle_board5]);\r\n\r\n    board5.addChild(board);\r\n    \r\n\r\n    \/\/ Objets n\u00e9cessaires pour la modification des couleurs \r\n    let zA=0;\r\n    let tri_A1 = create_polygon(board5, [[zA,-10],[zA-1,-2],[zA+1,-2]],{fixed:true,name:'',visible:true,fillColor:'black',withLines:true } );\r\n    let tri_A2 = create_polygon(board5,[[zA,8],[zA-1,0],[zA+1,0]],{fixed:true,name:'',visible:true,fillColor:'#000000',withLines:true,fixed:true} );\r\n    let polA = create_polygon(board5, [[zA+2,-10],[zA+6,-10],[zA+6,6],[zA+2,6]],{name:'',shadow:true,fillColor:function() {return get_rgb_hsv(\"A\");},withLines:false,fixed:true} );   \r\n    let nb_A =board5.create('text',[zA+3,-2.5,function(){return \"A\"}],{fixed:true,layer:15,visible:true, strokeColor:\"black\",fontsize:20});\r\n    tri_A1.on('up', function() {\r\n        let val=nb_A.rendNode.innerText;\r\n        tableau_couleurs[val][0]+=30;\r\n        board6.update();board.update();\r\n    });\r\n    tri_A2.on('up', function() {\r\n        let val=nb_A.rendNode.innerText;\r\n        tableau_couleurs[val][0]-=30;\r\n        board6.update();board.update();\r\n    });\r\n    let zG=10;\r\n    let tri_G1 =create_polygon(board5,[[zG,8],[zG+1,0],[zG-1,0]],{name:'',visible:true,fillColor:'black',withLines:true,fixed:true });\r\n    let tri_G2 =create_polygon(board5,[[zG,-10],[zG+1,-2],[zG-1,-2]],{name:'',visible:true,fillColor:'#000000',withLines:true,fixed:true});\r\n    let polG = create_polygon(board5 , [[zG+2,-10],[zG+6,-10],[zG+6,6],[zG+2,6]],{name:'',shadow:true,fillColor:function() {return  get_rgb_hsv(\"G\");},withLines:false,fixed:true} );   \r\n    let nb_G =board5.create('text',[zG+3,-2.5,function(){return 'G'}],{fixed:true,layer:15,visible:true, strokeColor:\"black\",fontsize:20});\r\n    tri_G1.on('up', function() {\r\n        let val=nb_G.rendNode.innerText;\r\n        tableau_couleurs[val][0]+=30;\r\n        board6.update();board.update();\r\n    });\r\n    tri_G2.on('up', function() {\r\n        let val=nb_G.rendNode.innerText;\r\n        tableau_couleurs[val][0]-=30;\r\n        board6.update();board.update();\r\n    });\r\n\r\n    let zU=20;\r\n    let tri_U1 = create_polygon(board5, [[zU,-10],[zU-1,-2],[zU+1,-2]],{fixed:true,name:'',visible:true,fillColor:'black',withLines:true } );\r\n    let tri_U2 = create_polygon(board5,[[zU,8],[zU-1,0],[zU+1,0]],{fixed:true,name:'',visible:true,fillColor:'#000000',withLines:true,fixed:true} );\r\n    let polU = create_polygon(board5, [[zU+2,-10],[zU+6,-10],[zU+6,6],[zU+2,6]],{name:'',shadow:true,fillColor:function() {return  get_rgb_hsv(\"U\");},withLines:false,fixed:true} );   \r\n    let nb_U =board5.create('text',[zU+3,-2.5,function(){return 'U'}],{fixed:true,layer:15,visible:true, strokeColor:\"black\",fontsize:20});\r\n    tri_U1.on('up', function() {\r\n        let val=nb_U.rendNode.innerText;\r\n        tableau_couleurs[val][0]+=30;\r\n        board6.update();board.update();\r\n    });\r\n    tri_U2.on('up', function() {\r\n        let val=nb_U.rendNode.innerText;\r\n        tableau_couleurs[val][0]-=30;\r\n        board6.update();board.update();\r\n    });\r\n\r\n    let zC=30;\r\n    let tri_C1 =create_polygon(board5,[[zC,8],[zC+1,0],[zC-1,0]],{name:'',visible:true,fillColor:'black',withLines:true,fixed:true });\r\n    let tri_C2 =create_polygon(board5,[[zC,-10],[zC+1,-2],[zC-1,-2]],{name:'',visible:true,fillColor:'#000000',withLines:true,fixed:true});\r\n    let polC = create_polygon(board5 , [[zC+2,-10],[zC+6,-10],[zC+6,6],[zC+2,6]],{name:'',highlight:true,shadow:true,fillColor:function() {return  get_rgb_hsv(\"C\");},withLines:false,fixed:true} );   \r\n    let nb_C =board5.create('text',[zC+3,-2.5,function(){return 'C'}],{fixed:true,layer:15,visible:true, strokeColor:\"black\",fontsize:20});\r\n    tri_C1.on('up', function() {\r\n        let val=nb_C.rendNode.innerText;\r\n        tableau_couleurs[val][0]+=30;\r\n        board6.update();board.update();\r\n    });\r\n    tri_C2.on('up', function() {\r\n        let val=nb_C.rendNode.innerText;\r\n        tableau_couleurs[val][0]-=30;\r\n        board6.update();board.update();\r\n    });\r\n\r\n    if (board6!=null ) \r\n        JXG.JSXGraph.freeBoard(board6);\r\n    board6 = JXG.JSXGraph.initBoard(\"box6\", {boundingbox: [-7,30, 140,-20], axis:false,visible:true,\r\n    withLines:false,\r\n    defaultAxes: {x: { ticks: {visible: true} },y: { ticks: {visible: true} }  },showNavigation:false,showCopyright:false});\r\n    board6.renderer.container.style.backgroundColor='#E5E4E2';\r\n\r\n    \/\/ button de visualisation 2d \r\n    let btn_visua = board5.create('button', [60,5, '$Visualisation~2D$', function() {    \r\n        \/\/affichage_2D();\r\n        document.getElementById(\"mydivVisualisation\").style.display=\"block\";\r\n        affichage_2D();\r\n    }], {});\r\n\r\n    \/\/ creation de la zone image \r\n    im = board5.create('image', ['', [-7,30], [148,40]], {noHighlight:false,fixed:true});\r\n    im.setAttribute({\"highlight\":false});\r\n}\r\n\r\n\r\nvar format_2D=null; \r\n\/\/ ------------------------------------------------------------------\r\n\/\/ affichage de la fenetre de visualisation des bases sur un graphe \r\n\/\/ ------------------------------------------------------------------\r\nconst affichage_2D=function() {\r\n    let expression = lot_1[document.getElementById(\"select_adn\").value];\r\n    let size=expression.ss.length;\r\n    \/\/console.log(\"taille de la sequence\" , size);\r\n    \/\/ on recreer le board \r\n    if (boardVisu!=null) {\r\n        JXG.JSXGraph.freeBoard(boardVisu);   \r\n    }\r\n    \r\n    \r\n    boardVisu = JXG.JSXGraph.initBoard(\"boxVisu\", {boundingbox: [-7,90, size+10,-20], axis:true,visible:true,withLines:false,\r\n                defaultAxes: {x: { ticks: {visible: true} },y: { ticks: {visible: true} }  },showNavigation:false,showCopyright:false});\r\n\r\n    boardVisu.renderer.container.style.backgroundColor='white';\r\n    \r\n    p1_regle_visu=boardVisu.create('point', [function() {return sliderNavigation.Value();},0],{visible:false});\r\n    p2_regle_visu=boardVisu.create('point', [function() {return p1_regle_visu.X();},80],{visible:false});\r\n    regle_boardVisu = boardVisu.create('segment', [p1_regle_visu, p2_regle_visu]);\r\n\r\n    if (p1_regl_base!=null) {\r\n        p1_regl_boardVisu=boardVisu.create('point', [p1_regl_base.X(),0],{visible:false});\r\n        p2_regl_boardVisu=boardVisu.create('point', [p1_regl_base.X(),80],{visible:false});\r\n        regl_boardVisu = boardVisu.create('segment', [p1_regl_boardVisu, p2_regl_boardVisu]);\r\n        poly_selection_boardVisu =boardVisu.create('polygon',[p1_regle_visu, p2_regle_visu, p2_regl_boardVisu, p1_regl_boardVisu],{fillOpacity:0.2,fillColor:\"red\", withLines:true});\r\n    }\r\n\r\n\r\n    \/\/ interpr\u00e9tation des parenth\u00e8ses pour la generation du visuel \r\n    let inc_y=2;\r\n    let inc_x=0;\r\n    let liste_lettres={};\r\n    liste_lettres[\"A\"]=[];\r\n    liste_lettres[\"G\"]=[];\r\n    liste_lettres[\"U\"]=[];\r\n    liste_lettres[\"C\"]=[];\r\n    for (let code of expression.ss){\r\n        let lettre=expression.mRna[inc_x];\r\n        let niveau=0;\r\n        switch (code) {\r\n            case ')':\r\n                inc_y-=2;\r\n                break;\r\n            case '(':\r\n                inc_y+=2;\r\n                break;\r\n            case '.':\r\n                break;\r\n        }\r\n        let obj_text= boardVisu.create(\"text\",[inc_x, inc_y,'$'+lettre+'$'],{color:function() {return get_rgb_hsv(lettre);},fontsize:8, fixed:true});\r\n        liste_lettres[lettre].push(obj_text);\r\n        inc_x++;\r\n    }\r\n    let cbtextA = boardVisu.create(\"text\",[120,70, '$A$'],{color:function() {return get_rgb_hsv(\"A\");},fontsize:14,fixed:true,highlight:false});\r\n    let checkboxA = boardVisu.create('checkbox', [125, 70, ''],{checked:true,  fixed:true,highlight:false});   \r\n    checkboxA.liste=liste_lettres[\"A\"];\r\n    checkboxA.on(\"up\", \r\n        function() {\r\n            this.liste.forEach((e)=> {\r\n                e.visProp.visible=!this.Value();\r\n            })\r\n    })\r\n    let cbtextG = boardVisu.create(\"text\",[120,60, '$G$'],{color:function() {return get_rgb_hsv(\"G\");},fontsize:14,fixed:true,highlight:false});\r\n    let checkboxG = boardVisu.create('checkbox', [125, 60, ''],{checked:true,  fixed:true,highlight:false});\r\n    checkboxG.liste=liste_lettres[\"G\"];\r\n    checkboxG.on(\"up\", \r\n        function() {\r\n            this.liste.forEach((e)=> {\r\n                e.visProp.visible=!this.Value();\r\n            })\r\n    })\r\n    \r\n    let cbtextU = boardVisu.create(\"text\",[120,50, '$U$'],{color:function() {return get_rgb_hsv(\"U\");},fontsize:14,fixed:true,highlight:false});\r\n    let checkboxU = boardVisu.create('checkbox', [125, 50, ''],{checked:true, fixed:true,highlight:false});\r\n    checkboxU.liste=liste_lettres[\"U\"];\r\n    checkboxU.on(\"up\", \r\n        function() {\r\n            this.liste.forEach((e)=> {\r\n                e.visProp.visible=!this.Value();\r\n            })\r\n    })\r\n\r\n    let cbtextC = boardVisu.create(\"text\",[120,40, '$C$'],{color:function() {return get_rgb_hsv(\"C\");},fontsize:14,fixed:true,highlight:false});\r\n    let checkboxC = boardVisu.create('checkbox', [125, 40, ''],{checked:true, fixed:true,highlight:false});\r\n    checkboxC.liste=liste_lettres[\"C\"];\r\n    checkboxC.on(\"up\", \r\n        function() {\r\n            this.liste.forEach((e)=> {\r\n                e.visProp.visible=!this.Value();\r\n            })\r\n    })\r\n    inc_y=-10;\r\n    \/\/ mise en place des actions pour visualiser les ponderations et leur localisation \r\n    Object.keys(Liste_actions).forEach((act)=> {\r\n        let action= Liste_actions[act];\r\n        if (action.status) {\r\n            let c_px1 = boardVisu.create('point',[action.x1,70],{fixed:true,visible:false,highlight:false});\r\n            let c_px2 = boardVisu.create('point',[action.x2,70],{fixed:true,visible:false,highlight:false});\r\n            let action_x1 = boardVisu.create('point',[action.x1,inc_y],{fixed:true,visible:false,highlight:false});\r\n            let action_x2 = boardVisu.create('point',[action.x2,inc_y],{fixed:true,visible:false,highlight:false});\r\n            let txt_ponde = boardVisu.create('text',[action.x1,72, JSON.stringify(action.ponderations)],{visible:false,color:venetianRed,fixed:true,highlight:false});\r\n            let txt_seuil = boardVisu.create('text',[action.x1,80, \"Seuil : \" + action.seuil],{visible:false,color:venetianRed,fixed:true,highlight:false});\r\n            let poly= boardVisu.create('polygon',[c_px1,action_x1,action_x2,c_px2],{withLines:true});\r\n            poly.txt = txt_ponde;\r\n            poly.seuil = txt_seuil;\r\n            poly.on(\"mouseover\", function() {\r\n                this.txt.visProp.visible=true;\r\n                this.seuil.visProp.visible=true;\r\n                boardVisu.update();\r\n            });\r\n            poly.on(\"mouseout\", function() {\r\n                this.txt.visProp.visible=false;\r\n                this.seuil.visProp.visible=false;\r\n                boardVisu.update();\r\n            });\r\n        }       \r\n    })\r\n    format_2D= new FornaContainer(\"#rna_ss\", {'applyForce': true});\r\n    var options = {'structure': expression.ss,\r\n                   'sequence':expression.mRna};\r\n    console.log(format_2D);\r\n    format_2D.addRNA(options.structure, options);\r\n    \/\/board5.addChild(boardVisu);\r\n}\r\n\r\nlet tab_bases=[];\r\nlet text_structure=null;\r\n\r\nconst modif_text=function(posit) {\r\n    let expression = lot_1[document.getElementById(\"select_adn\").value];\r\n    let expr=expression.ss;\r\n    chaine='<p style = \"font-family:Lucida Console,Courier, monospace;font-size:14px;\">';\r\n    let nouv='<span style=\"font-size:16px;color:red;display:inner-block\">'+expr[posit]+'<\/span>';\r\n    let chai = expression.ss.substr(0,posit);\r\n    chai+=nouv+expression.ss.substr(posit+1);\r\n    chaine+=chai;\r\n    chaine+='<\/p>'\r\n    text_structure.rendNode.innerHTML=chaine;\r\n}\r\n\r\n\r\n\/\/ ----------------------------------------------------------\r\n\/\/ Trac\u00e9 de la bande de couleur pour l'ARN \r\n\/\/ ----------------------------------------------------------\r\nconst bande_couleur_visu=function() {\r\n    if (board5!=null) \r\n\t\tJXG.JSXGraph.freeBoard(board5);\r\n    creation_board5();\r\n    tab_bases=[];\r\n\r\n    let expression = lot_1[document.getElementById(\"select_adn\").value];\r\n    \r\n    ex1=expression.mRna;\r\n    let text_ARN = board5.create('text',[0,70,'<span style = \"font-family:Lucida Console,Courier, monospace;font-size:14px;\">'+ex1+'<\/span>'], {highlight:false,fixed:true});\r\n    text_structure = board5.create('text',[0,25,'<p style = \"color:black;font-family:Lucida Console,Courier, monospace;font-size:14px;\">'+expression.ss+'<\/p>'], {highlight:false,fixed:true});\r\n    \/\/ mise en place de la selection sur la zone structure \r\n    \/\/ text_structure.isDraggable=true;\r\n    \/* text_structure.on(\"up\",function(e) {\r\n        console.log(\"up sur le texte\" + e);\r\n    })*\/ \r\n    \/\/ trac\u00e9 des fen\u00eatre de couleurs en fonction  de la longeur de l'adn   \r\n    let pas=1; \/\/140\/ex1.length\r\n    let ind_lettre=0;\r\n    let depart=0;\r\n    for (let lettre of ex1) {\r\n        \/\/let color_lettre=get_rgb_hsv(tableau_couleurs[lettre]);\r\n        let x1=depart + ind_lettre*pas;\r\n        let x2=depart + (ind_lettre+1)*pas;\r\n        let poly=board6.create('polygon',[[x1,-10],[x2,-10],[x2,25],[x1,25]],\r\n                        {fixed:true,strokeWidth:1,shadow:true,strokeColor:get_rgb_hsv(lettre),fillColor:get_rgb_hsv(lettre),withLines:false,\r\n                        borders: {fixed:true,strokeWidth:0.1, strokeColor:get_rgb_hsv(lettre)}, vertices: {visible:false}});\r\n        poly.ind_lettre=ind_lettre;\r\n        poly.x1=x1;\r\n        poly.lettre=lettre;\r\n        tab_bases.push(poly);\r\n        ind_lettre++\r\n    } \r\n    \/\/ fabrique l'image correspondante \r\n    toSVG();\r\n}\r\n\r\n\/\/ -------------------------------------------------------------------------\r\n\/\/ Calcul la diff\u00e9rence entre deux curves curA et curC \r\n\/\/ illustration et adaptation du site https:\/\/jsfiddle.net\/migerh\/u95pL\/\r\n\/\/ -------------------------------------------------------------------------\r\nvar areaA_C = board.create('curve', [[], []], {name:'areaA_C',dash:4,color: 'green',opacity: 0.3,visible:function(){return checkboxAC.Value();}});\r\nvar areaC_A = board.create('curve', [[], []], {name:'areaC_A',dash:4,color: 'blue', opacity: 0.3,visible:function(){return checkboxCA.Value();}});\r\n\r\nvar areaA_G = board.create('curve', [[], []], {name:'areaA_G',dash:4,color: 'green', opacity: 0.3,visible:function(){return checkboxAG.Value();}});\r\nvar areaG_A = board.create('curve', [[], []], {name:'areaG_A',dash:4,color: 'blue', opacity: 0.3,visible:function(){return checkboxGA.Value();}});\r\n\r\nvar areaA_U = board.create('curve', [[], []], {name:'areaA_U',dash:4,color: 'green', opacity: 0.3,visible:function(){return checkboxAU.Value();}});\r\nvar areaU_A = board.create('curve', [[], []], {name:'areaU_A',dash:4,color: 'blue', opacity: 0.3,visible:function(){return checkboxUA.Value();}});\r\n\r\nvar areaC_G = board.create('curve', [[], []], {name:'areaC_G',dash:4,color: 'green', opacity: 0.3,visible:function(){return checkboxCG.Value();}});\r\nvar areaG_C = board.create('curve', [[], []], {name:'areaG_C',dash:4,color: 'blue', opacity: 0.3,visible:function(){return checkboxGC.Value();}});\r\n\r\nvar areaC_U = board.create('curve', [[], []], {name:'areaC_U',dash:4,color: 'green', opacity: 0.3,visible:function(){return checkboxCU.Value();}});\r\nvar areaU_C = board.create('curve', [[], []], {name:'areaU_C',dash:4,color: 'blue', opacity: 0.3,visible:function(){return checkboxUC.Value();}});\r\n\r\nvar areaG_U = board.create('curve', [[], []], {name:'areaG_U',dash:4,color: 'green', opacity: 0.3,visible:function(){return checkboxGU.Value();}});\r\nvar areaU_G = board.create('curve', [[], []], {name:'areaU_G',dash:4,color: 'blue', opacity: 0.3,visible:function(){return checkboxUG.Value();}});\r\n\r\nvar areaM1_M2 = board.create('curve', [[], []], {name:'areaM1_M2',dash:4,color: 'green', opacity: 0.3,visible:function(){return checkboxM1M2.Value();}});\r\nvar areaM2_M1 = board.create('curve', [[], []], {name:'areaM2_M1',dash:4,color: 'blue', opacity: 0.3,visible:function(){return checkboxM2M1.Value();}});\r\n\r\nlet tab_intervalles=[];\r\n\r\n\/\/ ---------------------------------------\r\n\/\/ Juste pour effacer les intervalles \r\n\/\/ ---------------------------------------\r\nconst reset_intervalles=function() {\r\n    tab_intervalles.forEach((e)=>{\r\n        \/\/ attention il faut supprimer l'element et toutes ses dependances\r\n        board.removeObject(e);\r\n    });\r\n    tab_intervalles=[];\r\n    if (fenetre!=null) {\r\n        board5.removeObject(fenetre);\r\n        board5.removeObject(btn_fenetre);\r\n    }\r\n    if (poly_selection!=null && poly_selection!=undefined) {\r\n        board.removeObject(poly_selection);\r\n        board.removeObject(regl_board);\r\n        board.removeObject(p1_regl);\r\n        board.removeObject(p2_regl);\r\n    }\r\n    if (poly_selection_base!=null && poly_selection_base!=undefined) {\r\n        board5.removeObject(poly_selection_base);\r\n        board5.removeObject(regl_board_base);\r\n        board5.removeObject(p1_regl_base);\r\n        board5.removeObject(p2_regl_base);\r\n    }\r\n    \r\n    if (poly_selection_boardVisu !=null && poly_selection_boardVisu!=undefined){\r\n        boardVisu.removeObject(poly_selection_boardVisu);\r\n        boardVisu.removeObject(regl_boardVisu);\r\n        boardVisu.removeObject(p1_regl_boardVisu);\r\n        boardVisu.removeObject(p2_regl_boardVisu);\r\n    }\r\n    board.update();\r\n    board5.update();\r\n\r\n}\r\n\r\nlet tab_area=[];\r\ntab_area.push({\"name\":areaA_C,\"curves\":[curA,curC]});\r\ntab_area.push({\"name\":areaA_G,\"curves\":[curA,curG]});\r\ntab_area.push({\"name\":areaA_U,\"curves\":[curA,curU]});\r\ntab_area.push({\"name\":areaC_G,\"curves\":[curC,curG]});\r\ntab_area.push({\"name\":areaC_U,\"curves\":[curC,curU]});\r\ntab_area.push({\"name\":areaG_U,\"curves\":[curG,curU]});\r\ntab_area.push({\"name\":areaC_A,\"curves\":[curC,curA]});\r\ntab_area.push({\"name\":areaG_A,\"curves\":[curG,curA]});\r\ntab_area.push({\"name\":areaU_A,\"curves\":[curU,curA]});\r\ntab_area.push({\"name\":areaG_C,\"curves\":[curG,curC]});\r\ntab_area.push({\"name\":areaU_C,\"curves\":[curU,curC]});\r\ntab_area.push({\"name\":areaU_G,\"curves\":[curU,curG]});\r\n\/\/ tab_area.push({\"name\":areaM1_M2,\"curves\":[curMotif1,curMotif2]});\r\n\/\/ tab_area.push({\"name\":areaM2_M1,\"curves\":[curMotif2,curMotif1]});\r\n\r\nlet fenetre=null; \r\nlet btn_fenetre=null; \r\n\r\nconst recharge_fen_ponderation=function(Act) {\r\n    document.getElementById(\"mydivPonderations\")[\"Act\"]=Act;\r\n    document.getElementById(\"action_identifiant\").innerText=Act.identifiant;\r\n    document.getElementById(\"action_origine\").innerText=Act.aire;\r\n    document.getElementById(\"action_seuil\").innerText=Act.seuil;\r\n    document.getElementById(\"action_x1\").innerText=Act.x1;\r\n    document.getElementById(\"action_x2\").innerText=Act.x2;\r\n    if (Act.expr.length > 10)\r\n        document.getElementById(\"action_base\").innerText=Act.expr.substr(0,5)+\"...\"+Act.expr.substr(-3);\r\n    else\r\n        document.getElementById(\"action_base\").innerText=Act.expr;\r\n    \/\/ chargement des ponderations \r\n    document.getElementById(\"baseA\").value=Act.ponderations[\"A\"];\r\n    document.getElementById(\"baseG\").value=Act.ponderations[\"G\"];\r\n    document.getElementById(\"baseU\").value=Act.ponderations[\"U\"];\r\n    document.getElementById(\"baseC\").value=Act.ponderations[\"C\"];\r\n\r\n    document.getElementById(\"mydivPonderations\").style.display=\"block\";        \r\n}\r\n\r\n\r\n\/\/ affichage de deux segments sur le bandeau afin de voir quelles sont les bases correspondantes\r\nconst affiche_segment_bande=function(line) {\r\n    let name_curve=line.nom_curve;\r\n    let seuil = line.seuil;\r\n    if (fenetre!=null) {\r\n        board5.removeObject(fenetre);\r\n        board5.removeObject(btn_fenetre);\r\n    }\r\n    let x1=line.point1.X();\r\n    let x2=line.point2.X();\r\n    \/\/ on peut tracer un polygone dans board5 \r\n    fenetre=create_polygon(board5, [[x1,20],[x2,20],[x2,82],[x1,82]], {fillOpacity:0.5, hightlight:false,fillColor:\"blue\"});\r\n    btn_fenetre=board5.create(\"button\",[x1,20,\"Pond\u00e9rations\",function() {   \r\n        recharge_fen_ponderation(this.Act);\r\n    }], {fillOpacity:1, hightlight:false,fillColor:\"red\"});      \r\n    let Act=new Action(uuidv4(), name_curve, name_curve, seuil, ex1,x1,x2, true);\r\n    btn_fenetre.Act=Act;\r\n}\r\n\r\ncurC.updateDataArray = function () {\r\n    var left = 0, right = ex1.length-sl0.Value(),x, y;  \r\n    x = [];\r\n    y = [];\r\n    let pas=sl1.Value();\r\n    for (i = 0; i < right;  i+=pas) {\r\n        x.push(i);\r\n        y.push(bulleY(i,regexpC));\r\n    }\r\n    this.dataX = x;\r\n    this.dataY = y;\r\n\r\n}\r\ncurA.updateDataArray = function () {\r\n    var left = 0, right = ex1.length-sl0.Value(),x, y;  \r\n    x = [];\r\n    y = [];\r\n    let pas=sl1.Value();\r\n    for (i = 0; i < right;  i+=pas) {\r\n        x.push(i);\r\n        y.push(bulleY(i,regexpA));\r\n    }\r\n    this.dataX = x;\r\n    this.dataY = y;\r\n}\r\ncurU.updateDataArray = function () {\r\n    var left = 0, right = ex1.length-sl0.Value(),x, y;  \r\n    x = [];\r\n    y = [];\r\n    let pas=sl1.Value();\r\n    for (i = 0; i < right;  i+=pas) {\r\n        x.push(i);\r\n        y.push(bulleY(i,regexpU));\r\n    }\r\n    this.dataX = x;\r\n    this.dataY = y;\r\n\r\n}\r\ncurG.updateDataArray = function () {\r\n    var left = 0, right = ex1.length-sl0.Value(),x, y;  \r\n    x = [];\r\n    y = [];\r\n    let pas=sl1.Value();\r\n    for (i = 0; i < right; i+=pas) {\r\n        x.push(i);\r\n        y.push(bulleY(i,regexpG));\r\n    }\r\n    this.dataX = x;\r\n    this.dataY = y;\r\n}\r\n\r\n\r\n\/\/ -------------------------------------------------------------------------------------------------\r\n\/\/ Chargement au demarrage de la page de l'ensemble des ADN dans le select  au niveau de la value \r\n\/\/ -------------------------------------------------------------------------------------------------\r\ndocument.addEventListener(\"DOMContentLoaded\",function() {\r\n  \/\/chargement_();\r\n  charge_adn();\r\n  bande_couleur_visu();\r\n  caract(lot_1[document.getElementById(\"select_adn\").value]);\r\n  drawGrid();\r\n  creation_aire();  \r\n  dragElement(document.getElementById(\"mydivPonderations\"));\r\n  dragElement(document.getElementById(\"mydivVisualisation\"));\r\n  dragElement(document.getElementById(\"mydivSPGoO\"));\r\n});\r\n\r\nconst closeModal=function(obj) {\r\n\tdocument.getElementById(obj).style.display=\"none\";\r\n    reset_intervalles();\r\n}\r\n\r\n\r\n\r\nfunction dragElement(elmnt) {\r\n  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;\r\n  if (document.getElementById(elmnt.id + \"header\")) {\r\n    \/\/ if present, the header is where you move the DIV from:\r\n    document.getElementById(elmnt.id + \"header\").onmousedown = dragMouseDown;\r\n  } else {\r\n    \/\/ otherwise, move the DIV from anywhere inside the DIV:\r\n   elmnt.onmousedown = dragMouseDown;\r\n  }\r\n\r\n  function dragMouseDown(e) {\r\n    e = e || window.event;\r\n    e.preventDefault();\r\n    \/\/ get the mouse cursor position at startup:\r\n    pos3 = e.clientX;\r\n    pos4 = e.clientY;\r\n    document.onmouseup = closeDragElement;\r\n    \/\/ call a function whenever the cursor moves:\r\n    document.onmousemove = elementDrag;\r\n  }\r\n\r\n  function elementDrag(e) {\r\n    e = e || window.event;\r\n    e.preventDefault();\r\n    \/\/ calculate the new cursor position:\r\n    pos1 = pos3 - e.clientX;\r\n    pos2 = pos4 - e.clientY;\r\n    pos3 = e.clientX;\r\n    pos4 = e.clientY;\r\n    \/\/ set the element's new position:\r\n    elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";\r\n    elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";\r\n  }\r\n\r\n  function closeDragElement() {\r\n    \/\/ stop moving when mouse button is released:\r\n    document.onmouseup = null;\r\n    document.onmousemove = null;\r\n  }\r\n}\t\t\r\n\r\n\/\/ Query the element\r\nconst ele = document.getElementById('mydivCommandes');\r\n\r\n\/\/ The current position of mouse\r\nlet x = 0;\r\nlet y = 0;\r\n\r\n\/\/ The dimension of the element\r\nlet w = 0;\r\nlet h = 0;\r\n\r\njQuery(document).ready(function(){\r\n    jQuery('.input-group').on('click', '.button-plus', function(e) {\r\n        incrementValue(e);\r\n    });\r\n\r\n    jQuery('.input-group').on('click', '.button-minus', function(e) {\r\n        decrementValue(e);\r\n    });  \r\n    \r\n    Liste_actions=rechargement_data(\"CBM_Actions\");\r\n    drawGrid();\r\n});\r\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":39,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-98","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/98","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=98"}],"version-history":[{"count":3,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/98\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/98\/revisions\/112"}],"up":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/39"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}