Team:Vanderbilt/SoftwareProjectSubPageBuilder

From 2014.igem.org

(Difference between revisions)
Line 116: Line 116:
     };
     };
-
     subPage.createMethodsRight = function() {
+
     subPage.createPage3Right = function() {
-
         var img1 = subPage.createPhoto("http://parts.igem.org/wiki/images/5/58/Vanderbilt_experiment_1_diagram.png", "Experiment 1 Diagram", 421, 571, "Experiment 1 Diagram");
+
         var img1 = subPage.createPhoto("http://parts.igem.org/wiki/images/2/2a/VU_MF_Photo_3_%281%29.JPG", "Vinyl Cutter", 421, 571, "Vinyl Cutter");
         img1.style.margin = "auto";
         img1.style.margin = "auto";
         img1.style.marginBottom = "1em";
         img1.style.marginBottom = "1em";
-
        var img2 = subPage.createPhoto("http://parts.igem.org/wiki/images/7/76/Vanderbilt_experiment_2_diagram.png", "Experiment 2 Diagram", 484, 591, "Experiment 2 Diagram");
 
-
        img2.style.margin = "auto";
 
-
        img2.style.marginBottom = "1em";
 
         document.getElementById("right_page").appendChild(img1);
         document.getElementById("right_page").appendChild(img1);
-
        document.getElementById("right_page").appendChild(img2);
 
     };
     };

Revision as of 22:06, 26 January 2015

