Template:Team:Paris Saclay/simbox

From 2013.igem.org

(Difference between revisions)
 
(146 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');
+
-
}
+
-
 
+
-
//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);
+
-
+
-
//Init param box
+
-
var paramdiv= document.createElement('div');
+
-
sb.appendChild(paramdiv);
+
-
//legend
+
-
var reshtmlparamdiv= '';
+
-
for(var i= 0 ; i < molecules.length ; ++i)
+
-
{
+
-
  if(molecules[i].curve_show)
+
-
  reshtmlparamdiv += '<span style="font-weight:bold;padding:0.1em 0.3em;color:#FFFFFF;background-color:'+molecules[i].curve_color+';">'+molecules[i].name+'</span>&nbsp;';
+
-
}
+
-
for(var i= 0 ; i < molecules.length ; ++i)
+
-
{
+
-
  if(molecules[i].adjustable)
+
-
  {
+
-
  reshtmlparamdiv += '<br /><br />';
+
-
  reshtmlparamdiv += molecules[i].name + ' = <input type="number" min="0" value="'+molecules[i].quantity+'" disabled="true" />';
+
-
  }
+
-
}
+
-
paramdiv.innerHTML= reshtmlparamdiv;
+
-
 
+
-
 
+
-
 
+
-
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>
+

Latest revision as of 20:48, 27 September 2013

Loading simulation...

Retrieved from "http://2013.igem.org/Template:Team:Paris_Saclay/simbox"