Difference between revisions of "Team:Northeastern/Software"

(Prototype team page)
 
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Northeastern}}
 
{{Northeastern}}
 
<html>
 
<html>
 +
    <body style="background-image:url('http://unsplash.it/1920/1080 ');">
 +
   
 +
    <div class="container-fluid">
 +
     
 +
       
 +
        <div style="height:70px;"></div>
  
 +
        <div id="words">
 +
        <div class="row" style="padding-top:0px;">
 +
            <div class="col-md-12">
 +
                <h1 style="color:#555;text-shadow:none;font-weight:normal;margin-bottom:-50px;margin-top:50px;border:none;text-align:center;font-size:60px;">Plasmid Builder</h1>
 +
                <h3>A browser-based, interactable plasmid design tool</h3>
 +
            </div>
 +
        </div>
  
−
<div class="column full_size judges-will-not-evaluate">
+
        <!--description-->
−
<h3>★  ALERT! </h3>
+
        <div class="row">
−
<p>This page is used by the judges to evaluate your team for the<a href="https://2016.igem.org/Judging/Awards"> Best Software Tool award</a>. </p>
+
            <div class="col-md-12">
 +
                <div class="content">
 +
                    <p>Plasmid Builder is a GUI for <a href="http://angularplasmid.vixis.com/">AngularPlasmid</a>, by Vivix, and was created so iGEM teams without AngularJS experience can make visual, interactive plasmids for iGEM wikis (or any other website). Unlike the info-rich but hardly sharable plasmid maps of Geneious, SnapGene, LabGenius, Benchling, Savvy, etc., Plasmid Builder is a web-based tool that simplifies the process of adding and customizing plasmid parts and then exporting as HTML. The components of AngularPlasmid have been wrapped with a constructor so new plasmid parts and tracks can be updated from the browser; the two-way data-binding of AngularJS allows for real time updates and changes. </p>
  
 +
                    <p style="color:#888;font-size:12px;">*There are some features of Vivix’s AngularPlasmid that we left out for the sake of usability, so check out his library if you are comfortable with AngularJS and want additional customizability.
 +
                    </p>
 +
                    <div id="aboutbuttons">
 +
                        <a href="/Team:Northeastern/Plasmid_Builder">demo</a>
 +
                        <a href="https://github.com/JJTimmons/Plasmid_Builder">github</a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
        <div class="row" style="margin-top:50px;">
−
</div>
+
            <div class="col-md-12"><img src="https://static.igem.org/mediawiki/2016/d/d0/T--Northeastern--plasmid_full.PNG"></div>
 +
        </div>
 +
        </div><!--words-->
  
 +
        <div id="words" style="background:#eee;">
  
 +
        <!--components intro-->
 +
        <div class="row" style="padding-top:50px;margin-top:50px;">
 +
            <div class="col-md-12">
 +
                <h3>components</h3>
 +
            </div>
 +
        </div>
  
 +
        <!--view section-->
 +
        <div class="row" style="padding:20px 0;">
 +
            <div class="col-md-4">
 +
                <div class="content"><img src="https://static.igem.org/mediawiki/2016/2/25/T--Northeastern--plasmidview.PNG"></div>
 +
            </div>
 +
            <div class="col-md-8">
 +
                <h4>View Section</h4>
 +
                <div class="content">
 +
                    <p>The View component is central to Plasmid Builder. As the parts are added or adjusted in the Parts component, the plasmid map updates to reflect additions, changes, rearrangement, etc. Using the download button, the full plasmid map is exportable as HTML-embeddable SVG elements for inclusion in iGEM wikis.</p>
 +
                </div>
 +
            </div>
 +
        </div>
  
 +
        <!--parts section-->
 +
        <div class="row" style="padding:20px 0;">
 +
            <div class="col-md-4">
 +
                <div class="content"><img src="https://static.igem.org/mediawiki/2016/3/3e/T--Northeastern--plasmidparts.PNG"></div>
 +
            </div>
 +
            <div class="col-md-8">
 +
                <h4>Parts Section</h4>
 +
                <div class="content">
 +
                    <p>Parts come with a number of potential customizations. Length can be input as number of BPs, or ending basepair location (can be changed with the settings button). The color and opacity are selectable using the color-selection tool, and the size, direction, and linkable-URL can all be input in the top portion. Existing parts can be edited or deleted entirely.</p>
 +
                </div>
 +
            </div>
 +
        </div>
  
 +
        <!--design/customization section-->
 +
        <div class="row" style="padding:20px 0;">
 +
            <div class="col-md-4">
 +
                <div class="content"><img src="https://static.igem.org/mediawiki/2016/5/55/T--Northeastern--plasmid_design.PNG"></div>
 +
            </div>
 +
            <div class="col-md-8">
 +
                <h4>Design Section</h4>
 +
                <div class="content">
 +
                    <p>The plasmid’s name, size, width, font, color, font-sizing, tick-count, tick-spacing, etc. can all be customized with the tabs of the plasmid component. </p>
 +
                </div>
 +
            </div>
 +
        </div>
  
−
<div class="column full_size">
+
        </div><!--words-->
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.</p>
+
    </div><!--container-->
−
 
+
    </body>
−
 
+
−
<h5> Inspiration </h5>
+
−
<p>
+
−
Here are a few examples from previous teams:
+
−
</p>
+
−
<ul>
+
−
<li><a href="https://2013.igem.org/Team:TU-Munich/Results/Software">TU Munich 2013</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">Heidelberg 2014</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">Aachen 2014</a></li>
+
−
</ul>
+
−
 
+
−
</div>
+
−
 
+
 
</html>
 
</html>
 +
{{NortheasternFooter}}

Latest revision as of 22:05, 15 October 2016

Plasmid Builder

A browser-based, interactable plasmid design tool

Plasmid Builder is a GUI for AngularPlasmid, by Vivix, and was created so iGEM teams without AngularJS experience can make visual, interactive plasmids for iGEM wikis (or any other website). Unlike the info-rich but hardly sharable plasmid maps of Geneious, SnapGene, LabGenius, Benchling, Savvy, etc., Plasmid Builder is a web-based tool that simplifies the process of adding and customizing plasmid parts and then exporting as HTML. The components of AngularPlasmid have been wrapped with a constructor so new plasmid parts and tracks can be updated from the browser; the two-way data-binding of AngularJS allows for real time updates and changes.

*There are some features of Vivix’s AngularPlasmid that we left out for the sake of usability, so check out his library if you are comfortable with AngularJS and want additional customizability.

components

View Section

The View component is central to Plasmid Builder. As the parts are added or adjusted in the Parts component, the plasmid map updates to reflect additions, changes, rearrangement, etc. Using the download button, the full plasmid map is exportable as HTML-embeddable SVG elements for inclusion in iGEM wikis.

Parts Section

Parts come with a number of potential customizations. Length can be input as number of BPs, or ending basepair location (can be changed with the settings button). The color and opacity are selectable using the color-selection tool, and the size, direction, and linkable-URL can all be input in the top portion. Existing parts can be edited or deleted entirely.

Design Section

The plasmid’s name, size, width, font, color, font-sizing, tick-count, tick-spacing, etc. can all be customized with the tabs of the plasmid component.