Team:Evry/main-img.js
From 2012.igem.org
(Difference between revisions)
Line 158: | Line 158: | ||
} | } | ||
// }else | // }else | ||
- | if ($.inArray(nearest.node.name, ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx | + | if ($.inArray(nearest.node.name, ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx']) >=0 ){ |
if (nearest.node.name!=_section){ | if (nearest.node.name!=_section){ | ||
_section = nearest.node.name | _section = nearest.node.name | ||
Line 330: | Line 330: | ||
var theUI = { | var theUI = { | ||
- | // ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx | + | // ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx'] |
nodes:{"The French Froggies Project!":{color:"#51C215", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Project', url:'https://static.igem.org/mediawiki/2012/c/cf/French.png'}, //Attribut url pour l'image ajouté /*Thibault*/ | nodes:{"The French Froggies Project!":{color:"#51C215", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Project', url:'https://static.igem.org/mediawiki/2012/c/cf/French.png'}, //Attribut url pour l'image ajouté /*Thibault*/ | ||
Line 356: | Line 356: | ||
"Parameters measurements":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/Experimentals_Parameters'}, | "Parameters measurements":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/Experimentals_Parameters'}, | ||
- | "GoldenBricksxxxxxxxx":{color:"#1A5291", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/GB', url:'https://static.igem.org/mediawiki/2012/a/a4/GoldeN.png'}, | + | "GoldenBricksxxxxxxxx":{color:"#1A5291", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/GB', url:'https://static.igem.org/mediawiki/2012/a/a4/GoldeN.png'}, //Attribut url pour l'image ajouté /*Thibault*/ |
"Human Practicexxxxxx":{color:"#a6953f", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/HumanPractice', url:'https://static.igem.org/mediawiki/2012/b/ba/HumanPractice.png'}, //Attribut url pour l'image ajouté /*Thibault*/ | "Human Practicexxxxxx":{color:"#a6953f", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/HumanPractice', url:'https://static.igem.org/mediawiki/2012/b/ba/HumanPractice.png'}, //Attribut url pour l'image ajouté /*Thibault*/ | ||
Line 371: | Line 371: | ||
"Attributions":{color:"#632e8c", alpha:0, link:'https://2012.igem.org/Team:Evry/Attributions'}, | "Attributions":{color:"#632e8c", alpha:0, link:'https://2012.igem.org/Team:Evry/Attributions'}, | ||
"Official profile":{color:"#632e8c", alpha:0, link:'https://igem.org/Team.cgi?year=2012'}, | "Official profile":{color:"#632e8c", alpha:0, link:'https://igem.org/Team.cgi?year=2012'}, | ||
- | "Collaborations":{color:"#632e8c", alpha:0, link:'https://2012.igem.org/Team:Evry/Collaborations'} | + | "Collaborations":{color:"#632e8c", alpha:0, link:'https://2012.igem.org/Team:Evry/Collaborations'} |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
}, | }, | ||
Line 387: | Line 383: | ||
"GoldenBricksxxxxxxxx":{"length":1.5,"weight":2}, | "GoldenBricksxxxxxxxx":{"length":1.5,"weight":2}, | ||
"Human Practicexxxxxx":{"length":0.75,"weight":2}, | "Human Practicexxxxxx":{"length":0.75,"weight":2}, | ||
- | "The Teamxxxxxxxxxxxx":{"length":0.5 | + | "The Teamxxxxxxxxxxxx":{"length":0.5,"weight":2} |
- | + | ||
}, | }, | ||
Revision as of 23:34, 26 October 2012
(function($){
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 var selected = null, nearest = null, _mouseP = null;
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) that.resize() that._initMouseHandling()
if (document.referrer.match(/GoldenBricksxxxxxxxx|Plasmids|AIDSystem/)){ // if we got here by hitting the back button in one of the Benchwork, // start with the Benchwork section pre-selected that.switchSection('Benchwork') } }, resize:function(){ // canvas.width = .5* $(window).width() // canvas.height = .5* $(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:3, 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=='img'){
var img_elem = new Image(); img_elem.src = node.data.url; ctx.drawImage(img_elem, pt.x-w/2, pt.y-w/2, w, w); // Redimensionnement de l'image prévue comme tu le souhaitais !
gfx.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:0}) }
else 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", weight:"bold", 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 = {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 if (node.data.shape=='img') 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, ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx']) >=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 = "The French Froggies Project!" break } } } return that } $(document).ready(function(){ var CLR = { branch:"#b2b19d", level3benchwork:"#FFBF3E", level3model:"#4B86C7" }
/*Thibault BEGIN*/
var theUI = {
// ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx']
nodes:{"The French Froggies Project!":{color:"#51C215", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Project', url:'https://static.igem.org/mediawiki/2012/c/cf/French.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"Xenopus as a chassis":{color:"#63a358", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/FrenchFrog', url:'https://static.igem.org/mediawiki/2012/b/bd/Xenope.png'}, //Attribut url pour l'image ajouté /*Thibault*/ "Xenopus plasmids":{color:"#63a358", alpha:0, link:'https://2012.igem.org/Team:Evry/FrenchFrog#plasmid'}, "Injection in Xenopus":{color:"#63a358", alpha:0, link:'https://2012.igem.org/Team:Evry/InjectionTuto'}, "Development stages":{color:"#63a358", alpha:0, link:'https://2012.igem.org/Team:Evry/Stages'}, "Characterization":{color:"#63a358", alpha:0, link:'https://2012.igem.org/Team:Evry/Tadpole_injection1'},
"Hormonal Communicati":{color:"#852c2b", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/AIDSystem', url:'https://static.igem.org/mediawiki/2012/e/e2/Hormone.png'}, //Attribut url pour l'image ajouté /*Thibault*/ "Auxin emitter":{color:"#852c2b", alpha:0, link:'https://2012.igem.org/Team:Evry/AIDSystem#auxin'}, "Auxin receiver":{color:"#852c2b", alpha:0, link:'https://2012.igem.org/Team:Evry/AIDSystem#AID'}, "Auxin toxicity":{color:"#852c2b", alpha:0, link:'https://2012.igem.org/Team:Evry/AuxinTOX'}, "Auxin uptake":{color:"#852c2b", alpha:0, link:'https://2012.igem.org/Team:Evry/auxin_uptake'},
"Modelingxxxxxxxxxxxx":{color:"#1A5291", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Modeling', url:'https://static.igem.org/mediawiki/2012/5/5b/ModelingDHIUHEIUHD.png'}, //Attribut url pour l'image ajouté /*Thibault*/ "General Model":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/ODE_model'}, "ODEs derivations":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/auxin_pde'}, "Diffusion":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/Auxin_diffusion'}, "Auxin production":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/auxin_production'}, "Auxin reception":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/auxin_detection'}, "Plasmid diffusion":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/plasmid_splitting'}, "Model integration":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/model_integration'}, "Parameters measurements":{color:CLR.level3model, alpha:0, link:'https://2012.igem.org/Team:Evry/Experimentals_Parameters'},
"GoldenBricksxxxxxxxx":{color:"#1A5291", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/GB', url:'https://static.igem.org/mediawiki/2012/a/a4/GoldeN.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"Human Practicexxxxxx":{color:"#a6953f", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/HumanPractice', url:'https://static.igem.org/mediawiki/2012/b/ba/HumanPractice.png'}, //Attribut url pour l'image ajouté /*Thibault*/ "Hi Xenope!":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/Introduction'}, "Be a chassis?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/modelorganism'}, "Free the frogs!":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/freedthefrogs'}, "A chassis, really?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/chassis'}, "Work with Xenopus again?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/future'}, "What the laws says...":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/others'},
"The Teamxxxxxxxxxxxx":{color:"#632e8c", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Team', url:'https://static.igem.org/mediawiki/2012/9/93/TeamEVRY.png'}, //Attribut url pour l'image ajouté /*Thibault*/ "Our Team":{color:"#632e8c", alpha:0, link:'https://2012.igem.org/Team:Evry/Team'}, "Our Sponsors":{color:"#632e8c", alpha:0, link:'https://2012.igem.org/Team:Evry/Sponsors'}, "Attributions":{color:"#632e8c", alpha:0, link:'https://2012.igem.org/Team:Evry/Attributions'}, "Official profile":{color:"#632e8c", alpha:0, link:'https://igem.org/Team.cgi?year=2012'}, "Collaborations":{color:"#632e8c", alpha:0, link:'https://2012.igem.org/Team:Evry/Collaborations'} },
edges:{
"The French Froggies Project!":{ "Xenopus as a chassis":{"length":0.8,"weight":2}, "Hormonal Communicati":{"length":0.8,"weight":2}, "Modelingxxxxxxxxxxxx":{"length":0.8,"weight":2}, "GoldenBricksxxxxxxxx":{"length":1.5,"weight":2}, "Human Practicexxxxxx":{"length":0.75,"weight":2}, "The Teamxxxxxxxxxxxx":{"length":0.5,"weight":2} },
"Xenopus as a chassis":{ "Xenopus plasmids":{"length":0.75,"weight":1}, "Injection in Xenopus":{"length":0.75,"weight":2}, "Development stages":{"length":0.75,"weight":2}, "Characterization":{"length":0.75,"weight":2} }, "Hormonal Communicati":{ "Auxin emitter":{"length":1,"weight":2}, "Auxin receiver":{"length":1,"weight":2}, "Auxin toxicity":{"length":1,"weight":2}, "Auxin uptake":{"length":1,"weight":2} },
"Modelingxxxxxxxxxxxx":{ "General Model":{"length":0.5,"weight":2}, "ODEs derivations":{"length":0.5,"weight":2}, "Diffusion":{"length":0.75,"weight":2}, "Auxin production":{"length":0.5,"weight":2}, "Auxin reception":{"length":0.5,"weight":2}, "Plasmid diffusion":{"length":0.5,"weight":2}, "Model integration":{"length":0.5,"weight":2}, "Parameters measurements":{"length":0.5,"weight":2} },
"GoldenBricksxxxxxxxx":{},
"Human Practicexxxxxx":{ "Hi Xenope!":{"length":0.5,"weight":2}, "Be a chassis?":{"length":0.5,"weight":2}, "Free the frogs!":{"length":0.5,"weight":2}, "A chassis, really?":{"length":0.5,"weight":2}, "Work with Xenopus again?":{"length":0.5,"weight":2}, "What the laws says...":{"length":0.5,"weight":2} },
"The Teamxxxxxxxxxxxx":{ "Our Team":{"length":0.5,"weight":2}, "Our Sponsors":{"length":0.5,"weight":2}, "Attributions":{"length":0.5,"weight":2}, "Official profile":{"length":0.5,"weight":2}, "Collaborations":{"length":0.5,"weight":2} } } }
/*Thibault END*/
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)