Template:Team:UC Davis/MutantWidget

From 2011.igem.org

(Difference between revisions)
 
(186 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<script src='https://2011.igem.org/Template:Team:UC_Davis/jquery.flot.min.js?action=raw'></script>
<script src='https://2011.igem.org/Template:Team:UC_Davis/jquery.flot.min.js?action=raw'></script>
 +
<script src='https://2011.igem.org/Template:Team:UC_Davis/Three.js?action=raw'></script>
<script>
<script>
-
selectedelements = [null, null];
+
//Painstakingly coded by Keegan Owsley. Feel free to use it, but it might burn your house down.
-
curelement = 0;
+
 
 +
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()
 +
{
 +
    var datameshes = [];
 +
    var datalines = [];
 +
    var errbars = [];
 +
    $('#mw_selectmenu td').each(
 +
        function(index)
 +
        {
 +
            if($(this).hasClass("selected"))
 +
            {
 +
                if(plot_mesh[index])
 +
                {
 +
                    datameshes.push(plot_mesh[index]);
 +
                    datalines.push(meshchildren[index]);
 +
                    errbars.push(errorbars_3d[index]);
 +
                }
 +
            }
 +
        }
 +
    );
 +
    for(var i = 0;i < plot_mesh.length; i++)
 +
    {
 +
        plot_obj.removeChild(plot_mesh[i]);
 +
        plot_obj.removeChild(errorbars_3d[i]);
 +
        plot_obj.removeChild(meshchildren[i]);
 +
    }
 +
    for(var i=0;i < datameshes.length; i++)
 +
    {
 +
        plot_obj.addChild(datameshes[i]);
 +
        plot_obj.addChild(errbars[i]);
 +
        plot_obj.addChild(datalines[i]);
 +
    }
 +
 
 +
    renderer.render(scene, camera);
 +
}
 +
 
 +
// RGB <-> HSL conversions based on equations from wikipedia.
 +
// If they're wrong, don't blame me!
 +
function RGB2HSL(r,g,b)
 +
{
 +
    var alpha = 1/2*(2*r-g-b);
 +
    var beta = Math.sqrt(3)/2*(g-b);
 +
    var C = Math.sqrt(alpha^2 + beta^2);
 +
    var h = Math.atan2(beta, alpha);
 +
    if(h < 0)
 +
    {
 +
        h += 2*Math.PI;
 +
    }
 +
    var l = 0.3*r + 0.59*g + 0.11*b;
 +
    if(C > 0)
 +
    {
 +
        s = C/(1 - Math.abs(2*l-1));
 +
    } else
 +
    {
 +
        s = 0;
 +
    }
 +
   
 +
    return {h:h,s:s,l:l};
 +
}
 +
function HSL2RGB(h,s,l)
 +
{
 +
   
 +
    var C = (1-Math.abs(2*l-1))*s;
 +
    var Hprime = h / Math.PI*3;
 +
    var X = C*(1 - Math.abs(Hprime%2-1));
 +
    if(h < 0) {
 +
    var r = g = b = 0;
 +
    } else if(h < 1) {
 +
    var r = C, g = X, b = 0;
 +
    } else if(h < 2) {
 +
    var r = X, g = C, b = 0;
 +
    } else if(h < 3) {
 +
    var r = 0, g = C, b = X;
 +
    } else if(h < 4) {
 +
    var r = 0, g = X, b = C;
 +
    } else if(h < 5) {
 +
    var r = X, g = 0, b = C;
 +
    } else if(h < 6) {
 +
    var r = C, g = 0, b = X;
 +
    }
 +
    m = l - C/2;
 +
    r = r + m;
 +
    g = g + m;
 +
    b = b + m;
 +
    return {r:r, g:g, b:b}
 +
}
 +
 
 +
//Bilinear interpolation
 +
// y1-*z0    -    *z1
 +
//          fr1
 +
//          +x,y
 +
//          fr2
 +
// y2-*z2    -    *z3
 +
//    |            |
 +
//    x1          x2
 +
function interp2(x1, y1, x2, y2, z0, z1, z2, z3, x, y)
 +
{
 +
    fr1 = (x-x1)/(x2-x1)*z1 + (x2-x)/(x2-x1)*z0;
 +
    fr2 = (x-x1)/(x2-x1)*z3 + (x2-x)/(x2-x1)*z2;
 +
if(!fr1 || !fr2)
 +
{
 +
alert("MAJOR INTERPOLATION PROBLEMS!\nx1:"+x1+"\ny1:"+y1+"\nx2:"+x2+"\ny2:"+y2+"\nzs:"+z0+","+z1+","+z2+","+z3+"\n("+x+","+y+")");
 +
}
 +
    return ((y-y1)/(y2-y1)*fr2 + (y2-y)/(y2-y1)*fr1);
 +
}
 +
 
 +
function colorRamp(value, colormap)
 +
{
 +
    if(value > 1)
 +
    {
 +
        value = 1;
 +
    }
 +
    if(value < 0)
 +
    {
 +
        value = 0;
 +
    }
 +
    var maxval = colormap.length-1;
 +
    var newval = value*maxval;
 +
    var highval = Math.ceil(newval);
 +
    var lowval = highval - 1;
 +
    if(highval == 0)
 +
    {
 +
        lowval = 0;
 +
        highval = 1;
 +
    }
 +
 
 +
    lowcolor = RGB2HSL(colormap[lowval][0], colormap[lowval][1], colormap[lowval][2]);
 +
    highcolor = RGB2HSL(colormap[highval][0], colormap[highval][1], colormap[highval][2]);
 +
    var h = lowcolor.h*(highval - newval) + highcolor.h*(newval - lowval);
 +
    var s = lowcolor.s*(highval - newval) + highcolor.s*(newval - lowval);
 +
    var v = lowcolor.l*(highval - newval) + highcolor.l*(newval - lowval);
 +
//s = lowcolor.s;
 +
//v = lowcolor.l;
 +
 
 +
    newcolor = HSL2RGB(h,s,v);
 +
 
 +
    newcolor.r = colormap[lowval][0]*(highval - newval) + colormap[highval][0]*(newval - lowval);
 +
    newcolor.g = colormap[lowval][1]*(highval - newval) + colormap[highval][1]*(newval - lowval);
 +
    newcolor.b = colormap[lowval][2]*(highval - newval) + colormap[highval][2]*(newval - lowval);
 +
 
 +
    return [newcolor.r, newcolor.g, newcolor.b];
 +
}
 +
 
 +
cool_color_ramp = [[0.00000,  0.00000,  0.50000],
 +
  [0.00000,  0.00000,  0.56349],
 +
  [0.00000,  0.00000,  0.62698],
 +
  [0.00000,  0.00000,  0.69048],
 +
  [0.00000,  0.00000,  0.75397],
 +
  [0.00000,  0.00000,  0.81746],
 +
  [0.00000,  0.00000,  0.88095],
 +
  [0.00000,  0.00000,  0.94444],
 +
  [0.00000,  0.00794,  1.00000],
 +
  [0.00000,  0.07143,  1.00000],
 +
  [0.00000,  0.13492,  1.00000],
 +
  [0.00000,  0.19841,  1.00000],
 +
  [0.00000,  0.26190,  1.00000],
 +
  [0.00000,  0.32540,  1.00000],
 +
  [0.00000,  0.38889,  1.00000],
 +
  [0.00000,  0.45238,  1.00000],
 +
  [0.00000,  0.51587,  1.00000],
 +
  [0.00000,  0.57937,  1.00000],
 +
  [0.00000,  0.64286,  1.00000],
 +
  [0.00000,  0.70635,  1.00000],
 +
  [0.00000,  0.76984,  1.00000],
 +
  [0.00000,  0.83333,  1.00000],
 +
  [0.00000,  0.89683,  1.00000],
 +
  [0.00000,  0.96032,  1.00000],
 +
  [0.02381,  1.00000,  0.97619],
 +
  [0.08730,  1.00000,  0.91270],
 +
  [0.15079,  1.00000,  0.84921],
 +
  [0.21429,  1.00000,  0.78571],
 +
  [0.27778,  1.00000,  0.72222],
 +
  [0.34127,  1.00000,  0.65873],
 +
  [0.40476,  1.00000,  0.59524],
 +
  [0.46825,  1.00000,  0.53175],
 +
  [0.53175,  1.00000,  0.46825],
 +
  [0.59524,  1.00000,  0.40476],
 +
  [0.65873,  1.00000,  0.34127],
 +
  [0.72222,  1.00000,  0.27778],
 +
  [0.78571,  1.00000,  0.21429],
 +
  [0.84921,  1.00000,  0.15079],
 +
  [0.91270,  1.00000,  0.08730],
 +
  [0.97619,  1.00000,  0.02381],
 +
  [1.00000,  0.96032,  0.00000],
 +
  [1.00000,  0.89683,  0.00000],
 +
  [1.00000,  0.83333,  0.00000],
 +
  [1.00000,  0.76984,  0.00000],
 +
  [1.00000,  0.70635,  0.00000],
 +
  [1.00000,  0.64286,  0.00000],
 +
  [1.00000,  0.57937,  0.00000],
 +
  [1.00000,  0.51587,  0.00000],
 +
  [1.00000,  0.45238,  0.00000],
 +
  [1.00000,  0.38889,  0.00000],
 +
  [1.00000,  0.32540,  0.00000],
 +
  [1.00000,  0.26190,  0.00000],
 +
  [1.00000,  0.19841,  0.00000],
 +
  [1.00000,  0.13492,  0.00000],
 +
  [1.00000,  0.07143,  0.00000],
 +
  [1.00000,  0.00794,  0.00000],
 +
  [0.94444,  0.00000,  0.00000],
 +
  [0.88095,  0.00000,  0.00000],
 +
  [0.81746,  0.00000,  0.00000],
 +
  [0.75397,  0.00000,  0.00000],
 +
  [0.69048,  0.00000,  0.00000],
 +
  [0.62698,  0.00000,  0.00000],
 +
  [0.56349,  0.00000,  0.00000],
 +
  [0.50000,  0.00000,  0.00000]];
 +
 
 +
//cool_color_ramp = [[0,0,0], [0,0,1], [1,1,1]];
 +
 
 +
var WIDTH = 650;
 +
var HEIGHT = 350;
 +
var VIEW_ANGLE = 45,
 +
    ASPECT = WIDTH/HEIGHT,
 +
    NEAR = 0.1,
 +
    FAR = 10000;
 +
 
 +
mutantcolors = ["white", "#ff6666", "orange", "yellow", "#66ff66", "#66ffff", "#ddaaff", "pink"];
 +
mutantcolors_hex = [0xffffff, 0xff6666, 0xffa500, 0xffff00, 0x66ff66, 0x66ffff, 0xddaaff, 0xffc0cb];
 +
selectedColor = "orange";
 +
widget_mode = "2D";
 +
have_3d_data = false;
$(document).ready(function(){
$(document).ready(function(){
-
     //Convert the ul to a table for some reason.
+
     $("#mutantwidget").append('<div id="mw_selectmenu"/>');
-
$("#mutantwidget").wrapInner("<table/>").wrapInner('<div id="mw_selectmenu"/>');
+
    $("#mutantwidget").append('<div id="mw_optionsmenu"><table id="mw_optionstable"></table></div>');
-
$('#mutantwidget h3').wrapInner('<td/>').children().unwrap().wrap('<tr/>');
+
 
-
$('#mutantwidget').prepend('<div id="mw_grapharea"/>');
+
 
-
$('#mutantwidget').append('<div id="mw_sequencearea"/>');
+
    $("#mw_selectmenu").append("<table id='seltable'/>");
-
$('#mutantwidget .sequence').hide().appendTo($('#mutantwidget #mw_sequencearea'));
+
    $('#mutantwidget h3').wrapInner('<td/>').children().unwrap().css({opacity:.3}).wrap('<tr/>');
-
$('#mw_selectmenu td').mouseover(function()
+
    $('#mutantwidget tr').appendTo($('#mutantwidget #seltable'));
-
{
+
 
-
if(!$(this).hasClass("selected"))
+
        $('#mw_optionstable').append("<tr><td onClick>2D Plot</td></tr>");
 +
        if($("#mutantwidget .zdata_3d").length > 0)
 +
        {
 +
            $('#mw_optionstable').append("<tr><td>3D Plot</td></tr>");
 +
        have_3d_data = true;
 +
        }
 +
  //    $('#mw_optionstable').append("<tr><td>Sequence</td></tr>");
 +
 
 +
    $('#mw_optionstable td').css({opacity:0.3});
 +
    $('#mutantwidget').prepend('<div id="mw_grapharea"/>');
 +
    $('#mw_grapharea').append('<div id="mw_plot"/>');
 +
    $('#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();
 +
    $('#mutantwidget').parent().append('<div id="mw_sequencearea"/>');
 +
    $('#mutantwidget span').hide();
 +
    $('#mutantwidget .sequence').appendTo($('#mw_sequencearea'));
 +
        $('#mutantwidget').append("<div class='yaxis'>Relative Fluorescence</div>");
 +
        $('#mutantwidget').append("<div class='xaxis'>Arabinose (wt%)</div>");
 +
       
 +
    $('#mw_selectmenu td').mouseover(function()
 +
    {
 +
        if(!$(this).hasClass("selected"))
 +
        {
 +
            $(this).dequeue().animate({"opacity":1, "color":mutantcolors[$(this).parent().index()]}, 500);
 +
        }
 +
    });
 +
    $('#mw_optionsmenu td').mouseover(function()
 +
    {
 +
        if(!$(this).hasClass("selected"))
 +
        {
 +
            $(this).dequeue().animate({"opacity":1, "color":selectedColor}, 500);
 +
        }
 +
    });
 +
    $('#mw_optionsmenu td').mouseout(function()
 +
    {
 +
        if(!$(this).hasClass("selected"))
 +
        {
 +
            $(this).dequeue().animate({"opacity":.3, color:"rgb(225, 225, 225)"}, 500);
 +
        }
 +
 
 +
    });
 +
    $('#mw_selectmenu td').mouseout(function()
 +
    {
 +
        if(!$(this).hasClass("selected"))
 +
        {
 +
            $(this).dequeue().animate({"opacity":.3, color:"rgb(225, 225, 225)"}, 500);
 +
        }
 +
 
 +
    });
 +
    $('#mw_optionsmenu td').click(
 +
        function() {
 +
            menuitem = $(this).parent().index();
 +
            if(!$(this).hasClass("selected"))
 +
            {
 +
                $('#mw_optionsmenu td').removeClass("selected");
 +
                $(this).addClass("selected");
 +
                $('#mw_optionsmenu td').mouseout();
 +
                if($(this).text() == "2D Plot")
 +
                {
 +
                    $('#mw_3dplot').hide();
 +
                    $('#mw_plot').show();
 +
                    $('.yaxis').show();
 +
                    $('.xaxis').show();
 +
widget_mode = "2D";
 +
            dataseries = [];
 +
            $('#mw_selectmenu td').each(
 +
                function(index)
 +
                {
 +
                    if($(this).hasClass("selected"))
 +
                    {
 +
                        if(data[index])
 +
                        {
 +
                            dataseries.push(data[index]);
 +
                            dataseries.push(errbars_2d[index]);
 +
                        }
 +
                    }
 +
                }
 +
            );
 +
            if(!dataseries[0])
 +
            {
 +
                dataseries.push([[0,0]]);
 +
            }
 +
            $.plot($("#mw_plot"), dataseries,
 +
            {
 +
                xaxis: {max:.014, min:0},
 +
                yaxis: {max: 1.2, min:0},
 +
                grid: {  },
 +
                                points: {show: true},
 +
                                lines: {show: true}
 +
            });
 +
                }
 +
                if($(this).text() == "3D Plot")
 +
                {
 +
                    $('#mw_plot').hide();
 +
                    $('#mw_3dplot').show();
 +
                    $('.yaxis').hide();
 +
                    $('.xaxis').hide();
 +
widget_mode = "3D";
 +
update3DPlotMeshes();
 +
                }
 +
            }
 +
           
 +
        }
 +
    );
 +
        $('#mw_optionsmenu td').eq(0).mouseover().click();
 +
    $('#mw_selectmenu td').click(
 +
        function() {
 +
            if($(this).hasClass("selected"))
 +
            {
 +
                $(this).removeClass("selected");
 +
                $(this).mouseout();
 +
                $('#mw_sequencearea').children().eq($(this).parent().index()).hide();
 +
            } else
 +
            {
 +
                $(this).dequeue().css({opacity:1});
 +
                $(this).addClass("selected");
 +
                $('#mw_sequencearea').children().hide();
 +
    //          $('#mw_sequencearea').children().eq($(this).parent().index()).show();
 +
            }
 +
if(widget_mode == "2D")
 +
{
 +
            dataseries = [];
 +
            $('#mw_selectmenu td').each(
 +
                function(index)
 +
                {
 +
                    if($(this).hasClass("selected"))
 +
                    {
 +
                        if(data[index])
 +
                        {
 +
                            dataseries.push(data[index]);
 +
                            dataseries.push(errbars_2d[index]);
 +
                        }
 +
                    }
 +
                }
 +
            );
 +
            if(!dataseries[0])
 +
            {
 +
                dataseries.push([[0,0]]);
 +
            }
 +
            $.plot($("#mw_plot"), dataseries,
 +
            {
 +
                xaxis: {max:.014, min:0},
 +
                yaxis: {max: 1.2, min:0},
 +
                grid: { },
 +
                                points: {show: true},
 +
                                lines: {show: true}
 +
            });
 +
}else if(widget_mode == "3D")
 +
{
 +
    update3DPlotMeshes();
 +
}
 +
        }
 +
    );
 +
    //Split sequences
 +
    $('#mutantwidget .sequence').each(
 +
        function(index) {
 +
            var curloc = 0;
 +
            var curseq = $(this).text();
 +
            $(this).html('');
 +
            while(curloc < curseq.length)
 +
            {
 +
                oldloc = curloc;
 +
                $(this).append(curseq.substr(oldloc, 15)).append(" ");
 +
                curloc += 10;
 +
            }
 +
        }
 +
    );
 +
 
 +
    //Extract plotting data
 +
    data = [];
 +
    errbars_2d = [];
 +
    $('#mutantwidget .xdata').each(
 +
        function(index)
 +
        {
 +
            data.push({color:mutantcolors[index], data:[]});
 +
    errbars_2d.push({color:"#ff0000", data:[], points:{show:false}});
 +
            var thisdatax = $(this).text().split(',');
 +
            var thisdatay = $('#mutantwidget .ydata').eq(index).text().split(',');
 +
            var thisdataerr = $('#mutantwidget .stdevs').eq(index).text().split(',');
 +
            var i;
 +
            for(i=0; i < thisdatay.length; ++i)
 +
            {
 +
                thisdatay[i] = parseFloat(thisdatay[i]);
 +
thisdataerr[i] = parseFloat(thisdataerr[i]);
 +
            }
 +
            for(i=0; i < thisdatax.length; ++i)
 +
            {
 +
                thisdatax[i] = parseFloat(thisdatax[i]);
 +
                data[index].data.push([thisdatax[i], thisdatay[i]]);
 +
            }
 +
    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]);
 +
    }
 +
           
 +
        }
 +
    );
 +
            $.plot($("#mw_plot"), [[0,0]],
 +
            {
 +
                xaxis: {max:.014, min:0},
 +
                yaxis: {max: 1.2, min:0},
 +
                grid: {  },
 +
            });
 +
 
 +
});
 +
 
 +
sphereMaterial = new THREE.MeshBasicMaterial(
 +
    {
 +
        color:0xCC0000
 +
    }
 +
);
 +
plotMaterial = new THREE.MeshFaceMaterial(
 +
//  {
 +
//      color:0xCC0000,
 +
//      opacity:.4,
 +
//      vertexColors:true
 +
//  }
 +
);
 +
pointMaterial = new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: function(context)
 +
{
 +
        context.beginPath();
 +
    context.arc( 0, 0, .5, 0,  Math.PI * 2, true );
 +
    context.fill();
 +
} } );
 +
 
 +
axisMat = new THREE.LineBasicMaterial(
 +
    {
 +
        color:0xffffff,
 +
        opacity:1,
 +
        linewidth:1
 +
    }
 +
);
 +
axisdimensions = [0, 5, 0, 0.0140, 0, 1];
 +
var numxpoints = 30;
 +
var numypoints = 30;
 +
 
 +
var lastMouseX, lastMouseY;
 +
 
 +
var data_3d;
 +
isdragging = false;
 +
 
 +
 
 +
$(document).ready(function() {
 +
    data_3d = [];
 +
    errorbars_3d = [];
 +
particles = [];
 +
meshchildren = [];
 +
    //Parse datas!
 +
    $('.zdata_3d').each(
 +
        function(index)
 +
        {
 +
particles.push(new THREE.Geometry());
 +
            thisdataz = $(this).text().split(',');
 +
            thisdatax = $('.xdata_3d').eq(index).text().split(',');
 +
            thisdatay = $('.ydata_3d').eq(index).text().split(',');
 +
            thisdataerr = $('.stdevs_3d').eq(index).text().split(',');
 +
 
 +
 
 +
//numxpoints = thisdatax.length;
 +
//numypoints = thisdatay.length;
 +
meshchildren.push(new THREE.Object3D());
 +
errorbars_3d.push(new THREE.Object3D());
 +
            data_3d.push(new THREE.PlaneGeometry(100,100,numxpoints-1, numypoints-1));
 +
            var i;
 +
            for(i=0; i < thisdatax.length; ++i)
 +
            {
 +
                thisdatax[i] = parseFloat(thisdatax[i]);
 +
            }
 +
            for(i=0; i < thisdatay.length; ++i)
 +
            {
 +
                thisdatay[i] = parseFloat(thisdatay[i]);
 +
            }
 +
            for(i=0; i < thisdataz.length; ++i)
 +
            {
 +
                thisdataz[i] = parseFloat(thisdataz[i]);
 +
 
 +
/*
 +
var particle = new THREE.Vertex(
 +
            new THREE.Vector3(thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
 +
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
 +
thisdataz[i]/axisdimensions[5]*100)
 +
        );
 +
particles[index].vertices.push(particle);
 +
var newparticle = new THREE.Particle(pointMaterial)
 +
newparticle.position.x = particle.position.x;
 +
newparticle.position.y = particle.position.y;
 +
newparticle.position.z = particle.position.z;
 +
meshchildren[index].addChild(newparticle);
 +
*/
 +
 
 +
 +
            }
 +
var lineMat = new THREE.LineBasicMaterial(
 +
    {
 +
color:mutantcolors_hex[index],
 +
opacity:1,
 +
linewidth:2
 +
    }
 +
);
 +
for(i=0; i < thisdataerr.length; i++)
{
{
-
$(this).dequeue().animate({"opacity":1}, 500);
+
thisdataerr[i] = parseFloat(thisdataerr[i]);
 +
var errbargeom = new THREE.Geometry();
 +
errbargeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
 +
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
 +
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
 +
thisdataz[i]/axisdimensions[5]*100-thisdataerr[i]/axisdimensions[5]*100
 +
)));
 +
errbargeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
 +
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
 +
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
 +
thisdataz[i]/axisdimensions[5]*100+thisdataerr[i]/axisdimensions[5]*100
 +
)));
 +
var errbar = new THREE.Line(errbargeom, lineMat);
 +
errorbars_3d[index].addChild(errbar);
}
}
-
});
+
//Particles look like ass.
-
$('#mw_selectmenu td').mouseout(function()
+
//Use lines instead.
-
{
+
 
-
if(!$(this).hasClass("selected"))
+
for(i=0; i < thisdatax.length*(thisdatay.length-1); i++)
{
{
-
$(this).dequeue().animate({"opacity":.3}, 500);
 
-
}
 
-
});
+
var linegeom = new THREE.Geometry();
-
$.plot($("#mw_grapharea"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
+
linegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
-
$('#mutantwidget td').click(
+
thisdatax[i%thisdatax.length]/axisdimensions[1]*100,
-
function() {
+
thisdatay[Math.floor(i/thisdatax.length)]/axisdimensions[3]*100,
-
                        if($(this).hasClass("selected"))
+
thisdataz[i]/axisdimensions[5]*100
-
{
+
)));
-
$(this).removeClass("selected");
+
linegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
-
$('#mw_sequencearea').children().eq($(this).parent().index()).hide();
+
thisdatax[(i+thisdatax.length)%thisdatax.length]/axisdimensions[1]*100,
-
if(selectedelements[0] == $(this))
+
thisdatay[Math.floor((i+thisdatax.length)/thisdatax.length)]/axisdimensions[3]*100,
-
{
+
thisdataz[i+thisdatax.length]/axisdimensions[5]*100
-
curelement = 0;
+
)));
-
} else
+
meshchildren[index].addChild(new THREE.Line(linegeom, lineMat));
-
{
+
-
curelement = 1;
+
-
}
+
-
selectedelements[curelement] = null;
+
-
} else
+
-
{
+
-
if(selectedelements[curelement] != null)
+
-
{
+
-
                selectedelements[curelement].removeClass("selected");
+
-
selectedelements[curelement].children().eq($(this).parent().index()).hide();
+
-
}
+
-
$(this).dequeue().css({opacity:1});
+
-
selectedelements[curelement] = $(this);
+
-
$(this).addClass("selected");
+
-
$('#mw_sequencearea').children().eq($(this).parent().index()).show();
+
-
}
+
}
}
-
);
+
for(i=0; i < (thisdatax.length-1)*(thisdatay.length); i++)
-
//Split sequences
+
{
-
$('#mutantwidget .sequence').each(
+
//Particles look like ass.
-
function(index) {
+
//Use lines instead.
-
var curloc = 0;
+
var linegeom = new THREE.Geometry();
-
var curseq = $(this).text();
+
linegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
-
$(this).html('');
+
thisdatax[i%(thisdatax.length-1)]/axisdimensions[1]*100,
-
while(curloc < curseq.length)
+
thisdatay[Math.floor(i/(thisdatax.length-1))]/axisdimensions[3]*100,
-
{
+
thisdataz[Math.floor(i/(thisdatax.length-1))+i]/axisdimensions[5]*100
-
oldloc = curloc;
+
)));
-
$(this).append(curseq.substr(oldloc, 15)).append(" ");
+
linegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(
-
curloc += 10;
+
thisdatax[i%(thisdatax.length-1)+1]/axisdimensions[1]*100,
-
}
+
thisdatay[Math.floor(i/(thisdatax.length-1))]/axisdimensions[3]*100,
 +
thisdataz[Math.floor(i/(thisdatax.length-1))+i+1]/axisdimensions[5]*100
 +
)));
 +
