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

Analog Joystick (SIM TEST) Simulation Source Code Example

Explore the source code for simulating the Analog Joystick (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. 
<!-- component-ui.html -->
<style>
    /* Same CSS as before */
    .controls {
        opacity: 0;
        transition: opacity 0.3s;
        cursor: pointer;
    }

    #knob {
        transition: transform 0.3s;
    }

    #knob:hover~.controls,
    #knob:focus~.controls {
        opacity: 1;
    }

    .controls:hover {
        opacity: 1;
    }

    #knob:hover {
        fill: #222;
    }

    #knob:focus {
        outline: none;
        stroke: #4d90fe;
        stroke-width: 0.5;
    }

    .controls path {
        pointer-events: none;
    }

    .controls .region {
        fill: transparent;
        pointer-events: fill;
        /* entire rect is clickable */
    }

    .controls .region:hover+path {
        fill: #fff;
        /* arrow turns white on hover */
    }

    .controls circle {
        fill: #aaa;
        stroke: #aaa;
        pointer-events: fill;
        transition: fill 0.2s, stroke 0.2s;
    }

    .controls circle:hover {
        fill: #aaa;
        stroke: #fff;
    }

    .controls circle:active {
        fill: #fff;
        stroke: #fff;
    }
</style>

<svg width="160.6299px" viewBox="0 0 27.2 31.8" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <!-- Noise filter -->
        <filter id="noise" primitiveUnits="objectBoundingBox">
            <feTurbulence baseFrequency="2 2" type="fractalNoise" />
            <feColorMatrix values=".1 0 0 0 .1
                .1 0 0 0 .1
                .1 0 0 0 .1
                0 0 0 0 1" />
            <feComposite in2="SourceGraphic" operator="lighter" />
            <feComposite result="body" in2="SourceAlpha" operator="in" />
        </filter>

        <!-- Gradients -->
        <radialGradient id="g-knob" cx="13.6" cy="13.6" r="10.6" gradientUnits="userSpaceOnUse">
            <stop offset="0" />
            <stop offset="0.9" />
            <stop stop-color="#777" offset="1" />
        </radialGradient>
        <radialGradient id="g-knob-base" cx="13.6" cy="13.6" r="13.6" gradientUnits="userSpaceOnUse">
            <stop offset="0" />
            <stop stop-color="#444" offset=".8" />
            <stop stop-color="#555" offset=".9" />
            <stop offset="1" />
        </radialGradient>

        <!-- Pin shape -->
        <path id="pin" fill="silver" stroke="#a2a2a2" stroke-width=".024"
            d="M8.726 29.801a.828.828 0 00-.828.829.828.828 0 00.828.828.828.828 0 00.829-.828.828.828 0 00-.829-.829zm-.004.34a.49.49 0 01.004 0 .49.49 0 01.49.489.49.49 0 01-.49.49.49.49 0 01-.489-.49.49.49 0 01.485-.49z" />
    </defs>

    <!-- Outer red shape / board -->
    <path
        d="M1.3 0v31.7h25.5V0zm2.33.683a1.87 1.87 0 01.009 0 1.87 1.87 0 011.87 1.87 1.87 1.87 0 01-1.87 1.87 1.87 1.87 0 01-1.87-1.87 1.87 1.87 0 011.87-1.87zm20.5 0a1.87 1.87 0 01.009 0 1.87 1.87 0 011.87 1.87 1.87 1.87 0 01-1.87 1.87 1.87 1.87 0 01-1.87-1.87 1.87 1.87 0 011.87-1.87zm-20.5 26.8a1.87 1.87 0 01.009 0 1.87 1.87 0 011.87 1.87 1.87 1.87 0 01-1.87 1.87 1.87 1.87 0 01-1.87-1.87 1.87 1.87 0 011.87-1.87zm20.4 0a1.87 1.87 0 01.009 0 1.87 1.87 0 011.87 1.87 1.87 1.87 0 01-1.87 1.87 1.87 1.87 0 01-1.87-1.87 1.87 1.87 0 011.87-1.87zm-12.7 2.66a.489.489 0 01.004 0 .489.489 0 01.489.489.489.489 0 01-.489.489.489.489 0 01-.489-.489.489.489 0 01.485-.489zm2.57 0a.489.489 0 01.004 0 .489.489 0 01.489.489.489.489 0 01-.489.489.489.489 0 01-.489-.489.489.489 0 01.485-.489zm2.49.013a.489.489 0 01.004 0 .489.489 0 01.489.489.489.489 0 01-.489.489.489.489 0 01-.489-.489.489.489 0 01.485-.489zm-7.62.007a.489.489 0 01.004 0 .489.489 0 01.489.489.489.489 0 01-.489.489.489.489 0 01-.489-.49.489.489 0 01.485-.488zm10.2.013a.489.489 0 01.004 0 .489.489 0 01.489.489.489.489 0 01-.489.489.489.489 0 01-.489-.49.489.489 0 01.485-.488z"
        fill="#bd1e34" />

    <!-- Text labels -->
    <g fill="#fff" font-family="sans-serif" stroke-width=".03">
        <text text-anchor="middle" font-size="1.2" letter-spacing=".053">
            <tspan x="4.034" y="25.643">Analog</tspan>
            <tspan x="4.061" y="27.159">Joystick</tspan>
        </text>
        <text transform="rotate(-90)" text-anchor="start" font-size="1.2">
            <tspan x="-29.2" y="9.2">VCC</tspan>
            <tspan x="-29.2" y="11.74">VERT</tspan>
            <tspan x="-29.2" y="14.28">HORZ</tspan>
            <tspan x="-29.2" y="16.82">SEL</tspan>
            <tspan x="-29.2" y="19.36">GND</tspan>
        </text>
    </g>

    <!-- Base ellipse underneath the knob -->
    <ellipse cx="13.6" cy="13.7" rx="13.6" ry="13.7" fill="url(#g-knob-base)" />

    <!-- Decorative swirl (white highlight) -->
    <path
        d="M48.2 65.5s.042.179-.093.204c-.094.017-.246-.077-.322-.17-.094-.115-.082-.205-.009-.285.11-.122.299-.075.299-.075s-.345-.303-.705-.054c-.32.22-.228.52.06.783.262.237.053.497-.21.463-.18-.023-.252-.167-.21-.256.038-.076.167-.122.167-.122s-.149-.06-.324.005c-.157.06-.286.19-.276.513v1.51s.162-.2.352-.403c.214-.229.311-.384.53-.366.415.026.714-.159.918-.454.391-.569.085-1.2-.178-1.29"
        fill="#fff" />

    <!-- Knob with Angular mouse bindings -->
    <circle id="knob" cx="13.6" cy="13.6" r="10.6" fill="url(#g-knob)" filter="url(#noise)" tabindex="0"
        [attr.transform]="component.knobTransform" (mousedown)="component.press($event)"
        (mouseup)="component.release()"></circle>

    <!-- Directional arrow controls (hover-only until knob is hovered/focused) -->
    <g class="controls" fill="#aaa" stroke-width="0.6" stroke-linejoin="bevel">
        <!-- LEFT region -->
        <rect class="region" x="1" y="8.5" width="7" height="10" (mousedown)="component.onMouseDown($event, -1, 0)"
            (mouseup)="component.onMouseUp()"></rect>
        <path d="m 7.022,11.459 -3.202,2.497 3.202,2.497"></path>

        <!-- UP region -->
        <rect class="region" x="7.9" y="1.38" width="10" height="7" (mousedown)="component.onMouseDown($event, 0, 1)"
            (mouseup)="component.onMouseUp()"></rect>
        <path d="m 16.615,7.095 -2.497,-3.202 -2.497,3.202"></path>

        <!-- RIGHT region -->
        <rect class="region" x="18" y="8.5" width="7" height="10" (mousedown)="component.onMouseDown($event, 1, 0)"
            (mouseup)="component.onMouseUp()"></rect>
        <path d="m 19.980,16.101 3.202,-2.497 -3.202,-2.497"></path>

        <!-- DOWN region -->
        <rect class="region" x="7.9" y="17" width="10" height="7" (mousedown)="component.onMouseDown($event, 0, -1)"
            (mouseup)="component.onMouseUp()"></rect>
        <path d="m 11.620,20.112 2.497,3.202 2.497,-3.202"></path>

        <!-- Center press circle -->
        <circle cx="13.6" cy="13.6" r="3" (mousedown)="component.press($event)" (mouseup)="component.release()">
        </circle>
    </g>

    <!-- Bottom �pin header� shape along the edge -->
    <g fill="none" stroke="#fff" stroke-width=".142">
        <path
            d="M7.8 31.7l-.383-.351v-1.31l.617-.656h1.19l.721.656.675-.656h1.18l.708.656.662-.656h1.25l.643.656.63-.656h1.21l.695.656.636-.656h1.17l.753.656v1.3l-.416.39" />
        <path
            d="M9.5 31.7l.381-.344.381.331M12.1 31.7l.381-.344.381.331M14.7 31.7l.381-.344.381.331M17.2 31.7l.381-.344.381.331"
            stroke-linecap="square" stroke-linejoin="bevel" />
    </g>

    <!-- The five pins at bottom -->
    <use xlink:href="#pin" x="0" />
    <use xlink:href="#pin" x="2.54" />
    <use xlink:href="#pin" x="5.08" />
    <use xlink:href="#pin" x="7.62" />
    <use xlink:href="#pin" x="10.16" />
</svg>