View source for Template:Heidelberg/pages/software/plasmid

{{Heidelberg/Header}}
{{Heidelberg/navbar}}

<html>

<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/plasmid?action=raw&ctype=text/javascript"></script>
	<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>
        $(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 jumpt 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();
        });
    </script>
</head>

<body>

<div class="container">

 <div class="content">

 <div class="row"> 

 <div class="col-lg-12">

 <div class="panel panel‐default">

 <div class="panel‐heading">

 </div> <!-- panel-heading -->

 <div class="panel‐body">

 <div class="row">

<h1 class="basicheader">plasmid.js - Interactive plasmids</h1>

<p class="basictext">
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.
</p>

<h2 class="basicheader"> Why should you use it? </h2>
<p class="basictext">It is dead simple to use!</p>

<p class="basictext">The includes
<pre>
&lt;script src="jquery.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;
</pre>
Or, if you are working with an iGEM Wiki
<pre>
{{Heidelberg/js/plasmid.js}}
</pre>
</p>



<p class="basictext">
The placeholders
<pre>
&lt;div id="canvas"&gt;&lt;/div&gt;
&lt;div id="info"&gt;&lt;/div&gt;
</pre>
Or, if you are on a iGEM Wiki
<pre>{{Heidelberg/js/plasmid.js}}|</pre>
</p>

<p class="basictext">
The JavaScript
<pre><code class="language-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();
});</pre></code>

<p>Plus, it also looks great!</p>
<div id="canvas"></div>
<div id="info"></div>

<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.
<pre><code class="language-javascript"">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"
    };

    // [...]
}</code></pre>

 </div> <!-- col-lg-12 -->

 </div> <!-- row -->

 </div> <!-- panel-body -->

 </div> <!-- panel panel‐default -->

 </div> <!-- col-lg-12 -->

 </div> <!-- row -->

 </div> <!-- content -->

</div> <!-- container -->

</body>

</html>