meshchildren[index].addChild(new THREE.Line(linegeom, lineMat));
}
}
-
);
+
           
 +
            for(i=0; i < numxpoints; ++i)
 +
            {
 +
                for(var j=0; j < numypoints; ++j)
 +
                {
 +
                    var thisx = thisdatax[thisdatax.length-1]*i/(numxpoints-1);
 +
                    var thisy = thisdatay[thisdatay.length-1]*j/(numypoints-1);
 +
                    data_3d[index].vertices[j*numxpoints+i].position.x = thisx/axisdimensions[1]*100;
 +
                    data_3d[index].vertices[j*numxpoints+i].position.y = thisy/axisdimensions[3]*100;
 +
                    //Find flanking x,y values
 +
                    var kx = ky = 0;
 +
                    while(thisx >= thisdatax[kx]) {
 +
                        kx=kx+1;
 +
                    }
 +
                    while(thisy >= thisdatay[ky]) {
 +
                        ky=ky+1;
 +
                    }
 +
if(kx > thisdatax.length-1)
 +
{
 +
kx = thisdatax.length-1;
 +
}
 +
if(ky > thisdatay.length-1)
 +
{
 +
ky = thisdatay.length-1;
 +
}
 +
                    kx--;
 +
                    ky--;
 +
 
 +
kx = parseInt(kx);
 +
ky = parseInt(ky);
 +
var tli = kx+ky*thisdatax.length;
 +
var tri = kx+ky*thisdatax.length+1;
 +
var bli = kx+(ky+1)*thisdatax.length;
 +
var bri = kx+1+(ky+1)*thisdatax.length;
 +
if(!thisdataz[bli] || !thisdataz[tli] || !thisdataz[tri] || !thisdataz[bri])
 +
{
 +
alert("Porblem!\nkx:" + kx + "\nky:" + ky + "\nkx is a "+typeof(kx) + "\nky is a" +typeof(ky) + "\nset:" + index);
 +
}
 +
                    thisz = interp2(thisdatax[kx],
 +
                            thisdatay[ky],
 +
                            thisdatax[kx+1],
 +
                            thisdatay[ky+1],
 +
                            thisdataz[tli],
 +
                            thisdataz[tri],
 +
                            thisdataz[bli],
 +
                            thisdataz[bri], thisx, thisy)
 +
                    data_3d[index].vertices[j*numxpoints+i].position.z = thisz/axisdimensions[5]*100;
 +
                }
 +
            }
 +
            data_3d[index].computeCentroids();
 +
            //vertex colors
 +
