Download raw (2.4 KB)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="src/pathformer.js"></script>
<script src="src/vivus.js"></script>
<title>Test vivus</title>
<style>
#discrimination{
left:10px;
position:absolute;
top:10px;
}
#discrimination_infos{
background:white;
border:1px solid rgb(0,255,0);
font-size:10px;
display:none;
left:214px;
padding:5px;
position:absolute;
top:10px;
width:150px;
}
#connector01{
left:80px;
position:absolute;
top:40px;
}
#table01{
left:180px;
position:absolute;
top:200px;
}
</style>
</head>
<body>
<div id="discrimination"><object id="discrimination-svg" type="image/svg+xml" data="discrimination.svg"></object></div>
<div id="discrimination_infos">Genrimages propose des annotations visuelles. Les éléments discriminatoires d'une image sont isolés et mis en évidence dans l'image elle-même.</div>
<div id="connector01"><object id="connector01-svg" type="image/svg+xml" data="connector-001.svg"></object></div>
<div id="table01"><object id="table01-svg" type="image/svg+xml" data="table-01.svg"></object></div>
<script>
var cnt=0;
var ar_elems=[];
var elem=new Vivus('discrimination-svg',{start:'manual',duration: 400, type: 'oneByOne', animTimingFunction: Vivus.EASE, onReady: function (myEl) {
myEl.play();cnt++;
}}, nextElem);
elem.hgl='rect01';
elem.hgl_col='green';
elem.infos='discrimination_infos';
ar_elems.push(elem);
var elem=new Vivus('connector01-svg',{start:'manual',duration: 200, type: 'oneByOne', animTimingFunction: Vivus.EASE}, nextElem);
ar_elems.push(elem);
var elem=new Vivus('table01-svg', {start:'manual',duration: 100, type: 'oneByOne', animTimingFunction: Vivus.EASE}, nextElem);
elem.hgl='table01';
elem.hgl_col='green';
ar_elems.push(elem);
function nextElem(){
console.log(this);
if(this.hgl){
this.el.getElementById(this.hgl).style.fill=this.hgl_col;
console.log(this.el.getElementById(this.hgl).style);
}
if(this.infos){
document.getElementById(this.infos).style.display='block';
}
ar_elems[cnt].play();
cnt++;
}
//ar_elems[0].play();
</script>
</body>
</html>