"
Team:Evry/main-img.js
From 2012.igem.org
(Difference between revisions)
| Line 49: | Line 49: | ||
img_elem.src = node.data.url; | 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 ! | 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}) | + | gfx.oval(pt.x-w/2+1, pt.y-w/2+1, w, w, {fill:node.data.color, alpha:0}) |
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 if (node.data.shape=='dot'){ | 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.oval(pt.x-w/2+1, pt.y-w/2+1, 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}) | ||
} | } | ||
Revision as of 16:15, 26 September 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(/Goldenbricks|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+1, pt.y-w/2+1, w, w, {fill:node.data.color, alpha:0})
gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
}
else if (node.data.shape=='dot'){
gfx.oval(pt.x-w/2+1, pt.y-w/2+1, 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})
}
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 Communication','Modeling','GoldenBricks', 'Human Practice', 'The Team']) >=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 Communication','Modeling','GoldenBricks', 'Human Practices', 'The Team']
nodes:{"The French Froggies Project!":{color:"#51C215", shape:"dot", alpha:1, link:'Project', url:'ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"Xenopus as a chassis":{color:"#1A5291", shape:"dot", alpha:1, link:'FrenchFrog', url:'ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"Creation of new Xenopus plasmids":{color:CLR.level3model, alpha:0, link:'FrenchFrog#plasmid'},
"How to micro inject in Xenopus eggs":{color:CLR.level3model, alpha:0, link:'InjectionTuto'},
"Development stages":{color:CLR.level3model, alpha:0, link:'Stages'},
"Characterization of plasmids and reporters":{color:CLR.level3model, alpha:0, link:'Tadpole_injection1'},
"Hormonal Communication":{color:"#1A5291", shape:"dot", alpha:1, link:'AIDSystem', url:'ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"The auxin emmiter":{color:CLR.level3model, alpha:0, link:'AIDSystem#auxin'},
"The auxin receiver":{color:CLR.level3model, alpha:0, link:'AIDSystem#AID'},
"Auxin toxicity":{color:CLR.level3model, alpha:0, link:'AuxinTOX'},
"Auxin Uptake":{color:CLR.level3model, alpha:0, link:'auxin_uptake'},
"Modeling":{color:"#1A5291", shape:"dot", alpha:1, link:'Modeling', url:'ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"General Model":{color:CLR.level3model, alpha:0, link:'ODE_model'},
"Rigorous derivations of ODEs":{color:CLR.level3model, alpha:0, link:'auxin_pde'},
"Diffusion in a realistic geometry":{color:CLR.level3model, alpha:0, link:'Auxin_diffusion'},
"Auxin production":{color:CLR.level3model, alpha:0, link:'auxin_production'},
"Auxin reception":{color:CLR.level3model, alpha:0, link:'auxin_detection'},
"Plasmid diffusion":{color:CLR.level3model, alpha:0, link:'plasmid_splitting'},
"Model integration":{color:CLR.level3model, alpha:0, link:'model_integration'},
"GoldenBricks":{color:"#1A5291", shape:"dot", alpha:1, link:'GB', url:'ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"Human Practice":{color:"#1A5291", shape:"dot", alpha:1, link:'HumanPractice', url:'ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"Hi Xenope!":{color:CLR.level3model, alpha:0, link:'HumanPractice/Introduction'},
"Would you be my chassis?":{color:CLR.level3model, alpha:0, link:'HumanPractice/modelorganism'},
"Freed the frogs!":{color:CLR.level3model, alpha:0, link:'HumanPractice/freedthefrogs'},
"I'm a chassis, really?":{color:CLR.level3model, alpha:0, link:'HumanPractice/chassis'},
"Should we work with Xenopus again?":{color:CLR.level3model, alpha:0, link:'HumanPractice/future'},
"What the laws says...":{color:CLR.level3model, alpha:0, link:'HumanPractice/others'},
"The Team":{color:"#1A5291", shape:"dot", alpha:1, link:'Team', url:'ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
"Our Team":{color:CLR.level3model, alpha:0, link:'Team'},
"Our Sponsors":{color:CLR.level3model, alpha:0, link:'Sponsors'},
"Attributions":{color:CLR.level3model, alpha:0, link:'Attributions'},
"Official profile":{color:CLR.level3model, alpha:0, link:'https://igem.org/Team.cgi?year=2012'},
"Collaborations":{color:CLR.level3model, alpha:0, link:'Collaboration'}
},
edges:{
"The French Froggies Project!":{
"Xenopus as a chassis":{"length":0.75,"weight":2},
"Hormonal Communication":{"length":1,"weight":2},
"Modeling":{"length":0.5,"weight":2},
"GoldenBricks":{"length":1.5,"weight":2},
"Human Practice":{"length":1,"weight":2},
"The Team":{"length":0.5,"weight":2}
},
"Xenopus as a chassis":{
"Creation of new Xenopus plasmids":{"length":0.75,"weight":1},
"How to micro inject in Xenopus eggs":{"length":0.75,"weight":2},
"Development stages":{"length":0.75,"weight":2},
"Characterization of plasmids and reporters":{"length":0.75,"weight":2}
},
"Hormonal Communication":{
"The auxin emmiter":{"length":1,"weight":2},
"The auxin receiver":{"length":1,"weight":2},
"Auxin toxicity":{"length":1,"weight":2},
"Auxin Uptake":{"length":1,"weight":2}
},
"Modeling":{
"General Model":{"length":0.5,"weight":2},
"Rigorous derivations of ODEs":{"length":0.5,"weight":2},
"Diffusion in a realistic geometry":{"length":0.5,"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}
},
"GoldenBricks":{},
"Human Practice":{
"Hi Xenope!":{"length":0.5,"weight":2},
"Would you be my chassis?":{"length":0.5,"weight":2},
"Freed the frogs!":{"length":0.5,"weight":2},
"I'm a chassis, really?":{"length":0.5,"weight":2},
"Should we work with Xenopus again?":{"length":0.75,"weight":2},
"What the laws says...":{"length":0.5,"weight":2}
},
"The Team":{
"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)