/*
 +
            var colors = [];
 +
            for(i=0; i < thisdataz.length; ++i)
 +
            {
 +
                var color = new THREE.Color(0x550000);
 +
//              color.setHSV(.125, 1, 0);
 +
                colors.push(color);
 +
            }
 +
*/
 +
            materials = [];
 +
            for(i=0; i < data_3d[index].faces.length; ++i)
 +
            {
 +
                thisfacecolor = (
 +
                data_3d[index].vertices[data_3d[index].faces[i].a].position.z+
 +
                data_3d[index].vertices[data_3d[index].faces[i].b].position.z+
 +
                data_3d[index].vertices[data_3d[index].faces[i].c].position.z+
 +
                data_3d[index].vertices[data_3d[index].faces[i].d].position.z)/4/100;
 +
                materials.push([new THREE.MeshBasicMaterial(
 +
                    {
 +
                        color:thisfacecolor*0xffffff,
 +
                        opacity:.6
 +
                    }
 +
                )]);
 +
if(!thisfacecolor)
 +
{
 +
alert("Something is terribly wrong!\na ("+data_3d[index].faces[i].a+"):"+data_3d[index].vertices[data_3d[index].faces[i].a].position.z+"\nb("+data_3d[index].faces[i].b+"):"+data_3d[index].vertices[data_3d[index].faces[i].b].position.z+"\nc("+data_3d[index].faces[i].c+"):"+data_3d[index].vertices[data_3d[index].faces[i].c].position.z+"\nd("+data_3d[index].faces[i].d+"):"+data_3d[index].vertices[data_3d[index].faces[i].a].position.z);
 +
}
 +
                var newcolor = colorRamp(thisfacecolor, cool_color_ramp);
 +
                materials[i][0].color.setRGB(newcolor[0], newcolor[1], newcolor[2]);
 +
                data_3d[index].faces[i].materials = materials[i];
 +
            }
 +
           
 +
        }
 +
    );
 +
 
 +
    var origin = new THREE.Vertex(new THREE.Vector3(0,0,0));
 +
   
 +
