Component Simulation Code

4x4 Matrix Keypad (SIM TEST) Simulation Source Code Example

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

<style>
    /* Container for the keypad with the outer brown border */
    .keypad-container {
        display: inline-block;
        position: absolute;
        width: 192px;
        top: 31px;
        left: 24px;
        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: 7px;
        column-gap: 0px;
    }

    button {
        font-size: 1.45rem;
        border: 2px solid #d3d3d3;
        /* Light grey border around each key */
        border-radius: 10px;
        /* Rounded edges for each key */
        cursor: pointer;
        transition: background 0.1s;
        outline: none;
        width: 40px;
        height: 42px;
    }

    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>