function SoftwareProjectSubPageBuilder() {

   var subPage = new SubPageBuilder();
   subPage.maxSubPage = 5;
   subPage.getMaxSubPage = function() {
       return subPage.maxSubPage;
   };
   subPage.createSubPage = function (subPageNum) {
       switch(subPageNum){
           case 1:
               subPage.createPage1Left();
               subPage.createPage1Right();
               break;
           case 2:
               subPage.createPage2Left();
               subPage.createPage2Right();
               break;
           case 3:
               subPage.createPage3Left();
               subPage.createPage3Right();
               break;
           case 4:
               subPage.createPage4Left();
               subPage.createPage4Right();
               break;
           case 5:
               subPage.createPage5Left();
               subPage.createPage5Right();
               break;
       }
   };
   subPage.createPage1Left = function() {
       var head = document.createElement("header");
       head.appendChild(document.createTextNode("Developing low cost, easy-to-design microfluidic device fabrication method"));
       var text = "Our team utilized a unique microfluidic development process that emphasizes low cost and rapid prototyping. Through the use of open source design software and cheap manufacturing methods we were able to fabricate microfluidic devices in a cost and time efficient manner. It is our hope that these methods can be utilized by other iGEM teams who are interested in incorporating microfluidics into their projects without the hassle of complex design and fabrication techniques.";
       var p1 = subPage.createP(text);
       var head2 = document.createElement("header");
       head2.appendChild(document.createTextNode("Microfluidic Computer Aided Design (CAD)"));
       text = "Several programs were used by members on the team to design and ultimately fabricate microfluidic devices. Initially, traditional computer aided design software packages were used such as AutoCAD and Solidworks. These packages provide advanced features which designers can wield to make complex devices with varying functions such as mixing and trapping cells. Alternative software packages were explored such as the open source vector graphics software Inkscape which proved to be easy to use in the design of a microfluidic device. Inkscape is an open source analogue to Adobe Illustrator, a common vector graphics editing software. Inkscape is easy to use and with a few online tutorials, ideas for microfluidic designs can be turned into realities.";
       var p2 = subPage.createP(text);
       document.getElementById("left_page").appendChild(head);
       document.getElementById("left_page").appendChild(p1);
       document.getElementById("left_page").appendChild(head2);
       document.getElementById("left_page").appendChild(p2);
   };
   subPage.createPage1Right = function() {
       var img1 = subPage.createPhoto("VU_MF_Photo_1.JPG", "Vacuum used in fabricating microfluidic devices made of PDMS", 487, 519, "Vacuum used in fabricating microfluidic devices made of PDMS");
       img1.style.position = "relative";
       img1.style.margin = "auto";
       img1.style.marginBottom = "1em";
       var img2 = subPage.createPhoto("VU_MF_Photo_1_%281%29.JPG", "Material used in fabrication", 487, 578, "Material used in fabrication");
       img2.style.position = "relative";
       img2.style.margin = "auto";
       img2.style.marginBottom = "1em";
       document.getElementById("right_page").appendChild(img1);
       document.getElementById("right_page").appendChild(img2);
   };
   subPage.createPage2Left = function() {
       var head = document.createElement("header");
       head.appendChild(document.createTextNode("Microfluidic Prototyping using a Vinyl Cutter"));
       var text = "In order to rapidly prototype microfluidic devices of different geometries and designs, our team explored fabrication techniques that bypassed the complicated photolithography process that is standard for microfluidic devices in research laboratories. Photolithography has the benefit of achieving very fine resolution and fine details for pinpoint fluid manipulation, but it is detracted from its lengthy creation process. The time scale from device design to fabrication of a working device using photolithography is on the order of 2-3 days and uses a variety of expensive and highly technical equipment that is not readily accessible to many iGEM teams. ";
       var p1 = subPage.createP(text);
       text = "Our team focused on bypassing the entire photolithography process by using a commercially available arts and crafts vinyl cutter (Silhouette) to produce device masters. Arts and crafts vinyl cutters are typically used to craft complex shapes and figures for use in decorations. A vinyl cutter has a resolution on the order of 250 microns which means that the devices made using this technique are considerably larger than those made using standard photolithography techniques. While the devices obtained from vinyl cutting are larger, for many synthetic biology applications this is not an issue. For the purpose of E. chrono, the size of the channels simply affected the total amount of fluid needing to be pumped into the device.";
       var p2 = subPage.createP(text);

text = "As mentioned previously, the main benefit of using a vinyl cutter is the rapid production of microfluidic masters. A vinyl cutter is able to take a device design to a master and ultimately a device in roughly an hour. By simplifying and speeding up the design and fabrication process, vinyl cutting can allow iGEM teams with no microfluidic knowledge to rapidly develop their own devices for testing. Using an open source design software such as Inkscape allows a team to rapidly formulate and then test a microfluidic device within an afternoon.";

       var p3 = subPage.createP(text);
       leftPageBuilder.appendChild(head);
       leftPageBuilder.appendChild(p1);
       leftPageBuilder.appendChild(p2);
       leftPageBuilder.appendChild(p3);
   };
   subPage.createPage2Right = function() {
       var img1 = subPage.createPhoto("VU_MF_Photo_2.JPG", "", 240, 325, "");
       img1.style.marginRight = "1em";

var img2 = subPage.createPhoto("VU_MF_Photo_2_%281%29.JPG", "", 240, 325, "");

       img2.style.marginLeft = "1em";
       rightPageBuilder.appendChild(img1);
       rightPageBuilder.appendChild(img2);
   };
   subPage.createPage3Left = function() {
       var head = document.createElement("header");
       head.appendChild(document.createTextNode("Converting a Design to a Vinyl Master"));
       var list = document.createElement("ol");

var arr = [["Import the design for microfluidic device into Silhouette Studio, the vinyl cutting software used to make designs. Note: for Design process, see Microfluidic Device Design instructions"], ["With device inside Silhouette, check to make sure dimensions are within the vinyl cutter resolution limits. No feature of the device should be smaller than 250 microns, this rule applies predominantly to channel widths."], ["Place vinyl paper inside printer and load the paper in place"], ["Place the blade setting to 2"], ["On the right hand side there is are several options for vinyl cutting, click Include Edges and then submit the job to be printed."], ["Once the device is cut onto a vinyl sheet, using a razor blade peel away the surrounding vinyl so that only the cut out is left"], ["With tweezers and razor blade, pick up the cutout and place on a glass slide"], ["Flatten the cutout onto the glass slide, this creates the “master” with which microfluidic devices can be manufactured"]];

subPage.addMultLI(list, arr);

       leftPageBuilder.appendChild(head);
       leftPageBuilder.appendChild(list);
   };
   subPage.createPage3Right = function() {
       var img1 = subPage.createPhoto("VU_MF_Photo_3_%281%29.JPG", "Vinyl Cutter", 421, 571, "Vinyl Cutter");
       img1.style.margin = "auto";
       img1.style.marginBottom = "1em";
       document.getElementById("right_page").appendChild(img1);
   };
   subPage.createResultsDirectionsLeft = function() {
       var head = document.createElement("header");
       head.appendChild(document.createTextNode("Results and Directions"));
       var text = "Several factors contributed to the difficulty we experienced during the final phase of the project." +
           " First, member engagement suffered a significant decline between the spring and fall semesters, to the point" +
           " where only a small handful of people were left to preform all experiments. Second, the late realization tha" +
           "t we had to change our cloning strategy to modified cDNA inserts effectively meant we had to start anew in l" +
           "ate August despite having what was a good head start when we began in early March. Third, the RFC10 require" +
           "ments added a substantial dimension of difficulty to the project since all of our starting material (both t" +
           "he extracted gene cassettes for plasmid construction and the synthase genes) contained multiple sites that " +
           "made them incompatible with the biobrick standard. Nevertheless, our team accomplished an enormous amount d" +
           "uring our first year in competition. ";
       var p1 = subPage.createP(text);
       text = "We successfully constructed pVU14004, which contains all of the cassettes needed to have all of function" +
       "ality we had intended. However, this form of the plasmid has XbaI and EcoRI sites that make it incompatible with " +
       "RFC10. These sites were successfully changed to missense mutations by site directed mutagenesis. The final step " +
       "required to make pVU14006 is changing the multiple cloning site (MCS) to have the biobrick prefix and suffix. In" +
       " its current form, the plasmid has a functional MCS but it does not yet have the specific order of EcoRI, XbaI," +
       " SpeI, and PstI sites required by RFC10. ";
       var p2 = subPage.createP(text);
       text = "For a listing of all the medal requirements we successfully fulfilled over the course of our project, " +
       "please visit this page.";
       var p3 = subPage.createP(text);
       document.getElementById("left_page").appendChild(head);
       document.getElementById("left_page").appendChild(p1);
       document.getElementById("left_page").appendChild(p2);
       document.getElementById("left_page").appendChild(p3);
   };
   subPage.createResultsDirectionsRight = function() {
       var table = document.createElement("table");
       table.style.backgroundColor = "transparent";
       table.style.margin = "auto";
       var cTitles = ["Terpene",
           "Plant Genomic DNA Extraction Success",
           "PCR-isolation of Synthase Gene",
           "Plant RNA Extraction success",
           "Synthase Gene Reverse-Transcription success",
           "Terpene Production in E.coli/yeast success"];
       subPage.insertTextRow(table, cTitles);
       var greenCheck = "Green_check_mark.png";
       var redX = "Red_X.png";
       var yellowSquare = "Yellow_square.png";
       var row1 = [document.createTextNode("Cadinene"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x")];
       var row2 = [document.createTextNode("Carene"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x")];
       var row3 = [document.createTextNode("Humelene"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x")];
       var row4 = [document.createTextNode("Myrcene"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x")];
       var row5 = [document.createTextNode("(R)-Linalool"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x")];
       var row6 = [document.createTextNode("(L)-Linalool"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x")];
       var row7 = [document.createTextNode("Sabinene"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(yellowSquare, "yellow square", 32, 32, "yellow square")];
       var row8= [document.createTextNode("Santalene"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(yellowSquare, "yellow square", 32, 32, "yellow square")];
       var row9 = [document.createTextNode("Zingiberene"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(greenCheck, "green check", 32, 32, "green check"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x"),
           subPage.createPlainIMG(redX, "red x", 32, 32, "red x")];
       subPage.createRowFromArray(table, row1);
       subPage.createRowFromArray(table, row2);
       subPage.createRowFromArray(table, row3);
       subPage.createRowFromArray(table, row4);
       subPage.createRowFromArray(table, row5);
       subPage.createRowFromArray(table, row6);
       subPage.createRowFromArray(table, row7);
       subPage.createRowFromArray(table, row8);
       subPage.createRowFromArray(table, row9);
       rightPageBuilder.appendChild(table);
   };
   subPage.createCollaborationsLeft = function() {
       var head = document.createElement("header");
       head.appendChild(document.createTextNode("Results and Directions"));
       var text = "In addition to our own wetware project, our team led fruitful collaborations with a total of three" +
           " other iGEM teams. First, we played a major role in assisting Vanderbilt's microfluidic division with the b" +
           "iological aspect of their project. We prepared the biobrick parts they tested in their microfluidic device" +
           ", including transforming the E. coli they used to study their quorum-sensing fluorescent oscillator circui" +
           "t. Second, we provided feedback to Vanderbilt's software division about their own project involving a prog" +
           "ram to aid in the manipulation of genetic sequences. We used the program as if it were for a real project " +
           "and gave them suggestions on how to make their program easier to use and more useful to biologists. ";
       var p1 = subPage.createP(text);
       var building = subPage.createPhoto("Vanderbilt_Yellow_square.png", "Ravenwood High School", 250, 250, "Ravenwood High School");
       building.style.float = "left";
       building.style.margin = "1%";
       text = "Last but not least, we provided significant assistance and guidance to the Ravenwood Raptors high schoo" +
       "l iGEM team. In a series of conversations with Dr. Amanda Benson, we planned a smaller scale version of our ow" +
       "n project that involved only a single terpene synthase gene. After visiting the high school and presenting our" +
       " idea, the students voted to choose it for their project. We also provided the primers and sage genomic DNA te" +
       "mplate they used in their experiments. ";
       var p2 = subPage.createP(text);
       leftPageBuilder.appendChild(head);
       leftPageBuilder.appendChild(p1);
       leftPageBuilder.appendChild(building);
       leftPageBuilder.appendChild(p2);
   };
   subPage.createCollaborationsRight = function() {
       var header = document.createElement("header");
       header.appendChild(document.createTextNode("References"));
       var text1 = "1. USDA Industrial Uses Reports. Essential Oils Widely Used in Flavors and Fragrances. September 1995.";
       var text2 =
           "2. Ajikumar PK, Tyo K, Carlsen S, Mucha O, Phon TH, Stephanopoulos G. Terpenoids: opportunities for biosynth" +
           "esis of natural product drugs using engineered microorganisms. Mol Pharm. 2008;5(2):167-90.";
       var text3 =
           "3. Dudareva N, Klempien A, Muhlemann JK, Kaplan I. Biosynthesis, function and metabolic engineering of plant " +
           "volatile organic compounds. New Phytol. 2013;198(1):16-32.";
       var text4 =
           "4.Martin VJ, Pitera DJ, Withers ST, Newman JD, Keasling JD. Engineering a mevalonate pathway in Escherichia " +
           "coli for production of terpenoids. Nat Biotechnol. 2003;21(7):796-802.";
       var p1 = subPage.createP(text1);
       var p2 = subPage.createP(text2);
       var p3 = subPage.createP(text3);
       var p4 = subPage.createP(text4);
       p1.style.fontStyle = "italic";
       p2.style.fontStyle = "italic";
       p3.style.fontStyle = "italic";
       p4.style.fontStyle = "italic";
       rightPageBuilder.appendChild(header);
       rightPageBuilder.appendChild(p1);
       rightPageBuilder.appendChild(p2);
       rightPageBuilder.appendChild(p3);
       rightPageBuilder.appendChild(p4);
   };
   return subPage;

}