theta = -Math.PI/4;
 +
phi = Math.PI/8;
 +
 
 +
    //Axis labels
 +
    var x = document.createElement("canvas");
 +
    var xc = x.getContext("2d");
 +
    x.width = 400;
 +
    x.height = 40;
 +
    xc.fillStyle = "#ffffff";
 +
    xc.font = "20pt arial";
 +
    xc.textBaseline = "top";
 +
    xc.fillText("IPTG (mM)", 10, 0);
 +
 
 +
    var xm = new THREE.MeshBasicMaterial({
 +
    map: new THREE.Texture(x)
 +
    });
 +
    xm.map.needsUpdate = true;
 +
 
 +
    xaxislabel = new THREE.Mesh(new THREE.PlaneGeometry(400, 40, 2, 2), xm);
 +
    xaxislabel.position.x = -50;
 +
    xaxislabel.position.y = 0;
 +
    xaxislabel.position.z = -48;
 +
xaxislabel.scale.x = 0.2;
 +
xaxislabel.scale.y = -0.2;
 +
    xaxislabel.rotation.x = -Math.PI/2;
 +
    xaxislabel.rotation.y = -Math.PI/2;
 +
    xaxislabel.doubleSided = true;
 +
 
 +
    var x = document.createElement("canvas");
 +
    var xc = x.getContext("2d");
 +
    x.width = 400;
 +
    x.height = 40;
 +
    xc.fillStyle = "#ffffff";
 +
    xc.font = "20pt arial";
 +
    xc.textBaseline = "top";
 +
    xc.fillText("Arabinose (wt%)", 10, 0);
 +
 
 +
    var xm = new THREE.MeshBasicMaterial({
 +
    map: new THREE.Texture(x)
 +
    });
 +
    xm.map.needsUpdate = true;
 +
 
 +
    yaxislabel = new THREE.Mesh(new THREE.PlaneGeometry(400, 40, 2, 2), xm);
 +
    yaxislabel.position.x = 0;
 +
    yaxislabel.position.y = -50;
 +
    yaxislabel.position.z = -48;
 +
