|
|
| (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="https://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="https://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="https://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(' ').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> |
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.
"
