Team:Evry/our-project

From 2012.igem.org

(Difference between revisions)
 
(79 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Evry/template_v2}}
+
{{:Team:Evry/template_v1}}
<html>
<html>
-
<canvas id="sitemap" width="800" height="400"></canvas>
+
<br>
-
<script type="text/javascript" src="http://2012.igem.org/common/jquery-latest.min.js"></script>
+
<h1 align="center">Welcome to the French Froggies Home Page!<h1>
-
<script type="text/javascript" src="arbor.js"></script>
+
-
<script type="text/javascript" src="http://arborjs.org/js/lib/arbor-tween.js"></script>
+
-
<script type="text/javascript" src="http://arborjs.org/js/lib/arbor-graphics.js"></script>
+
-
<script  type="text/javascript">
+
<h2>Introduction</h2>
-
(function($){
+
<p>Dear visitor, welcome to the French Froggies project Homepage. This year, the Evry iGEM team pushed farther away the frontiers of synthetic biology bringing the frog as a new chassis for the iGEM competition. We have developed and characterized <em>the first parts for <i>Xenopus</i></em>, providing new tools for <em>modeling the physiology</em> of the animal and constructed a <em> synthetic hormonal system</em> in a multicellular organism. </p>
-
  // var trace = function(msg){
+
-
  //  if (typeof(window)=='undefined' || !window.console) return
+
-
  //  var len = arguments.length, args = [];
+
-
  //  for (var i=0; i<len; i++) args.push("arguments["+i+"]")
+
-
  //  eval("console.log("+args.join(",")+")")
+
-
  //
+
-
 
+
-
  var Renderer = function(elt){
+
-
    var dom = $(elt)
+
-
    var canvas = dom.get(0)
+
-
    var ctx = canvas.getContext("2d");
+
-
    var gfx = arbor.Graphics(canvas)
+
-
    var sys = null
+
-
    var _vignette = null
+
</div>
-
    var selected = null,
+
-
        nearest = null,
+
-
        _mouseP = null;
+
-
   
+
<div style="position:absolute; top:500px; left:-20px;">
-
    var that = {
+
-
      init:function(pSystem){
+
-
        sys = pSystem
+
-
        sys.screen({size:{width:dom.width(), height:dom.height()},
+
-
                    padding:[36,60,36,60]})
+
-
        $(window).resize(that.resize)
+
<canvas id="sitemap" width="1000" height="600"></canvas>
-
        that.resize()
+
<script type="text/javascript">
-
        that._initMouseHandling()
+
document.write('<script type="text/javascript" src="http://2012.igem.org/Team:Evry/arbor.js?action=raw&ctype=text/javascript">'+'</script'+'>');
-
 
+
</script>
-
        if (document.referrer.match(/Goldenbricks|Plasmids|AIDSystem/)){
+
<script type="text/javascript" src="http://arborjs.org/js/lib/arbor-tween.js"></script>
-
          // if we got here by hitting the back button in one of the Benchwork,
+
<script type="text/javascript" src="http://arborjs.org/js/lib/arbor-graphics.js"></script>
-
          // start with the Benchwork section pre-selected
+
<script type="text/javascript">
-
          that.switchSection('Benchwork')
+
document.write('<script type="text/javascript"' + 'src="http://2012.igem.org/Team:Evry/main-img.js' + '?action=raw&ctype=text/javascript">'+'</script'+'>');
-
        }
+
-
      },
+
-
      resize:function(){
+
-
        canvas.width = $(window).width()
+
-
        canvas.height = .75* $(window).height()
+
-
        sys.screen({size:{width:canvas.width, height:canvas.height}})
+
-
        _vignette = null
+
-
        that.redraw()
+
-
      },
+
-
      redraw:function(){
+
-
        gfx.clear()
+
-
        sys.eachEdge(function(edge, p1, p2){
+
-
          if (edge.source.data.alpha * edge.target.data.alpha == 0) return
+
-
          gfx.line(p1, p2, {stroke:"#b2b19d", width:2, alpha:edge.target.data.alpha})
+
-
        })
+
-
        sys.eachNode(function(node, pt){
+
-
          var w = Math.max(20, 20+gfx.textWidth(node.name) )
+
-
          if (node.data.alpha===0) return
+
-
          if (node.data.shape=='dot'){
+
-
            gfx.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:node.data.alpha})
+
-
            gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
+
-
            gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
+
-
          }else{
+
-
            gfx.rect(pt.x-w/2, pt.y-8, w, 20, 4, {fill:node.data.color, alpha:node.data.alpha})
+
-
            gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
+
-
            gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
+
-
          }
+
-
        })
+
-
        that._drawVignette()
+
-
      },
+
-
     
+
-
      _drawVignette:function(){
+
-
        var w = canvas.width
+
-
        var h = canvas.height
+
-
        var r = 20
+
-
 
+
-
        if (!_vignette){
+
-
          var top = ctx.createLinearGradient(0,0,0,r)
+
-
          top.addColorStop(0, "#e0e0e0")
+
-
          top.addColorStop(.7, "rgba(255,255,255,0)")
+
-
 
+
-
          var bot = ctx.createLinearGradient(0,h-r,0,h)
+
-
          bot.addColorStop(0, "rgba(255,255,255,0)")
+
-
          bot.addColorStop(1, "white")
+
-
 
+
-
          _vignette = {top:top, bot:bot}
+
-
        }
+
-
       
+
-
        // top
+
-
        ctx.fillStyle = _vignette.top
+
-
        ctx.fillRect(0,0, w,r)
+
-
 
+
-
        // bot
+
-
        ctx.fillStyle = _vignette.bot
+
-
        ctx.fillRect(0,h-r, w,r)
+
-
      },
+
-
 
+
-
      switchMode:function(e){
+
-
        if (e.mode=='hidden'){
+
-
          dom.stop(true).fadeTo(e.dt,0, function(){
+
-
            if (sys) sys.stop()
+
-
            $(this).hide()
+
-
          })
+
-
        }else if (e.mode=='visible'){
+
-
          dom.stop(true).css('opacity',0).show().fadeTo(e.dt,1,function(){
+
-
            that.resize()
+
-
          })
+
-
          if (sys) sys.start()
+
-
        }
+
-
      },
+
-
     
+
-
      switchSection:function(newSection){
+
-
        var parent = sys.getEdgesFrom(newSection)[0].source
+
-
        var children = $.map(sys.getEdgesFrom(newSection), function(edge){
+
-
          return edge.target
+
-
        })
+
-
       
+
-
        sys.eachNode(function(node){
+
-
          if (node.data.shape=='dot') return // skip all but leafnodes
+
-
 
+
-
          var nowVisible = ($.inArray(node, children)>=0)
+
-
          var newAlpha = (nowVisible) ? 1 : 0
+
-
          var dt = (nowVisible) ? .5 : .5
+
-
          sys.tweenNode(node, dt, {alpha:newAlpha})
+
-
 
+
-
          if (newAlpha==1){
+
-
            node.p.x = parent.p.x + .05*Math.random() - .025
+
-
            node.p.y = parent.p.y + .05*Math.random() - .025
+
-
            node.tempMass = .001
+
-
          }
+
-
        })
+
-
      },
+
-
     
+
-
     
+
-
      _initMouseHandling:function(){
+
-
        // no-nonsense drag and drop (thanks springy.js)
+
-
        selected = null;
+
-
        nearest = null;
+
-
        var dragged = null;
+
-
        var oldmass = 1
+
-
 
+
-
        var _section = null
+
-
 
+
-
        var handler = {
+
-
          moved:function(e){
+
-
            var pos = $(canvas).offset();
+
-
            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
+
-
            nearest = sys.nearest(_mouseP);
+
-
 
+
-
            if (!nearest.node) return false
+
-
 
+
-
//            if (nearest.node.data.shape!='dot'){
+
-
              selected = (nearest.distance < 50) ? nearest : null
+
-
              if (selected){
+
-
                dom.addClass('linkable')
+
-
                window.status = selected.node.data.link//.replace(/^\//,"http://"+window.location.host+"/")//.replace(/^#/,'')
+
-
              }
+
-
              else{
+
-
                dom.removeClass('linkable')
+
-
                window.status = ''
+
-
              }
+
-
//            }else
+
-
            if ($.inArray(nearest.node.name, ['French Froggies','Human Practice','Model','Benchwork']) >=0 ){
+
-
              if (nearest.node.name!=_section){
+
-
                _section = nearest.node.name
+
-
                that.switchSection(_section)
+
-
              }
+
-
              dom.removeClass('linkable')
+
-
              window.status = ''
+
-
            }
+
-
           
+
-
            return false
+
-
          },
+
-
          clicked:function(e){
+
-
            var pos = $(canvas).offset();
+
-
            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
+
-
            nearest = dragged = sys.nearest(_mouseP);
+
-
           
+
-
            if (nearest && selected && nearest.node===selected.node){
+
-
              var link = selected.node.data.link
+
-
              if (link.match(/^#/)){
+
-
                $(that).trigger({type:"navigate", path:link.substr(1)})
+
-
              }else{
+
-
                window.location = link
+
-
              }
+
-
              return false
+
-
            }
+
-
           
+
-
           
+
-
            if (dragged && dragged.node !== null) dragged.node.fixed = true
+
-
 
+
-
            $(canvas).unbind('mousemove', handler.moved);
+
-
            $(canvas).bind('mousemove', handler.dragged)
+
-
            $(window).bind('mouseup', handler.dropped)
+
-
 
+
-
            return false
+
-
          },
+
-
          dragged:function(e){
+
-
            var old_nearest = nearest && nearest.node._id
+
-
            var pos = $(canvas).offset();
+
-
            var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
+
-
 
+
-
            if (!nearest) return
+
-
            if (dragged !== null && dragged.node !== null){
+
-
              var p = sys.fromScreen(s)
+
-
              dragged.node.p = p
+
-
            }
+
-
 
+
-
            return false
+
-
          },
+
-
 
+
-
          dropped:function(e){
+
-
            if (dragged===null || dragged.node===undefined) return
+
-
            if (dragged.node !== null) dragged.node.fixed = false
+
-
            dragged.node.tempMass = 1000
+
-
            dragged = null;
+
-
            // selected = null
+
-
            $(canvas).unbind('mousemove', handler.dragged)
+
-
            $(window).unbind('mouseup', handler.dropped)
+
-
            $(canvas).bind('mousemove', handler.moved);
+
-
            _mouseP = null
+
-
            return false
+
-
          }
+
-
 
+
-
 
+
-
        }
+
-
 
+
-
        $(canvas).mousedown(handler.clicked);
+
-
        $(canvas).mousemove(handler.moved);
+
-
 
+
-
      }
+
-
    }
+
-
   
+
-
    return that
+
-
  }
+
-
 
+
-
 
+
-
  var Nav = function(elt){
+
-
    var dom = $(elt)
+
-
 
+
-
    var _path = null
+
-
   
+
-
    var that = {
+
-
      init:function(){
+
-
        $(window).bind('popstate',that.navigate)
+
-
        dom.find('> a').click(that.back)
+
-
        $('.more').one('click',that.more)
+
-
       
+
-
        $('#Model dl:not(.datastructure) dt').click(that.reveal)
+
-
        that.update()
+
-
        return that
+
-
      },
+
-
      more:function(e){
+
-
        $(this).removeAttr('href').addClass('less').html('&nbsp;').siblings().fadeIn()
+
-
        $(this).next('h2').find('a').one('click', that.less)
+
-
       
+
-
        return false
+
-
      },
+
-
      less:function(e){
+
-
        var more = $(this).closest('h2').prev('a')
+
-
        $(this).closest('h2').prev('a')
+
-
        .nextAll().fadeOut(function(){
+
-
          $(more).text('creation & use').removeClass('less').attr('href','#')
+
-
        })
+
-
        $(this).closest('h2').prev('a').one('click',that.more)
+
-
       
+
-
        return false
+
-
      },
+
-
      reveal:function(e){
+
-
        $(this).next('dd').fadeToggle('fast')
+
-
        return false
+
-
      },
+
-
      back:function(){
+
-
        _path = "/"
+
-
        if (window.history && window.history.pushState){
+
-
          window.history.pushState({path:_path}, "", _path);
+
-
        }
+
-
        that.update()
+
-
        return false
+
-
      },
+
-
      navigate:function(e){
+
-
        var oldpath = _path
+
-
        if (e.type=='navigate'){
+
-
          _path = e.path
+
-
          if (window.history && window.history.pushState){
+
-
            window.history.pushState({path:_path}, "", _path);
+
-
          }else{
+
-
            that.update()
+
-
          }
+
-
        }else if (e.type=='popstate'){
+
-
          var state = e.originalEvent.state || {}
+
-
          _path = state.path || window.location.pathname.replace(/^\//,'')
+
-
        }
+
-
        if (_path != oldpath) that.update()
+
-
      },
+
-
      update:function(){
+
-
        var dt = 'slow'
+
-
        if (_path===null){
+
-
          // this is the original page load. don't animate anything just jump
+
-
          // to the proper state
+
-
          _path = window.location.pathname.replace(/^\//,'')
+
-
          dt = 0
+
-
          dom.find('p').css('opacity',0).show().fadeTo('slow',1)
+
-
        }
+
-
 
+
-
        switch (_path){
+
-
          case '':
+
-
          case '/':
+
-
          dom.find('p').text('a graph visualization library using web workers and jQuery')
+
-
          dom.find('> a').removeClass('active').attr('href','#')
+
-
 
+
-
          $('#Model').fadeTo('fast',0, function(){
+
-
            $(this).hide()
+
-
            $(that).trigger({type:'mode', mode:'visible', dt:dt})
+
-
          })
+
-
          document.title = "French Froggies"
+
-
          break
+
-
         
+
-
//          case 'introduction':
+
-
//          case 'French Froggies':
+
-
//          case 'Goldenbrick':
+
-
//          $(that).trigger({type:'mode', mode:'hidden', dt:dt})
+
-
//          dom.find('> p').text(_path)
+
-
//          dom.find('> a').addClass('active').attr('href','#')
+
-
//          $('#Model').stop(true).css({opacity:0}).show().delay(333).fadeTo('fast',1)
+
-
//                   
+
-
//          $('#Model').find(">div").hide()
+
-
//          $('#Model').find('#'+_path).show()
+
-
//          document.title = "French Froggies » " + _path
+
-
//          break
+
-
        }
+
-
       
+
-
      }
+
-
    }
+
-
    return that
+
-
  }
+
-
 
+
-
  $(document).ready(function(){
+
-
    var CLR = {
+
-
      branch:"#b2b19d",
+
-
      level1:"#009A3A",
+
-
      level2:"#009966",
+
-
      level3:"#C7D1A5"
+
-
    }
+
-
 
+
-
    var theUI = {
+
-
      nodes:{"French Froggies":{color:CLR.level1, shape:"dot", alpha:1, link:'Project'},
+
-
     
+
-
            Benchwork:{color:CLR.level2, shape:"dot", alpha:1},
+
-
            "Synthetic hormone":{color:CLR.level3, alpha:0, link:'AIDSystem'},
+
-
            "Goldenbrick":{color:CLR.level3, alpha:0, link:'GB'},
+
-
            "Xenopus : A multicellular chassis":{color:CLR.level3, alpha:0, link:'FrenchFroggies'},
+
-
 
+
-
            Model:{color:CLR.level2, shape:"dot", alpha:1, link:'Modeling'},
+
-
            "Auxin transport and diffusion":{color:CLR.level3, alpha:0, link:'auxin_pde'},
+
-
            "Experimental protocol":{color:CLR.level3, alpha:0, link:'plasmid_splitting'},
+
-
            "Cellular model : auxin production":{color:CLR.level3, alpha:0, link:'Auxin_production'},
+
-
            "Cellular model : auxin detection":{color:CLR.level3, alpha:0, link:'Auxin_detection'},
+
-
 
+
-
            "Human Pratice":{color:CLR.level2, shape:"dot", alpha:1, link:'HumanPractice'}
+
-
            },
+
-
      edges:{
+
-
 
+
-
     
+
-
        "French Froggies":{
+
-
            Benchwork:{"length":0.5,"weight":1},
+
-
            Model:{"length":0.5,"weight":2},
+
-
            "Human Pratice":{"length":0.5,"weight":3}
+
-
        },
+
-
        Benchwork:{
+
-
            "Synthetic hormone":{"length":0.5,"weight":1},
+
-
            "Goldenbrick":{"length":0.5,"weight":2},
+
-
            "Xenopus : A multicellular chassis":{"length":0.5,"weight":3}
+
-
        },
+
-
        Model:{
+
-
            "Auxin transport and diffusion":{"length":0.5,"weight":2},
+
-
            "Experimental protocol":{"length":0.5,"weight":2},
+
-
            "Cellular model : auxin production":{"length":0.5,"weight":2},
+
-
            "Cellular model : auxin detection":{"length":0.5,"weight":2}
+
-
        },
+
-
        "Human Pratice":{}
+
-
      }
+
-
    }
+
-
 
+
-
 
+
-
    var sys = arbor.ParticleSystem()
+
-
    sys.parameters({stiffness:900, repulsion:50, gravity:true, dt:0.015})
+
-
    sys.renderer = Renderer("#sitemap")
+
-
    sys.graft(theUI)
+
-
   
+
-
    var nav = Nav("#nav")
+
-
    $(sys.renderer).bind('navigate', nav.navigate)
+
-
    $(nav).bind('mode', sys.renderer.switchMode)
+
-
    nav.init()
+
-
  })
+
-
})(this.jQuery)
+
-
   
+
</script>
</script>
</html>
</html>

Latest revision as of 00:03, 27 September 2012


Welcome to the French Froggies Home Page!

Introduction

Dear visitor, welcome to the French Froggies project Homepage. This year, the Evry iGEM team pushed farther away the frontiers of synthetic biology bringing the frog as a new chassis for the iGEM competition. We have developed and characterized the first parts for Xenopus, providing new tools for modeling the physiology of the animal and constructed a synthetic hormonal system in a multicellular organism.