Component Simulation Code

Seven Segment Display (Wokwi Compatible) (SIM TEST) Simulation Source Code Example

Explore the source code for simulating the Seven Segment Display (Wokwi Compatible) (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>
    polygon {
        transform: scale(0.9);
        transform-origin: 50% 50%;
    }
</style>

<div style="position: relative;">
    <svg width="20mm" height="30mm" viewBox="0 0 20 30" xmlns="http://www.w3.org/2000/svg">
        <g transform="skewX(-8) translate(4, 2) scale(1.4)">
            <!-- Segments -->
            <polygon points="2 0 8 0 9 1 8 2 2 2 1 1" [attr.fill]="component.getFill('A')" />
            <polygon points="10 2 10 8 9 9 8 8 8 2 9 1" [attr.fill]="component.getFill('B')" />
            <polygon points="10 10 10 16 9 17 8 16 8 10 9 9" [attr.fill]="component.getFill('C')" />
            <polygon points="8 18 2 18 1 17 2 16 8 16 9 17" [attr.fill]="component.getFill('D')" />
            <polygon points="0 16 0 10 1 9 2 10 2 16 1 17" [attr.fill]="component.getFill('E')" />
            <polygon points="0 8 0 2 1 1 2 2 2 8 1 9" [attr.fill]="component.getFill('F')" />
            <polygon points="2 8 8 8 9 9 8 10 2 10 1 9" [attr.fill]="component.getFill('G')" />
        </g>
        <!-- Decimal Point -->
        <circle cx="17" cy="25" r="1.4" [attr.fill]="component.getFill('DP')" />
    </svg>
</div>