Template:Team:Paris Saclay/simbox

From 2013.igem.org

(Difference between revisions)
 
(131 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>
+
-
simulations= new Array();
+
-
 
+
-
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.init_qtty= 0;
+
-
this.quantity= 0;
+
-
this.curve_show= false;
+
-
this.curve_color= "#000000";
+
-
this.const= false;
+
-
this.adjustable= false;
+
-
this.history= new Array();
+
-
}
+
-
 
+
-
function simulation()
+
-
{
+
-
this.id= undefined;
+
-
this.volume= undefined;
+
-
this.timestep= undefined;
+
-
this.molecules= Array();
+
-
this.running= false;
+
-
}
+
-
 
+
-
function init_simbox(sb, id)
+
-
{
+
-
simulations[id]= new simulation();
+
-
 
+
-
//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');
+
-
 
+
-
//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
+
-
simulations[id].volume= xmldata.getElementsByTagName("volume")[0].childNodes[0].nodeValue;
+
-
simulations[id].timestep= xmldata.getElementsByTagName("timestep")[0].childNodes[0].nodeValue;
+
-
 
+
-
//Load molecules
+
-
var molecule_tags= xmldata.getElementsByTagName("molecule");
+
-
for(var i= 0 ; i < molecule_tags.length ; ++i)
+
-
{
+
-
  simulations[id].molecules[i]= new molecule();
+
-
  simulations[id].molecules[i].name= molecule_tags[i].getAttribute('name');
+
-
  if(molecule_tags[i].hasAttribute('quantity'))
+
-
  {
+
-
  simulations[id].molecules[i].init_qtty= molecule_tags[i].getAttribute('quantity');
+
-
  simulations[id].molecules[i].quantity= molecule_tags[i].getAttribute('quantity');
+
-
  }
+
-
  if(molecule_tags[i].hasAttribute('curve_show'))
+
-
  simulations[id].molecules[i].curve_show= (molecule_tags[i].getAttribute('curve_show') == 'true');
+
-
  if(molecule_tags[i].hasAttribute('curve_color'))
+
-
  simulations[id].molecules[i].curve_color= molecule_tags[i].getAttribute('curve_color');
+
-
  if(molecule_tags[i].hasAttribute('const'))
+
-
  simulations[id].molecules[i].const= (molecule_tags[i].getAttribute('const') == 'true');
+
-
  if(molecule_tags[i].hasAttribute('adjustable'))
+
-
  simulations[id].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 < simulations[id].molecules.length ; ++i)
+
-
{
+
-
  if(simulations[id].molecules[i].curve_show)
+
-
  reshtmlparamdiv += '<span style="font-weight:bold;padding:0.1em 0.3em;color:#FFFFFF;background-color:'+simulations[id].molecules[i].curve_color+';">'+simulations[id].molecules[i].name+'</span>&nbsp;';
+
-
}
+
-
//quantity controls
+
-
for(var i= 0 ; i < simulations[id].molecules.length ; ++i)
+
-
{
+
-
  if(simulations[id].molecules[i].adjustable)
+
-
  {
+
-
  reshtmlparamdiv += '<br /><br />';
+
-
  reshtmlparamdiv += simulations[id].molecules[i].name + ' = <input id="simbox_ctl_'+id+'_'+i+'" type="number" min="0" value="'+simulations[id].molecules[i].quantity+'"/>';
+
-
  }
+
-
}
+
-
reshtmlparamdiv += '<br />';
+
-
//controls
+
-
reshtmlparamdiv += '<button onclick="simbox_startclick(this,'+id+')" id="simbox_start_'+id+'">PLAY</button><button onclick="simbox_resetclick(this,'+id+')" id="simbox_reset_'+id+'">RESET</button>';
+
-
paramdiv.innerHTML= reshtmlparamdiv;
+
-
 
+
-
return true;
+
-
}
+
-
 
+
-
function simbox_startclick(btn, simid)
+
-
{
+
-
if(simulations[simid].running)
+
-
{
+
-
  //TODO STOP
+
-
  simulations[simid].running= false;
+
-
  btn.innerHTML= 'PLAY';
+
-
}
+
-
else
+
-
{
+
-
  //TODO START
+
-
  simulations[simid].running= true;
+
-
  btn.innerHTML= 'PAUSE';
+
-
}
+
-
}
+
-
 
+
-
function simbox_resetclick(btn, simid)
+
-
{
+
-
//TODO STOP
+
-
simulations[simid].running= false;
+
-
document.getElementById('simbox_start_'+simid).innerHTML= 'PLAY';
+
-
+
-
//Reset quantities, clear curves
+
-
for(var i= 0 ; i < simulations[simid].molecules.length ; ++i)
+
-
{
+
-
  simulations[simid].molecules[i].quantity= simulations[simid].molecules[i].init_qtty;
+
-
  simulations[simid].molecules[i].history.length= 0;
+
-
}
+
-
}
+
-
 
+
-
 
+
-
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"