Difference between revisions of "Template:Heidelberg/pages/software/plasmid"

 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Heidelberg/plasmid.js}}
 
 
<html>
 
<html>
  
 
<head>
 
<head>
 
+
<script type="text/javascript" src="https://2015.igem.org/Team:Heidelberg/js/raphael?action=raw&ctype=text/javascript"></script>
<script type="text/javascript" src="https://2015.igem.org/Team:Heidelberg/js/prism.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript" src="https://2015.igem.org/Team:Heidelberg/js/plasmid?action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:Heidelberg/css/prism.css?action=raw&ctype=text/css" />
+
<script type="text/javascript" src="https://2015.igem.org/Team:Heidelberg/js/prism?action=raw&ctype=text/javascript"></script>
 +
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:Heidelberg/css/prism?action=raw&ctype=text/css" />
 
     <script>
 
     <script>
 
         $(function() {
 
         $(function() {
Line 70: Line 70:
  
 
  <div class="panel‐heading">
 
  <div class="panel‐heading">
 
<h3 class="basicheader">plasmid.js - Interactive plasmids</h3>
 
  
 
  </div> <!-- panel-heading -->
 
  </div> <!-- panel-heading -->
Line 79: Line 77:
 
  <div class="row">
 
  <div class="row">
  
<h1>plasmid.js - Interactive plasmids</h1>
+
<h1 class="basicheader">plasmid.js - Interactive plasmids</h1>
  
 
<p class="basictext">
 
<p class="basictext">
Line 85: Line 83:
 
</p>
 
</p>
  
<h2> Why should you use it? </h2>
+
<h2 class="basicheader"> Why should you use it? </h2>
 
<p class="basictext">It is dead simple to use!</p>
 
<p class="basictext">It is dead simple to use!</p>
  
Line 93: Line 91:
 
&lt;scripr src="raphael.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
 
&lt;scripr src="raphael.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
 
&lt;script src="plasmid.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
 
&lt;script src="plasmid.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
 +
</pre>
 +
Or, if you are working with an iGEM Wiki
 +
<pre>
 +
{{Heidelberg/js/plasmid.js}}
 
</pre>
 
</pre>
 
</p>
 
</p>
 +
 +
  
 
<p class="basictext">
 
<p class="basictext">
Line 128: Line 132:
 
         color: "#00F",
 
         color: "#00F",
 
         label: "Lazy Dog",
 
         label: "Lazy Dog",
         description: "He likes beeing jumpt over."
+
         description: "He likes beeing jumped over."
 
     },
 
     },
 
     {
 
     {
Line 158: Line 162:
 
<div id="info"></div>
 
<div id="info"></div>
  
<h2>Further options</h2>
+
<h2 class="basicheader">Further options</h2>
<p>There are two ways to specify optional settings; you can either pass them via the constructor or set the corresponding attributes after the object is created (it's JavaScript, ...). Below you can see a annotated version of the constructor.
+
<p>There are two ways to specify optional settings. You can either pass them via the constructor or set the corresponding attributes after the object is created (it's JavaScript, ...). Below you can see a annotated version of the constructor.
 
<pre><code class="language-javascript"">function Plasmid(canvas, infobox, inserts, diameter, legendWidth, insertWidth, defaultText, insertBoxAttr, fontSize, spacing, startAngle) {
 
<pre><code class="language-javascript"">function Plasmid(canvas, infobox, inserts, diameter, legendWidth, insertWidth, defaultText, insertBoxAttr, fontSize, spacing, startAngle) {
 
     // Are all required parameters given?
 
     // Are all required parameters given?

Latest revision as of 20:47, 20 November 2015

plasmid.js - Interactive plasmids

It is always cubersome to create vector maps, and then putting the static images on the web. We thought it would be a lot more fun to just autogenerate interactive plasmids dynamically from data. That's why we wrote plasmid.js, a JavaScript library to generate interactive vector maps for web pages.

Why should you use it?

It is dead simple to use!

The includes

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<scripr src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="plasmid.js" type="text/javascript" charset="utf-8"></script>
Or, if you are working with an iGEM Wiki
{{Heidelberg/js/plasmid.js}}

The placeholders

<div id="canvas"></div>
<div id="info"></div>

The JavaScript

$(function() {
    // You could also load your data via AJAX
    var inserts = [
    {
        size: 40, // Size in angles! (there are 360 of them available)
        color: "#0F0", // You can use any valid css format
        label: "GFP", // The label to display in the legend
        description: "Green Fluorescent Protein", // The description to put in the infobox
        gap: false, // If not given this defaults to true
        promoter: true // This is a promoter, defaults to false
    },
    {
        size: 10,
        color: "#F00",
        label: "Brow Fox",
        description: "He likes jumping over dogs.",
        gap: true
    },
    {
        size: 46,
        color: "#00F",
        label: "Lazy Dog",
        description: "He likes beeing jumped over."
    },
    {
        size: 19,
        color: "#0FF",
        label: "Short one",
        description: "Wirklich, Wirklich kurz nun auch wieder nicht.",
        promoter: true
    },
    {
        size: 1,
        color: "#FF0",
        label: "Even shorter one",
        description: "Und knackig",
        gap: false,
        promoter: true
    }];

    // Required parameters are: id of the canvas, id of the infobox,
    // the inserts and the diameter of the plasmid. Note, that there
    // is spacing and a legend added (default: width + 575, height + 50)
    // These values can be changed easily, see below.
    var plasmid = new Plasmid('canvas', 'info', inserts, 500);
    plasmid.draw();
});

Plus, it also looks great!

Further options

There are two ways to specify optional settings. You can either pass them via the constructor or set the corresponding attributes after the object is created (it's JavaScript, ...). Below you can see a annotated version of the constructor.

function Plasmid(canvas, infobox, inserts, diameter, legendWidth, insertWidth, defaultText, insertBoxAttr, fontSize, spacing, startAngle) {
    // Are all required parameters given?
    // [...]
    this.canvas = canvas; // The id of the canvas placeholder div
    this.inserts = inserts; // The array whith the given inserts (see above)
    this.diameter = diameter; // The diameter of the plasmid, this is *not* the size of the canvas
    this.infobox = infobox; // The id of the infobox to put the descriptions in

    // Set sane defaults for optional parameters
    this.legendWidth = legendWidth || 500; // The width of the legend
    this.radiusOfInsertBox = insertWidth || diameter / 13; // how "thick" the boxes of the inserts are drawn
    this.defaultText = defaultText || "Hover over an insert to get more information!"; // default text in infobox
    this.fontSize = fontSize || 20; // The font size for legend entries
    this.spacing = spacing || 25; // spacing is the number of pixels put above and below the plasmid and left to the legend
    this.startAngle = startAngle || -40; // The angle at which the first plasmid starts
    this.insertBoxAttr = insertBoxAttr || { // The attributes to set on the boxes representing an insert
        stroke: "#666",
        opacity: 0.7,
        "stroke-width": 1,
        "stroke-linejoin": "round"
    };

    // [...]
}