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

Trimmer Potentiometer (SIM TEST) Simulation Source Code Example

Explore the source code for simulating the Trimmer Potentiometer (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. 
<style>
    .knob {
        transform-origin: 18.5px 24.5px;
        /* Center of the knob based on its cx and cy */
        pointer-events: none;
    }

    .knob circle,
    .knob rect {
        pointer-events: auto;
    }
</style>

<svg style="position: absolute; cursor: pointer;" xmlns="http://www.w3.org/2000/svg"
    [attr.transform]="'rotate(' + component.getPotAngle() + ')'" class="knob"
    (mousedown)="component.onMousedown($event)">
    <!-- Outer Circle -->
    <circle cx="18.5" cy="24.5" r="17.9" fill="black" />

    <!-- Inner Circle -->
    <circle cx="18.5" cy="24.5" r=15 fill="rgba(228,232,235,255)" />

    <!-- Knob -->
    <rect x="17.5" y="12" width="2" height="8" fill="#000" />
</svg>