Template:Team:UC Davis/MutantWidget

From 2011.igem.org

(Difference between revisions)
 
(13 intermediate revisions not shown)
Line 5: Line 5:
//Painstakingly coded by Keegan Owsley. Feel free to use it, but it might burn your house down.
//Painstakingly coded by Keegan Owsley. Feel free to use it, but it might burn your house down.
 +
function rerender()
 +
{
 +
 +
            camera.position.x = 250*Math.cos(theta);
 +
    camera.position.y = 250*Math.sin(theta);
 +
            if(phi < Math.PI/2)
 +
            {
 +
                phi = Math.PI/2;
 +
            }
 +
            if(phi > 3*Math.PI/4)
 +
            {
 +
                phi = 3*Math.PI/4;
 +
            }
 +
            camera.position.z = -250*Math.cos(phi);
 +
zaxislabel.rotation.y = Math.PI/2 - Math.atan2((zaxislabel.position.y-camera.position.y),(zaxislabel.position.x-camera.position.x));
 +
for(var i =0; i < yticklabels.length;i++)
 +
{
 +
yticklabels[i].rotation.y = -Math.PI/2 + Math.atan2((yticklabels[i].position.y-camera.position.y),(yticklabels[i].position.x-camera.position.x));
 +
}
 +
for(var i =0; i < xticklabels.length;i++)
 +
{
 +
xticklabels[i].rotation.y = -Math.PI/2 + Math.atan2((xticklabels[i].position.y-camera.position.y),(xticklabels[i].position.x-camera.position.x));
 +
}
 +
 +
 +
//renderer.clear();
 +
            renderer.render(scene, camera);
 +
}
function update3DPlotMeshes()
function update3DPlotMeshes()
Line 242: Line 270:
         have_3d_data = true;
         have_3d_data = true;
         }
         }
-
        $('#mw_optionstable').append("<tr><td>Sequence</td></tr>");
+
  //    $('#mw_optionstable').append("<tr><td>Sequence</td></tr>");
     $('#mw_optionstable td').css({opacity:0.3});
     $('#mw_optionstable td').css({opacity:0.3});
Line 248: Line 276:
     $('#mw_grapharea').append('<div id="mw_plot"/>');
     $('#mw_grapharea').append('<div id="mw_plot"/>');
     $('#mw_grapharea').append('<div id="mw_3dplot"/>');
     $('#mw_grapharea').append('<div id="mw_3dplot"/>');
 +
    $('#mw_3dplot').append("<table id='navbuttons3d' style='position:absolute;bottom:0px;left:350px;'><tr><td>&lt;</td><td>&gt;</td></tr></table>")
 +
    $('#mw_3dplot #navbuttons3d td').css({width:'15px'})
 +
    $('#mw_3dplot #navbuttons3d td').eq(0).mousedown(function(){theta -= Math.PI/8;rerender();})
 +
    $('#mw_3dplot #navbuttons3d td').eq(1).mousedown(function(){theta += Math.PI/8;rerender();})
         $('#mw_3dplot').toggle();
         $('#mw_3dplot').toggle();
     $('#mutantwidget').parent().append('<div id="mw_sequencearea"/>');
     $('#mutantwidget').parent().append('<div id="mw_sequencearea"/>');
     $('#mutantwidget span').hide();
     $('#mutantwidget span').hide();
     $('#mutantwidget .sequence').appendTo($('#mw_sequencearea'));
     $('#mutantwidget .sequence').appendTo($('#mw_sequencearea'));
-
         $('#mutantwidget').append("<div class='yaxis'>Relative Strength</div>");
