Component Simulation Code
16x2 I2C LCD (SIM TEST) Simulation Source Code Example

Explore the source code for simulating the 16x2 I2C LCD (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 display */
    .lcd-container {
        position: relative;
        width: 600px;
        /* Adjust based on actual image size */
        height: 250px;
        /* Adjust based on actual image size */
    }


    /* Grid overlay for 2x16 characters */
    .lcd-overlay {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-template-rows: repeat(2, 1fr);
        position: absolute;
        top: 71px;
        /* Adjust based on actual image alignment */
        left: 75px;
        /* Adjust based on actual image alignment */
        width: 356px;
        /* Adjust to fit the LCD display screen area */
        height: 70px;
        /* Adjust to fit the LCD display screen area */
        pointer-events: none;
        /* Prevent interaction with the overlay */
        gap: 3px;
    }

    /* Each character cell */
    .lcd-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: monospace;
        font-size: 18px;
        /* Adjust font size as needed */
        color: #1b5e20;
        /* Dark green color to mimic LCD text */
        background-color: rgba(51, 84, 0, 255);
        border-radius: 2px;
        /* Slight rounding for a smooth look */
    }

    .lcd-container.on .lcd-cell {
        background-color: rgba(103, 169, 1, 255);
        /* Light green with opacity for LCD effect */
    }

    .lcd-cell-grid {
        display: none;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: 0.5px;
        /* Gap between "pixels" */
        width: 100%;
        height: 100%;
    }

    .lcd-container.on .lcd-cell-grid {
        display: grid;
    }

    /* Individual pixel */
    .pixel {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        /* Off pixel color */
    }

    .pixel.on {
        background-color: black;
        /* On pixel color */
    }

    .lcd-backlight {
        position: absolute;
        top: 55px;
        left: 54px;
        width: 397px;
        height: 102px;
        border-radius: 7px;
        background-color: rgba(54, 89, 0, 255);
    }

    .lcd-container.on .lcd-backlight {
        background-color: rgba(108, 178, 1, 255);
    }
</style>





<div class="lcd-container on">
    <div class="lcd-backlight"></div>
    <div class="lcd-overlay">
        <ng-container *ngFor="let rowIndex of component.createRange(2)">
            <ng-container *ngFor="let colIndex of component.createRange(16)">
                <div class="lcd-cell">
                    <div class="lcd-cell-grid">
                        <ng-container *ngFor="let pixelRowIndex of component.createRange(8)">
                            <ng-container *ngFor="let pixelColIndex of component.createRange(5)">
                                <div class="pixel"
                                    [class.on]="component.isPixelOn(colIndex, rowIndex, pixelColIndex, pixelRowIndex)">
                                </div>
                            </ng-container>
                        </ng-container>
                    </div>
                </div>
            </ng-container>
        </ng-container>
    </div>
</div>