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

Trimmer Potentiometer Simulation Source Code Example

Explore the source code for simulating the Trimmer Potentiometer 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 {
        pointer-events: none;
    }
    .knob circle,
    .knob rect {
        pointer-events: auto;
    }
</style>

<svg
    width="100%"
    height="100%"
    viewBox="0 0 37 49.382"
    style="position: absolute; cursor: pointer;"
    xmlns="http://www.w3.org/2000/svg"
    (mousedown)="component.onMousedown($event)">
    <g [attr.transform]="'rotate(' + component.getPotAngle() + ' 18.5 24.5)'" class="knob">
        <!-- 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" />
    </g>
</svg>