Component Simulation Code
4 Digit Seven Segment Display Simulation Source Code Example

Explore the source code for simulating the 4 Digit Seven Segment Display 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)
<div style="position: relative; width: 100%; height: 100%;">
    <svg width="100%" height="100%" viewBox="0 0 50.2 22" xmlns="http://www.w3.org/2000/svg">
        <!-- background panel -->
        <rect x="0" y="0" width="50.2" height="20.5" fill="black" />

        <!-- Digit 1 at x=3.5 -->
        <g transform="skewX(-8) translate(3.5,2.4) scale(0.81)">
            <polygon points="2 0 8 0 9 1 8 2 2 2 1 1" [attr.fill]="component.segmentFill.get('A1')" />
            <polygon points="10 2 10 8 9 9 8 8 8 2 9 1" [attr.fill]="component.segmentFill.get('B1')" />
            <polygon points="10 10 10 16 9 17 8 16 8 10 9 9" [attr.fill]="component.segmentFill.get('C1')" />
            <polygon points="8 18 2 18 1 17 2 16 8 16 9 17" [attr.fill]="component.segmentFill.get('D1')" />
            <polygon points="0 16 0 10 1 9 2 10 2 16 1 17" [attr.fill]="component.segmentFill.get('E1')" />
            <polygon points="0 8 0 2 1 1 2 2 2 8 1 9" [attr.fill]="component.segmentFill.get('F1')" />
            <polygon points="2 8 8 8 9 9 8 10 2 10 1 9" [attr.fill]="component.segmentFill.get('G1')" />
        </g>
        <circle cx="10.9" cy="16" r="0.89" [attr.fill]="component.segmentFill.get('DP1')" />

        <!-- Digit 2 at x=16.2 -->
        <g transform="skewX(-8) translate(16.2,2.4) scale(0.81)">
            <polygon points="2 0 8 0 9 1 8 2 2 2 1 1" [attr.fill]="component.segmentFill.get('A2')" />
            <polygon points="10 2 10 8 9 9 8 8 8 2 9 1" [attr.fill]="component.segmentFill.get('B2')" />
            <polygon points="10 10 10 16 9 17 8 16 8 10 9 9" [attr.fill]="component.segmentFill.get('C2')" />
            <polygon points="8 18 2 18 1 17 2 16 8 16 9 17" [attr.fill]="component.segmentFill.get('D2')" />
            <polygon points="0 16 0 10 1 9 2 10 2 16 1 17" [attr.fill]="component.segmentFill.get('E2')" />
            <polygon points="0 8 0 2 1 1 2 2 2 8 1 9" [attr.fill]="component.segmentFill.get('F2')" />
            <polygon points="2 8 8 8 9 9 8 10 2 10 1 9" [attr.fill]="component.segmentFill.get('G2')" />
        </g>
        <circle cx="23.6" cy="16" r="0.89" [attr.fill]="component.segmentFill.get('DP2')" />

        <!-- Digit 3 at x=28.9 -->
        <g transform="skewX(-8) translate(28.9,2.4) scale(0.81)">
            <polygon points="2 0 8 0 9 1 8 2 2 2 1 1" [attr.fill]="component.segmentFill.get('A3')" />
            <polygon points="10 2 10 8 9 9 8 8 8 2 9 1" [attr.fill]="component.segmentFill.get('B3')" />
            <polygon points="10 10 10 16 9 17 8 16 8 10 9 9" [attr.fill]="component.segmentFill.get('C3')" />
            <polygon points="8 18 2 18 1 17 2 16 8 16 9 17" [attr.fill]="component.segmentFill.get('D3')" />
            <polygon points="0 16 0 10 1 9 2 10 2 16 1 17" [attr.fill]="component.segmentFill.get('E3')" />
            <polygon points="0 8 0 2 1 1 2 2 2 8 1 9" [attr.fill]="component.segmentFill.get('F3')" />
            <polygon points="2 8 8 8 9 9 8 10 2 10 1 9" [attr.fill]="component.segmentFill.get('G3')" />
        </g>
        <circle cx="36.3" cy="16" r="0.89" [attr.fill]="component.segmentFill.get('DP3')" />

        <!-- Digit 4 at x=41.6 -->
        <g transform="skewX(-8) translate(41.6,2.4) scale(0.81)">
            <polygon points="2 0 8 0 9 1 8 2 2 2 1 1" [attr.fill]="component.segmentFill.get('A4')" />
            <polygon points="10 2 10 8 9 9 8 8 8 2 9 1" [attr.fill]="component.segmentFill.get('B4')" />
            <polygon points="10 10 10 16 9 17 8 16 8 10 9 9" [attr.fill]="component.segmentFill.get('C4')" />
            <polygon points="8 18 2 18 1 17 2 16 8 16 9 17" [attr.fill]="component.segmentFill.get('D4')" />
            <polygon points="0 16 0 10 1 9 2 10 2 16 1 17" [attr.fill]="component.segmentFill.get('E4')" />
            <polygon points="0 8 0 2 1 1 2 2 2 8 1 9" [attr.fill]="component.segmentFill.get('F4')" />
            <polygon points="2 8 8 8 9 9 8 10 2 10 1 9" [attr.fill]="component.segmentFill.get('G4')" />
        </g>
        <circle cx="49.0" cy="16" r="0.89" [attr.fill]="component.segmentFill.get('DP4')" />
    </svg>
</div>