<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt interactive presentation</title>
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" />
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/excanvas.js"></script>
<!-- WireIt -->
<script type="text/javascript" src="../build/wireit-min.js"></script>
<script type="text/javascript" src="../js/LeftSquareArrowWire.js"></script>
<script type="text/javascript" src="../js/RightSquareArrowWire.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
<style>
body {
padding: 50px;
}
#canvas {
background-color: #FFF5DF;
border: 1px solid #B6CDE1;
padding: 1em;
width: 600px;
height: 400px;
margin-left: 200px;
}
#container {
height: 350px;
position: relative;
}
h1, h2, h3 {
color: #E76300;
font-weight: bold;
}
h1 {
margin-bottom: 10px;
font-size: 136%;
}
h2 {
margin: 10px;
}
</style>
<script>
WireIt.samples = [
{
innerHTML: '<p>This presentation will show you some features of WireIt through interactive examples.</p>'+
'<h2>Try to create a wire by "drag-dropping" the "terminals".</h2>'+
'<div style="width: 100px;"></div>',
init: function() {
var t1 = new WireIt.Terminal(SampleMgr.container, {direction: [1,0], offsetPosition:[80,100] });
var t2 = new WireIt.Terminal(SampleMgr.container, {direction: [-1,0], offsetPosition:[200,210] });
this.t1 = t1;
this.t2 = t2;
t1.eventAddWire.subscribe(function(e, args) {
var wire = args[0];
if(wire.terminal1 == t2 || wire.terminal2 == t2) {
SampleMgr.container.appendChild(WireIt.cn('h2', null, null, "Good ! Now try to cut this wire. (click on the scissors)") );
}
});
t1.eventRemoveWire.subscribe(function(e, args) {
var wire = args[0];
if(wire.terminal1 == t2 || wire.terminal2 == t2) {
var wire = args[0];
SampleMgr.container.appendChild(WireIt.cn('h2', null, null, "Perfect ! <button onclick='SampleMgr.next()'>Next</button>") );
}
});
},
unload: function() {
this.t1.remove();
this.t2.remove();
}
},
{
innerHTML: '<p>Let\'s draw some arrows</p>',
init: function() {
var wireConfig = { xtype: 'WireIt.ArrowWire' };
this.terminals = [
new WireIt.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[80,100] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[80,210] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[200,210] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[200,100] })
];
},
unload: function() {
for(var i = 0 ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
}
}
},
{
innerHTML: '<p>Let\'s draw some contributed arrows</p>',
init: function() {
var wireConfig = { xtype: 'WireIt.LeftSquareArrow', fakeDirection: [0,-1] };
this.terminals = [
new WireIt.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[80,100] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[80,210] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[200,210] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: wireConfig, offsetPosition:[200,100] })
];
},
unload: function() {
for(var i = 0 ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
}
}
},
{
innerHTML: '<p>Straight lines too</p>',
init: function() {
this.terminals = [
new WireIt.Terminal(SampleMgr.container, { wireConfig: { xtype: "WireIt.Wire"}, offsetPosition:[80,100] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: { xtype: "WireIt.Wire"}, offsetPosition:[80,210] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: { xtype: "WireIt.Wire"}, offsetPosition:[200,210] }),
new WireIt.Terminal(SampleMgr.container, { wireConfig: { xtype: "WireIt.Wire"}, offsetPosition:[200,100] })
];
},
unload: function() {
for(var i = 0 ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
}
}
},
{
innerHTML: '<p>Typed terminals</p>',
init: function() {
this.terminals = [];
var colors = ["red", "green", "blue"];
for(var x = 0 ; x < 5 ; x++) {
for(var y = 0 ; y < 4 ; y++) {
var color = colors[(x+y*5) % colors.length];
var t = new WireIt.Terminal(SampleMgr.container, {
fakeDirection: [0,1],
offsetPosition:[50+x*60,50+y*60],
ddConfig: {
type: color
}
});
YAHOO.util.Dom.setStyle(t.el, "background-color", color);
YAHOO.util.Dom.setStyle(t.el, "opacity", "0.5");
this.terminals.push(t);
}
}
},
unload: function() {
for(var i = 0 ; i < this.terminals.length ; i++) {
this.terminals[i].remove();
}
}
},
{
innerHTML: '<p>Thank you for viewing this presentation</p>'+
'<a href="..">Back to WireIt</a>',
init: function() {}
}
];
var SampleMgr = {
sampleIndex: 0,
init: function() {
this.container = YAHOO.util.Dom.get('container');
this.next();
},
previous: function() {
this.sampleIndex = Math.max(this.sampleIndex-2,0);
this.next();
},
next: function() {
if(!YAHOO.lang.isUndefined(this.lastLoaded) && YAHOO.lang.isFunction(WireIt.samples[this.lastLoaded].unload) ) {
WireIt.samples[this.lastLoaded].unload();
}
if(this.sampleIndex == WireIt.samples.length) return;
this.container.innerHTML = WireIt.samples[this.sampleIndex].innerHTML;
this.lastLoaded = this.sampleIndex;
WireIt.samples[this.sampleIndex].init();
this.sampleIndex += 1;
}
}
window.onload = function() {
SampleMgr.init();
};
</script>
</head>
<body>
<div id="canvas">
<h1>WireIt interactive presentation</h1>
<div id="container">
</div>
<button onclick="SampleMgr.previous();" href="">Previous</button> <button onclick="SampleMgr.next();" href="">Next</button>
</div>
</body>
</html>