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

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;  
 
}
 
}
  
−
.row::after {
+
 
−
     content: "";
+
body{
−
     clear: both;
+
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;
 
     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: June</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>
 +
            <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>
  
−
    <section id="about">
 
−
        <div class="container">
 
−
                <div class="row">
 
−
                    <div class="col-4">
 
−
                        <h1>Week 3</h1>
 
−
                        <h2 class="datesFaded">30 May - 5 June</h2>
 
−
                    </div>
 
  
−
                    <div class="col-8">
 
−
                        <br><br/>
 
−
                        <h4>Created templates to display an svg file
 
−
                        <br><br>Added functionality to the display by dynamically creating buttons to open and close valves depending on the svg file
 
−
                        <br><br>Incorporated Ajax to connect to the serial port to connect to an arduino
 
−
                        <br><br>Used Ajax and post requests to import files from the web-app and save them locally to use for the settings page and the svg image
 
−
                        <br><br>Ordered parts for the pumps setup
 
−
                        <br><br>Changed mapper code to differentiate flow from control on an LFR file
 
−
                        <br><br>Added functionality to mapper to work with the UCF and identify which layer all elements reside in
 
−
                        <br><br>Implemented control layer in mapper
 
−
                        </h4>
 
−
                    </div>
 
−
                </div>
 
  
−
                <div class="row">
+
</body>
−
                    <br></br>
+
−
                    <hr></hr>
+
−
                </div>
+
  
−
                <div class="row">
 
−
                    <div class="col-4">
 
−
                        <h1>Weeks 4 & 5</h1>
 
−
                        <h2 class="datesFaded">6 June - 19 June</h2>
 
−
                    </div>
 
  
−
                    <div class="col-8">
 
−
                        <br><br/>
 
−
                        <h4>Learned js, css, html, node.js, express framework, and how to set up effective github repositories
 
−
                        <br><br>Did some reading about microfluidics: "Microfluidics for synthetic biology: from design to execution," Ferry MS, Razinkov IA, Hasty J.
 
−
                        <br><br>Framework switched from Webix based implementation to a more standard implementation w/ hybrid of Javascript, CSS, html
 
−
                        <br><br>Assembled the demo board with pump holders and servo holders
 
−
                        <br><br>Wrote an Arduino code that gets the code as an input, and turns on the servo
 
−
                        <br><br>Implemented the display of the SVG graph with buttons to open and close valves
 
−
                        <br><br>Added file upload functionality to certain pages
 
−
                        <br><br>Enabled serial communication of valves from the fluigi page to the Arduino
 
−
                        <br><br>Mapper changed to completely align with place and route with corrected formatting issues and MINT output
 
−
                        <br><br>Started to integrate mapper into the graphical user interface
 
−
                        </h4>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="row">
 
−
                    <br></br>
 
−
                    <hr></hr>
 
−
                </div>
 
  
−
                <div class="row">
+
<html>
−
                    <div class="col-4">
+
−
                        <h1>Week 6</h1>
+
−
                        <h2 class="datesFaded">20 June - 26 June</h2>
+
−
                    </div>
+
  
−
                    <div class="col-8">
 
−
                        <br><br/>
 
−
                        <h4 align=left>Worked on NEGEM Presentation
 
−
                        <br><br>Embed text editor for MINT within GUI
 
−
                        <br><br>Rearrange entire structure of code
 
−
                        <br><br>Create solidworks designs of pump holders and layout structure
 
−
                        <br><br>Graphical user interface makeover
 
−
                        <br><br>Debugging and synchronizing pumps with svg implemented
 
−
                        </h4>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="row">
 
−
                    <br></br>
 
−
                    <hr></hr>
 
−
                </div>
 
  
−
                <div class="row">
 
−
                    <div class="col-4">
 
−
                        <h1>Week 7</h1>
 
−
                        <h2 class="datesFaded">27 June - 3 July</h2>
 
−
                    </div>
 
  
−
                    <div class="col-8">
+
 
−
                        <br><br/>
+
 
−
                        <h4 align=left>Talked to companies such as Lab Central and Ginkgo Labs for sponsorship
+
 
−
                        <br><br>Had a meeting with the company Nona to talk about open source work for human practices
+
<html>
−
                        <br><br>Worked on iGEM wiki: Page template and setup, Home page, Attributions page, and Team page
+
 
−
                        </h4>
+
<style>
−
                    </div>
+
 
−
                </div>
+
  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: JUNE</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:30px; 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>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  </li>
 +
            <li>Added html pages for the web-app, javascript files for the functionality, and a css file for the look of the pages
 +
</li>
 +
            <li>Created a mockup for the GUI for the microfluidic work flow
 +
</li>
 +
            <li>Decided on a structure to implement pumps using a lever arm</li>
 +
            <li>Created templates to display an svg file </li>
 +
            <li>Added functionality to the display by dynamically creating buttons to open and close valves depending on the svg file  </li>
 +
           
 +
            <li>Incorporated Ajax to connect to the serial port to connect to an arduino </li>
 +
            <li>Used Ajax and post requests to import files from the web-app and save them locally to use for the settings page and the svg image </li>
 +
            <li>Ordered parts for the pumps setup </li>
 +
            <li>Changed mapper code to differentiate flow from control on an LFR file
 +
</li>
 +
            <li>Added functionality to mapper to work with the UCF and identify which layer all elements reside in </li>
 +
            <li>Implemented control layer in mapper</li>
 +
 
 +
 
 +
          </ul>
 
         </div>
 
         </div>
−
     </section>
+
      </div>
 +
      <div class="col-md-1"></div>
 +
     </div>
 +
  </div>
 +
  <div class="col-md-1"></div>
 +
</div>
  
 +
<br><br>
  
−
</body>
 
  
  
Line 148: Line 415:
  
  
−
</html>
 
  
−
{{BUHW2016Footer}}
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Revision as of 06:41, 19 October 2016


TIMELINE: JUNE





Notebook


  • 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
  • Added html pages for the web-app, javascript files for the functionality, and a css file for the look of the pages
  • Created a mockup for the GUI for the microfluidic work flow
  • Decided on a structure to implement pumps using a lever arm
  • Created templates to display an svg file
  • Added functionality to the display by dynamically creating buttons to open and close valves depending on the svg file
  • Incorporated Ajax to connect to the serial port to connect to an arduino
  • Used Ajax and post requests to import files from the web-app and save them locally to use for the settings page and the svg image
  • Ordered parts for the pumps setup
  • Changed mapper code to differentiate flow from control on an LFR file
  • Added functionality to mapper to work with the UCF and identify which layer all elements reside in
  • Implemented control layer in mapper