state_machine/TvRemote.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1102px" height="1872px" viewBox="-0.5 -0.5 1102 1872" content="&lt;mxfile&gt;&lt;diagram id=&quot;Lnd04kguk4f2d2z-YIlh&quot; name=&quot;Page-1&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs>
        <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-fff2cc-1-ffd966-1-s-0">
            <stop offset="0%" style="stop-color: rgb(255, 242, 204); stop-opacity: 1;"/>
            <stop offset="100%" style="stop-color: rgb(255, 217, 102); stop-opacity: 1;"/>
        </linearGradient>
    </defs>
    <g>
        <path d="M 781 181 L 781 158.5 Q 781 151 773.5 151 L 8.5 151 Q 1 151 1 158.5 L 1 181" fill="#1ba1e2" stroke="#006eaf" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 1 181 L 1 1863.5 Q 1 1871 8.5 1871 L 773.5 1871 Q 781 1871 781 1863.5 L 781 181" fill="#18141d" stroke="#006eaf" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 1 181 L 781 181" fill="none" stroke="#006eaf" stroke-miterlimit="10" pointer-events="all"/>
        <g fill="#ffffff" font-family="Lucida Console" font-weight="bold" text-anchor="middle" font-size="14px">
            <text x="390.5" y="170.5">
                $STATEMACHINE : TvRemoteSm
            </text>
        </g>
        <rect x="1" y="181" width="30" height="20" fill="none" stroke="none" pointer-events="all"/>
        <g fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px"/>
        <path d="M 246 216 L 246 234.63" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 246 239.88 L 242.5 232.88 L 246 234.63 L 249.5 232.88 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 371 271 L 371 248.5 Q 371 241 363.5 241 L 128.5 241 Q 121 241 121 248.5 L 121 271" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 121 271 L 121 293.5 Q 121 301 128.5 301 L 363.5 301 Q 371 301 371 293.5 L 371 271" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 121 271 L 371 271" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 248px; margin-left: 246px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                TV_OFF
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="246" y="262" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    TV_OFF
                </text>
            </switch>
        </g>
        <rect x="121" y="271" width="190" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 278px; margin-left: 127px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                    show("TV OFF");
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="127" y="290" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / show("TV OFF");
                </text>
            </switch>
        </g>
        <ellipse cx="246" cy="203.5" rx="12.5" ry="12.5" fill="#000000" stroke="#f0f0f0" pointer-events="all"/>
        <path d="M 691.36 348.02 L 458.53 274.03 Q 449 271 439 271 L 377.37 271" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 372.12 271 L 379.12 267.5 L 377.37 271 L 379.12 274.5 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 325px; margin-left: 592px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_LONG_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="592" y="328" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_LONG_PRESS
                </text>
            </switch>
        </g>
        <path d="M 741 381 L 741 358.5 Q 741 351 733.5 351 L 18.5 351 Q 11 351 11 358.5 L 11 381" fill="#545454" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 11 381 L 11 1833.5 Q 11 1841 18.5 1841 L 733.5 1841 Q 741 1841 741 1833.5 L 741 381" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 11 381 L 741 381" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g fill="#FAFAFA" font-family="Lucida Console" font-weight="bold" text-anchor="middle" font-size="14px">
            <text x="373.5" y="370.5">
                TV_ON
            </text>
        </g>
        <rect x="11" y="381" width="180" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g fill="#DCDCAA" font-family="Lucida Console" font-size="12px">
            <text x="16.5" y="398.5">
                enter / show("TV ON");
            </text>
        </g>
        <path d="M 641 511 L 641 488.5 Q 641 481 633.5 481 L 78.5 481 Q 71 481 71 488.5 L 71 511" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 71 511 L 71 902.5 Q 71 910 78.5 910 L 633.5 910 Q 641 910 641 902.5 L 641 511" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 71 511 L 641 511" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 488px; margin-left: 356px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                VOLUME_CHANGE
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="356" y="502" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    VOLUME_CHANGE
                </text>
            </switch>
        </g>
        <rect x="71" y="511" width="240" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 518px; margin-left: 77px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Volume Change");
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="77" y="530" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / show("Volume Change");
                </text>
            </switch>
        </g>
        <path d="M 329.75 571 L 329.75 548.5 Q 329.75 541 322.25 541 L 127.25 541 Q 119.75 541 119.75 548.5 L 119.75 571" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 119.75 571 L 119.75 673.5 Q 119.75 681 127.25 681 L 322.25 681 Q 329.75 681 329.75 673.5 L 329.75 571" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 119.75 571 L 329.75 571" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 548px; margin-left: 225px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                VOLUME_UP
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="225" y="562" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    VOLUME_UP
                </text>
            </switch>
        </g>
        <rect x="119.75" y="571" width="180" height="90" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 578px; margin-left: 126px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                    {
                                    <br/>
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Volume Up");
                                    <br/>
                                </font>
                                <font color="#dcdcaa">
                                    volume_increment();
                                    <br/>
                                </font>
                                <font color="#dcdcaa">
                                    print_volume();
                                    <br/>
                                    }
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="126" y="590" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / {...
                </text>
            </switch>
        </g>
        <path d="M 342.88 791 L 342.88 768.5 Q 342.88 761 335.38 761 L 120.38 761 Q 112.88 761 112.88 768.5 L 112.88 791" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 112.88 791 L 112.88 882.5 Q 112.88 890 120.38 890 L 335.38 890 Q 342.88 890 342.88 882.5 L 342.88 791" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 112.88 791 L 342.88 791" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 768px; margin-left: 228px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                VOLUME_DOWN
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="228" y="782" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    VOLUME_DOWN
                </text>
            </switch>
        </g>
        <rect x="112.88" y="791" width="180" height="90" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 798px; margin-left: 119px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                    {
                                    <br/>
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Volume Down");
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                                <font color="#00aaff">
                                </font>
                                <font color="#dcdcaa">
                                    volume_decrement();
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                                <font color="#00aaff">
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    print_volume();
                                    <br/>
                                </span>
                                <font color="#dcdcaa">
                                    }
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="119" y="810" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / {...
                </text>
            </switch>
        </g>
        <path d="M 172.25 681 L 170.53 754.63" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 170.41 759.88 L 167.07 752.8 L 170.53 754.63 L 174.07 752.97 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 713px; margin-left: 174px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="174" y="716" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 285.38 761 L 277.89 687.34" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 277.36 682.11 L 281.55 688.72 L 277.89 687.34 L 274.59 689.43 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 721px; margin-left: 283px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="283" y="724" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 499.84 566 L 491.59 654.66" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 491.1 659.89 L 488.27 652.59 L 491.59 654.66 L 495.24 653.24 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <ellipse cx="501" cy="553.5" rx="12.5" ry="12.5" fill="#000000" stroke="#f0f0f0" pointer-events="all"/>
        <path d="M 329.75 611 L 361 611 Q 371 611 371.17 621 L 371.83 660 Q 372 670 362.32 672.52 L 335.91 679.4" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 330.83 680.72 L 336.72 675.57 L 335.91 679.4 L 338.49 682.34 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 642px; margin-left: 370px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="370" y="645" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 342.88 857.75 L 381 857.95 Q 391 858 391 848 L 391 803 Q 391 793 381 793.05 L 349.25 793.22" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 344 793.24 L 350.98 789.71 L 349.25 793.22 L 351.02 796.71 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 826px; margin-left: 371px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="371" y="829" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 541 691 L 541 661 Q 541 661 541 661 L 441 661 Q 441 661 441 661 L 441 691" fill="#545454" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 441 691 L 541 691" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g fill="#FAFAFA" font-family="Lucida Console" font-weight="bold" text-anchor="middle" font-size="14px">
            <text x="490.5" y="680.5">
                INITIAL
            </text>
        </g>
        <path d="M 441 661 L 432.24 590.92 Q 431 581 421.01 580.51 L 336.11 576.31" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 330.87 576.06 L 338.03 572.9 L 336.11 576.31 L 337.69 579.9 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 578px; margin-left: 421px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="421" y="582" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 441 683.5 L 347.88 757.05" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 343.76 760.31 L 347.08 753.22 L 347.88 757.05 L 351.42 758.71 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 716px; margin-left: 403px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="403" y="719" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 356 910 L 356 954.63" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 356 959.88 L 352.5 952.88 L 356 954.63 L 359.5 952.88 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 936px; margin-left: 356px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_LONG_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="356" y="939" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_LONG_PRESS
                </text>
            </switch>
        </g>
        <path d="M 651 1611 L 701 1611 Q 711 1611 710.89 1601 L 701.11 701 Q 701 691 691.03 691.75 L 647.35 695.02" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 642.11 695.42 L 648.83 691.4 L 647.35 695.02 L 649.36 698.38 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1197px; margin-left: 707px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_LONG_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="707" y="1200" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_LONG_PRESS
                </text>
            </switch>
        </g>
        <path d="M 215.54 446 L 232.12 475.45" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 234.69 480.03 L 228.21 475.64 L 232.12 475.45 L 234.31 472.21 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <ellipse cx="208.5" cy="433.5" rx="12.5" ry="12.5" fill="#000000" stroke="#f0f0f0" pointer-events="all"/>
        <path d="M 641 991 L 641 968.5 Q 641 961 633.5 961 L 78.5 961 Q 71 961 71 968.5 L 71 991" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 71 991 L 71 1333.5 Q 71 1341 78.5 1341 L 633.5 1341 Q 641 1341 641 1333.5 L 641 991" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 71 991 L 641 991" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 968px; margin-left: 356px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                CHANNEL_SELECT
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="356" y="982" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    CHANNEL_SELECT
                </text>
            </switch>
        </g>
        <rect x="71" y="991" width="250" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 998px; margin-left: 77px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Channel Select");
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="77" y="1010" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / show("Channel Select");
                </text>
            </switch>
        </g>
        <path d="M 343.5 1061 L 343.5 1038.5 Q 343.5 1031 336 1031 L 121 1031 Q 113.5 1031 113.5 1038.5 L 113.5 1061" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 113.5 1061 L 113.5 1143.5 Q 113.5 1151 121 1151 L 336 1151 Q 343.5 1151 343.5 1143.5 L 343.5 1061" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 113.5 1061 L 343.5 1061" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1038px; margin-left: 229px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                CHANNEL_UP
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="229" y="1052" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    CHANNEL_UP
                </text>
            </switch>
        </g>
        <rect x="113.5" y="1061" width="180" height="90" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 1068px; margin-left: 120px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                    {
                                    <br/>
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Channel Up");
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                                <font color="#00aaff">
                                </font>
                                <font color="#dcdcaa">
                                    channel_increment();
                                    <br/>
                                    print_channel();
                                    <br/>
                                    }
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="120" y="1080" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / {...
                </text>
            </switch>
        </g>
        <path d="M 348.5 1221 L 348.5 1198.5 Q 348.5 1191 341 1191 L 116 1191 Q 108.5 1191 108.5 1198.5 L 108.5 1221" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 108.5 1221 L 108.5 1303.5 Q 108.5 1311 116 1311 L 341 1311 Q 348.5 1311 348.5 1303.5 L 348.5 1221" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 108.5 1221 L 348.5 1221" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1198px; margin-left: 229px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                CHANNEL_DOWN
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="229" y="1212" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    CHANNEL_DOWN
                </text>
            </switch>
        </g>
        <rect x="108.5" y="1221" width="190" height="90" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 1228px; margin-left: 115px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                    {
                                    <br/>
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Channel Down");
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                                <font color="#00aaff">
                                </font>
                                <font color="#dcdcaa">
                                    channel_decrement();
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                                <font color="#00aaff">
                                </font>
                                <font color="#dcdcaa">
                                    print_channel();
                                    <br/>
                                    }
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="115" y="1240" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / {...
                </text>
            </switch>
        </g>
        <path d="M 171 1151 L 168.9 1184.64" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 168.57 1189.88 L 165.51 1182.68 L 168.9 1184.64 L 172.5 1183.12 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1172px; margin-left: 175px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="175" y="1176" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 288.5 1191 L 286.4 1157.36" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 286.07 1152.12 L 290 1158.88 L 286.4 1157.36 L 283.01 1159.32 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1171px; margin-left: 289px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="289" y="1174" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 511 1046 L 501.84 1114.69" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 501.15 1119.89 L 498.6 1112.49 L 501.84 1114.69 L 505.54 1113.42 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <ellipse cx="511" cy="1033.5" rx="12.5" ry="12.5" fill="#000000" stroke="#f0f0f0" pointer-events="all"/>
        <path d="M 343.5 1091 L 381 1091 Q 391 1091 391 1101 L 391 1121 Q 391 1131 381.78 1134.88 L 349.37 1148.53" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 344.53 1150.57 L 349.62 1144.62 L 349.37 1148.53 L 352.34 1151.08 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1114px; margin-left: 389px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="389" y="1117" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 348.5 1281 L 381 1281 Q 391 1281 391 1271 L 391 1261 Q 391 1251 381 1251 L 354.87 1251" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 349.62 1251 L 356.62 1247.5 L 354.87 1251 L 356.62 1254.5 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1267px; margin-left: 386px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="386" y="1270" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 551 1151 L 551 1121 Q 551 1121 551 1121 L 451 1121 Q 451 1121 451 1121 L 451 1151" fill="#545454" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 451 1151 L 551 1151" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g fill="#FAFAFA" font-family="Lucida Console" font-weight="bold" text-anchor="middle" font-size="14px">
            <text x="500.5" y="1140.5">
                INITIAL
            </text>
        </g>
        <path d="M 451 1151 L 353.76 1217.41" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 349.42 1220.37 L 353.23 1213.53 L 353.76 1217.41 L 357.18 1219.31 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1192px; margin-left: 402px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="402" y="1195" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 451 1121 L 434.16 1070.49 Q 431 1061 421 1061 L 349.87 1061" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 344.62 1061 L 351.62 1057.5 L 349.87 1061 L 351.62 1064.5 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1059px; margin-left: 419px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="419" y="1062" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 651 1451 L 651 1428.5 Q 651 1421 643.5 1421 L 78.5 1421 Q 71 1421 71 1428.5 L 71 1451" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 71 1451 L 71 1793.5 Q 71 1801 78.5 1801 L 643.5 1801 Q 651 1801 651 1793.5 L 651 1451" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 71 1451 L 651 1451" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1428px; margin-left: 361px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                BRIGHTNESS_CHANGE
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="361" y="1442" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    BRIGHTNESS_CHANGE
                </text>
            </switch>
        </g>
        <rect x="71" y="1451" width="270" height="30" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 1458px; margin-left: 77px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Brightness Change");
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="77" y="1470" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / show("Brightness Change");
                </text>
            </switch>
        </g>
        <path d="M 347.25 1511 L 347.25 1488.5 Q 347.25 1481 339.75 1481 L 114.75 1481 Q 107.25 1481 107.25 1488.5 L 107.25 1511" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 107.25 1511 L 107.25 1593.5 Q 107.25 1601 114.75 1601 L 339.75 1601 Q 347.25 1601 347.25 1593.5 L 347.25 1511" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 107.25 1511 L 347.25 1511" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1488px; margin-left: 227px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                BRIGHTNESS_UP
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="227" y="1502" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    BRIGHTNESS_UP
                </text>
            </switch>
        </g>
        <rect x="107.25" y="1511" width="210" height="90" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 1518px; margin-left: 113px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                    {
                                    <br/>
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Brightness Up");
                                    <br/>
                                </font>
                                <font color="#00aaff">
                                </font>
                                <font color="#dcdcaa">
                                    brightness_increment();
                                    <br/>
                                </font>
                                <font color="#dcdcaa">
                                    print_brightness();
                                    <br/>
                                </font>
                                <font color="#dcdcaa">
                                    }
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="113" y="1530" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / {...
                </text>
            </switch>
        </g>
        <path d="M 357.25 1681 L 357.25 1658.5 Q 357.25 1651 349.75 1651 L 104.75 1651 Q 97.25 1651 97.25 1658.5 L 97.25 1681" fill="#333333" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 97.25 1681 L 97.25 1763.5 Q 97.25 1771 104.75 1771 L 349.75 1771 Q 357.25 1771 357.25 1763.5 L 357.25 1681" fill="#18141d" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 97.25 1681 L 357.25 1681" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1658px; margin-left: 227px;">
                        <div data-drawio-colors="color: #FAFAFA; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 14px; font-family: &quot;Lucida Console&quot;; color: rgb(250, 250, 250); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: nowrap;">
                                BRIGHTNESS_DOWN
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="227" y="1672" fill="#FAFAFA" font-family="Lucida Console" font-size="14px" text-anchor="middle" font-weight="bold">
                    BRIGHTNESS_DOWN
                </text>
            </switch>
        </g>
        <rect x="97.25" y="1681" width="210" height="90" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 1688px; margin-left: 103px;">
                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: &quot;Lucida Console&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
                                <font color="#00aaff">
                                    enter
                                </font>
                                <font color="#ffd700">
                                    /
                                </font>
                                <font color="#dcdcaa">
                                    {
                                    <br/>
                                </font>
                                <span style="color: rgb(220, 220, 170);">
                                    show
                                </span>
                                <font color="#dcdcaa">
                                    ("Brightness Down");
                                </font>
                                <font color="#dcdcaa">
                                    <br/>
                                </font>
                                <font color="#00aaff">
                                </font>
                                <font color="#dcdcaa">
                                    brightness_decrement();
                                    <br/>
                                </font>
                                <font color="#dcdcaa">
                                    print_brightness();
                                    <br/>
                                    }
                                    <br/>
                                </font>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="103" y="1700" fill="rgb(0, 0, 0)" font-family="Lucida Console" font-size="12px">
                    enter / {...
                </text>
            </switch>
        </g>
        <path d="M 167.25 1601 L 162.88 1644.66" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 162.36 1649.89 L 159.58 1642.57 L 162.88 1644.66 L 166.54 1643.27 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1628px; margin-left: 170px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="170" y="1632" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 292.25 1651 L 287.88 1607.34" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 287.36 1602.11 L 291.54 1608.73 L 287.88 1607.34 L 284.58 1609.43 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1626px; margin-left: 292px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="292" y="1629" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 519.28 1506 L 511.87 1559.69" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 511.15 1564.89 L 508.64 1557.48 L 511.87 1559.69 L 515.58 1558.44 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <ellipse cx="521" cy="1493.5" rx="12.5" ry="12.5" fill="#000000" stroke="#f0f0f0" pointer-events="all"/>
        <path d="M 347.25 1541 L 381 1541 Q 391 1541 391 1551 L 391 1581 Q 391 1591 381.25 1593.23 L 353.46 1599.58" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 348.34 1600.75 L 354.38 1595.78 L 353.46 1599.58 L 355.94 1602.6 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1566px; margin-left: 389px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="389" y="1570" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 357.25 1711 L 391 1711 Q 401 1711 401 1721 L 401 1731 Q 401 1741 391 1741 L 363.62 1741" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 358.37 1741 L 365.37 1737.5 L 363.62 1741 L 365.37 1744.5 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1729px; margin-left: 406px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="406" y="1733" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 561 1596 L 561 1566 Q 561 1566 561 1566 L 461 1566 Q 461 1566 461 1566 L 461 1596" fill="#545454" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 461 1596 L 561 1596" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
        <g fill="#FAFAFA" font-family="Lucida Console" font-weight="bold" text-anchor="middle" font-size="14px">
            <text x="510.5" y="1585.5">
                INITIAL
            </text>
        </g>
        <path d="M 461 1566 L 436.55 1529.32 Q 431 1521 421.3 1518.57 L 400.7 1513.43 Q 391 1511 381 1511 L 353.62 1511" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 348.37 1511 L 355.37 1507.5 L 353.62 1511 L 355.37 1514.5 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1515px; margin-left: 416px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="416" y="1518" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_PRESS
                </text>
            </switch>
        </g>
        <path d="M 461 1596 L 362.18 1676.96" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 358.11 1680.29 L 361.31 1673.15 L 362.18 1676.96 L 365.75 1678.56 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1645px; margin-left: 409px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="409" y="1648" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_PRESS
                </text>
            </switch>
        </g>
        <path d="M 358.07 1341 L 358.87 1414.63" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 358.92 1419.88 L 355.35 1412.92 L 358.87 1414.63 L 362.35 1412.84 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 1381px; margin-left: 358px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B2_LONG_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="358" y="1384" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B2_LONG_PRESS
                </text>
            </switch>
        </g>
        <path d="M 250.73 301 L 257.61 344.71" fill="none" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 258.43 349.9 L 253.89 343.53 L 257.61 344.71 L 260.8 342.44 Z" fill="#f0f0f0" stroke="#f0f0f0" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 321px; margin-left: 254px;">
                        <div data-drawio-colors="color: #00AAFF; background-color: #18141D; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 170, 255); line-height: 1.2; pointer-events: all; background-color: rgb(24, 20, 29); white-space: nowrap;">
                                B1_LONG_PRESS
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="254" y="324" fill="#00AAFF" font-family="Helvetica" font-size="11px" text-anchor="middle">
                    B1_LONG_PRESS
                </text>
            </switch>
        </g>
        <rect x="851" y="161" width="250" height="260" rx="7.5" ry="7.5" fill="url(#mx-gradient-fff2cc-1-ffd966-1-s-0)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 244px; height: 1px; padding-top: 168px; margin-left: 857px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                <b>
                                    $NOTES
                                </b>
                                <br/>
                                The program is designed to differentiate between short presses and long presses.
                                <br/>
                                <br/>
                                <b>
                                    Button 1:
                                </b>
                                <br/>
                                - Long Press - Power On/Off
                                <br/>
                                - Short Press - Up event
                                <br/>
                                <br/>
                                <b>
                                    Button 2:
                                    <br/>
                                </b>
                                - Long Press - Select next mode (e.g. Volume, Brightness, Channel)
                                <br/>
                                - Short Press - Down event
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="857" y="180" fill="#000000" font-family="Helvetica" font-size="12px">
                    $NOTES...
                </text>
            </switch>
        </g>
        <path d="M 1 1 L 477 1 L 491 15 L 491 131 L 1 131 L 1 1 Z" fill="#fad7ac" stroke="#b46504" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 477 1 L 477 15 L 491 15" fill="none" stroke="#b46504" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 488px; height: 1px; padding-top: 8px; margin-left: 3px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 14px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
                                TV Remote state machine that peforms the following:
                                <br/>
                                <br/>
                                Press and hold
                                <b>
                                    Button1
                                </b>
                                to transition all the way to TV_OFF state from any other.
                                <br/>
                                Press and hold
                                <b>
                                    Button2
                                </b>
                                to toggle the mode while in the TV_ON state.
                                <br/>
                                Press
                                <b>
                                    Button1
                                </b>
                                to increase the active field (i.e. Volume, Channel, etc).
                                <br/>
                                Press
                                <b>
                                    Button2
                                </b>
                                to decrese the active field (i.e. Volume, Channel, etc).
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="3" y="22" fill="#000000" font-family="Helvetica" font-size="14px">
                    TV Remote state machine that peforms the following:...
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Text is not SVG - cannot display
            </text>
        </a>
    </switch>
</svg>