appear.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <html>
  2. <head>
  3. <title>Editing subcircuit appearance</title>
  4. </head>
  5. <body bgcolor="FFFFFF">
  6. <h1>Editing subcircuit appearance</h1>
  7. <h2>Default appearance</h2>
  8. <p>By default, when a subcircuit is placed within a larger circuit, it is drawn
  9. as a rectangle with a notch indicating the north end of the subcircuit's
  10. layout. Pins will be placed on the rectangle's border based on their facing:
  11. Pins that face east in the layout (and typically appear on the west side
  12. of the layout) will be placed on the rectangle's west side,
  13. according to their top-down ordering in the layout.
  14. Pins that face south in the layout (typically toward the north side of the layout)
  15. will be placed on the rectangle's north side, according to the left-to-right
  16. ordering in the layout.</p>
  17. <p>The default rectangle can optionally include some letters that will appear
  18. in the middle of the rectangle. To specify this, select the selection tool
  19. (<img src="../../../../en/icons/select.gif" width="16" height="16">) and click the background of the circuit's
  20. layout. This will show the circuit attributes in the attribute table, including
  21. the Shared Label, Shared Label Facing, and Shared Label Font attributes.
  22. The value of the Shared Label attribute will be drawn in the rectangle's center;
  23. the Shared Label Facing attribute customizes which direction the text is drawn,
  24. and of course the Shared Label Font attribute customizes the font used.</p>
  25. <h2>Customized appearance</h2>
  26. <p>The default appearance is very usable, and indeed Logisim existed for many
  27. years with no other option. If, however, you prefer that the subcircuit be
  28. drawn differently, you can select <q>Edit Circuit Appearance</q> from the
  29. Project menu, and Logisim's interface will switch from its regular
  30. layout-editing interface to an interface for drawing the circuit's
  31. appearance.
  32. (You can also click the far-right icon (<img src="../../../../en/icons/projapp.gif" width="16" height="16">)
  33. in the explorer pane's upper toolbar.)
  34. Below, we are editing the 2:1 multiplexer's appearance so that
  35. it is drawn with the usual trapezoid rather than a rectangle.</p>
  36. <blockquote><img src="../../../../en/img-guide/subcirc-custom-appear.png" width="393" height="285"></blockquote>
  37. <p>With the appearance for the 2:1 multiplexer drawn as above,
  38. the layout for the 4:1 multiplexer would then appear as the following.</p>
  39. <blockquote><img src="../../../../en/img-guide/subcirc-custom-layout.png" width="393" height="285"></blockquote>
  40. <p>The appearance editor is like a traditional drawing program, but there
  41. are a few special symbols for indicating how the drawing works when placed
  42. into a circuit's layout. These special symbols cannot be removed.</p>
  43. <ul>
  44. <li><p>The green circle with a line coming out of it, which we'll call the <q>anchor.</q>
  45. There is exactly one anchor in each subcircuit appearance.
  46. Each component in a circuit has a single point identifying its location;
  47. a user sees this when creating a new component:
  48. The mouse click identifies just a single location, and the component is placed
  49. relative to that (usually with the primary output at the mouse's location)
  50. The anchor identifies the mouse's location relative to the overall drawing
  51. when the subcircuit is created.</p>
  52. <p>The anchor also identifies the appearance's facing, as indicated by the
  53. direction the anchor's line points from its circle. When placing the subcircuit
  54. into a layout, the user can change the subcircuit's facing; the anchor's facing
  55. indicates in which direction the appearance is oriented. In our example, the
  56. anchor is facing east, and each instance of the subcircuit in the 4:1 multiplexer
  57. is also facing east, so they are all drawn in the same orientation as the 2:1
  58. multiplexer's appearance.</p></li>
  59. <li><p>The blue circles and squares with dots in them are the subcircuit's
  60. <q>ports.</q> There are exactly as many ports as there are input and output
  61. pins in the circuit.
  62. Ports corresponding to inputs are drawn as squares, while ports corresponding
  63. to outputs are drawn as circles.
  64. Each port indicates how a wire connecting into the
  65. circuit will correspond to an input or output pin within the layout.</p>
  66. <p>When you select a port, Logisim will indicate the corresponding pin
  67. by popping up a miniature diagram of the layout in the window's bottom right
  68. corner, with the corresponding pin(s) drawn in blue. This does not happen when
  69. all ports are selected.</p></li>
  70. </ul>
  71. <p>The toolbar contains tools for adding additional shapes, as listed below
  72. with descriptions of how the shift and alt key modifies the tool behavior. In
  73. addition, clicking or dragging the mouse with the control key pressed regularly
  74. snaps the mouse position to the nearest grid point.</p>
  75. <table><tbody>
  76. <tr><td valign="top"><img src="../../../../en/icons/select.gif" width="16" height="16"></td>
  77. <td>Select, move, copy, and paste shapes.</td></tr>
  78. <tr><td valign="top"><img src="../../../../en/icons/text.gif" width="16" height="16"></td>
  79. <td>Add or edit text.</td></tr>
  80. <tr><td valign="top"><img src="../../../../en/icons/drawline.gif" width="16" height="16"></td>
  81. <td>Create a line segment. Shift-drag keeps the line's angle at a multiple of 45&deg;.</td></tr>
  82. <tr><td valign="top"><img src="../../../../en/icons/drawcurv.gif" width="16" height="16"></td>
  83. <td>Create a quadratic Bezier curve.
  84. For the first drag, where you specify the curve's endpoints,
  85. shift-drag keeps the endpoints at an angle that is a multiple of 45&deg;.
  86. Then you click to indicate the control point's location;
  87. shift-click ensures the curve is symmetric,
  88. while alt-click draws the curve through the control point.</td></tr>
  89. <tr><td valign="top"><img src="../../../../en/icons/drawplin.gif" width="16" height="16"></td>
  90. <td>Create a sequence of connected lines, whose vertices are indicated by
  91. a succession of clicks. Shift-clicking ensures that the angle between the
  92. previous vertex and the current one is a multiple of 45&deg;.
  93. Double-click or press the Enter key to complete the
  94. shape.</td></tr>
  95. <tr><td valign="top"><img src="../../../../en/icons/drawrect.gif" width="16" height="16"></td>
  96. <td>Create a rectangle through dragging from one corner to the opposite corner.
  97. Shift-drag to create a square, and alt-drag to create the rectangle starting
  98. from the center.</td></tr>
  99. <tr><td valign="top"><img src="../../../../en/icons/drawrrct.gif" width="16" height="16"></td>
  100. <td>Create a rectangle with rounded corners through dragging from one corner to the opposite corner.
  101. Shift-drag to create a square, and alt-drag to create the rectangle starting
  102. from the center.</td></tr>
  103. <tr><td valign="top"><img src="../../../../en/icons/drawoval.gif" width="16" height="16"></td>
  104. <td>Create an oval through dragging from one corner of its bounding box to the opposite corner.
  105. Shift-drag to create a circle, and alt-drag to create the oval starting
  106. from the center.</td></tr>
  107. <tr><td valign="top"><img src="../../../../en/icons/drawpoly.gif" width="16" height="16"></td>
  108. <td>Create an arbitrary polygon, whose vertices are indicated by
  109. a succession of clicks. Shift-clicking ensures that the vertex is at a 45&deg;
  110. angle from the previous one. Double-click, press the Enter key, or click the
  111. starting vertex to complete the shape.</td></tr>
  112. </tbody></table>
  113. <p><strong>Next:</strong> <a href="debug.html">Debugging subcircuits</a>.</p>
  114. </body>
  115. </html>