Component Simulation Code
4 Digit Seven Segment Display (SIM TEST) Simulation Source Code Example

Explore the source code for simulating the 4 Digit Seven Segment Display (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="100mm" height="30mm" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg">
        <!-- Digit 1 -->
        <g transform="translate(-7.3, -2.8)">
            <g transform="skewX(-8) translate(4, 2) scale(1.67)">
                <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="27.8" cy="30.0" r="1.55" [attr.fill]="component.segmentFill.get('DP1')" />
        </g>

        <!-- Digit 2 -->
        <g transform="translate(16.75, -2.8)">
            <g transform="skewX(-8) translate(4, 2) scale(1.67)">
                <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="27.8" cy="30" r="1.55" [attr.fill]="component.segmentFill.get('DP2')" />
        </g>

        <!-- Colon -->
        <!--<g transform="translate(50, 0)">
            <circle cx="5" cy="10" r="1.5" fill="black" />
            <circle cx="5" cy="20" r="1.5" fill="black" />
        </g>-->
        <!-- Digit 3 -->
        <g transform="translate(40.8, -2.8)">
            <g transform="skewX(-8) translate(4, 2) scale(1.67)">
                <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="27.8" cy="30" r="1.55" [attr.fill]="component.segmentFill.get('DP3')" />
        </g>

        <!-- Digit 4 -->
        <g transform="translate(64.85, -2.8)">
            <g transform="skewX(-8) translate(4, 2) scale(1.67)">
                <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="27.8" cy="30" r="1.55" [attr.fill]="component.segmentFill.get('DP4')" />
        </g>
    </svg>
</div>