yaxislabel.scale.x = 0.2;
 +
yaxislabel.scale.y = -0.2;
 +
    yaxislabel.rotation.x = -Math.PI/2;
 +
    yaxislabel.doubleSided = true;
 +
 
 +
    var x = document.createElement("canvas");
 +
    var xc = x.getContext("2d");
 +
    x.width = 400;
 +
    x.height = 40;
 +
    xc.fillStyle = "#ffffff";
 +
    xc.font = "20pt arial";
 +
    xc.textBaseline = "top";
 +
    xc.fillText("Relative Fluorescence", 10, 0);
 +
 
 +
    var xm = new THREE.MeshBasicMaterial({
 +
    map: new THREE.Texture(x)
 +
    });
 +
    xm.map.needsUpdate = true;
 +
 
 +
    zaxislabel = new THREE.Mesh(new THREE.PlaneGeometry(400, 40, 2, 2), xm);
 +
    zaxislabel.position.x = -50;
 +
    zaxislabel.position.y = -52;
 +
    zaxislabel.position.z = 0;
 +
    zaxislabel.rotation.x = -Math.PI/2;
 +
    zaxislabel.rotation.y = -Math.PI/2;
 +
    zaxislabel.rotation.z = -Math.PI/2;
 +
zaxislabel.scale.x = 0.2;
 +
