Template:Team:UC Davis/MutantWidget

From 2011.igem.org

(Difference between revisions)
 
(8 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 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 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 770: 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 1,066: 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"