Difference between revisions of "Team:Northeastern/Software"

Line 12: Line 12:
 
             <div id="bannercontent" style="display:table;height:100%;width:100%;">
 
             <div id="bannercontent" style="display:table;height:100%;width:100%;">
 
                 <div style="display:table-cell;vertical-align:middle;margin-top:-80px;">
 
                 <div style="display:table-cell;vertical-align:middle;margin-top:-80px;">
                     <h1 style="margin:0px;padding:0px;margin-top:-100px;">Software Contributions</h1>
+
                     <h1 style="margin:0px;padding:0px;margin-top:-100px;">Software</h1>
                     <h2>Plasmid Builder Tool</h2>
+
                     <h2>Plasmid Builder</h2>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 22: Line 22:
 
         <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>
+
                 <h3 style="padding-top:100px;">A browser-based, interactable plasmid design tool</h3>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 29: Line 29:
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-md-12">
 
             <div class="col-md-12">
                <h4>what it does</h4>
+
<!--                <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"><span class="fa fa-dot-circle-o"></span> demo</a>
Line 40: Line 43:
  
 
         <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="images/plasmidbuilder/full.PNG"></div>
 
         </div>
 
         </div>
 
         </div><!--projintro-->
 
         </div><!--projintro-->
Line 56: Line 59:
 
         <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="images/plasmidbuilder/view.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 72:
 
         <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="images/plasmidbuilder/parts.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 85:
 
         <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="images/plasmidbuilder/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><!--projintro-->
 
     </div><!--container-->
 
     </div><!--container-->

Revision as of 00:24, 9 August 2016

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.