zaxislabel.scale.y = -0.2;
 +
 
 +
    zaxislabel.doubleSided = true;
 +
    zaxislabel.updateMatrix();
 +
 
 +
 
 +
    var $container = $('#mw_3dplot');
 +
    $('body').mouseup(function(){
 +
        isdragging = false;
 +
        $container.unbind('mousemove');
 +
    });
 +
    $container.mousedown(function(event){
 +
        isdragging = true;
 +
        lastMouseX = event.pageX;
 +
        lastMouseY = event.pageY;
 +
        $container.mousemove(function(event)
 +
        {
 +
theta += (lastMouseX - event.pageX)/70
 +
phi -= (lastMouseY - event.pageY)/70;
 +
            lastMouseX = event.pageX;
 +
            lastMouseY = event.pageY;
 +
rerender();
 +
        });
 +
    });
 +
    renderer = new THREE.CanvasRenderer();
 +
//renderer.autoClear = false;
 +
    camera = new THREE.OrthoCamera( -75, 75, 75, -75, - 2000, 1000 );
 +
 
 +
    scene = new THREE.Scene();
 +
    camera.position.x = 250;
 +
    camera.position.y = -150;
 +
    camera.position.z = 75;
 +
camera.up.y = 0;
 +
camera.up.z = 1;
 +
