Component Simulation Code
Bipolar Stepper Motor (NEMA 17) (SIM TEST) Simulation Source Code Example

Explore the source code for simulating the Bipolar Stepper Motor (NEMA 17) (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.
UI (html)
UI Script (ts)
Simulation State (json)
Simulation Logic (ts)
<svg width="255.7086px" height="279.33075px" version="1.1"
    [attr.viewBox]="'0 0 ' + ((1 + component.frameSize) * component.mmToPix) + ' ' + ((5 + component.frameSize) * component.mmToPix)"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient id="frame-gradient" [attr.x1]="- (component.frameSize * 0.2)"
            [attr.x2]="component.frameSize * 2" [attr.y1]="component.frameSize" [attr.y2]="component.frameSize"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#666" offset="0" />
            <stop stop-color="#fff" offset="1" />
        </linearGradient>
        <linearGradient id="shaft-gradient" x1="0" x2="0" y1="-5" y2="5" gradientUnits="userSpaceOnUse">
            <stop stop-color="#9d9d9d" offset="0" />
            <stop stop-color="#9d9d9d" stop-opacity="0" offset="1" />
        </linearGradient>
        <linearGradient id="body-gradient" [attr.x1]="component.frameSize * 0.1" [attr.x2]="component.frameSize * 0.7"
            [attr.y1]="component.frameSize" [attr.y2]="component.frameSize" gradientUnits="userSpaceOnUse">
            <stop stop-color="#9d9d9d" offset="0" />
            <stop stop-color="#fdfafa" offset=".29501" />
            <stop offset="1" stop-color="#2a2a2a" />
        </linearGradient>
    </defs>
    <!-- Body -->
    <g transform="translate(1,1)">
        <g [attr.transform]="'scale(' + component.mmToPix + ')'">
            <!-- Pins -->
            <path id="pin"
                [attr.transform]="'translate(' + (component.halfFrame - 3.75) + ' ' + component.frameSize + ')'"
                fill="#9f9f9f" d="m 0 0 c .5 0 .5 0 .5 .5 v 4.55 c -.5 .5 -.5 .5 -1 0 v -4.5 c 0 -.5 0 -.5 .5 -.5" />
            <use xlink:href="#pin" x="2.54" />
            <use xlink:href="#pin" x="5.08" />
            <use xlink:href="#pin" x="7.62" />

            <g stroke-linecap="round" stroke-linejoin="round">
                <rect [attr.width]="component.frameSize" [attr.height]="component.frameSize"
                    [attr.rx]="component.cornerRadius" [attr.ry]="component.cornerRadius" fill="url(#frame-gradient)"
                    stroke="#000" stroke-width=".3245" />
                <circle [attr.cx]="component.cornerOffset" [attr.cy]="component.cornerOffset"
                    [attr.r]="component.outerHoleRadius" fill="#666" />
                <circle [attr.cx]="component.cornerOffset" [attr.cy]="component.cornerOffset"
                    [attr.r]="component.innerHoleRadius" fill="#e6e6e6" />
                <circle [attr.cx]="component.frameSize - component.cornerOffset" [attr.cy]="component.cornerOffset"
                    [attr.r]="component.outerHoleRadius" fill="#666" />
                <circle [attr.cx]="component.frameSize - component.cornerOffset" [attr.cy]="component.cornerOffset"
                    [attr.r]="component.innerHoleRadius" fill="#e6e6e6" />
                <circle [attr.cx]="component.cornerOffset" [attr.cy]="component.frameSize - component.cornerOffset"
                    [attr.r]="component.outerHoleRadius" fill="#666" />
                <circle [attr.cx]="component.cornerOffset" [attr.cy]="component.frameSize - component.cornerOffset"
                    [attr.r]="component.innerHoleRadius" fill="#e6e6e6" />
                <circle [attr.cx]="component.frameSize - component.cornerOffset"
                    [attr.cy]="component.frameSize - component.cornerOffset" [attr.r]="component.outerHoleRadius"
                    fill="#666" />
                <circle [attr.cx]="component.frameSize - component.cornerOffset"
                    [attr.cy]="component.frameSize - component.cornerOffset" [attr.r]="component.innerHoleRadius"
                    fill="#e6e6e6" />
            </g>

            <!-- motor body -->
            <circle [attr.cx]="component.halfFrame" [attr.cy]="component.halfFrame" [attr.r]="component.bodyRadius"
                fill="#868686" fill-opacity=".89602" opacity=".73" stroke="url(#body-gradient)"
                stroke-width="1.41429" />
            <!-- Rotator -->
            <g>
                <path id="shaft-path"
                    [attr.transform]="'translate(' + component.halfFrame + ', ' + component.halfFrame + ') rotate(' + component.getAngle() + ') translate(0, 0)'"
                    [attr.d]="'m -' + component.halfShaft + ' -' + component.rOff + ' a ' + component.shaftRadius + ' ' + component.shaftRadius + ' 0 1 0 ' + component.shaftRadius + ' 0 z'"
                    fill="#4d4d4d" stroke="url(#shaft-gradient)" stroke-width=".57968" />
            </g>

            <!-- Text -->
            <text font-family="arial" font-size="14.667px" text-align="center" text-anchor="middle">
                <tspan [attr.x]="component.halfFrame" [attr.y]="component.valueYPosition"
                    [attr.font-size]="(component.textSize / component.mmToPix) + 'px'">
                    {{ component.getDisplayPosition() }}
                </tspan>
                <tspan [attr.x]="component.halfFrame" [attr.y]="component.unitsYPosition"
                    [attr.font-size]="(0.7 * component.textSize / component.mmToPix) + 'px'">
                    {{ component.getDisplayPositionUnits() }}
                </tspan>
            </text>
        </g>
    </g>
</svg>