Difference between revisions of "Team:BostonU HW/Software"

 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{BUHW2016}}
+
{{Template:BUHW2016_NavBar}}
 +
 
 +
 
 +
{{Template:BUHW2016_Bootstrap}}
 
<html>
 
<html>
 +
<head>
 +
<style>
 +
 +
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
 +
  #sideMenu, #top_title {display:none;}
 +
  #content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
 +
  body {background-color:white; }
 +
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
 +
 +
@font-face {
 +
    font-family: openSans;
 +
    src: url(https://static.igem.org/mediawiki/2016/1/1e/T--BostonU_HW--openSansLight_rcwolf.ttf);
 +
}
 +
 +
 +
html,body
 +
{
 +
    width: 100%;
 +
    min-width: 100%;
 +
    height: 100%;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    overflow-x: hidden;
 +
}
 +
 +
 +
body{
 +
background-color: white;
 +
}
 +
 +
* {
 +
font-family: openSans !important;
 +
}
 +
 +
 +
.navbar {
 +
  background-color: black;
 +
  border-color: black;
 +
margin-top: 10px;
 +
 
 +
}
 +
 +
 +
 +
.navbar-default .navbar-header .navbar-brand,
 +
.navbar-default .navbar-header .navbar-brand:hover,
 +
.navbar-default .navbar-header .navbar-brand:focus {
 +
      color: white;
 +
  }
 +
  .navbar-default .nav > li > a,
 +
  .navbar-default .nav > li > a:focus {
 +
      color: white;
 +
      font-size: medium;
 +
  }
 +
  .navbar-default .nav > li > a:hover,
 +
  .navbar-default .nav > li > a:focus:hover {
 +
      color: white;
 +
      font-size: medium;
 +
  }
 +
  .navbar-default.affix {
 +
      background-color: white;
 +
      border-color: white;
 +
  }
 +
 +
 +
  /*  Animated Underlining For Menu Items  */
 +
.dropbtn {
 +
  display: inline-block;
 +
  position: relative;
 +
  padding-bottom: 3px;
 +
}
 +
.dropbtn:after {
 +
  content: '';
 +
  display: block;
 +
  margin: auto;
 +
  height: 2px;
 +
  width: 0px;
 +
  background: transparent;
 +
  transition: width .5s ease, background-color .5s ease;
 +
}
 +
.sliding-middle-out:hover > .dropbtn:after {
 +
  width: 100%;
 +
  background: white;
 +
}
 +
 +
 +
 +
 +
 +
/*  Dropdown Menu Functionality  */
 +
/* Style The Dropdown Button */
 +
.dropbtn {
 +
    color: white;
 +
    border: none;
 +
    cursor: pointer;
 +
}
 +
 +
/* The container <div> - needed to position the dropdown content */
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
 +
 +
/* Dropdown Content (Hidden by Default) */
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: rgba(249,249,249,0.4);
 +
    min-width: 160px;
 +
}
 +
 +
/* Links inside the dropdown */
 +