//        camera.rotation.y = -Math.PI/6;
 +
            camera.position.x = 250*Math.cos(theta);
 +
    camera.position.y = 250*Math.sin(theta);
 +
    renderer.setSize(WIDTH, HEIGHT);
 +
    $container.append(renderer.domElement);
 +
    var radius = 50, segments = 16, rings = 16;
 +
 
 +
    sphere = new THREE.Mesh(
 +
        new THREE.SphereGeometry(radius,
 +
            segments,
 +
            rings),
 +
        sphereMaterial
 +
    );
 +
    sphere.position.x = 50;
 +
    sphere.position.y = 50;
 +
    sphere.position.z = 50;
 +
 
 +
// add it to the scene
 +
    plot_mesh = [];
 +
    plot_points = [];
 +
for(var i = 0; i < data_3d.length; ++i)
 +
{
 +
plot_mesh.push(new THREE.Mesh(data_3d[i], plotMaterial));
 +
plot_mesh[i].doubleSided = true;
 +
 
 +
plot_points.push(new THREE.ParticleSystem(
 +
    particles[i],
 +
    pointMaterial));
 +
}
 +
 
 +
plot_obj = new THREE.Object3D();
 +
plot_obj.rotation.z = -Math.PI/2;
 +
plot_obj.scale.x = -1;
 +
//plot_mesh.addChild(sphere);
 +
 
 +
 
 +
    axisgeom = new THREE.Geometry();
 +
    axisgeom.vertices.push(origin);
 +
    axisgeom.vertices.push(new THREE.Vertex(new THREE.Vector3(100,0,0)));
 +
    axisgeom.vertices.push(new THREE.Vertex(new THREE.Vector3(98, 1, 0)));
 +
    axisgeom.vertices.push(new THREE.Vertex(new THREE.Vector3(98, -1, 0)));
 +
    axisgeom.vertices.push(new THREE.Vertex(new THREE.Vector3(100, 0, 0)));
 +
 
 +
    xaxis = new THREE.Line(
 +
        axisgeom,
 +
        axisMat
 +
    );
 +
 
 +
    yaxis = new THREE.Line(
 +
        axisgeom,
 +
        axisMat
 +
    );
 +
    yaxis.rotation.z = 90*Math.PI/180;
 +
 
 +
    zaxis = new THREE.Line(
 +
        axisgeom,
 +
        axisMat
 +
    );
 +
    scene.addChild(xaxislabel);
 +
    scene.addChild(yaxislabel);
 +
    scene.addChild(zaxislabel);
 +
 
 +
    zaxis.rotation.y = -90*Math.PI/180;
 +
 
 +
    plot_obj.position.x = -50;
 +
    plot_obj.position.z = -50;
 +
    plot_obj.position.y = -50;
 +
 
 +
    zaxis.position.x = -50;
 +
    zaxis.position.z = -50;
 +
    zaxis.position.y = -50;
 +
 
 +
    xaxis.position.x = -50;
 +
    xaxis.position.z = -50;
 +
    xaxis.position.y = -50;
 +
 
 +
    yaxis.position.x = -50;
 +
    yaxis.position.z = -50;
 +
    yaxis.position.y = -50;
 +
 
 +
//plot_obj.addChild(particleSystem);
 +
 
 +
 
 +
    scene.addChild(xaxis);
 +
    scene.addChild(yaxis);
 +
    scene.addChild(zaxis);
 +
scene.addChild(plot_obj);
 +
