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

Line 1: Line 1:
−
{{BUHW2016}}
+
{{Template:BUHW2016_NavBar}}
−
<html>
+
  
 +
 +
{{Template:BUHW2016_Bootstrap}}
 +
<html>
 +
<head>
 
<style>
 
<style>
−
div.img {
 
−
    margin: 5px;
 
−
    border: 1px solid #ccc;
 
−
    float: left;
 
−
    width: 180px;
 
−
}
 
  
−
div.img:hover {
+
 
−
    border: 1px solid #777;
+
/********************************* 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);
 
}
 
}
  
−
div.img img {
+
 
 +
html,body
 +
{
 
     width: 100%;
 
     width: 100%;
−
     height: auto;
+
    min-width: 100%;
 +
     height: 100%;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    overflow-x: hidden;
 +
}
 +
 
 +
 
 +
body{
 +
background-color: white;
 
}
 
}
  
−
div.desc {
+
* {
−
    padding: 15px;
+
font-family: openSans !important;
−
    text-align: center;
+
−
}#
+
−
.col-sm-4 {
+
−
    min-width: 33.33333333%;
+
 
}
 
}
  
  
−
.myheader{
+
.navbar {
−
position: relative;
+
  background-color: black;
−
background-color: black;
+
  border-color: black;
−
height: 150px;
+
margin-top: 10px;
−
width: 100%;
+
 
 
}
 
}
 +
 +
 +
 +
.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>
 
</style>
 +
 +
 +
</head>
 +
 +
 +
 +
 +
  
  
Line 42: Line 161:
  
 
<body>
 
<body>
−
<div class="services bg-primary myheader">
 
−
<div class="row text-center">
 
−
          <div class="col-lg-10 col-lg-offset-1">
 
−
        <div class="text-vertical-center" style="color: white;">
 
−
            <h1>Attributions</h1>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
  
−
<br> <br>
+
<header id="top" class="header">
−
<div align="center" class="row text-center">
+
−
                <div align="center" class="col-lg-10 col-lg-offset-1">
+
−
                    <h2>Our Workflow  </h2>
+
−
                        <h4>Please click on individual components to see details and attributions. </h4>
+
−
                        <br>
+
−
<!--<img id='workflow' src="https://static.igem.org/mediawiki/2016/1/16/BUHW2016_workflow.png" height="700" width="1200" /> -->
+
−
                 
+
−
<img id="Image-Maps-Com-image-maps-2016-06-30-160356" src="https://static.igem.org/mediawiki/2016/1/16/BUHW2016_workflow.png" border="0" width="1354" height="760" orgWidth="1354" orgHeight="760" usemap="#workflowMap" alt="" />
+
−
<map name="workflowMap" id="ImageMapsCom-image-maps-2016-06-30-160356">
+
−
<area id="lfr" shape="rect" coords="569,75,656,155" style="outline:none;" onclick='$("#LFRModal").modal();' />
+
−
<area id="ucf" shape="rect" coords="678,24,912,188" style="outline:none;" onclick='$("#UCFModal").modal();' />
+
−
<area id="mintSyntax" shape="rect" coords="980,19,1083,86" style="outline:none;" onclick='$("#mintModal").modal("show");' />
+
−
<area id="3duf" shape="rect" coords="996,128,1094,179" style="outline:none;" onclick='$("#3dufModal").modal();' />
+
−
<area id="mDevice" shape="rect" coords="338,215,527,272" style="outline:none;" onclick='$("#mDeviceModal").modal();' />
+
−
<area id="mMapper" shape="rect" coords="600,227,832,332" style="outline:none;" onclick='$("#mMapperModal").modal();' />
+
−
<area id="3duf" shape="rect" coords="216,290,314,341" style="outline:none;" onclick='$("#3dufModal").modal();' />
+
−
<area id="mint" shape="rect" coords="395,291,497,359" style="outline:none;" onclick='$("#mintModal").modal();' />
+
−
<area id="3duf" shape="rect" coords="935,404,1031,451" style="outline:none;" onclick='$("#3dufModal").modal();' />
+
−
<area id="netSynth" shape="rect" coords="889,242,1046,283" style="outline:none;" onclick='$("#netSynthModal").modal();' />
+
−
<area id="fluigiPar" shape="rect" coords="341,385,553,432" style="outline:none;" onclick='$("#fluigiParModal").modal();' />
+
−
<area id="designRules" shape="rect" coords="29,328,201,374" style="outline:none;" onclick='$("#designRulesModal").modal();' />
+
−
<area id="performance" shape="rect" coords="30,387,202,433" style="outline:none;" onclick='$("#performanceModal").modal();'/>
+
−
<area id="hwC" shape="rect" coords="29,444,201,490" style="outline:none;" onclick='$("#hwCModal").modal();'/>
+
−
<area id="paraHW" shape="rect" coords="77,613,330,733" style="outline:none;" onclick='$("#paraHWModal").modal();' />
+
−
<area id="hw" shape="rect" coords="415,646,580,701" style="outline:none;"  onclick='$("#hwModal").modal();'/>
+
−
<area id="chip" shape="rect" coords="643,652,778,707" style="outline:none;" onclick='$("#chipModal").modal();'/>
+
−
<area id="mf" shape="rect" coords="567,532,819,605" style="outline:none;"  onclick='$("#mfModal").modal();'/>
+
−
<area id="gui" shape="rect" coords="1174,12,1347,731" style="outline:none;"  onclick='$("#guiModal").modal();'/>
+
−
</map>
+
  
 +
<nav class="navbar navbar-default navbar-fixed-top" style="max-height: 70px !important;">
 +
  <div class="container-fluid paddedNav">
 +
    <!-- Brand and toggle get grouped for better mobile display -->
 +
    <div class="navbar-header">
 +
      <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>
 +
            <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/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">Project Build</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Proof">Application</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Design">Documentation</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>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Integrated_Practices">Integrated Practices</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Engagement">Engagement</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">AWARDS</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Hardware">Hardware</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Software">Software</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Measurement">Measurement</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Model">Model</a>
 +
            </div>
 +
        </li>
 +
      </ul>
 +
    </div><!-- /.navbar-collapse -->
 +
  </div><!-- /.container-fluid -->
 +
</nav>
  
  
−
  </div>
 
 
</div>
 
</div>
−
 
  
  
Line 94: Line 238:
  
  
−
    <!--<h5> What should this page have?</h5>-->
 
  
−
        <!--<li>General Support</li>-->
+
<html>
−
        <!--<li>Project support and advice</li>-->
+
−
        <!--<li>Fundraising help and advice</li>-->
+
−
        <!--<li>Lab support</li>-->
+
−
        <!--<li>Difficult technique support</li>-->
+
−
        <!--<li>Project advisor support</li>-->
+
−
        <!--<li>Wiki support</li>-->
+
−
        <!--<li>Presentation coaching</li>-->
+
−
        <!--<li>Human Practices support</li>-->
+
−
        <!--<li> Thanks and acknowledgements for all other people involved in helping make a successful iGEM team</li>-->
+
  
  
−
        <!--<h5> Can we base our project on a previous one? </h5>-->
 
−
        <!--<p>Yes! You can have a project based on a previous team, or based on someone else's idea, <b>as long as you state this fact very clearly and give credit for the original project.</b> </p>-->
 
  
  
  
−
    <!--<h5>Team training and Project start</h5>-->
 
−
    <!--<p>Tell us if your institution teaches an iGEM or synthetic biology class and when you started your project:</p>-->
 
−
    <!--<ul>-->
 
−
        <!--<li>Does your institution teach an iGEM or synthetic biology course?</li>-->
 
−
        <!--<li>When did you start this course?</li>-->
 
−
        <!--<li>Are the syllabus and course materials freely available online?</li>-->
 
−
        <!--<li>When did you start your brainstorming?</li>-->
 
−
        <!--<li>When did you start in the lab?</li>-->
 
−
        <!--<li>When did you start working on  your project?</li>-->
 
  
 +
<html>
  
−
<div class="modal fade" data-backdrop="false" id="LFRModal" role="dialog">
+
<style>
−
    <div class="modal-dialog">
+
−
      <!-- Modal content-->
+
−
      <div class="modal-content">
+
−
        <div class="modal-header" style="padding:35px 50px;">
+
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
−
          <h4> Liquid Flow Relations are specifications of inputs and outputs. It was created by R. Sanka. </h4>
+
−
        </div>
+
−
    </div>
+
−
  </div>
+
−
</div>
+
  
−
<div class="modal fade" data-backdrop="false" id="UCFModal" role="dialog">
+
  html {
−
     <div class="modal-dialog">
+
    background-color: #D2D2D2;
−
      <!-- Modal content-->
+
  }
−
      <div class="modal-content">
+
  body {
−
        <div class="modal-header" style="padding:35px 50px;">
+
     background-color: #D2D2D2;
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
  }
−
          <h4> UCFs are files that define what each operation in the liquid flow relation means. For instance, what does '+' mean in a microfluidic context? It was created by R. Sanka. </h4>
+
 
−
        </div>
+
  #greyWrapper {
−
     </div>
+
    padding-top: 120px;
−
   </div>
+
    background-color: #D2D2D2;
−
</div>
+
    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;
 +
  }
 +
</style>
  
−
<div class="modal fade" data-backdrop="false" id="mintModal" role="dialog">
 
−
    <div class="modal-dialog">
 
−
      <!-- Modal content-->
 
−
      <div class="modal-content">
 
−
        <div class="modal-header" style="padding:35px 50px;">
 
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
 
−
          <h4> MINT is a microfluidic netlist language, which creates abstraction from the specification to the design. It was created by R. Sanka. </h4>
 
−
        </div>
 
−
    </div>
 
−
  </div>
 
−
</div>
 
  
−
<div class="modal fade" data-backdrop="false" id="3dufModal" role="dialog">
 
−
    <div class="modal-dialog">
 
−
      <!-- Modal content-->
 
−
      <div class="modal-content">
 
−
        <div class="modal-header" style="padding:35px 50px;">
 
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
 
−
          <h4> 3duf is a microfluidics CAD tool. It allows the user to draw our their microfluidic device with channels, valves and ports. It was created by J. Lippai. </h4>
 
−
        </div>
 
−
    </div>
 
−
  </div>
 
−
</div>
 
  
−
<div class="modal fade" data-backdrop="false" id="mDeviceModal" role="dialog">
+
<body>
−
    <div class="modal-dialog">
+
<!-- PAGE TITLE BANNER -->
−
      <!-- Modal content-->
+
  <div id="greyWrapper">  
−
      <div class="modal-content">
+
    <div class="pageBanner">
−
        <div class="modal-header" style="padding:35px 50px;">
+
      <h3 id="pageTitle">ATTRIBUTIONS</h3>
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
−
          <h4> The device visual preview provides the user with a sample view of what their microfluidic device will look like during developement. This has been done by the iGEM team. </h4>
+
−
        </div>
+
 
     </div>
 
     </div>
−
  </div>
+
    <br><br><br><br>
−
</div>
+
   
 +
   
  
−
<div class="modal fade" data-backdrop="false" id="mMapperModal" role="dialog">
 
−
    <div class="modal-dialog">
 
−
      <!-- Modal content-->
 
−
      <div class="modal-content">
 
−
        <div class="modal-header" style="padding:35px 50px;">
 
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
 
−
          <h4> uShroom Mapper is a.... It was created by the iGEM team. </h4>
 
−
        </div>
 
−
    </div>
 
−
  </div>
 
−
</div>
 
  
−
<div class="modal fade" data-backdrop="false" id="netSynthModal" role="dialog">
+
<div class="row" style="padding-top:50px; padding-bottom:50px;">
−
    <div class="modal-dialog">
+
  <div class="col-md-1"></div>
−
      <!-- Modal content-->
+
  <div class="col-md-8" style="font-size: 4em;">We stand on the <br><br><br> shoulders of giants.</div>
−
      <div class="modal-content">
+
  <div class="col-md-3"></div>
−
        <div class="modal-header" style="padding:35px 50px;">
+
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
−
          <h4> NetSynth is... It was created by R. Sanka. </h4>
+
−
        </div>
+
−
    </div>
+
−
  </div>
+
 
</div>
 
</div>
  
−
<div class="modal fade" data-backdrop="false" id="fluigiParModal" role="dialog">
+
 
−
    <div class="modal-dialog">
+
<div class="row" style="padding-top:50px; padding-bottom:50px;">
−
      <!-- Modal content-->
+
  <div class="col-md-1"></div>
−
      <div class="modal-content">
+
  <div class="col-md-10" style="font-size: 1em;"> Our work would not have been possible without the foundations laid by our mentors. Our work would not have been possible without the foundations laid by our mentors. Neptune’s microfluidic design and fabrication tool leverages projects such as Fluigi Place and Route, Mint description language, MakerFluidics, and 3DuF in order to provide the most intuitive and cohesive experience for users. These projects have been built and expanded on by our graduate student mentors. We would like to thank our mentors for all of the work they have done to allow us to bring Neptune to life.
−
        <div class="modal-header" style="padding:35px 50px;">
+
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
−
          <h4> Fluigi Place and Route tool takes in the three inputs of rules and specifications, and uses the information to best place and route the channels and valves of the microfluidic device. It was created by R. Sanka. </h4>
+
−
        </div>
+
−
    </div>
+
 
   </div>
 
   </div>
 +
  <div class="col-md-1"></div>
 
</div>
 
</div>
  
−
<div class="modal fade" data-backdrop="false" id="designRulesModal" role="dialog">
+
<div class="row" style="padding-top:100px; padding-bottom:100px;">
−
    <div class="modal-dialog">
+
  <div class="col-md-1"></div>
−
      <!-- Modal content-->
+
  <div class="col-md-10" style="background-color: white; padding-top:50px; padding-bottom:50px;">  
−
      <div class="modal-content">
+
 
−
        <div class="modal-header" style="padding:35px 50px;">
+
 
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
 
−
          <h4> Design rules are rules related to how microfluidics work and how fluid flows through. </h4>
+
 
−
        </div>
+
    <div class="row">
 +
      <div class="col-md-3">
 +
      </div>
 +
      <div class="col-md-9">
 +
        <div style="font-size: 2em">Fluigi | Radhakrishna Sanka</div>
 +
      </div>
 
     </div>
 
     </div>
−
  </div>
+
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
−
</div>
+
      <div class="col-md-3">
 +
        <img src="https://static.igem.org/mediawiki/2016/2/2f/T--BostonU_HW--FluigiLogo_rcwolf.png" width="90%" style="padding-left:20px">
 +
      </div>
 +
      <div class="col-md-6">
 +
       
 +
        A place and route tool for microfluidic devices. Fluigi takes a MINT file as input and strategically routes the features specified in the MINT into an optimized microfluidic design. Fluigi outputs the design in a series of visual formats: SVG files (which can be used to mill out the different layers of the microfluidic chip using a CNC mill), a JSON file (which can be used to visualize the microfluidic design with 3DuF), and EPS files (which can be used to build the chip using photolithography if the user so chooses).
 +
      </div>
 +
      <div class="col-md-3">
 +
        <img src="https://static.igem.org/mediawiki/2016/c/c4/KrishnaSquare_rcwolf.png" width="90%" height="90%" style="border-radius: 50%;">
 +
      </div>
 +
    </div>
 +
 
 +
    <br>
  
−
<div class="modal fade" data-backdrop="false" id="performanceModal" role="dialog">
+
        <div class="row">
−
    <div class="modal-dialog">
+
      <div class="col-md-3">
−
       <!-- Modal content-->
+
       </div>
−
       <div class="modal-content">
+
       <div class="col-md-9">
−
         <div class="modal-header" style="padding:35px 50px;">
+
         <div style="font-size: 2em">MINT | Radhakrishna Sanka</div>
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
      </div>
−
          <h4> Performance rules are those related to how the route can be best optimized to what the user has provided. </h4>
+
    </div>
−
        </div>
+
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
 +
      <div class="col-md-3">
 +
        <img src="https://static.igem.org/mediawiki/2016/4/4f/T--BostonU_HW--MINTlogo_rcwolf.png" width="90%" style="padding-left:20px">
 +
      </div>
 +
      <div class="col-md-6">  
 +
       
 +
        A microfluidic description language generated as an output of MuShroom mapper and used as an input to Fluigi. This language is used to describe the features of the specified microfluidic device in great detail including specification of feature shape, size and spacing.
 +
      </div>
 +
      <div class="col-md-3">
 +
      </div>
 
     </div>
 
     </div>
−
  </div>
 
−
</div>
 
  
−
<div class="modal fade" data-backdrop="false" id="hwCModal" role="dialog">
+
    <br>
−
    <div class="modal-dialog">
+
 
−
       <!-- Modal content-->
+
    <div class="row">
−
       <div class="modal-content">
+
      <div class="col-md-3">
−
         <div class="modal-header" style="padding:35px 50px;">
+
       </div>
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
       <div class="col-md-9">
−
          <h4> Hardware constraints include the size of the available chip, the size of the drill bit (which corresponds to the size of the channels), and so on. </h4>
+
         <div style="font-size: 2em">3DuF | Joshua Lippai</div>
−
        </div>
+
      </div>
 
     </div>
 
     </div>
−
  </div>
+
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
−
</div>
+
      <div class="col-md-3">
 +
        <img src="https://static.igem.org/mediawiki/2016/7/7c/T--BostonU_HW--3DuFlogo_rcwolf.png" width="90%" style="padding-left:20px">
 +
      </div>
 +
      <div class="col-md-6">
 +
       
 +
        A CAD-like drawing web application. 3DuF can be used to manually draw a microfluidic design if the user wishes to bypass high-level specifications. 3DuF will then output SVG files (for CNC milling layers of the microfluidic chip) and a JSON file for later visualization and editing purposes. When used in the context of Neptune, 3DuF is leveraged to visualize the JSON output of Fluigi so that the user may control his or her microfluidic device intuitively through the Neptune interface.
 +
      </div>
 +
      <div class="col-md-3">
 +
        <img src="https://static.igem.org/mediawiki/2016/b/b1/JoshSquare_rcwolf.png" width="90%" height="90%" style="border-radius: 50%;" >
 +
      </div>
 +
    </div>
 +
 
 +
    <br>
 +
 
  
−
<div class="modal fade" data-backdrop="false" id="paraHWModal" role="dialog">
+
    <div class="row">
−
    <div class="modal-dialog">
+
      <div class="col-md-3">
−
       <!-- Modal content-->
+
       </div>
−
       <div class="modal-content">
+
       <div class="col-md-9">
−
         <div class="modal-header" style="padding:35px 50px;">
+
         <div style="font-size: 2em">MakerFluidics | Ryan Silva</div>
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
      </div>
−
          <h4> Parametric Hardware is a pump setup that can easily be altered to adapt to any size. It was created by the iGEM team. </h4>
+
    </div>
−
         </div>
+
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
 +
      <div class="col-md-3">
 +
        <img src="https://static.igem.org/mediawiki/2016/8/8e/T--BostonU_HW--MakerFluidicsLogo_rcwolf.png" width="80%" style="padding-left:20px">
 +
      </div>
 +
      <div class="col-md-6">  
 +
        MakerFluidics is an accessible, inexpensive microfluidic fabrication technique used to manufacture microfluidic chips. A user will use an SVG file to mill out both the control and flow layers of a microfluidic chip. Then he or she will use these 2 layers to sandwich a piece of PDMS and vacuum the chip to create a seal. Through Neptune, the user is encouraged to use this fabrication infrastructure to make their chip so that they may rapidly prototype many chips inexpensively for any iterations of their experiment and easily control their microfluidic system through the Neptune interface.
 +
      </div>
 +
      <div class="col-md-3">
 +
         <img src="https://static.igem.org/mediawiki/2016/7/70/RyanSquare_rcwolf.png" width="90%" height="90%" style="border-radius: 50%;" >
 +
      </div>
 
     </div>
 
     </div>
−
  </div>
 
−
</div>
 
  
−
<div class="modal fade" data-backdrop="false" id="hwModal" role="dialog">
+
    <br>
−
    <div class="modal-dialog">
+
 
−
      <!-- Modal content-->
+
 
−
       <div class="modal-content">
+
    <div class="row">
−
         <div class="modal-header" style="padding:35px 50px;">
+
      <div class="col-md-3"></div>
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
       <div class="col-md-9">
−
          <h4> The hardware setup is the pump array with the arduino and servos. This layout was created by the iGEM team. </h4>
+
         <div style="font-size: 2em">Microfluidic Application | Ali Lashkaripour</div>
−
        </div>
+
      </div>
 
     </div>
 
     </div>
 +
    <div class="row" style="padding-top:20px; padding-bottom:20px;">
 +
      <div class="col-md-3"></div>
 +
      <div class="col-md-6">
 +
       
 +
        Microfluidic applications description
 +
      </div>
 +
      <div class="col-md-3">
 +
        <img src="https://static.igem.org/mediawiki/2016/9/90/AliSquare_rcwolf.png" width="90%" height="90%" style="border-radius: 50%;" >
 +
      </div>
 +
    </div>
 +
 
   </div>
 
   </div>
 +
  <div class="col-md-1"></div>
 
</div>
 
</div>
  
−
<div class="modal fade" data-backdrop="false" id="chipModal" role="dialog">
+
 
−
    <div class="modal-dialog">
+
 
−
      <!-- Modal content-->
+
 
−
      <div class="modal-content">
+
 
−
        <div class="modal-header" style="padding:35px 50px;">
+
<div class="row" style="margin-top:130px;">
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
  <div class="col-md-1"></div>
−
          <h4> This is the microfluidic chip through which fluids flow. It can be made using a CNC mill, and was designed and created by A. Lashkaripour. </h4>
+
  <div class="col-md-10" style="font-size: 4em;">Placement in NEPTUNE </div>
−
        </div>
+
  <div class="col-md-1"></div>
−
    </div>
+
−
  </div>
+
 
</div>
 
</div>
−
+
<div class="row" style="padding-top:30px; padding-bottom:20px;">
−
<div class="modal fade" data-backdrop="false" id="mfModal" role="dialog">
+
  <div class="col-md-1"></div>
−
    <div class="modal-dialog">
+
  <div class="col-md-10" style="font-size: 1.5em; line-height: 150%;"> Each of the above components fit into the Neptune workflow to help fulfill a specific purpose. The location of these pieces are shown in the graph below.
−
      <!-- Modal content-->
+
−
      <div class="modal-content">
+
−
        <div class="modal-header" style="padding:35px 50px;">
+
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
−
          <h4> Makerfluidics is the back-end to linking other programs to the graphical user interface. It was made by R. Silva. </h4>
+
−
        </div>
+
−
    </div>
+
 
   </div>
 
   </div>
 +
  <div class="col-md-1"></div>
 
</div>
 
</div>
  
−
<div class="modal fade" data-backdrop="false" id="guiModal" role="dialog">
+
<div class="row">
−
    <div class="modal-dialog">
+
  <img src="https://static.igem.org/mediawiki/2016/5/55/T--BostonU_HW--NeptuneWorkflowSimple_rcwolf.png" width="100%" height="100%">
−
      <!-- Modal content-->
+
−
      <div class="modal-content">
+
−
        <div class="modal-header" style="padding:35px 50px;">
+
−
          <button type="button" class="close" data-dismiss="modal">&times;</button>
+
−
          <h4> The graphical user interface controls the entire workflow from specify to design to build. It was made by the iGEM Team. </h4>
+
−
        </div>
+
−
    </div>
+
−
  </div>
+
 
</div>
 
</div>
  
−
</html>
+
<br><br>
  
−
{{BUHW2016Footer}}
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</body>
 +
 
 +
<!-- Footer -->
 +
    <div id="contact" class="row" style="background-color: white; padding-top: 20px; padding-bottom:20px;">
 +
        <div class="container">
 +
 
 +
 
 +
 
 +
 
 +
<h3 style="text-align:center; font-size:20px;">Thank you to our sponsors for their support</h3>
 +
<br><br/>
 +
<img align="middle" id="Image-Maps-Com-image-maps-2016-08-11-103011" src="https://static.igem.org/mediawiki/2016/9/9a/FooterLogoBoard_rcwolf.png" border="0" width="1050" height="318" orgWidth="1050" orgHeight="318" usemap="#myfootermap" alt="" />
 +
<map name="myfootermap" id="ImageMapsCom-image-maps-2016-08-11-103011">
 +
<area  alt="" title="" href="http://www.draper.com/" shape="rect" coords="3,48,266,142" style="outline:none;" target="_self"    />
 +
<area  alt="" title="" href="https://www.cidarlab.org" shape="rect" coords="729,7,1021,169" style="outline:none;" target="_self"    />
 +
<area  alt="" title="" href="https://www.bu.edu/urop/" shape="rect" coords="821,188,1034,289" style="outline:none;" target="_self"    />
 +
<area  alt="" title="" href="https://www.bu.edu" shape="rect" coords="458,99,697,212" style="outline:none;" target="_self"    />
 +
<area  alt="" title="" href="http://labcentral.org/resident-companies/phenomyx" shape="rect" coords="468,19,711,74" style="outline:none;" target="_self"    />
 +
<area  alt="" title="" href="http://programmingbiology.org/" shape="rect" coords="32,189,415,315" style="outline:none;" target="_self"    />
 +
<area  alt="" title="" href="http://www.monsanto.com/pages/default.aspx" shape="rect" coords="484,212,817,299" style="outline:none;" target="_self"    />
 +
<area  alt="" title="" href="https://2016.igem.org" shape="rect" coords="273,27,444,157" style="outline:none;" target="_self"    />
 +
</map>
 +
 
 +
<br><br/><br>
 +
 
 +
 
 +
  </div>
 +
  </div>
 +
 
 +
</html>

Revision as of 16:30, 13 October 2016


ATTRIBUTIONS





We stand on the


shoulders of giants.
Our work would not have been possible without the foundations laid by our mentors. Our work would not have been possible without the foundations laid by our mentors. Neptune’s microfluidic design and fabrication tool leverages projects such as Fluigi Place and Route, Mint description language, MakerFluidics, and 3DuF in order to provide the most intuitive and cohesive experience for users. These projects have been built and expanded on by our graduate student mentors. We would like to thank our mentors for all of the work they have done to allow us to bring Neptune to life.
Fluigi | Radhakrishna Sanka
A place and route tool for microfluidic devices. Fluigi takes a MINT file as input and strategically routes the features specified in the MINT into an optimized microfluidic design. Fluigi outputs the design in a series of visual formats: SVG files (which can be used to mill out the different layers of the microfluidic chip using a CNC mill), a JSON file (which can be used to visualize the microfluidic design with 3DuF), and EPS files (which can be used to build the chip using photolithography if the user so chooses).

MINT | Radhakrishna Sanka
A microfluidic description language generated as an output of MuShroom mapper and used as an input to Fluigi. This language is used to describe the features of the specified microfluidic device in great detail including specification of feature shape, size and spacing.

3DuF | Joshua Lippai
A CAD-like drawing web application. 3DuF can be used to manually draw a microfluidic design if the user wishes to bypass high-level specifications. 3DuF will then output SVG files (for CNC milling layers of the microfluidic chip) and a JSON file for later visualization and editing purposes. When used in the context of Neptune, 3DuF is leveraged to visualize the JSON output of Fluigi so that the user may control his or her microfluidic device intuitively through the Neptune interface.

MakerFluidics | Ryan Silva
MakerFluidics is an accessible, inexpensive microfluidic fabrication technique used to manufacture microfluidic chips. A user will use an SVG file to mill out both the control and flow layers of a microfluidic chip. Then he or she will use these 2 layers to sandwich a piece of PDMS and vacuum the chip to create a seal. Through Neptune, the user is encouraged to use this fabrication infrastructure to make their chip so that they may rapidly prototype many chips inexpensively for any iterations of their experiment and easily control their microfluidic system through the Neptune interface.

Microfluidic Application | Ali Lashkaripour
Microfluidic applications description
Placement in NEPTUNE
Each of the above components fit into the Neptune workflow to help fulfill a specific purpose. The location of these pieces are shown in the graph below.


Thank you to our sponsors for their support