<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<title>WireIt: How to use Wire and Terminals definitions</title>
<!-- Libs -->
<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>
<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
<style>
div.WireIt-Terminal {
margin: 20px 8px;
}
div.blockBox {
width: 200px;
height: 200px;
margin: 30px;
float: left;
position: relative;
z-index: 5;
/*background-color: rgb(255,200,200);*/
border: 1px solid #aaa;
opacity: 0.8;
padding: 10px;
font-weight: bold;
}
</style>
<script>
window.onload = function() {
var block1 = YAHOO.util.Dom.get('block1');
new WireIt.Terminal(block1, {offsetPosition:[30,30] });
var block2 = YAHOO.util.Dom.get('block2');
new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.BezierWire"}, offsetPosition:[30,30] });
new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.StepWire"}, offsetPosition:[100,30] });
new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.BezierArrowWire"}, offsetPosition:[30,100] });
new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.ArrowWire"}, offsetPosition:[100,100] });
var block3 = YAHOO.util.Dom.get('block3');
new WireIt.Terminal(block3, { direction: [-1,-1], offsetPosition:[30,30] });
new WireIt.Terminal(block3, { direction: [1,-1], offsetPosition:[100,30] });
new WireIt.Terminal(block3, { direction: [-1,1], offsetPosition:[30,100] });
new WireIt.Terminal(block3, { direction: [1,1], offsetPosition:[100,100] });
var block4 = YAHOO.util.Dom.get('block4');
new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[30,30],
wireConfig:{color: "#EEEE11", bordercolor:"#FFFF00"} });
new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[100,30],
wireConfig:{color: "#EE1111", bordercolor:"#FF0000"} });
new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[100,100],
wireConfig:{color: "#EE11EE", bordercolor:"#FF00FF"} });
var block5 = YAHOO.util.Dom.get('block5');
new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[30,30],
wireConfig:{width: 5, borderwidth:3} });
new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[100,100],
wireConfig:{width: 4, borderwidth:0} });
new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[100,30],
wireConfig:{width: 1, borderwidth:0} });
new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[30,100],
wireConfig:{width: 1, borderwidth:4} });
var block6 = YAHOO.util.Dom.get('block6');
new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [1,0], offsetPosition:[30,30] });
new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [0,1], offsetPosition:[100,30] });
new WireIt.Terminal(block6, { direction: [0,1], fakeDirection: [0,1], offsetPosition:[30,100] });
new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [0,-1], offsetPosition:[100,100] });
var block7 = YAHOO.util.Dom.get('block7');
var w1 = new WireIt.Wire(
new WireIt.Terminal(block7, {offsetPosition:[30,30], editable: false }),
new WireIt.Terminal(block7, {offsetPosition:[100,30], editable: false }),
document.body);
w1.redraw();
var block8 = YAHOO.util.Dom.get('block8');
new WireIt.Terminal(block8, { nMaxWires: 1, offsetPosition:[30,30] });
new WireIt.Terminal(block8, { nMaxWires: 2, offsetPosition:[100,30] });
new WireIt.Terminal(block8, { nMaxWires: 3, offsetPosition:[30,100] });
};
</script>
</head>
<body>
<p style="margin: 30px;"><a href="../index.html">< Back</a></p>
<p style="margin: 5px 30px;">This page presents the various options on the terminals and wires. Try to create some wires from each terminal. Look at the source to see how to use them.</p>
<div id='block1' class="blockBox">
1. Default options
</div>
<div id='block2' class="blockBox">
2. Drawing methods (bezier,straight,bezierArrows,arrows)
</div>
<div id='block3' class="blockBox">
3. Changing directions
</div>
<div id='block4' class="blockBox">
4. Changing colors
</div>
<div id='block5' class="blockBox">
5. Changing the size of the wire
</div>
<div id='block6' class="blockBox">
6. Using different editing direction
</div>
<div id='block7' class="blockBox">
7. Not editable
</div>
<div id='block8' class="blockBox">
8. Maximum number of wires (1,2,3)
</div>
</body>
</html>