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.

Attributes

Attribute Type Example Description
start point _Start+5x+10y Start position.
end point _Start+5x+10y End position.
thickness integer 2 Thickness of the line (default: 2).

Italic attributes are optional. Other attributes are required.

Examples

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

Rectangle

This command draws a rectangle.

Attributes

Attribute Type Example Description
x coordinate _Start+10 Top left x coordinate.
y coordinate _Start+10 Top left y coordinate.
width integer 10 Width of the rectangle.
height integer 10 Height of the rectangle.
fill boolean true Whether the rectangle should be filled (default: false).

Italic attributes are optional. Other attributes are required.

Examples

<rect x="_Start-8" y="_Middle-20" width="16" height="40" />
<rect x="_Start-22" y="_Middle+10" width="16" height="40" fill="true" />

Ellipse

This command draws an ellipse or circle.

Attributes

Attribute Type Example Description
centre point _Start+5x+10y Position of the centre of the ellipse.
rx integer 10 Radius in the x-axis.
ry integer 10 Radius in the y-axis.
fill boolean true Whether the ellipse should be filled (default: false).

Italic attributes are optional. Other attributes are required.

Examples

<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