+
         $('#mutantwidget').append("<div class='yaxis'>Relative Fluorescence</div>");
 +
        $('#mutantwidget').append("<div class='xaxis'>Arabinose (wt%)</div>");
          
          
     $('#mw_selectmenu td').mouseover(function()
     $('#mw_selectmenu td').mouseover(function()
Line 296: Line 329:
                     $('#mw_3dplot').hide();
                     $('#mw_3dplot').hide();
                     $('#mw_plot').show();
                     $('#mw_plot').show();
 +
                    $('.yaxis').show();
 +
                    $('.xaxis').show();
widget_mode = "2D";
widget_mode = "2D";
             dataseries = [];
             dataseries = [];
Line 318: Line 353:
             {  
             {  
                 xaxis: {max:.014, min:0},
                 xaxis: {max:.014, min:0},
-
                 yaxis: {max: 1.0, min:0},
+
                 yaxis: {max: 1.2, min:0},
                 grid: {  },
                 grid: {  },
                                 points: {show: true},  
                                 points: {show: true},  
Line 328: Line 363:
                     $('#mw_plot').hide();
                     $('#mw_plot').hide();
                     $('#mw_3dplot').show();
                     $('#mw_3dplot').show();
 +
                    $('.yaxis').hide();
 +
                    $('.xaxis').hide();
widget_mode = "3D";
widget_mode = "3D";
update3DPlotMeshes();
update3DPlotMeshes();
Line 341: Line 378:
             {
             {
                 $(this).removeClass("selected");
                 $(this).removeClass("selected");
 +
                $(this).mouseout();
                 $('#mw_sequencearea').children().eq($(this).parent().index()).hide();
                 $('#mw_sequencearea').children().eq($(this).parent().index()).hide();
             } else
             } else
Line 372: Line 410:
             {  
             {  
                 xaxis: {max:.014, min:0},
                 xaxis: {max:.014, min:0},
-
                 yaxis: {max: 1.0, min:0},
+
                 yaxis: {max: 1.2, min:0},
                 grid: { },
                 grid: { },
                                 points: {show: true},  
                                 points: {show: true},  
Line 418: Line 456:
             {
             {
                 thisdatax[i] = parseFloat(thisdatax[i]);
                 thisdatax[i] = parseFloat(thisdatax[i]);
-
                 data[index].data.push([thisdatax[i], thisdatay[i]])
+
                 data[index].data.push([thisdatax[i], thisdatay[i]]);
-
errbars_2d[index].data.push([thisdatax[i], thisdatay[i]+thisdataerr[i]*2])
+
-
errbars_2d[index].data.push([thisdatax[i], thisdatay[i]-thisdataerr[i]*2])
+
-
errbars_2d[index].data.push([null, null])
+
             }
             }
 +
    var errbarwidth = Math.max.apply(null,thisdatax)/150;
 +
            for(i=0; i < thisdatax.length; ++i)
 +
            {
 +
errbars_2d[index].data.push([thisdatax[i], thisdatay[i]+thisdataerr[i]]);
 +
errbars_2d[index].data.push([thisdatax[i], thisdatay[i]-thisdataerr[i]]);
 +
errbars_2d[index].data.push([null, null]);
 +
errbars_2d[index].data.push([thisdatax[i]-errbarwidth, thisdatay[i]+thisdataerr[i]]);
 +
errbars_2d[index].data.push([thisdatax[i]+errbarwidth, thisdatay[i]+thisdataerr[i]]);
 +
errbars_2d[index].data.push([null, null]);
 +
errbars_2d[index].data.push([thisdatax[i]-errbarwidth, thisdatay[i]-thisdataerr[i]]);
 +
errbars_2d[index].data.push([thisdatax[i]+errbarwidth, thisdatay[i]-thisdataerr[i]]);
 +
errbars_2d[index].data.push([null, null]);
 +
    }
              
              
         }
         }
Line 429: Line 477:
             {  
             {  
                 xaxis: {max:.014, min:0},
                 xaxis: {max:.014, min:0},
-
                 yaxis: {max: 1.0, min:0},
+
                 yaxis: {max: 1.2, min:0},
                 grid: {  },
                 grid: {  },
             });
             });
Line 535: Line 583:
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
-
thisdataz[i]/axisdimensions[5]*100-thisdataerr[i]/axisdimensions[5]*100*2
+
thisdataz[i]/axisdimensions[5]*100-thisdataerr[i]/axisdimensions[5]*100
)));
)));
errbargeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
errbargeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
-
thisdataz[i]/axisdimensions[5]*100+thisdataerr[i]/axisdimensions[5]*100*2
+
thisdataz[i]/axisdimensions[5]*100+thisdataerr[i]/axisdimensions[5]*100
)));
)));
var errbar = new THREE.Line(errbargeom, lineMat);
var errbar = new THREE.Line(errbargeom, lineMat);
Line 760: Line 808:
         {
         {
theta += (lastMouseX - event.pageX)/70
theta += (lastMouseX - event.pageX)/70
-
phi -= (lastMouseY - event.pageY)/70
+
phi -= (lastMouseY - event.pageY)/70;
-
            camera.position.x = 250*Math.cos(theta);
+
-
    camera.position.y = 250*Math.sin(theta);
+
-
            if(phi < Math.PI/2)
+
-
            {
+
-
                phi = Math.PI/2;
+
-
            }
+
-
            if(phi > 3*Math.PI/4)
+
-
            {
+
-
                phi = 3*Math.PI/4;
+
-
            }
+
-
            camera.position.z = -250*Math.cos(phi);
+
             lastMouseX = event.pageX;
             lastMouseX = event.pageX;
             lastMouseY = event.pageY;
             lastMouseY = event.pageY;
-
zaxislabel.rotation.y = Math.PI/2 - Math.atan2((zaxislabel.position.y-camera.position.y),(zaxislabel.position.x-camera.position.x));
+
rerender();
-
for(var i =0; i < yticklabels.length;i++)
+
-
{
+
-
yticklabels[i].rotation.y = -Math.PI/2 + Math.atan2((yticklabels[i].position.y-camera.position.y),(yticklabels[i].position.x-camera.position.x));
+
-
}
+
-
for(var i =0; i < xticklabels.length;i++)
+
-
{
+
-
xticklabels[i].rotation.y = -Math.PI/2 + Math.atan2((xticklabels[i].position.y-camera.position.y),(xticklabels[i].position.x-camera.position.x));
+
-
}
+
-
 
+
-
 
+
-
//renderer.clear();
+
-
            renderer.render(scene, camera);
+
         });
         });
     });
     });
Line 928: Line 953:
    });
    });
    xm.map.needsUpdate = true;
    xm.map.needsUpdate = true;
-
      var xtick = new THREE.Mesh(new THREE.PlaneGeometry(13, 13, 2, 2), xm);
+
      var xtick = new THREE.Mesh(new THREE.PlaneGeometry(13/ASPECT, 13, 2, 2), xm);
    xtick.position.y = i/5*100-50;
    xtick.position.y = i/5*100-50;
    xtick.position.x = -50;
    xtick.position.x = -50;
Line 1,056: Line 1,081:
     -ms-transform: rotate(-90deg);
     -ms-transform: rotate(-90deg);
top:179px;
top:179px;
-
left:-33px;
+
left:-40px;
 +
position:absolute;
 +
}
 +
 
 +
.xaxis {
 +
bottom:15px;
position:absolute;
position:absolute;
 +
left:320px;
}
}
</style>
</style>
</html>
</html>

Latest revision as of 03:39, 29 September 2011

Retrieved from "http://2011.igem.org/Template:Team:UC_Davis/MutantWidget"