Component Simulation Code

4x4 Keypad Simulation Source Code Example

Explore the source code for simulating the 4x4 Keypad 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)

<style>
    /* Container for the keypad with the outer brown border */
    .keypad-container {
        display: inline-block;
        position: absolute;
        width: 1920px;
        top: 310px;
        left: 240px;
        box-sizing: border-box;
    }

    /* Keypad with the dark grey background and inner grey border */
    .keypad {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 70px;
        column-gap: 0px;
    }

    button {
        font-size: 14.5rem;
        border: 20px solid #d3d3d3;
        /* Light grey border around each key */
        border-radius: 100px;
        /* Rounded edges for each key */
        cursor: pointer;
        transition: background 0.1s;
        outline: none;
        width: 400px;
        height: 420px;
    }

    button.blue-key {
        background-color: #4a90e2;
        color: white;
    }

    button.red-key {
        background-color: #d9534f;
        color: white;
    }

    button.pressed {
        background-color: #555555;
        /* Darker color to indicate the key press */
    }
</style>

<div class="keypad-container">
    <div class="keypad">
        <button *ngFor="let key of component.keys"
                [class]="key.class"
                (mousedown)="component.pressKey(key.label)"
                (mouseup)="component.releaseKey(key.label)"
                [ngClass]="{'pressed': component.isKeyPressed(key.label)}">
            {{ key.label }}
        </button>
    </div>
</div>