Team:Wellesley Desyne/zMol zTree

From 2013.igem.org

(Difference between revisions)
 
(27 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:Wellesley_Desyne/css/wp_app.css}}
<html>
<html>
<head>
<head>
-
<title>Wellesley HCI iGEM Team: Notebooks</title>  
+
<title>Wellesley HCI iGEM Team: Welcome</title>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<meta charset="utf-8">
+
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width">
+
<meta name="viewport" content="width=device-width">
-
 
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
-
<style type="text/css">
+
-
 
+
-
/* Hiding predefined html elements */
+
-
/***********************************/
+
-
#contentSub, #search-controls, #catlinks, #p-logo, .firstHeading {
+
-
display:none;
+
-
padding:0px;
+
-
margin:0px;
+
-
}
+
-
#bodyContent {border:none;}
+
-
#content {width: 100%; padding:0px; border-left: 0px; border-right: 0px;}
+
-
#globalWrapper {width: 100%; font-size: 100%; position: static;}
+
-
#top-section {width: 100%; height:10px; border:none;}
+
-
#p-logo {display:none;}
+
-
#search-controls {display:none;}
+
-
#menubar a {color:#000000; background-color:transparent;}
+
-
#menubar a:hover{text-decoration:none; color:#0090FF; background-color:transparent;}
+
-
.left-menu a:hover{background-color:transparent; margin:5px 0px 0px 0px; padding:0; background: transparent;}
+
-
.left-menu li a:hover{background-color:transparent; margin:0; padding:0; background: transparent;}
+
-
.right-menu ul li a {background-color:transparent; background: transparent;}
+
-
.printfooter {display:none; background-color:transparent;}
+
-
a:hover {text-decoration: none;}
+
-
#footer-box {border:none; background-color:transparent;}
+
-
#catlinks {display:none; background-color:transparent;}
+
-
.firstHeading {display:none; background-color:transparent;}
+
-
#content {width: 100%; border:none; background-color:transparent;}
+
-
h1, h2, h3, h4, h5, h6 {
+
-
font-size: 100%;
+
-
padding-top: 0;
+
-
padding-bottom: 0;
+
-
border-bottom: 0px;
+
-
}
+
-
 
+
-
html {margin: 0;}
+
-
ul {
+
-
list-style-type: none;
+
-
list-style-image: none;
+
-
}
+
-
 
+
-
</style>
+
-
 
+
-
<link rel="stylesheet" href="http://cs.wellesley.edu/~hcilab/igem2013/whci_app.css">
+
-
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
+
-
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_jquery.js"></script>
+
-
 
+
<body>
<body>
<nav class="top-bar">
<nav class="top-bar">
Line 80: Line 35:
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>
-
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree & zMol</a></li>
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
Line 97: Line 52:
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li>
</ul>
</ul>
 +
<!-- Right Nav Section -->
<!-- Right Nav Section -->
<ul class="right">
<ul class="right">
<li class="divider hide-for-small"></li>
<li class="divider hide-for-small"></li>
-
<li class="has-dropdown"><a href="#">Main Item 4</a>
+
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a>
</li>
</li>
<li class="divider"></li>
<li class="divider"></li>
Line 124: Line 80:
<!--Start content-->
<!--Start content-->
-
<h1>zMol_zTree</h1>
+
<h3>zTree</h3>
<br>   
<br>   
-
<h1>Overview</h1>
+
<h4>Overview</h4>
<p>
<p>
zMol is a 3D molecule builder designed for the zSpace, a holographic computing machine. The project was started by a team of Olin students and carried on for 6 weeks over the course of the summer by Wellesley’s HCI lab. Students began the summer with the goal of adding new features, such as a unique representation of the periodic table of elements, and improved bonding in the molecule builder, in order to make a fun and engaging learning tool for chemistry students.  
zMol is a 3D molecule builder designed for the zSpace, a holographic computing machine. The project was started by a team of Olin students and carried on for 6 weeks over the course of the summer by Wellesley’s HCI lab. Students began the summer with the goal of adding new features, such as a unique representation of the periodic table of elements, and improved bonding in the molecule builder, in order to make a fun and engaging learning tool for chemistry students.  
Line 133: Line 89:
This summer students started zTree in an attempt to represent hierarchical data in an intuitive and interactive way. One way in which this tree-like structure is useful is as an alternative to the web version of the Registry of Standard Biological Parts. The goal of the project was to make the data easier to navigate than the web page and to make the program modular so it can be used for a wider variety of data sets.  
This summer students started zTree in an attempt to represent hierarchical data in an intuitive and interactive way. One way in which this tree-like structure is useful is as an alternative to the web version of the Registry of Standard Biological Parts. The goal of the project was to make the data easier to navigate than the web page and to make the program modular so it can be used for a wider variety of data sets.  
</p>
</p>
-
<img src = "https://2013.igem.org/File:Wellesley_zTreeUsers.JPG">
 
