Team:Heidelberg/WikiTools

zitator.js - Awesome citation and bibliography generator

As every good engineer, we hate repititon and love automation. So we didn't bother with formatting and managing our references by hand and wrote a litte helper that would take care of that - like it is standard outside of the web.

As everyone already has it's own database of references tucked away in a bibtex file, EndNote or similar programm, we decided not to reinvent the wheel and instead make it easy for you to import this database.

So how can you use this awesome piece of software? Simple: Upload your .bib file to to the iGEM wiki - note that EndNote can export it's library in BibTeX format and that you may have to change the file ending to .txt before uploading to the iGEM wiki -, second add the following code at the beginning of your page:

{{Heidelberg/js/zitator.js}}

and in the JavaScript Section:


$(function() {
    // The parameter are the selector for the container(s) of text in which you want replacement
    // and a URL pointing to your bibfile - mind the same origin policy...
    zitator = new Zitator(".basicText", "https://static.igem.org/mediawiki/2015/b/ba/Heidelberg_refdb.txt");
    zitator.zitiere();
});

as well as the placeholder for the bibliography

<div id="references"></div>

and third, start citing!

<div class="basicText">
    <!-- Some paragraphs ?>
    <p>
        Zitator is the awesomest web zitation software available to iGEMers right now <x-ref>igemHD2015</x-ref>!
    </p>
</div>

where "igemHD2015" would be the BibTeX citationKey of your reference.

Zitator is the awesomest web zitation software available to iGEMers right now igemHD2015!

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"
    };

    // [...]
}