Component Simulation Code

LCD Display (16 pin) (SIM TEST) Simulation Source Code Example

Explore the source code for simulating the LCD Display (16 pin) (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 */
    }

    .lcd-backlight {
        position: absolute;
        top: 56px;
        left: 38px;
        width: 397px;
        height: 102px;
        border-radius: 7px;
    }

    .lcd-svg {
        position: absolute;
        top: 71px;
        /* Adjust based on actual image alignment */
        left: 59px;
        /* Adjust based on actual image alignment */
        width: 356px;
        /* Adjust to fit the LCD display screen area */
        height: 71px;
        /* Adjust to fit the LCD display screen area */
    }
</style>

<div class="lcd-container on">
    <div class="lcd-backlight" [ngStyle]="{'background-color': component.backlightColor}"></div>
    <svg class="lcd-svg" [attr.width]="component.svgWidth" [attr.height]="component.svgHeight"
        [attr.viewBox]="'0 0 ' + component.svgViewBoxWidth + ' ' + component.svgViewBoxHeight"
        preserveAspectRatio="none">
        <!-- Background rectangles for each character cell -->
        <ng-container *ngFor="let cell of component.cellRects">
            <rect [attr.x]="cell.x" [attr.y]="cell.y" [attr.width]="cell.width" [attr.height]="cell.height"
                [attr.fill]="component.cellColor" [attr.rx]="cell.radius" [attr.ry]="cell.radius"></rect>
        </ng-container>

        <!-- Path for the pixels -->
        <path [attr.d]="component.pathData" [attr.fill]="component.pixelColor"></path>
    </svg>
</div>