-
<h1>Results</h1>
+
<table width="800" align="center">
 +
 
 +
<tr align="center">
 +
<td align="center"><img src="https://static.igem.org/mediawiki/2013/5/5d/Wellesley_zTree4.jpg" width="300" height="300" margin="100" align="center"><br><br><div style="width: 300px"><figcaption width="300">Users can search by part type, such as promoter or terminator. </figcaption></div></td>
 +
 
 +
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/6a/Wellesley_zTree3.jpg" width="300" height="300" margin="100" align="center"><br><div style="width: 300px"><figcaption width="300">A second carousel appears beneath the first one to choose a more specific part type.</figcaption></div></td>
 +
</tr>
 +
 
 +
<tr align="center">
 +
<td align="center"><img src="https://static.igem.org/mediawiki/2013/1/1e/Wellesley_zTree2.jpg" width="300" height="300" margin="100" align="center"><br><div style="width: 300px"><figcaption width="300">Choosing yet a more specific part type.</figcaption></div></td>
 +
 
 +
<td align="center"><img src="https://static.igem.org/mediawiki/2013/1/17/Wellesley_zTree1.jpg" width="300" height="300" margin="100" align="center"><br><div style="width: 300px"><figcaption width="300">Users can then choose a specific part to view more information about it. They can also view the hierarchy of the part.</figcaption></div></td>
 +
</tr>
 +
 
 +
</table>
 +
 
 +
 
 +
<!-- <table class="image">
 +
<tr><td><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/synbiosearch/searchResultAuthors.png" height="250px" width="380px"></td></tr>
 +
<caption align="bottom">
 +
If you were to caption an image... this is how
 +
</caption>
 +
</table>  -->
 +
 
 +
<h4>Results</h4>
<p>
<p>
We successfully allowed for double and ring bonding in zMol, and created a 3D representation of the periodic table through which it is possible to navigate, search, and zoom through elements. We also modified the atomic skins to include elemental labels. We imported data about each element so when you hover over it, more properties are displayed.
We successfully allowed for double and ring bonding in zMol, and created a 3D representation of the periodic table through which it is possible to navigate, search, and zoom through elements. We also modified the atomic skins to include elemental labels. We imported data about each element so when you hover over it, more properties are displayed.
-
<br>
 
-
zTree is nearly fully functional when displaying the standard registry of parts - unfortunately, the site was modified towards the end of our work on zTree, so a future team will need to adjust the HTML parsing sections of our code. But, the data sheets display properly, and navigation between levels works properly. Users can export the parts they have selected to a plain text file which can be imported into other programs, such as Eugenie, for further use. The program also features an action log for user testing. A search feature in the upper right hand corner of the screen allows a user to search for a particular part they might be looking for and have its data sheet displayed.
 
 +