//  origin_object.addChild(sphere);
 +
 
 +
 
 +
    //Grid
 +
    var gridlinegeom = new THREE.Geometry();
 +
    gridlinegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(0,0,0)));
 +
    gridlinegeom.vertices.push(new THREE.Vertex(new THREE.Vector3(100,0,0)));
 +
   
 +
for(var i=1; i <= 5; i++)
 +
{
 +
var gridline = new THREE.Line(gridlinegeom, axisMat);
 +
gridline.position.y = i/5*100-50;
 +
gridline.position.x = -50;
 +
gridline.position.z = -50;
 +
scene.addChild(gridline);
 +
 
 +
 +
 +
var gridline = new THREE.Line(gridlinegeom, axisMat);
 +
gridline.position.x = i/5*100-50;
 +
gridline.position.y = -50;
 +
gridline.position.z = -50;
 +
gridline.rotation.z = Math.PI/2;
 +
scene.addChild(gridline);
 +
}
 +
yticklabels = [];
 +
xticklabels = [];
 +
for(var i=1; i <= 5; i++)
 +
{
 +
    var x = document.createElement("canvas");
 +
    var xc = x.getContext("2d");
 +
    x.width = 40;
 +
    x.height = 40;
 +
    xc.fillStyle = "#ffffff";
 +
    xc.font = "12pt arial";
 +
    xc.textBaseline = "top";
 +
    xc.fillText(i/5*axisdimensions[1], 10, 0);
 +
 
 +
    var xm = new THREE.MeshBasicMaterial({
 +
    map: new THREE.Texture(x)
 +
    });
 +
    xm.map.needsUpdate = true;
 +
    var xtick = new THREE.Mesh(new THREE.PlaneGeometry(13/ASPECT, 13, 2, 2), xm);
 +
    xtick.position.y = i/5*100-50;
 +
    xtick.position.x = -50;
 +
    xtick.position.z = -58;
 +
    xtick.rotation.x = Math.PI/2;
 +
    xtick.doubleSided = true;
 +
    xtick.updateMatrix();
 +
    scene.addChild(xtick);
 +
 
 +
    var x = document.createElement("canvas");
 +
    var xc = x.getContext("2d");
 +
    x.width = 80;
 +
    x.height = 40;
 +
    xc.fillStyle = "#ffffff";
 +
    xc.font = "12pt arial";
 +
    xc.textBaseline = "top";
 +
    xc.fillText((i/5*axisdimensions[3]).toFixed(4), 10, 0);
 +
 
 +
    var xm = new THREE.MeshBasicMaterial({
 +
    map: new THREE.Texture(x)
 +
    });
 +
    xm.map.needsUpdate = true;
 +
    var ytick = new THREE.Mesh(new THREE.PlaneGeometry(26/ASPECT, 13, 2, 2), xm);
 +
    ytick.position.x = i/5*100-50;
 +
    ytick.position.y = -50;
 +
    ytick.position.z = -58;
 +
    ytick.rotation.x = Math.PI/2;
 +
    ytick.doubleSided = true;
 +
    ytick.updateMatrix();
 +
    scene.addChild(ytick);
 +
 
 +
xticklabels.push(xtick);
 +
yticklabels.push(ytick);
 +
}
 +
 
 +
var particle = new THREE.Particle(pointMaterial);
 +
 
 +
 
 +
    renderer.render(scene, camera);
 +
 
 +
 
 +
        $('#mw_selectmenu td').eq(0).mouseover().click();
 +
        $('#mw_selectmenu td').eq(3).mouseover().click();
 +
        $('#mw_selectmenu td').eq(5).mouseover().click();
});
});
Line 77: Line 1,005:
right:10px;
right:10px;
top:10px;
top:10px;
-
width:85%;
+
width:650px;
-
height:250px;
+
height:350px;
position:absolute;
position:absolute;
-
background:rgb(255,255,255);
+
padding: 15px;
 +
border-radius:15px;
 +
}
 +
#mw_plot{
 +
width:100%;
 +
height:100%;
 +
}
 +
#mw_3dplot{
 +
width:100%;
 +
height:100%
}
}
#mw_selectmenu {
#mw_selectmenu {
-
left:0px;
+
top: 25px;
 +
right: 27px;
 +
position: absolute;
margin: 4px;
margin: 4px;
-
display:inline-block;
+
display: inline-block;
 +
padding: 3px 11px 3px 11px;
 +
}
 +
#mw_optionsmenu {
 +
top: 25px;
 +
right: 114px;
 +
padding: 3px 0px 4px 9px;
 +
position: absolute;
 +
margin: 4px;
 +
width: 80px;
 +
}
 +
#mw_optionstable {
 +
margin-left: 3px;
}
}
#mw_sequencearea {
#mw_sequencearea {
Line 99: Line 1,050:
#mutantwidget td{
#mutantwidget td{
-
background: #eee;
+
background: rgba(0,0,0,.8);
padding: 5px;
padding: 5px;
cursor:pointer;
cursor:pointer;
color:rgba(225, 225, 225, 1);
color:rgba(225, 225, 225, 1);
-
opacity:.3;
 
-
background: rgba(0,0,0,.6);
 
border-radius:5px;
border-radius:5px;
 +
text-align:center;
}
}
Line 123: Line 1,073:
border-radius: 5px;
border-radius: 5px;
marin-top: 10px;
marin-top: 10px;
 +
}
 +
 +
.yaxis {
 +
    -webkit-transform: rotate(-90deg);
 +
    -moz-transform: rotate(-90deg);
 +
    -o-transform: rotate(-90deg);
 +
    -ms-transform: rotate(-90deg);
 +
top:179px;
 +
left:-40px;
 +
position:absolute;
 +
}
 +
 +
.xaxis {
 +
bottom:15px;
 +
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"