Difference between revisions of "Team:Northeastern/Software"

 
(10 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
        
 
        
 
          
 
          
         <div class="row" id="banner">
+
         <div style="height:70px;"></div>
  
            <div id="continue"> <a href="#projintro" class="fa fa-chevron-down"></a></div>
+
         <div id="words">
 
+
            <div id="bannercontent" style="display:table;height:100%;width:100%;">
+
                <div style="display:table-cell;vertical-align:middle;margin-top:-80px;">
+
                    <h1 style="margin:0px;padding:0px;margin-top:-100px;">Software Contributions</h1>
+
                    <h2>Plasmid Builder Tool</h2>
+
                </div>
+
            </div>
+
 
+
         </div>
+
 
+
<div id="projintro">
+
 
         <div class="row" style="padding-top:0px;">
 
         <div class="row" style="padding-top:0px;">
 
             <div class="col-md-12">
 
             <div class="col-md-12">
                 <h3 style="padding-top:100px;">we did a thing</h3>
+
                 <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>
 
         </div>
Line 29: Line 19:
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-md-12">
 
             <div class="col-md-12">
                <h4>what it does</h4>
 
 
                 <div class="content">
 
                 <div class="content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
                     <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">
 
                     <div id="aboutbuttons">
                         <a href="/Team:Northeastern/Plasmid_Builder"><span class="fa fa-dot-circle-o"></span> demo</a>
+
                         <a href="/Team:Northeastern/Plasmid_Builder">demo</a>
 +
                        <a href="https://github.com/JJTimmons/Plasmid_Builder">github</a>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
Line 40: Line 33:
  
 
         <div class="row" style="margin-top:50px;">
 
         <div class="row" style="margin-top:50px;">
             <div class="col-md-12"><img src="http://unsplash.it/1200/800"></div>
+
             <div class="col-md-12"><img src="https://static.igem.org/mediawiki/2016/d/d0/T--Northeastern--plasmid_full.PNG"></div>
 
         </div>
 
         </div>
         </div><!--projintro-->
+
         </div><!--words-->
  
         <div id="teamintro">
+
         <div id="words" style="background:#eee;">
  
 
         <!--components intro-->
 
         <!--components intro-->
Line 56: Line 49:
 
         <div class="row" style="padding:20px 0;">
 
         <div class="row" style="padding:20px 0;">
 
             <div class="col-md-4">
 
             <div class="col-md-4">
                 <div class="content"><img src="http://unsplash.it/600/400"></div>
+
                 <div class="content"><img src="https://static.igem.org/mediawiki/2016/2/25/T--Northeastern--plasmidview.PNG"></div>
 
             </div>
 
             </div>
 
             <div class="col-md-8">
 
             <div class="col-md-8">
 
                 <h4>View Section</h4>
 
                 <h4>View Section</h4>
 
                 <div class="content">
 
                 <div class="content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
                     <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>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 70: Line 62:
 
         <div class="row" style="padding:20px 0;">
 
         <div class="row" style="padding:20px 0;">
 
             <div class="col-md-4">
 
             <div class="col-md-4">
                 <div class="content"><img src="http://unsplash.it/600/400"></div>
+
                 <div class="content"><img src="https://static.igem.org/mediawiki/2016/3/3e/T--Northeastern--plasmidparts.PNG"></div>
 
             </div>
 
             </div>
 
             <div class="col-md-8">
 
             <div class="col-md-8">
 
                 <h4>Parts Section</h4>
 
                 <h4>Parts Section</h4>
 
                 <div class="content">
 
                 <div class="content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
                     <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>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 84: Line 75:
 
         <div class="row" style="padding:20px 0;">
 
         <div class="row" style="padding:20px 0;">
 
             <div class="col-md-4">
 
             <div class="col-md-4">
                 <div class="content"><img src="http://unsplash.it/600/400"></div>
+
                 <div class="content"><img src="https://static.igem.org/mediawiki/2016/5/55/T--Northeastern--plasmid_design.PNG"></div>
 
             </div>
 
             </div>
 
             <div class="col-md-8">
 
             <div class="col-md-8">
 
                 <h4>Design Section</h4>
 
                 <h4>Design Section</h4>
 
                 <div class="content">
 
                 <div class="content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
                     <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>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
         </div><!--projintro-->
+
 
 +
         </div><!--words-->
 
     </div><!--container-->
 
     </div><!--container-->
 
     </body>
 
     </body>
 
</html>
 
</html>
 
{{NortheasternFooter}}
 
{{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.