Difference between revisions of "Team:BostonU HW/Notebook/May"

Line 1: Line 1:
−
{{BUHW2016}}
+
{{Template:BUHW2016_NavBar}}
−
<html>
+
  
 +
 +
{{Template:BUHW2016_Bootstrap}}
 +
<html>
 +
<head>
 
<style>
 
<style>
−
.datesFaded {
+
 
−
color:#787878
+
 
 +
/********************************* 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);
 
}
 
}
  
−
h1 {
+
 
−
font-size:500%;
+
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;
 
}
 
}
  
−
.row::after {
+
/* Links inside the dropdown */
−
     content: "";
+
.dropdown-content a {
−
     clear: both;
+
    color: black;
 +
    font-size: 15px;
 +
     padding: 10px 16px;
 +
     text-decoration: none;
 
     display: block;
 
     display: block;
 
}
 
}
  
−
[class*="col-"] {
+
/* Change color of dropdown links on hover */
−
    float: left;
+
.dropdown-content a:hover {background-color: #f1f1f1}
−
     padding: 15px;
+
 
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
     display: block;
 
}
 
}
−
.col-1 {width: 8.33%;}
+
 
−
.col-2 {width: 16.66%;}
+
.paddedNav{
−
.col-3 {width: 25%;}
+
padding-left: 23px;
−
.col-4 {width: 33.33%;}
+
padding-right: 23px;
−
.col-5 {width: 41.66%;}
+
padding-bottom: 5px;
−
.col-6 {width: 50%;}
+
}
−
.col-7 {width: 58.33%;}
+
 
−
.col-8 {width: 66.66%;}
+
 
−
.col-9 {width: 75%;}
+
 
−
.col-10 {width: 83.33%;}
+
 
−
.col-11 {width: 91.66%;}
+
 
−
.col-12 {width: 100%;}
+
  
 
</style>
 
</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>Timeline: May</h1>
+
  <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>
 +
            <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>
 +
            <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/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">Documentation</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>
 +
                  <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>
 +
            </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>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/AboveAndBeyond">Above & Beyond</a>
 +
            </div>
 +
        </li>
 +
       
 +
 
 +
      </ul>
 +
    </div><!-- /.navbar-collapse -->
 +
  </div><!-- /.container-fluid -->
 +
</nav>
 +
 
 +
 
 
</div>
 
</div>
−
</div>
 
−
</div>
 
−
</div>
 
−
    <section id="about">
 
−
        <div class="container">
 
−
                <div class="row">
 
−
                    <div class="col-4">
 
−
                        <h1>Week 1</h1>
 
−
                        <h2 class="datesFaded">16 May - 22 May</h2>
 
−
                    </div>
 
  
−
                    <div class="col-8">
 
−
                        <br><br/>
 
−
                        <h4>Basic training
 
−
                        <br><br>Learned about the entire workflow of Fluigi
 
−
                        <br><br>Created a mockup for the GUI for the microfluidic work flow
 
−
                        <br><br>Started to work with p5 and processing to create a GUI on a web-app
 
−
                        <br><br>Began to design options for pump implementation</h4>
 
−
                    </div>
 
−
                </div>
 
  
−
                <div class="row">
 
−
                    <br></br>
 
−
                    <hr></hr>
 
−
                </div>
 
  
−
                <div class="row">
+
</body>
−
                    <div class="col-4">
+
−
                        <h1>Week 2</h1>
+
−
                        <h2 class="datesFaded">23 May - 29 May</h2>
+
−
                    </div>
+
  
−
                    <div class="col-8">
 
−
                        <br><br/>
 
−
                        <h4>Switched to node.js template with handlebars to make the GUI after realizing the need of a server to open up local ports and save files
 
  
−
                        <br><br>Added html pages for the web-app, javascript files for the functionality, and a css file for the look of the pages
 
−
                        <br><br>Imported the webix library to manage the settings of the microfluidics
 
  
−
                        <br><br>Decided on a structure to implement pumps using a lever arm
+
<html>
−
                        </h4>  
+
 
−
                    </div>
+
 
−
                </div>
+
 
 +
 
 +
 
 +
 
 +
<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">TIMELINE: MAY</h3>
 +
    </div>
 +
    <br><br><br><br>
 +
 
 +
<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 style="font-size: 2em; line-height: 150%; color:#355E62;">Notebook</div>
 +
        <br><br>
 +
        <div>
 +
          <ul>
 +
            <li>Basic training </li>
 +
            <li>Learned about the entire workflow of Fluigi </li>
 +
            <li>Created a mockup for the GUI for the microfluidic work flow
 +
</li>
 +
            <li>Started to work with p5 and processing to create a GUI on a web-app </li>
 +
            <li>Began to design options for pump implementation</li>
 +
            <li>Imported the webix library to manage the settings of the microfluidics </li>
 +
           
 +
            <li></li>
 +
 
 +
 
 +
          </ul>
 
         </div>
 
         </div>
−
     </section>
+
      </div>
 +
      <div class="col-md-1"></div>
 +
     </div>
 +
  </div>
 +
  <div class="col-md-1"></div>
 +
</div>
  
 +
<br><br>
  
−
</body>
 
  
−
</html>
 
  
  
−
{{BUHW2016Footer}}
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Revision as of 06:39, 19 October 2016


TIMELINE: MAY





Notebook


  • Basic training
  • Learned about the entire workflow of Fluigi
  • Created a mockup for the GUI for the microfluidic work flow
  • Started to work with p5 and processing to create a GUI on a web-app
  • Began to design options for pump implementation
  • Imported the webix library to manage the settings of the microfluidics