Helix SwarmHelix Swarm
Loading...

layer.html

  • //
  • guest/
  • christiane_renck/
  • mergequestjs/
  • main/
  • demos/
  • WireIt/
  • examples/
  • layer.html #1
  • View
  • Commits
  • Open Download .zip Download (2 KB) 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <html>
  3.  <head>
  4.   <title>WireIt: How to use the Layer</title>
  5.   
  6. <!-- YUI CSS -->
  7. <link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css" /> 
  8.  
  9. <!-- WireIt CSS -->
  10. <link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />
  11.  
  12. <!-- YUI -->
  13. <script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
  14.  
  15. <script type="text/javascript" src="../lib/excanvas.js"></script>
  16.  
  17. <!-- WireIt -->
  18. <script type="text/javascript" src="../build/wireit-min.js"></script>
  19.  
  20. <style>
  21. body {
  22. 	font-size: 10px;
  23. }
  24. div.WireIt-Container {
  25. 	width: 350px; /* Prevent the modules from scratching on the right */
  26. }
  27. div.WireIt-ImageContainer { width: auto; }
  28.  
  29. div.Bubble div.body {
  30. 	width: 70px;
  31. 	height: 45px;
  32. 	opacity: 0.8;
  33. 	/*cursor: move;*/
  34. }
  35.  
  36. </style>
  37.  
  38. </head>
  39. <body>
  40. 	
  41. <script>
  42.  
  43. 	var demoLayer;
  44.  
  45. 	YAHOO.util.Event.addListener(window, 'load', function() {
  46. 		
  47. 		// Layer Demo
  48. 	  demoLayer = new WireIt.Layer({layerMap: false});
  49. 		
  50. 		// You can use a global setWiring method	
  51. 		demoLayer.setWiring({
  52. 			containers: [
  53. 		
  54. 			  // ImageContainer
  55. 				{
  56. 					position:[600,240],
  57. 					"xtype":"WireIt.ImageContainer", 
  58. 					"image": "bubble.png",
  59. 					draggable: false,
  60. 					close: false,
  61. 	 				"terminals": [
  62. 	 					{"name": "_INPUT1", direction: [-1,-1], offsetPosition: [-10,-10], editable: false},
  63. 						{direction: [1,-1], offsetPosition: [25,-10]},
  64. 						{direction: [-1,1], offsetPosition: [-10,25]},
  65. 						{direction: [1,1], offsetPosition: [25,25]}
  66. 	 				]
  67. 				},
  68. 				
  69. 				// ImageContainer
  70. 				{
  71. 					position:[700,140],
  72. 					"xtype":"WireIt.ImageContainer", 
  73. 					className: "WireIt-Container WireIt-ImageContainer Bubble",
  74. 					"image": "bubble.png",
  75. 					draggable: false,
  76. 					close: false,
  77.  					"terminals": [
  78. 							{"name": "_INPUT1", direction: [-1,-1], offsetPosition: [-10,-10], editable: false},
  79. 							{direction: [1,-1], offsetPosition: [25,-10]},
  80. 							{direction: [-1,1], offsetPosition: [-10,25]},
  81. 							{direction: [1,1], offsetPosition: [25,25]}
  82. 					]
  83. 				}
  84. 			],
  85. 			
  86. 			
  87. 			wires: [
  88. 				{
  89. 					src: {
  90. 						moduleId: 0,
  91. 						terminal: "_INPUT1"
  92. 					},
  93. 					tgt: {
  94. 						moduleId: 1,
  95. 						terminal: "_INPUT1"
  96. 					},
  97. 					
  98. 					xtype: "WireIt.BezierWire"
  99. 				}
  100. 			]
  101. 			
  102. 		});
  103.  
  104. 	});
  105. </script>
  106. </body>
  107. </html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s) 9 years ago
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/examples/layer.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop. 9 years ago