.dropdown-content a {
 +
    color: black;
 +
    font-size: 15px;
 +
    padding: 10px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #f1f1f1}
 +
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 +
.paddedNav{
 +
padding-left: 23px;
 +
padding-right: 23px;
 +
padding-bottom: 5px;
 +
}
 +
 +
 +
 +
 +
 +
 +
</style>
 +
 +
 +
</head>
 +
 +
 +
 +
 +
 +
 +
  
  
 
<body>
 
<body>
−
<div class="services bg-primary">
+
 
−
<div class="row text-center">
+
<header id="top" class="header">
−
          <div class="col-lg-10 col-lg-offset-1">
+
 
−
         <div class="text-vertical-center" style="color: white;">
+
<nav class="navbar navbar-default navbar-fixed-top" style="max-height: 70px !important;">
−
            <h1>Software</h1>
+
  <div class="container-fluid paddedNav">
−
</div>
+
    <!-- Brand and toggle get grouped for better mobile display -->
−
</div>
+
    <div class="navbar-header">
−
</div>
+
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
         <span class="sr-only">Toggle navigation</span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
      </button>
 +
     
 +
      <a class="navbar-brand" href="https://2016.igem.org/Team:BostonU_HW"><img src="https://static.igem.org/mediawiki/2016/9/97/T--BostonU_HW--NeptuneLogo_rcwolf.png" height="38" width="55" style="display: inline-block; padding-right: 17px; ">BU HW 2016</a>
 +
    </div>
 +
 
 +
    <!-- Collect the nav links, forms, and other content for toggling -->
 +
    <div class="collapse navbar-collapse " >
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">TEAM </a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Team">Meet the Team </a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Attributions">Attributions</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Collaborations">Collaborations</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">PROJECT</a>
 +
           
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Demonstration</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Proof">Proof</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Design">Design</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Parts">Parts</a>
 +
 
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">NOTEBOOK</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Notebook">Timeline</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Experiments">Experiments</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Safety">Safety</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="https://2016.igem.org/Team:BostonU_HW/Human_Practices" class="dropbtn">HUMAN PRACTICES</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/HP/Silver">Silver</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/HP/Gold">Gold</a>
 +
 
 +
 
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">AWARDS</a>
 +
            <img src="https://static.igem.org/mediawiki/2016/5/58/T--BostonU_HW--indexTriangle_rcwolf.png" width="36" height="18" style="margin-bottom: 0 !important; margin-top: 0; padding-bottom: 0 !important; border: none; display: block; margin: 0 auto;">
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Integrated_Practices">Integrated Practices</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Software">Software</a>
 +
            </div>
 +
        </li>
 +
 
 +
<li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">MEDAL CRITERIA </a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Bronze">Bronze</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Silver">Silver</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Gold">Gold</a>
 +
 
 +
            </div>
 +
        </li>
 +
 
 +
      </ul>
 +
    </div><!-- /.navbar-collapse -->
 +
  </div><!-- /.container-fluid -->
 +
</nav>
 +
 
 +
 
 
</div>
 
</div>
−
<br><br/>
 
  
  
  
 +
</body>
  
−
<div class="column full_size judges-will-not-evaluate">
 
−
<h3>★  ALERT! </h3>
 
−
<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>
 
  
  
−
<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>
+
<html>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<html>
 +
 
 +
<style>
 +
 
 +
  html {
 +
    background-color: #D2D2D2;
 +
  }
 +
  body {
 +
    background-color: #D2D2D2;
 +
  }
 +
 
 +
  #greyWrapper {
 +
    padding-top: 120px;
 +
    background-color: #D2D2D2;
 +
    margin: 0px 0px 40px 0px;
 +
    min-height: 1000px;
 +
  }
 +
  #pageTitle {
 +
    margin-left: 25px;
 +
    padding-bottom: 16px;
 +
  }
 +
  .pageBanner {
 +
    position: fixed;
 +
    color:black;
 +
    background-color:white;
 +
    width:100%;
 +
    top:70px;
 +
    z-index: 1;
 +
  }
 +
  .densmoreCard {
 +
    background-color: white;
 +
    padding:0;
 +
  }
 +
  .advisorCard {
 +
    background-color: white;
 +
  }
 +
  .miniBio {
 +
    padding-left: 20px;
 +
    padding-right:20px;
 +
    padding-bottom:30px;
 +
  }
 +
  .bioIcon {
 +
    border: none;
 +
    display: block;
 +
    margin-top: -24px;
 +
    margin-bottom: -20px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
  }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.btn {
 +
    padding: 14px 24px;
 +
    border: 0 none;
 +
    border-radius: 0;
 +
    font-weight: 700;
 +
    font-size: 15px;
 +
    letter-spacing: 0.5px;
 +
    text-transform: uppercase;
 +
    -webkit-box-shadow: 5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    -moz-box-shadow:   5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    box-shadow:        5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    outline: #545454 solid 2px;
 +
   
 +
}
 +
 +
.btn:focus, .btn:active:focus, .btn.active:focus {
 +
    outline: 0 none;
 +
}
 +
 +
.btn-primary {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 
 +
.btn-primary:active, .btn-primary.active {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 
 +
 +
 
 +
.btn-primary:focus {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 +
 
 +
.btn:active:focus {
 +
    background: #545454 !important;
 +
    color: white;
 +
    box-shadow: none;
 +
}
 +
.btn-primary:hover{
 +
    background: #545454;
 +
    color: white;
 +
}
 +
 
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
<body>
 +
<!-- PAGE TITLE BANNER -->
 +
  <div id="greyWrapper">   
 +
    <div class="pageBanner">
 +
      <h3 id="pageTitle">SOFTWARE</h3>
 +
    </div>
 +
    <br><br><br><br>
 +
   
 +
   
 +
 
 +
 
 +
<div class="row" style="padding-top:50px; padding-bottom:50px;">
 +
  <div class="col-md-1"></div>
 +
  <div class="col-md-10" style="font-size: 3em; line-height: 130%;">IMAGINE, CREATE, EXPLORE</div>
 +
  <div class="col-md-1"></div>
 
</div>
 
</div>
  
 +
<div class="row" style="padding-top:100px; padding-bottom:100px;">
 +
  <div class="col-md-1"></div>
 +
  <div class="col-md-10" style="background-color: white; padding-top:50px; padding-bottom:50px;">
 +
    <div class="row">
 +
      <div class="col-md-1"></div>
 +
      <div class="col-md-10">
 +
      <div>
 +
        <br><br>
 +
        <div>
 +
          Neptune is an open-source software tool available to biologists through Github and Nona using the BSDII license. Specifically, it is a web application that runs on a node.js express server using HTML, JavaScript and CSS. To get the software running, the biologist has to go though a couple of easy steps. First, they would have to download node.js, and our project repository. <br><br>
 +
After running our project through node.js, the biologist would be introduced to the home page of Neptune. Here, they could look at documentation or get started with their project. They can either continue working on a pre-existing project, or start a new one. The user would then be redirected to the dashboard page where they can see a layout of the entire workflow. <br><br>
 +
The first step to designing a microfluidic chip would be the specify page. Here they can specify the layout of their chip from a very high level description. This would be a simple verilog-like language. Once the description is mapped onto the chip using an automatic place and route tool, the user can then proceed to the design stage. Here, the user can fine tune their work to edit the experimental setup. Once that is complete, the chip design will be outputed as a JSON and an SVG. The SVG would be used to mill out the chip, and the JSON would help the user control the experiment later on. Following the design page, the user would be redirected to a Build page where they can select their hardware based on their requirements. Once the user maps the hardware to their microfluidic chip, they can proceed to Assembly where they would learn how to put all the pieces together. They can set up their entire experiment here including building the hardware infrastructure, milling out their microfluidic chip and sealing the control and flow layers, and so on. Last is the Control page. Here, they can Control their microfluidic device by opening and closing valves, and dispensing liquid through Neptune's user interface. They can also time their experiments to a certain level by dispensing a certain volume of liquid over some time. Please view our video for more information and a demonstration of our software.
  
 +
        </div>
 +
      </div>
 +
<div class="row" style="padding-top:50px; padding-right: 50px; padding-bottom:20px;">
 +
      <video width="100%" controls>
 +
        <source src="https://static.igem.org/mediawiki/2016/3/34/T--BostonU_HW--SoftwareVideo_rcwolf.mp4" type="video/mp4">
 +
        Your browser does not support the video tag.
 +
      </video>
 +
    </div>
  
  
 +
    </div>
 +
      <div class="col-md-1"></div>
 +
    </div>
  
  
−
<div class="column full_size">
 
−
<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>
 
  
  
−
<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>
 +
  <div class="col-md-1"></div>
 
</div>
 
</div>
  
  
−
</body>
 
  
−
</html>
 
  
−
{{BUHW2016Footer}}
+
 
 +
<br><br>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Latest revision as of 03:17, 20 October 2016


SOFTWARE





IMAGINE, CREATE, EXPLORE


Neptune is an open-source software tool available to biologists through Github and Nona using the BSDII license. Specifically, it is a web application that runs on a node.js express server using HTML, JavaScript and CSS. To get the software running, the biologist has to go though a couple of easy steps. First, they would have to download node.js, and our project repository.

After running our project through node.js, the biologist would be introduced to the home page of Neptune. Here, they could look at documentation or get started with their project. They can either continue working on a pre-existing project, or start a new one. The user would then be redirected to the dashboard page where they can see a layout of the entire workflow.

The first step to designing a microfluidic chip would be the specify page. Here they can specify the layout of their chip from a very high level description. This would be a simple verilog-like language. Once the description is mapped onto the chip using an automatic place and route tool, the user can then proceed to the design stage. Here, the user can fine tune their work to edit the experimental setup. Once that is complete, the chip design will be outputed as a JSON and an SVG. The SVG would be used to mill out the chip, and the JSON would help the user control the experiment later on. Following the design page, the user would be redirected to a Build page where they can select their hardware based on their requirements. Once the user maps the hardware to their microfluidic chip, they can proceed to Assembly where they would learn how to put all the pieces together. They can set up their entire experiment here including building the hardware infrastructure, milling out their microfluidic chip and sealing the control and flow layers, and so on. Last is the Control page. Here, they can Control their microfluidic device by opening and closing valves, and dispensing liquid through Neptune's user interface. They can also time their experiments to a certain level by dispensing a certain volume of liquid over some time. Please view our video for more information and a demonstration of our software.