|
|
| (156 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html> | + | <html><div class="simbox" data-width="785" data-height="300" data-load="https://2013.igem.org/Team:Paris_Saclay/</html>{{{load}}}<html>">Loading simulation...</div></html> |
| - | <script> | + | |
| - | function simboxes_load()
| + | |
| - | {
| + | |
| - | var simboxes= document.getElementsByClassName("simbox");
| + | |
| - | | + | |
| - | for(var i=0 ; i < simboxes.length ; ++i)
| + | |
| - | init_simbox(simboxes[i], i);
| + | |
| - | }
| + | |
| - | | + | |
| - | function molecule()
| + | |
| - | {
| + | |
| - | this.name= undefined;
| + | |
| - | this.quantity= 0;
| + | |
| - | this.curve_show= false;
| + | |
| - | this.curve_color= "#000000";
| + | |
| - | this.const= false;
| + | |
| - | this.adjustable= false;
| + | |
| - | }
| + | |
| - | | + | |
| - | | + | |
| - | function init_simbox(sb, id)
| + | |
| - | {
| + | |
| - | //Get parameters
| + | |
| - | var xmlfile= 'https://2013.igem.org/Team:Paris_Saclay/'+sb.getAttribute('data-load')+'?action=raw&ctype=text/css';
| + | |
| - | var width= sb.getAttribute('data-width');
| + | |
| - | var height= sb.getAttribute('data-height');
| + | |
| - |
| + | |
| - | //Set box size
| + | |
| - | sb.style.width=width+"px";
| + | |
| - | sb.style.height=height+"px";
| + | |
| - | | + | |
| - | //Open XML data file
| + | |
| - | var xmldata= null;
| + | |
| - | try
| + | |
| - | {
| + | |
| - | var xhr= new XMLHttpRequest();
| + | |
| - | xhr.open("GET", xmlfile, false);
| + | |
| - | xhr.send();
| + | |
| - | var parser= new DOMParser();
| + | |
| - | xmldata= parser.parseFromString(xhr.responseText, "application/xml");
| + | |
| - | if(xmldata.documentElement.nodeName != 'sim')
| + | |
| - | throw 'XML parsing error';
| + | |
| - | }
| + | |
| - | catch(err)
| + | |
| - | {
| + | |
| - | sb.innerHTML='Error : ' + err;
| + | |
| - | return false;
| + | |
| - | }
| + | |
| - | | + | |
| - | //Load simulation parameters
| + | |
| - | var volume= xmldata.getElementsByTagName("volume")[0].childNodes[0].nodeValue;
| + | |
| - | var timestep= xmldata.getElementsByTagName("timestep")[0].childNodes[0].nodeValue;
| + | |
| - | | + | |
| - | //Load molecules
| + | |
| - | var molecules= new Array();
| + | |
| - | var molecule_tags= xmldata.getElementsByTagName("molecule");
| + | |
| - | for(var i= 0 ; i < molecule_tags.length ; ++i)
| + | |
| - | {
| + | |
| - | molecules[i]= new molecule();
| + | |
| - | molecules[i].name= molecule_tags[i].getAttribute('name');
| + | |
| - | if(molecule_tags[i].hasAttribute('quantity'))
| + | |
| - | molecules[i].quantity= molecule_tags[i].getAttribute('quantity');
| + | |
| - | if(molecule_tags[i].hasAttribute('curve_show'))
| + | |
| - | molecules[i].curve_show= (molecule_tags[i].getAttribute('curve_show') == 'true');
| + | |
| - | if(molecule_tags[i].hasAttribute('curve_color'))
| + | |
| - | molecules[i].curve_color= molecule_tags[i].getAttribute('curve_color');
| + | |
| - | if(molecule_tags[i].hasAttribute('const'))
| + | |
| - | molecules[i].const= (molecule_tags[i].getAttribute('const') == 'true');
| + | |
| - | if(molecule_tags[i].hasAttribute('adjustable'))
| + | |
| - | molecules[i].adjustable= (molecule_tags[i].getAttribute('adjustable') == 'true');
| + | |
| - | alert(molecules[i].curve_show);
| + | |
| - | }
| + | |
| - | | + | |
| - | //Create canvas
| + | |
| - | var canv= document.createElement('canvas');
| + | |
| - | var ctx= canv.getContext("2d");
| + | |
| - | canv.id= "simbox_canv"+id;
| + | |
| - | canv.width= width;
| + | |
| - | canv.height= height;
| + | |
| - | sb.appendChild(canv);
| + | |
| - |
| + | |
| - | | + | |
| - | return true;
| + | |
| - | }
| + | |
| - | | + | |
| - | | + | |
| - | window.addEventListener("load", simboxes_load, false);
| + | |
| - | </script>
| + | |
| - | | + | |
| - | <div class="simbox" data-width="</html>{{{width}}}<html>" data-height="</html>{{{height}}}<html>" data-load="</html>{{{load}}}<html>"></div>
| + | |
| - | | + | |
| - | </html> | + | |
Loading simulation...
"
