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

 
(9 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">
 
−
          <div class="col-lg-10 col-lg-offset-1">
 
−
        <div class="text-vertical-center" style="color: white;">
 
−
            <h1>Timeline: June</h1>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
  
−
<section id="about">
+
<header id="top" class="header">
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-lg-12 text-center">
+
−
                    <h2 class="section-heading">Week 3: May 30th - June 5th</h2>
+
−
                    <h4 align=left>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>
+
  
−
<br><br>
+
<nav class="navbar navbar-default navbar-fixed-top" style="max-height: 70px !important;">
−
<h2 class="section-heading">Weeks 4 and 5: June 6th - June 19th</h2><br>
+
  <div class="container-fluid paddedNav">
−
                    <h4 align=left>Learnt js, css, html, node.js, express framework, and how to set up effective github repositories
+
    <!-- Brand and toggle get grouped for better mobile display -->
−
<br><br>Did some reading about microfluidics: <br> <p> "Microfluidics for synthetic biology: from design to execution," Ferry MS, Razinkov IA, Hasty J. </p>  
+
    <div class="navbar-header">
−
<br>Framework switched from Webix based implementation to a more standard implementation w/ hybrid of Javascript, CSS, html
+
      <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>
  
−
<br><br>Assembled the demo board with pump holders and servo holders
+
    <!-- Collect the nav links, forms, and other content for toggling -->
−
<br><br>Wrote an Arduino code that gets the code as an input, and turns on the servo
+
    <div class="collapse navbar-collapse " >
−
<br><br>Implemented the display of the SVG graph with buttons to open and close valves
+
      <ul class="nav navbar-nav navbar-right">
−
<br><br>Added file upload functionality to certain pages
+
        <li class="sliding-middle-out dropdown">
−
<br><br>Enabled serial communication of valves from the fluigi page to the Arduino
+
            <a href="#" class="dropbtn">TEAM </a>
−
<br><br>Mapper changed to completely align with place and route with corrected formatting issues and MINT output
+
            <div class="dropdown-content">
−
<br><br>Started to integrate mapper into the graphical user interface
+
                  <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>
 +
            <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>
 +
       
  
−
</h4>
+
      </ul>
−
                </div>
+
    </div><!-- /.navbar-collapse -->
−
            </div>
+
  </div><!-- /.container-fluid -->
−
      </div>
+
</nav>
−
  </section>
+
 
 +
 
 +
</div>
  
  
Line 55: Line 249:
  
  
−
     <!-- Footer -->
+
<html>
−
    <footer id="contact">
+
 
−
        <div class="container">
+
 
−
            <div class="row">
+
 
−
             
+
 
−
<div class="col-lg-10 col-lg-offset-1 text-center">
+
 
−
                    <h2>Contact Us</h2>
+
 
−
                    <ul>
+
<html>
−
<div class="col-md-6 col-lg-offset-1">
+
 
−
<img src= "https://static.igem.org/mediawiki/2016/2/25/ValenciaUPV_twitterLogo.png" height="50px">
+
<style>
−
                      <a href="http://twitter.com/iGemHWBU">Twitter </a> 
+
 
−
</div>
+
  html {
−
<div class="col-md-2">
+
     background-color: #D2D2D2;
−
<img src= "https://static.igem.org/mediawiki/2016/2/2c/ValenciaUPV_mailLogo.png" height="50px">
+
  }
−
                      <a href="mailto:bu.igemhw2016@gmail.com"> Email</a>
+
  body {
−
</div>
+
    background-color: #D2D2D2;
−
                      <br/><br/><br/>
+
  }
−
                    </ul>
+
 
−
                    <hr class="small">
+
  #greyWrapper {
−
                    <p class="text-muted" style="text-align:center">Copyright &copy; Boston University Hardware Team Website 2016</p>
+
    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;
 +
  }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.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>
−
     </footer>
+
      </div>
 +
      <div class="col-md-1"></div>
 +
     </div>
 +
  </div>
 +
  <div class="col-md-1"></div>
 +
</div>
  
 +
<br><br>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
</body>
 
</html>
 
</html>

Latest revision as of 03:23, 20 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