Helix SwarmHelix Swarm

wires_and_terminals.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • examples/
  • wires_and_terminals.html #1
  • View
  • Commits
  • Open Download .zip Download (5 KB) 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <html>
  3.  <head>
  4.   <title>WireIt: How to use Wire and Terminals definitions</title>
  5.   
  6. <!-- Libs -->
  7. <link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
  8. <script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
  9. <script type="text/javascript" src="../lib/excanvas.js"></script>
  10.  
  11. <!-- WireIt -->
  12. <script type="text/javascript" src="../build/wireit-min.js"></script>
  13. <link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
  14.  
  15. <style>
  16.  
  17. div.WireIt-Terminal {
  18. 	margin: 20px 8px;
  19. }
  20.  
  21. div.blockBox {
  22. 	width: 200px;
  23. 	height: 200px;
  24. 	margin: 30px;
  25. 	float: left;
  26. 	position: relative;
  27. 	z-index: 5;
  28. 	/*background-color: rgb(255,200,200);*/
  29. 	border: 1px solid #aaa;
  30. 	opacity: 0.8;
  31. 	padding: 10px;
  32. 	font-weight: bold;
  33. }
  34.  
  35. </style>
  36. <script>
  37.  
  38. window.onload = function() {
  39. 	
  40. 	var block1 = YAHOO.util.Dom.get('block1');
  41. 	new WireIt.Terminal(block1, {offsetPosition:[30,30] });
  42. 	
  43. 	
  44. 	var block2 = YAHOO.util.Dom.get('block2');
  45. 	new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.BezierWire"}, offsetPosition:[30,30] });
  46. 	new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.StepWire"}, offsetPosition:[100,30] });
  47. 	new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.BezierArrowWire"}, offsetPosition:[30,100] });
  48. 	new WireIt.Terminal(block2, { wireConfig: { xtype: "WireIt.ArrowWire"}, offsetPosition:[100,100] });
  49. 	
  50. 	
  51. 	var block3 = YAHOO.util.Dom.get('block3');
  52. 	new WireIt.Terminal(block3, { direction: [-1,-1], offsetPosition:[30,30] });
  53. 	new WireIt.Terminal(block3, { direction: [1,-1], offsetPosition:[100,30] });
  54. 	new WireIt.Terminal(block3, { direction: [-1,1], offsetPosition:[30,100] });
  55. 	new WireIt.Terminal(block3, { direction: [1,1], offsetPosition:[100,100] });
  56. 	
  57. 	
  58. 	var block4 = YAHOO.util.Dom.get('block4');
  59. 	new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[30,30], 
  60. 												wireConfig:{color: "#EEEE11", bordercolor:"#FFFF00"} });
  61. 	new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[100,30], 
  62. 												wireConfig:{color: "#EE1111", bordercolor:"#FF0000"} });
  63. 	new WireIt.Terminal(block4, {direction: [1,0], offsetPosition:[100,100], 
  64. 												wireConfig:{color: "#EE11EE", bordercolor:"#FF00FF"} });
  65. 	
  66. 	
  67. 	var block5 = YAHOO.util.Dom.get('block5');
  68. 	new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[30,30], 
  69. 												wireConfig:{width: 5, borderwidth:3} });	
  70. 	new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[100,100], 
  71. 												wireConfig:{width: 4, borderwidth:0} });
  72. 	new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[100,30], 
  73. 												wireConfig:{width: 1, borderwidth:0} });
  74. 	new WireIt.Terminal(block5, {direction: [1,0], offsetPosition:[30,100], 
  75. 												wireConfig:{width: 1, borderwidth:4} });
  76.  
  77.  
  78. 	var block6 = YAHOO.util.Dom.get('block6');
  79. 	new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [1,0], offsetPosition:[30,30] });
  80. 	new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [0,1], offsetPosition:[100,30] });
  81. 	new WireIt.Terminal(block6, { direction: [0,1], fakeDirection: [0,1], offsetPosition:[30,100] });
  82. 	new WireIt.Terminal(block6, { direction: [1,0], fakeDirection: [0,-1], offsetPosition:[100,100] });
  83.  
  84. 	
  85. 	var block7 = YAHOO.util.Dom.get('block7');
  86. 	var w1 = new WireIt.Wire(
  87. 		new WireIt.Terminal(block7, {offsetPosition:[30,30], editable: false }),
  88. 		new WireIt.Terminal(block7, {offsetPosition:[100,30], editable: false }), 
  89. 		document.body);
  90. 	w1.redraw();
  91. 	
  92. 	
  93. 	var block8 = YAHOO.util.Dom.get('block8');
  94. 	new WireIt.Terminal(block8, { nMaxWires: 1, offsetPosition:[30,30] });
  95. 	new WireIt.Terminal(block8, { nMaxWires: 2, offsetPosition:[100,30] });
  96. 	new WireIt.Terminal(block8, { nMaxWires: 3, offsetPosition:[30,100] });
  97. 	
  98. };
  99. </script>
  100.  
  101.  </head>
  102.  <body>
  103. 	<p style="margin: 30px;"><a href="../index.html">&lt; Back</a></p>
  104. 	<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>
  105. 	
  106. 	<div id='block1' class="blockBox">
  107. 		1. Default options
  108. 	</div>
  109. 	
  110. 	<div id='block2'  class="blockBox">
  111. 		2. Drawing methods (bezier,straight,bezierArrows,arrows)
  112. 	</div>
  113. 	
  114. 	<div id='block3' class="blockBox">
  115. 		3. Changing directions
  116. 	</div>
  117. 	
  118. 	<div id='block4'  class="blockBox">
  119. 		4. Changing colors
  120. 	</div>
  121.  
  122. 	<div id='block5'  class="blockBox">
  123. 		5. Changing the size of the wire
  124. 	</div>
  125. 	
  126. 	<div id='block6'  class="blockBox">
  127. 		6. Using different editing direction
  128. 	</div>
  129. 	
  130. 	<div id='block7'  class="blockBox">
  131. 		7. Not editable
  132. 	</div>
  133. 	
  134. 	<div id='block8'  class="blockBox">
  135. 		8. Maximum number of wires (1,2,3)
  136. 	</div>
  137.  
  138.  </body>
  139. </html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/wires_and_terminals.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago