Team:Amsterdam/maarten/

From 2012.igem.org

(Difference between revisions)
Line 4: Line 4:
<link type="text/css" href="basecss?action=raw" rel="stylesheet" />
<link type="text/css" href="basecss?action=raw" rel="stylesheet" />
<link type="text/css" href="sunburstcss?action=raw" rel="stylesheet" />
<link type="text/css" href="sunburstcss?action=raw" rel="stylesheet" />
-
<script type="text/javascript" src="jit?action=raw"></script>
 
<script type="text/javascript" src="toolscripts?action=raw"></script>
<script type="text/javascript" src="toolscripts?action=raw"></script>
 +
<script type="text/javascript">
 +
(function() {
 +
  var ua = navigator.userAgent,
 +
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
 +
      typeOfCanvas = typeof HTMLCanvasElement,
 +
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
 +
      textSupport = nativeCanvasSupport
 +
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
 +
  //I'm setting this based on the fact that ExCanvas provides text support for IE
 +
  //and that as of today iPhone/iPad current text support is lame
 +
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
 +
  nativeTextSupport = labelType == 'Native';
 +
  useGradients = nativeCanvasSupport;
 +
  animate = !(iStuff || !nativeCanvasSupport);
 +
})();
 +
 +
var Log = {
 +
  elem: false,
 +
  write: function(text){
 +
    if (!this.elem)
 +
      this.elem = document.getElementById('log');
 +
    this.elem.innerHTML = text;
 +
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
 +
  }
 +
};
 +
 +
function visualization(number){
 +
$('#readout').empty()
 +
$('#inner-details').empty()
 +
$('#infovis').empty()
 +
json = JSON.parse(unescape($(':input[name=json'+number+']').val()))
 +
    //init data
 +
    //init Sunburst
 +
    var sb = new $jit.Sunburst({
 +
        //id container for the visualization
 +
        injectInto: 'infovis',
 +
        //Distance between levels
 +
        levelDistance: 90,
 +
        //Change node and edge styles such as
 +
        //color, width and dimensions.
 +
        Node: {
 +
          overridable: true,
 +
          type: useGradients? 'gradient-multipie' : 'multipie'
 +
        },
 +
        //Select canvas labels
 +
        //'HTML', 'SVG' and 'Native' are possible options
 +
        Label: {
 +
          type: labelType
 +
        },
 +
        //Change styles when hovering and clicking nodes
 +
        NodeStyles: {
 +
          enable: true,
 +
          type: 'Native',
 +
          stylesClick: {
 +
            'color': '#000000'
 +
          },
 +
        },
 +
        //Add tooltips
 +
        Tips: {
 +
          enable: true,
 +
          onShow: function(tip, node) {
 +
            var html = "<div class=\"tip-title\">" + node.data.description + "</div>";
 +
            var data = node.data;
 +
            if("length" in data) {
 +
              html += "<b>Length of feature:</b> " + data.length + "bp";
 +
            }
 +
if("type" in data){
 +
html += "<br\><b>Type of feature:</b> " + data.type;
 +
}
 +
            tip.innerHTML = html;
 +
          }
 +
        },
 +
        //implement event handlers
 +
        Events: {
 +
          enable: true,
 +
          onClick: function(node) {
 +
            if(!node) return;
 +
            //Build detailed information about the file/folder
 +
            //and place it in the right column.
 +
            var html = "<h4>" + node.name + "</h4>", data = node.data;
 +
            if("dna" in data) {
 +
              html += "<b>Sequence:</b><br /><pre>" + data.dna + "</pre>";
 +
            }
 +
            $jit.id('inner-details').innerHTML = html;
 +
            //hide tip
 +
            sb.tips.hide();
 +
            //rotate
 +
            //sb.rotate(node, animate? 'animate' : 'replot', {
 +
              //duration: 1000,
 +
              //transition: $jit.Trans.Quart.easeInOut
 +
            //});
 +
          }
 +
        },
 +
        // Only used when Label type is 'HTML' or 'SVG'
 +
        // Add text to the labels.
 +
        // This method is only triggered on label creation
 +
        onCreateLabel: function(domElement, node){
 +
          var labels = sb.config.Label.type,
 +
              aw = node.getData('length');
 +
          if (labels === 'HTML' && (node._depth < 2 || aw > 2000)) {
 +
            domElement.innerHTML = node.name;
 +
          } else if (labels === 'SVG'){
 +
if (node._depth < 2){
 +
domElement.firstChild.appendChild(document.createTextNode(node.name));
 +
} else if(aw > 2000) {
 +
domElement.firstChild.appendChild(document.createTextNode(node.name));
 +
}
 +
  }
 +
        },
 +
        // Only used when Label type is 'HTML' or 'SVG'
 +
        // Change node styles when labels are placed
 +
        // or moved.
 +
        onPlaceLabel: function(domElement, node){
 +
          var labels = sb.config.Label.type;
 +
          if (labels === 'SVG') {
 +
            var fch = domElement.firstChild;
 +
            var style = fch.style;
 +
            style.display = '';
 +
            style.cursor = 'pointer';
 +
            style.fontSize = "0.8em";
 +
            fch.setAttribute('fill', "#fff");
 +
          } else if (labels === 'HTML') {
 +
            var style = domElement.style;
 +
            style.display = '';
 +
            style.cursor = 'pointer';
 +
            style.fontSize = "0.8em";
 +
            style.color = "#ddd";
 +
            var left = parseInt(style.left);
 +
            var w = domElement.offsetWidth;
 +
            style.left = (left - w / 2) + 'px';
 +
          }
 +
        }
 +
  });
 +
    //load JSON data.
 +
    sb.loadJSON(json);
 +
    //compute positions and plot.
 +
    sb.refresh();
 +
 +
    //end
 +
}
 +
</script>
</head>
</head>
<body>
<body>

Revision as of 14:18, 4 September 2012

Enter your plasmid in fasta or genbank format


Enter your sensors in fasta or genbank format























Retrieved from "http://2012.igem.org/Team:Amsterdam/maarten/"