Componentsbeta for Circuit Diagram

Render

The render section tells Circuit Diagram what your component should look like. The render section is made up of a <render> tag, which contains a number of groups (similar to the connections section) with conditions, where each group contains one or more render commands.

<render>
    <group conditions="CONDITIONS">
        (render commands here)
    </group>
</render>

Render commands allow you to draw the following: line, rectangle, ellipse, text and path.

Line

The line is the simplest render command, drawing a straight line between two points, and having only two attributes: start and end.

These both follow the same syntax as the start and end used for connections.

<line start="_Start" end="_Middle-20x" />

Rectangle

This command draws a rectangle, allowing you to specify:

  • x starting coordinate
  • y starting coordinate
  • width
  • height
  • whether the rectangle should be filled
<rect x="_Start-8x" y="_Middle-20y" width="16" height="40" />
<rect x="_Start-22x" y="_Middle+10y" width="16" height="40" fill="true" />

Ellipse

This command draws an ellipse (or circle), allowing you to specify:

  • centre
  • x radius
  • y radius
  • whether the ellipse should be filled
<ellipse centre="_Middle" rx="26" ry="26" />
<ellipse centre="_Middle" rx="26" ry="26" fill="true" />

Text

This command draws a piece of text. The text to be drawn can either be static text, or a single property name preceeded by a dollar symbol.

When displaying a property, you cannot add any additional text to it. This can instead be achieved using property formatting described earlier.

<text value="$Resistance" x="_Middle" y="_Start-17" align="CentreCentre" />

The attributes are:

  • value - the text or property to render
  • x - the x-coordinate
  • y - the y-coordinate
  • align - where the anchor point should be:
    • The first word gives the vertical location, any one of:
      • Top
      • Centre
      • Bottom
    • The second word gives the horizontal location, any one of:
      • Left
      • Centre
      • Right

Path

The path command draws a path using svg-style syntax.

It has start, data and the optional fill="true" attributes.

<path start="_Middle-20y" data="m -26,-16 l 8,8 m 1,1 l -2,-4 l -2,2 l 4,2 l -2,-4" />

The start attribute defines where the path starts, and the data attribute contains the path information. All svg commands within the data section must be relative - use lowercase letters only.

For a tutorial on svg commands, visit this page.

Example

Below is a portion of the render section of the Resistor component.

<render>

    <!-- Standard -->
    <group conditions="horizontal">
        <line start="_Start" end="_Middle-20x" />
        <rect x="_Middle-20x" y="_Start-8y" width="40" height="16" />
        <line start="_Middle+20x" end="_End" />
    </group>
    <group conditions="horizontal,$Type!=Variable,$Type!=Thermistor,$Type!=LDR">
        <text value="$Resistance" x="_Middle" y="_Start-17" align="CentreCentre" />
    </group>
    <group conditions="!horizontal">
        <line start="_Start" end="_Middle-20y" />
        <rect x="_Start-8x" y="_Middle-20y" width="16" height="40" />
        <line start="_Middle+20y" end="_End" />
    </group>
    <group conditions="!horizontal,$Type!=Variable,$Type!=Thermistor,$Type!=LDR">
        <text value="$Resistance" x="_Start-14" y="_Middle" align="CentreRight" />
    </group>

    <!-- Potentiometer -->
    <group conditions="horizontal,$Type==Potentiometer">
        <path start="_Middle-20x" data="m 14,16 l 6,-6 l 6,6 m -6,-5 l 0,18" />
    </group>
    <group conditions="!horizontal,$Type==Potentiometer">
        <path start="_Middle-20y" data="m 16,14 l -6,6 l 6,6 m -5,-6 l 18,0" />
    </group>

    ...

</render>

Next: finishing