<p>zTree is nearly fully functional when displaying the standard registry of parts - unfortunately, the site was modified towards the end of our work on zTree, so a future team will need to adjust the HTML parsing sections of our code. But, the data sheets display properly, and navigation between levels works properly. Users can export the parts they have selected to a plain text file which can be imported into other programs, such as Eugenie, for further use. The program also features an action log for user testing. A search feature in the upper right hand corner of the screen allows a user to search for a particular part they might be looking for and have its data sheet displayed.
</p>
</p>
-
<h1>Demo</h1>
+
<h4>Demo</h4>
-
<iframe width="640" height="315" src="//www.youtube.com/embed/A1_XVnz1VCg?rel=0" frameborder="0" allowfullscreen></iframe>
+
<iframe width="640" height="360" align="center" src="//www.youtube.com/embed/wJKu_SNwV6E" frameborder="0" allowfullscreen></iframe>
<br><br>
<br><br>
-
<h1>Future Work</h1>
+
<h4>Future Work</h4>
<p> Most features desired for zTree were completely over the course of the summer. As the registry changed, the data sheet code needs to be updated. In the future we need to make the data sheets compliant with the registry API so that the program works with any future changes. Another iGEM team seems to be working on search function which we would like to integrate into the program. Some research has gone into which type of backgrounds for the zSpace eliminate ghosting so the team would also like to try to use one of those backgrounds to improve the visualization of their program. Using the pen to navigate and spin the carousels would be a good feature for the future as well. </p>
<p> Most features desired for zTree were completely over the course of the summer. As the registry changed, the data sheet code needs to be updated. In the future we need to make the data sheets compliant with the registry API so that the program works with any future changes. Another iGEM team seems to be working on search function which we would like to integrate into the program. Some research has gone into which type of backgrounds for the zSpace eliminate ghosting so the team would also like to try to use one of those backgrounds to improve the visualization of their program. Using the pen to navigate and spin the carousels would be a good feature for the future as well. </p>
</div>
</div>
-
 
+
<div class="row">
 +
<hr>
 +
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png">
 +
</div>
 +
</div>
 +
</div>
<!--End content-->
<!--End content-->
-
<html>
+
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.abide.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.alerts.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.clearing.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.cookie.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.dropdown.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.forms.js"></script>
+
<script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.interchange.js"></script>
+
$(document).foundation();
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.joyride.js"></script>
+
</script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.magellan.js"></script>
+
 
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.orbit.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.placeholder.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.reveal.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.section.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.tooltips.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.topbar.js"></script>
+
-
  <script>
+
-
    $(document).foundation();
+
-
  </script>
+
</html>
</html>

Latest revision as of 20:59, 23 September 2013

Wellesley HCI iGEM Team: Welcome

Wellesley HCI iGEM 2013

zTree


Overview

zMol is a 3D molecule builder designed for the zSpace, a holographic computing machine. The project was started by a team of Olin students and carried on for 6 weeks over the course of the summer by Wellesley’s HCI lab. Students began the summer with the goal of adding new features, such as a unique representation of the periodic table of elements, and improved bonding in the molecule builder, in order to make a fun and engaging learning tool for chemistry students.
This summer students started zTree in an attempt to represent hierarchical data in an intuitive and interactive way. One way in which this tree-like structure is useful is as an alternative to the web version of the Registry of Standard Biological Parts. The goal of the project was to make the data easier to navigate than the web page and to make the program modular so it can be used for a wider variety of data sets.



Users can search by part type, such as promoter or terminator.

A second carousel appears beneath the first one to choose a more specific part type.

Choosing yet a more specific part type.
Users can then choose a specific part to view more information about it. They can also view the hierarchy of the part.

Results

We successfully allowed for double and ring bonding in zMol, and created a 3D representation of the periodic table through which it is possible to navigate, search, and zoom through elements. We also modified the atomic skins to include elemental labels. We imported data about each element so when you hover over it, more properties are displayed.

zTree is nearly fully functional when displaying the standard registry of parts - unfortunately, the site was modified towards the end of our work on zTree, so a future team will need to adjust the HTML parsing sections of our code. But, the data sheets display properly, and navigation between levels works properly. Users can export the parts they have selected to a plain text file which can be imported into other programs, such as Eugenie, for further use. The program also features an action log for user testing. A search feature in the upper right hand corner of the screen allows a user to search for a particular part they might be looking for and have its data sheet displayed.

Demo



Future Work

Most features desired for zTree were completely over the course of the summer. As the registry changed, the data sheet code needs to be updated. In the future we need to make the data sheets compliant with the registry API so that the program works with any future changes. Another iGEM team seems to be working on search function which we would like to integrate into the program. Some research has gone into which type of backgrounds for the zSpace eliminate ghosting so the team would also like to try to use one of those backgrounds to improve the visualization of their program. Using the pen to navigate and spin the carousels would be a good feature for the future as well.

Retrieved from "http://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree"