Cirkit Designer Logo
Cirkit Designer
Your all-in-one circuit design IDE
Home / 
Component Simulation Code

DIP (SIM TEST) Simulation Source Code Example

Explore the source code for simulating the DIP (SIM TEST) in Cirkit Designer. Use this example as a starting point to learn about, customize, or extend the component's behavior in your own designs.

This tab defines the visual layout of your custom component using HTML. You can specify how your component appears in the circuit, including interactive elements that respond to user input. 
<svg version="1.1" width="129.45px" viewBox="0 0 82.87 55.355" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="switch" transform="translate(-66.856 -41.367)" fill="#fffef4" stroke-linecap="round"
            stroke-linejoin="round" stroke-width=".77094"
            d="m72.096 69.764s1.3376 0.38247 2.1066 0.39196c0.76893 0.0095 2.44-0.39196 2.44-0.39196 0.39596-0.06361 0.72389 0.32286 0.72389 0.72389v4.3678c0 0.40104-0.52337 0.72389-0.72389 0.72389s-1.6592-0.41225-2.4288-0.40316c-0.76958 0.0091-2.1177 0.40316-2.1177 0.40316-0.39396 0.075-0.72389-0.32286-0.72389-0.72389v-4.3678c0-0.40104 0.32286-0.72389 0.72389-0.72389z" />
    </defs>

    <!-- Pins -->
    <g transform="translate(-66.856 -41.367)" fill="#454837" fill-opacity=".49194" stroke-linecap="round"
        stroke-linejoin="round" stroke-width=".76744">
        <rect x="73" y="87" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="82.6" y="87" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="92.2" y="87" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="101.8" y="87" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="111.4" y="87" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="121" y="87" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="130.6" y="87" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="140.2" y="87" width="2" height="6.5" rx=".7" ry=".7" />

        <rect x="73" y="44.4" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="82.6" y="44.4" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="92.2" y="44.4" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="101.8" y="44.4" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="111.4" y="44.4" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="121" y="44.4" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="130.6" y="44.4" width="2" height="6.5" rx=".7" ry=".7" />
        <rect x="140.2" y="44.4" width="2" height="6.5" rx=".7" ry=".7" />
    </g>

    <!-- Board -->
    <rect x="0" y="8.5" width="90.5" height="38.0831" fill="#d72c2c" />

    <!-- Text -->
    <text fill="#fffef4" font-family="sans-serif" font-size="7.66px" style="line-height:1.25">
        <tspan x="6.340" y="18.03">ON</tspan>
        <tspan x="4.35" y="43.28">1</tspan>
        <tspan x="14.485" y="43.28">2</tspan>
        <tspan x="23.956" y="43.28">3</tspan>
        <tspan x="33.57" y="43.28">4</tspan>
        <tspan x="43.05" y="43.28">5</tspan>
        <tspan x="52.36" y="43.28">6</tspan>
        <tspan x="62.45" y="43.28">7</tspan>
        <tspan x="71.92" y="43.28">8</tspan>
    </text>

    <!-- Switches Group -->
    <g *ngFor="let idx of [1,2,3,4,5,6,7,8];" (click)="component.toggleSwitch(idx)" style="cursor: pointer;">
        <!-- Base rectangle for the switch body -->
        <rect [attr.x]="4.693 + (idx - 1)*9.6" y="21.2" width="5.8168" height="13" fill="#917c6f" />

        <!-- The switch itself -->
        <!-- If 'isButtonXOn' is true, we might translate the switch up/down or rotate it -->
        <use xlink:href="#switch" [attr.x]="(idx - 1) * 9.6" [attr.y]="component.isSwitchOn(idx) ? -7.2 : 0"
            fill="#fffef4" />
    </g>
</svg>