ILI9341 Simulation Source Code Example

<style>.ili9341-artwork{position:relative;width:100%;height:100%;line-height:0}.ili9341-artwork>svg{display:block;width:100%;height:100%}.ili9341-screen{position:absolute;left:5%;top:10.18573996405033%;width:90%;height:71.8993409227082%;overflow:hidden}.ili9341-screen simulation-display{display:block;width:100%;height:100%}</style>
<div class="ili9341-artwork"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 1669"><path fill="#901b19" fill-rule="evenodd" d="M0 0H1000V1669H0ZM42 78a38 38 0 1 0 76 0a38 38 0 1 0 -76 0ZM888 78a38 38 0 1 0 76 0a38 38 0 1 0 -76 0ZM42 1600a38 38 0 1 0 76 0a38 38 0 1 0 -76 0ZM888 1600a38 38 0 1 0 76 0a38 38 0 1 0 -76 0Z"/><path fill="#f5f1ed" d="M310.047 94L300.953 94L300.953 25.281L310.047 25.281L310.047 94ZM368.641 94L325.703 94L325.703 25.281L334.797 25.281L334.797 85.891L368.641 85.891L368.641 94ZM390.109 94L381.016 94L381.016 25.281L390.109 25.281L390.109 94ZM403.984 78.109L403.984 78.109L412.094 77.359Q413.125 83.078 416.031 85.656Q418.938 88.234 423.484 88.234L423.484 88.234Q427.375 88.234 430.305 86.453Q433.234 84.672 435.109 81.695Q436.984 78.719 438.250 73.656Q439.516 68.594 439.516 63.344L439.516 63.344Q439.516 62.781 439.469 61.656L439.469 61.656Q436.938 65.688 432.555 68.195Q428.172 70.703 423.063 70.703L423.063 70.703Q414.531 70.703 408.625 64.516Q402.719 58.328 402.719 48.203L402.719 48.203Q402.719 37.750 408.883 31.375Q415.047 25 424.328 25L424.328 25Q431.031 25 436.586 28.609Q442.141 32.219 445.023 38.898Q447.906 45.578 447.906 58.234L447.906 58.234Q447.906 71.406 445.047 79.211Q442.188 87.016 436.539 91.094Q430.891 95.172 423.297 95.172L423.297 95.172Q415.234 95.172 410.125 90.695Q405.016 86.219 403.984 78.109ZM438.531 47.781L438.531 47.781Q438.531 40.516 434.664 36.250Q430.797 31.984 425.359 31.984L425.359 31.984Q419.734 31.984 415.563 36.578Q411.391 41.172 411.391 48.484L411.391 48.484Q411.391 55.047 415.352 59.148Q419.313 63.250 425.125 63.250L425.125 63.250Q430.984 63.250 434.758 59.148Q438.531 55.047 438.531 47.781ZM456.156 75.859L456.156 75.859L464.594 74.734Q466.047 81.906 469.539 85.070Q473.031 88.234 478.047 88.234L478.047 88.234Q484 88.234 488.102 84.109Q492.203 79.984 492.203 73.891L492.203 73.891Q492.203 68.078 488.406 64.305Q484.609 60.531 478.750 60.531L478.750 60.531Q476.359 60.531 472.797 61.469L472.797 61.469L473.734 54.063Q474.578 54.156 475.094 54.156L475.094 54.156Q480.484 54.156 484.797 51.344Q489.109 48.531 489.109 42.672L489.109 42.672Q489.109 38.031 485.969 34.984Q482.828 31.938 477.859 31.938L477.859 31.938Q472.938 31.938 469.656 35.031Q466.375 38.125 465.438 44.313L465.438 44.313L457 42.813Q458.547 34.328 464.031 29.664Q469.516 25 477.672 25L477.672 25Q483.297 25 488.031 27.414Q492.766 29.828 495.273 34Q497.781 38.172 497.781 42.859L497.781 42.859Q497.781 47.313 495.391 50.969Q493 54.625 488.313 56.781L488.313 56.781Q494.406 58.188 497.781 62.617Q501.156 67.047 501.156 73.703L501.156 73.703Q501.156 82.703 494.594 88.961Q488.031 95.219 478 95.219L478 95.219Q468.953 95.219 462.977 89.828Q457 84.438 456.156 75.859ZM544.984 94L536.547 94L536.547 77.547L506.734 77.547L506.734 69.813L538.094 25.281L544.984 25.281L544.984 69.813L554.266 69.813L554.266 77.547L544.984 77.547L544.984 94ZM515.031 69.813L536.547 69.813L536.547 38.828L515.031 69.813ZM594.672 25L594.672 94L586.234 94L586.234 40.234Q583.188 43.141 578.242 46.047Q573.297 48.953 569.359 50.406L569.359 50.406L569.359 42.250Q576.438 38.922 581.734 34.188Q587.031 29.453 589.234 25L589.234 25L594.672 25Z"/><path fill="#b26825" d="M240 1350H760V1515Q760 1550 725 1550H275Q240 1550 240 1515Z"/><rect x="25" y="140" width="950" height="1260" rx="8" fill="#c8c5c2"/><rect x="50" y="170" width="900" height="1200" fill="#06090b"/><path d="M50 1370H950" stroke="#343a40" stroke-width="5"/><rect x="230" y="1602" width="524" height="65" fill="none" stroke="#f4ede4" stroke-width="5"/><circle cx="274.70403543108165" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector0pin" cx="274.70403543108165" cy="1634.3269546348126" r="12" fill="#dbb967"/><circle cx="329.3276812426224" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector1pin" cx="329.3276812426224" cy="1634.3269546348126" r="12" fill="#dbb967"/><circle cx="383.9513270541632" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector2pin" cx="383.9513270541632" cy="1634.3269546348126" r="12" fill="#dbb967"/><circle cx="438.57497286570396" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector3pin" cx="438.57497286570396" cy="1634.3269546348126" r="12" fill="#dbb967"/><circle cx="493.1986186772447" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector4pin" cx="493.1986186772447" cy="1634.3269546348126" r="12" fill="#dbb967"/><circle cx="547.8222644887855" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector5pin" cx="547.8222644887855" cy="1634.3269546348126" r="12" fill="#dbb967"/><circle cx="602.4459103003263" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector6pin" cx="602.4459103003263" cy="1634.3269546348126" r="12" fill="#dbb967"/><circle cx="657.0695561118671" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector7pin" cx="657.0695561118671" cy="1634.3269546348126" r="12" fill="#dbb967"/><circle cx="711.6932019234079" cy="1634.3269546348126" r="22" fill="#c9c9c3"/><circle id="connector8pin" cx="711.6932019234079" cy="1634.3269546348126" r="12" fill="#dbb967"/><path fill="#f5f1ed" d="M199.373 1613.625L199.373 1651L194.803 1651L194.803 1621.877Q193.152 1623.451 190.474 1625.025Q187.795 1626.600 185.662 1627.387L185.662 1627.387L185.662 1622.969Q189.496 1621.166 192.365 1618.602Q195.234 1616.037 196.428 1613.625L196.428 1613.625L199.373 1613.625Z"/><path fill="#f5f1ed" d="M777.844 1642.393L777.844 1642.393L782.236 1641.986Q782.795 1645.084 784.369 1646.480Q785.943 1647.877 788.406 1647.877L788.406 1647.877Q790.514 1647.877 792.101 1646.912Q793.688 1645.947 794.703 1644.335Q795.719 1642.723 796.404 1639.980Q797.090 1637.238 797.090 1634.395L797.090 1634.395Q797.090 1634.090 797.064 1633.480L797.064 1633.480Q795.693 1635.664 793.319 1637.022Q790.945 1638.381 788.178 1638.381L788.178 1638.381Q783.557 1638.381 780.357 1635.029Q777.158 1631.678 777.158 1626.193L777.158 1626.193Q777.158 1620.531 780.497 1617.078Q783.836 1613.625 788.863 1613.625L788.863 1613.625Q792.494 1613.625 795.503 1615.580Q798.512 1617.535 800.073 1621.153Q801.635 1624.771 801.635 1631.627L801.635 1631.627Q801.635 1638.762 800.086 1642.989Q798.537 1647.217 795.478 1649.426Q792.418 1651.635 788.305 1651.635L788.305 1651.635Q783.938 1651.635 781.170 1649.210Q778.402 1646.785 777.844 1642.393ZM796.557 1625.965L796.557 1625.965Q796.557 1622.029 794.462 1619.719Q792.367 1617.408 789.422 1617.408L789.422 1617.408Q786.375 1617.408 784.115 1619.896Q781.855 1622.385 781.855 1626.346L781.855 1626.346Q781.855 1629.900 784.001 1632.122Q786.146 1634.344 789.295 1634.344L789.295 1634.344Q792.469 1634.344 794.513 1632.122Q796.557 1629.900 796.557 1625.965Z"/></svg>
<div class="ili9341-screen"><simulation-display [framebuffer]="component.framebuffer"></simulation-display></div></div>