CINXE.COM
NiceGUI
<!DOCTYPE html> <html> <head> <title>NiceGUI</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="/_nicegui/2.13.0/static/favicon.ico" rel="shortcut icon" /> <link href="/_nicegui/2.13.0/static/nicegui.css" rel="stylesheet" type="text/css" /> <link href="/_nicegui/2.13.0/static/fonts.css" rel="stylesheet" type="text/css" /> <link href="/_nicegui/2.13.0/static/quasar.prod.css" rel="stylesheet" type="text/css" /> <!-- prevent Prettier from removing this line --> <meta name="description" content="NiceGUI is an easy-to-use, Python-based UI framework, which shows up in your web browser. You can create buttons, dialogs, Markdown, 3D scenes, plots and much more." /> <!-- https://realfavicongenerator.net/ --> <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" /> <link rel="manifest" href="/favicon/site.webmanifest" /> <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5898d4" /> <link rel="shortcut icon" href="/favicon/favicon.ico" /> <meta name="msapplication-TileColor" content="#2b5797" /> <meta name="msapplication-config" content="/favicon/browserconfig.xml" /> <meta name="theme-color" content="#5898d4" /> <script> window.onscroll = () => { if (document.querySelector(".q-dialog__backdrop")) return; const header = document.querySelector(".q-header"); if (document.documentElement.scrollTop > 50) header.classList.add("fade"); else header.classList.remove("fade"); }; </script> <script src="/static/fuse.js@7.0.0"></script> <style>html, body { max-width: 100%; overflow-x: hidden; background-color: #f8f8f8; font-family: "Fira Sans", Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --q-dark-page: #222; } html:has(.body--dark) { background-color: #222; } html:not(.has-dialog) { scroll-behavior: smooth; } .browser-window { font-family: Roboto, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bash-window code, .python-window code { font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .fancy-em em { font-style: normal; color: #5898d4; } a:link:not(.browser-window *), a:visited:not(.browser-window *) { color: inherit !important; text-decoration: none; } a:hover:not(.browser-window *), a:active:not(.browser-window *) { opacity: 0.85; } .bold-links a:link { font-weight: 500; } .arrow-links a:link:not(.auto-link)::after { content: "north_east"; font-family: "Material Icons"; font-weight: 100; vertical-align: -10%; } .rst-param-tables table { text-align: left; table-layout: auto; } .rst-param-tables table th, .rst-param-tables table td { border-width: 0; padding: 0; } .rst-param-tables table th { padding-right: 1em; } .q-header { height: 70px; background-color: #5898d4; } .q-header.fade { padding-top: 20px; transform: translateY(-20px); background-color: #5898d4d0; backdrop-filter: blur(5px); } .body--dark .q-header { background-color: #3e6a94; } .body--dark .q-header.fade { background-color: #3e6a94d0; } .scroll-indicator:after { content: ""; display: block; width: 24px; height: 24px; margin: 8px; border-left: 3px solid #444; border-bottom: 3px solid #444; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb04 2s infinite; animation: sdb04 1.5s infinite; transition-timing-function: ease; } .body--dark .scroll-indicator:after { border-left: 3px solid #bbb; border-bottom: 3px solid #bbb; } @-webkit-keyframes sdb04 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); } 15% { -webkit-transform: rotate(-45deg) translate(-10px, 10px); } 30% { -webkit-transform: rotate(-45deg) translate(0, 0); } } @keyframes sdb04 { 0% { transform: rotate(-45deg) translate(0, 0); } 15% { transform: rotate(-45deg) translate(-10px, 10px); } 30% { transform: rotate(-45deg) translate(0, 0); } } dl.field-list, dl.docinfo { display: grid; grid-template-columns: max-content auto; margin: 1em 0; } dl.field-list dt, dl.docinfo dt { grid-column-start: 1; margin-right: 1em; font-weight: 500; } dl.field-list dd, dl.docinfo dd { grid-column-start: 2; } dl.field-list p, dl.docinfo p { margin: 0; } .dark-box { background-color: #5898d4; width: 100%; } .body--dark .dark-box { background-color: #3e6a94; } /* google-webfonts-helper (https://gwfh.mranftl.com/fonts) */ /* fira-sans-regular - latin */ @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; src: url("../fonts/fira-sans-v16-latin-regular.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/fira-sans-v16-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/fira-sans-v16-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/fira-sans-v16-latin-regular.woff") format("woff"), /* Modern Browsers */ url("../fonts/fira-sans-v16-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/fira-sans-v16-latin-regular.svg#FiraSans") format("svg"); /* Legacy iOS */ } /* fira-sans-500 - latin */ @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; src: url("../fonts/fira-sans-v16-latin-500.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/fira-sans-v16-latin-500.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/fira-sans-v16-latin-500.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/fira-sans-v16-latin-500.woff") format("woff"), /* Modern Browsers */ url("../fonts/fira-sans-v16-latin-500.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/fira-sans-v16-latin-500.svg#FiraSans") format("svg"); /* Legacy iOS */ } /* fira-sans-regular - latin */ @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; src: url("../fonts/fira-sans-v16-latin-regular.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/fira-sans-v16-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/fira-sans-v16-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/fira-sans-v16-latin-regular.woff") format("woff"), /* Modern Browsers */ url("../fonts/fira-sans-v16-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/fira-sans-v16-latin-regular.svg#FiraSans") format("svg"); /* Legacy iOS */ } /* fira-sans-700 - latin */ @font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; src: url("../fonts/fira-sans-v16-latin-700.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/fira-sans-v16-latin-700.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/fira-sans-v16-latin-700.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/fira-sans-v16-latin-700.woff") format("woff"), /* Modern Browsers */ url("../fonts/fira-sans-v16-latin-700.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/fira-sans-v16-latin-700.svg#FiraSans") format("svg"); /* Legacy iOS */ } /* fira-mono-regular - latin */ @font-face { font-family: "Fira Mono"; font-style: normal; font-weight: 400; src: url("../fonts/fira-mono-v14-latin-regular.eot"); /* IE9 Compat Modes */ src: local(""), url("../fonts/fira-mono-v14-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/fira-mono-v14-latin-regular.woff2") format("woff2"), /* Super Modern Browsers */ url("../fonts/fira-mono-v14-latin-regular.woff") format("woff"), /* Modern Browsers */ url("../fonts/fira-mono-v14-latin-regular.ttf") format("truetype"), /* Safari, Android, iOS */ url("../fonts/fira-mono-v14-latin-regular.svg#FiraMono") format("svg"); /* Legacy iOS */ } </style> <script> async function loadSearchData() { const response = await fetch("/static/search_index.json?version=2.13.0"); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const searchData = await response.json(); const options = { keys: [ { name: "title", weight: 0.7 }, { name: "content", weight: 0.3 }, ], tokenize: true, // each word is ranked individually threshold: 0.3, location: 0, distance: 10000, }; window.fuse = new Fuse(searchData, options); } loadSearchData(); </script> <style> @keyframes star-tumble { 0% { transform: translateX(6em) rotate(432deg); } 100% { transform: translateX(0) rotate(0); } } @keyframes star-pulse { 0% { scale: 1.0; } 60% { scale: 1.0; } 70% { scale: 1.2; } 80% { scale: 1.0; } 90% { scale: 1.2; } 100% { scale: 1.0; } } .star { height: 1.75em; fill: white; animation: 1s ease-in-out 6s both star-tumble, 3s ease-in-out 3s infinite star-pulse; } .star:hover { fill: rgb(250, 204, 21); } @keyframes star-grow { 0% { width: 0 } 100% { width: 2em } } .star-container { animation: 1s ease-in-out 6s both star-grow; } </style> </head> <body> <script src="/_nicegui/2.13.0/static/es-module-shims.js"></script> <script src="/_nicegui/2.13.0/static/socket.io.min.js"></script> <script src="/_nicegui/2.13.0/static/tailwindcss.min.js"></script> <!-- prevent Prettier from removing this line --> <script src="/_nicegui/2.13.0/static/vue.global.prod.js"></script> <script src="/_nicegui/2.13.0/static/quasar.umd.prod.js"></script> <script src="/_nicegui/2.13.0/static/nicegui.js"></script> <script src="/_nicegui/2.13.0/static/lang/en-US.umd.prod.js"></script> <script type="importmap"> {"imports": {"ag-grid-community":"/_nicegui/2.13.0/libraries/824761fa71c0302be6be68e483808b57/ag-grid-community.min.js","mermaid":"/_nicegui/2.13.0/libraries/a022d63bc2efb68f616955feada73028/mermaid.esm.min.mjs","blockDiagram-NDWNTGEE":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/blockDiagram-NDWNTGEE.mjs","c4Diagram-AUYESYAG":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/c4Diagram-AUYESYAG.mjs","chunk-2RSIMOBZ":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-2RSIMOBZ.mjs","chunk-4BPNZXC3":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-4BPNZXC3.mjs","chunk-4KE642ED":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-4KE642ED.mjs","chunk-4SRTBRON":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-4SRTBRON.mjs","chunk-6BY5RJGC":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-6BY5RJGC.mjs","chunk-6IZS222M":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-6IZS222M.mjs","chunk-6XGRHI2A":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-6XGRHI2A.mjs","chunk-AC3VT7B7":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-AC3VT7B7.mjs","chunk-BKDDFIKN":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-BKDDFIKN.mjs","chunk-BOP2KBYH":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-BOP2KBYH.mjs","chunk-C7NU23FD":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-C7NU23FD.mjs","chunk-CBSWTUHP":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-CBSWTUHP.mjs","chunk-D3PZO57J":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-D3PZO57J.mjs","chunk-DZFIHE2J":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-DZFIHE2J.mjs","chunk-E4AWDUZE":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-E4AWDUZE.mjs","chunk-F4773GRL":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-F4773GRL.mjs","chunk-GTKDMUJJ":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-GTKDMUJJ.mjs","chunk-KMOJB3TB":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-KMOJB3TB.mjs","chunk-NQURTBEV":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-NQURTBEV.mjs","chunk-OUDNNCD4":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-OUDNNCD4.mjs","chunk-RRFB4HDS":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-RRFB4HDS.mjs","chunk-TI4EEUUG":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-TI4EEUUG.mjs","chunk-U6LOUQAF":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-U6LOUQAF.mjs","chunk-UWHJNN4Q":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-UWHJNN4Q.mjs","chunk-VRGDDFRA":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-VRGDDFRA.mjs","chunk-VSLJSFIP":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-VSLJSFIP.mjs","chunk-WVHPJQMP":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-WVHPJQMP.mjs","chunk-YFFLADYN":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-YFFLADYN.mjs","chunk-YJEQJWB7":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-YJEQJWB7.mjs","chunk-YPUTD6PB":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/chunk-YPUTD6PB.mjs","classDiagram-EPVPYR3L":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/classDiagram-EPVPYR3L.mjs","classDiagram-v2-NO4EPWGV":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/classDiagram-v2-NO4EPWGV.mjs","dagre-EVPMPUST":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/dagre-EVPMPUST.mjs","diagram-V25JEYTC":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/diagram-V25JEYTC.mjs","erDiagram-Y4N7DENO":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/erDiagram-Y4N7DENO.mjs","flowDiagram-JTTVBJUY":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/flowDiagram-JTTVBJUY.mjs","ganttDiagram-6SR64PWN":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/ganttDiagram-6SR64PWN.mjs","gitGraph-F2EDSAW4-LKDW3VZQ":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/gitGraph-F2EDSAW4-LKDW3VZQ.mjs","gitGraphDiagram-LRIBUTDQ":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/gitGraphDiagram-LRIBUTDQ.mjs","info-PWGDJKR5-T7ZKA3RY":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/info-PWGDJKR5-T7ZKA3RY.mjs","infoDiagram-YTPSHCSX":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/infoDiagram-YTPSHCSX.mjs","journeyDiagram-VRXW2F6L":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/journeyDiagram-VRXW2F6L.mjs","katex-SWYD7GD6":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/katex-SWYD7GD6.mjs","mindmap-definition-KLCIANCF":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/mindmap-definition-KLCIANCF.mjs","packet-7PPW3X5M-O6SZ3T2R":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/packet-7PPW3X5M-O6SZ3T2R.mjs","pie-RF5LNP4B-V656W2AT":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/pie-RF5LNP4B-V656W2AT.mjs","pieDiagram-WYSUK7CQ":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/pieDiagram-WYSUK7CQ.mjs","quadrantDiagram-K5BY4R5E":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/quadrantDiagram-K5BY4R5E.mjs","requirementDiagram-2DBX4ZW4":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/requirementDiagram-2DBX4ZW4.mjs","sankeyDiagram-F3GI3WFI":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/sankeyDiagram-F3GI3WFI.mjs","sequenceDiagram-QBGN4KDC":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/sequenceDiagram-QBGN4KDC.mjs","stateDiagram-S3XGF733":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/stateDiagram-S3XGF733.mjs","stateDiagram-v2-BSO5MUCZ":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/stateDiagram-v2-BSO5MUCZ.mjs","timeline-definition-MHTE3MCH":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/timeline-definition-MHTE3MCH.mjs","xychartDiagram-RLS75X5Z":"/_nicegui/2.13.0/libraries/cfe32b157f25617b6d945cdaa9efc3d0/xychartDiagram-RLS75X5Z.mjs","echarts":"/_nicegui/2.13.0/libraries/c3db162d662122eb0e7be8cd04794fac/echarts.min.js","echarts-gl":"/_nicegui/2.13.0/libraries/03262291cc1f8c805209dc27af296755/echarts-gl.min.js","highcharts":"/_nicegui/2.13.0/libraries/a4508777eaad59c4c2eafc6494f47955/highcharts.js","highcharts-3d":"/_nicegui/2.13.0/libraries/a4508777eaad59c4c2eafc6494f47955/highcharts-3d.js","highcharts-more":"/_nicegui/2.13.0/libraries/a4508777eaad59c4c2eafc6494f47955/highcharts-more.js","accessibility":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/accessibility.js","annotations":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/annotations.js","annotations-advanced":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/annotations-advanced.js","arc-diagram":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/arc-diagram.js","arrow-symbols":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/arrow-symbols.js","boost":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/boost.js","boost-canvas":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/boost-canvas.js","broken-axis":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/broken-axis.js","bullet":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/bullet.js","coloraxis":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/coloraxis.js","current-date-indicator":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/current-date-indicator.js","cylinder":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/cylinder.js","data":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/data.js","data-tools":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/data-tools.js","datagrouping":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/datagrouping.js","debugger":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/debugger.js","dependency-wheel":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/dependency-wheel.js","dotplot":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/dotplot.js","drag-panes":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/drag-panes.js","draggable-points":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/draggable-points.js","drilldown":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/drilldown.js","dumbbell":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/dumbbell.js","export-data":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/export-data.js","exporting":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/exporting.js","flowmap":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/flowmap.js","full-screen":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/full-screen.js","funnel":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/funnel.js","funnel3d":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/funnel3d.js","gantt":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/gantt.js","geoheatmap":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/geoheatmap.js","grid-axis":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/grid-axis.js","heatmap":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/heatmap.js","heikinashi":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/heikinashi.js","histogram-bellcurve":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/histogram-bellcurve.js","hollowcandlestick":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/hollowcandlestick.js","item-series":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/item-series.js","lollipop":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/lollipop.js","map":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/map.js","marker-clusters":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/marker-clusters.js","mouse-wheel-zoom":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/mouse-wheel-zoom.js","navigator":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/navigator.js","networkgraph":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/networkgraph.js","no-data-to-display":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/no-data-to-display.js","offline-exporting":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/offline-exporting.js","organization":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/organization.js","overlapping-datalabels":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/overlapping-datalabels.js","parallel-coordinates":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/parallel-coordinates.js","pareto":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/pareto.js","pathfinder":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/pathfinder.js","pattern-fill":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/pattern-fill.js","pictorial":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/pictorial.js","price-indicator":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/price-indicator.js","pyramid3d":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/pyramid3d.js","sankey":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/sankey.js","series-label":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/series-label.js","series-on-point":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/series-on-point.js","solid-gauge":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/solid-gauge.js","sonification":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/sonification.js","static-scale":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/static-scale.js","stock":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/stock.js","stock-tools":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/stock-tools.js","streamgraph":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/streamgraph.js","sunburst":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/sunburst.js","textpath":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/textpath.js","tiledwebmap":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/tiledwebmap.js","tilemap":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/tilemap.js","timeline":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/timeline.js","treegraph":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/treegraph.js","treegrid":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/treegrid.js","treemap":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/treemap.js","variable-pie":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/variable-pie.js","variwide":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/variwide.js","vector":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/vector.js","venn":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/venn.js","windbarb":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/windbarb.js","wordcloud":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/wordcloud.js","xrange":"/_nicegui/2.13.0/libraries/fc617beddf6aa16bd7383b7fdf4e2cb2/xrange.js","nipplejs":"/_nicegui/2.13.0/libraries/d41977ee1b3e11c33e82694895ca2ba9/nipplejs.js","standalone":"/_nicegui/2.13.0/libraries/26e9f3a0290f18f1ab866f8d6faa7480/standalone.js","plotly":"/_nicegui/2.13.0/libraries/a7b1c4d4fc8dfc15b2e1a1f5e04b13ae/plotly.min.js","three":"/_nicegui/2.13.0/libraries/b762210ea1a93dc0f46fb5b27705c9e0/three.module.js","BufferGeometryUtils":"/_nicegui/2.13.0/libraries/76e9d2120ee202fa3a567f310e68de5f/BufferGeometryUtils.js","CSS2DRenderer":"/_nicegui/2.13.0/libraries/76e9d2120ee202fa3a567f310e68de5f/CSS2DRenderer.js","CSS3DRenderer":"/_nicegui/2.13.0/libraries/76e9d2120ee202fa3a567f310e68de5f/CSS3DRenderer.js","DragControls":"/_nicegui/2.13.0/libraries/76e9d2120ee202fa3a567f310e68de5f/DragControls.js","GLTFLoader":"/_nicegui/2.13.0/libraries/76e9d2120ee202fa3a567f310e68de5f/GLTFLoader.js","OrbitControls":"/_nicegui/2.13.0/libraries/76e9d2120ee202fa3a567f310e68de5f/OrbitControls.js","STLLoader":"/_nicegui/2.13.0/libraries/76e9d2120ee202fa3a567f310e68de5f/STLLoader.js","tween":"/_nicegui/2.13.0/libraries/56fb5b540488dffdd933adb0cc513c53/tween.umd.js"}} </script> <style>*[data-joystick] > div {width: 100%; height: 100%; position: relative; } .js-plotly-plot .plotly .modebar-group {display: flex; } .js-plotly-plot .plotly .modebar-btn {display: flex; } .js-plotly-plot .plotly .modebar-btn svg {position: static; } .js-plotly-plot {box-sizing: content-box; }</style> <script> window.onload = () => { const header = getHtmlElement(5); new ResizeObserver(() => { document.documentElement.style.scrollPaddingTop = `${header.offsetHeight}px`; }).observe(header); }; </script> <script type="text/x-template" id="tpl-joystick"><div data-joystick><div></div></div></script> <script type="text/x-template" id="tpl-plotly"><div data-plotly></div></script> <div id="app"></div> <div id="popup" aria-hidden="true"> <span>Connection lost.</span> <span>Trying to reconnect...</span> </div> <script type="module"> const app = createApp(parseElements(String.raw`{"0":{"tag":"q-layout","class":["nicegui-layout"],"props":{"view":"hHh lpr fff"},"children":[5,1]},"1":{"tag":"q-page-container","children":[2]},"2":{"tag":"q-page","children":[3]},"3":{"tag":"div","class":["nicegui-content","p-0","gap-0"],"children":[4,65,71,94,153,182,286,292,447,457]},"4":{"tag":"nicegui-dark_mode","props":{"value":null,"loopback":true},"events":[{"listener_id":"7c588519-d3df-43fd-862f-135046eb0ab0","type":"update:value","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}],"component":{"key":"b0b17893a51343979e2090deee730538/dark_mode.js","name":"dark_mode","tag":"nicegui-dark_mode"}},"5":{"tag":"q-header","class":["nicegui-header","wrap","items-center","duration-200","p-0","px-4","no-wrap"],"style":{"box-shadow":"0 2px 4px rgba(0, 0, 0, 0.1)"},"props":{"model-value":true,"loopback":true,"bordered":false,"elevated":false},"children":[6,9,16,24,25,27,32,35,38,41,50],"events":[{"listener_id":"bfb456be-6715-4d00-9a16-0372706d02dd","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"6":{"tag":"nicegui-link","text":"","class":["nicegui-link","row","gap-4","items-center","no-wrap","mr-auto"],"props":{"href":"/","target":"_self"},"children":[7,8],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"7":{"tag":"div","class":["w-8","stroke-white","stroke-2","max-[610px]:hidden"],"props":{"innerHTML":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Ebene_1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 62.44 71.74\">\n <defs>\n <style>.svg_face{fill:none;stroke-linecap:round;stroke-linejoin:round}</style>\n </defs>\n <path class=\"svg_face\" d=\"M55.35,18.98v23.97c0,14.34-10.89,25.96-24.34,25.96S6.68,57.29,6.68,42.95v-11.31c7.48,0,8.01-11.96,8.01-11.96,1.79-.78,3.82-.89,6.02,.23,11.9,6.08,26.13,1.69,31.33-.41,1.21-.49,2.34-.6,3.31-.52Z\"/>\n <path class=\"svg_face\" d=\"M14.7,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M39.71,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M6.68,34.87v9.97c-2.07,0-3.75-2.23-3.75-4.99s1.68-4.98,3.75-4.98Z\"/>\n <path class=\"svg_face\" d=\"M55.35,44.84v-9.97c2.07,0,3.75,2.23,3.75,4.99s-1.68,4.98-3.75,4.98Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-1.33-.96-3.34-1.13c-.97-.08-2.1,.03-3.31,.52-5.2,2.1-19.43,6.49-31.33,.41-2.2-1.12-4.23-1.01-6.02-.23,0,0-.53,11.96-8.01,11.96v-10.33c0-.18,0-.35,.01-.53,.03-2.34,.17-4.72,.61-7,.62-3.05,4.35-7.48,9.01-8.8C34.04-.04,47.2,4.46,51.85,7.66c4.91,3.39,6.85,12.41,6.84,12.45Z\"/>\n <path class=\"svg_face\" d=\"M7.3,13.78c-.44,2.28-.58,4.66-.61,7,.01-2.33,.15-4.71,.61-7Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-.99-6.57-7.03-6.71c-2.46-.05-4.13,1.75-7.1,1.77-3.8,.02-5.11-1.97-5.11-1.97\"/>\n <path class=\"svg_face\" d=\"M14.82,51.45s4.92,6.49,15.65,6.49,16.74-6.49,16.74-6.49\"/>\n</svg>\n"}},"8":{"tag":"div","class":["w-24"],"props":{"innerHTML":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Ebene_1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 62.44 16.48\">\n <defs>\n <style>.svg_letter1{stroke:#fff;fill:#fff;stroke-miterlimit:10;stroke-width:.25px;}</style>\n <style>.svg_letter2{fill:#fff}</style>\n </defs>\n <path class=\"svg_letter1\" d=\"M3.26,14.29c-.22,0-.4-.08-.55-.22-.14-.15-.22-.33-.22-.56V3.35c0-.23,.07-.42,.22-.56s.33-.22,.55-.22c.24,0,.44,.09,.6,.29l6.54,8.7V3.35c0-.23,.08-.42,.23-.56,.15-.15,.33-.22,.55-.22,.23,0,.42,.07,.56,.22,.14,.14,.21,.33,.21,.56V13.51c0,.22-.07,.41-.21,.56-.14,.15-.33,.22-.56,.22-.1,0-.21-.02-.32-.07s-.21-.11-.28-.2L4.04,5.32V13.51c0,.22-.07,.41-.22,.56-.14,.15-.33,.22-.56,.22Z\"/>\n <path class=\"svg_letter1\" d=\"M15.23,4.75c-.27,0-.5-.1-.7-.29-.2-.2-.29-.43-.29-.7s.1-.5,.29-.7,.43-.29,.7-.29,.5,.1,.7,.29c.2,.2,.29,.43,.29,.7s-.1,.5-.29,.7-.43,.29-.7,.29Zm0,9.54c-.22,0-.4-.07-.55-.22s-.22-.33-.22-.55V6.85c0-.23,.07-.41,.22-.55,.15-.14,.33-.21,.55-.21,.23,0,.42,.07,.55,.21s.21,.33,.21,.55v6.68c0,.22-.07,.4-.21,.55-.14,.15-.32,.22-.55,.22Z\"/>\n <path class=\"svg_letter1\" d=\"M22.08,14.35c-.8,0-1.51-.18-2.14-.55-.62-.37-1.12-.86-1.47-1.49-.35-.62-.53-1.33-.53-2.12s.17-1.53,.53-2.16c.35-.63,.83-1.12,1.44-1.48,.61-.35,1.31-.53,2.1-.53,.59,0,1.13,.11,1.62,.34,.49,.23,.93,.56,1.32,1.01,.14,.16,.19,.33,.15,.5s-.15,.32-.33,.45c-.14,.1-.29,.13-.46,.1-.17-.04-.33-.12-.46-.26-.49-.52-1.1-.78-1.83-.78-.51,0-.96,.12-1.35,.35-.39,.24-.7,.56-.92,.98s-.33,.92-.33,1.49c0,.54,.11,1.02,.34,1.44s.54,.75,.94,1c.4,.25,.87,.37,1.39,.37,.35,0,.66-.04,.92-.13,.26-.08,.51-.22,.73-.4,.16-.13,.33-.2,.5-.22,.17-.02,.32,.03,.45,.14,.17,.14,.26,.3,.29,.47,.02,.18-.04,.33-.18,.47-.72,.67-1.62,1-2.7,1Z\"/>\n <path class=\"svg_letter1\" d=\"M30.75,14.35c-.83,0-1.57-.18-2.21-.53-.64-.35-1.15-.84-1.51-1.47-.37-.62-.55-1.34-.55-2.15s.17-1.54,.52-2.17,.82-1.11,1.43-1.47c.61-.35,1.31-.53,2.1-.53s1.45,.17,2.01,.52c.56,.34,.99,.82,1.28,1.42,.29,.6,.44,1.3,.44,2.09,0,.19-.07,.35-.2,.47s-.29,.19-.5,.19h-6.04v-1.2h6l-.61,.42c-.01-.5-.11-.95-.3-1.34-.19-.4-.46-.71-.81-.94-.35-.23-.78-.34-1.28-.34-.57,0-1.06,.12-1.46,.38-.41,.25-.71,.59-.92,1.03-.21,.43-.32,.93-.32,1.48s.12,1.04,.38,1.47,.6,.77,1.04,1.02c.44,.25,.95,.38,1.52,.38,.31,0,.63-.06,.95-.17s.59-.25,.79-.4c.15-.11,.31-.17,.49-.17,.17,0,.33,.05,.46,.16,.17,.15,.26,.32,.27,.5,0,.18-.07,.34-.24,.46-.34,.27-.76,.49-1.27,.66-.5,.17-.99,.25-1.45,.25Z\"/>\n <path class=\"svg_letter2\" d=\"M41.56,14.4c-.81,0-1.57-.16-2.27-.47-.71-.31-1.33-.74-1.86-1.3-.53-.56-.95-1.2-1.25-1.92-.3-.73-.45-1.5-.45-2.33s.15-1.59,.44-2.32c.29-.72,.71-1.36,1.25-1.91s1.16-.98,1.86-1.3c.71-.31,1.47-.47,2.29-.47,.72,0,1.38,.11,1.96,.32s1.16,.54,1.71,1c.09,.07,.14,.15,.16,.25,.01,.1,0,.19-.04,.27s-.25,.33-.33,.37-.17,.06-.28,.04c-.1,0-.21-.05-.31-.13-.39-.34-.81-.59-1.27-.76s-1-.25-1.61-.25c-.65,0-1.26,.13-1.82,.39-.57,.26-1.06,.62-1.49,1.07-.43,.45-.77,.97-1.01,1.56-.25,.59-.37,1.21-.37,1.88s.12,1.32,.37,1.91,.58,1.11,1.01,1.56c.43,.45,.93,.8,1.49,1.06,.56,.25,1.17,.38,1.82,.38,.55,0,1.07-.09,1.56-.27,.49-.18,.95-.44,1.39-.78,.12-.1,.25-.14,.38-.12,.13,.02,.25,.08,.35,.18,.1,.1,.15,.23,.15,.39,0,.08,0,.15-.03,.22-.02,.07-.07,.13-.14,.2-.51,.47-1.08,.8-1.71,1s-1.29,.29-1.96,.29Zm3.84-1.71l-1.14-.24v-3.02h-2.34c-.17,0-.31-.05-.42-.15-.11-.1-.17-.23-.17-.38s.05-.27,.17-.37c.11-.1,.25-.14,.42-.14h2.89c.17,0,.31,.05,.42,.16,.11,.1,.17,.24,.17,.41v3.72Z\"/>\n <path class=\"svg_letter2\" d=\"M52.05,14.49c-.91,0-1.72-.18-2.42-.53s-1.25-.83-1.65-1.46c-.39-.62-.59-1.33-.59-2.13V3.12c0-.17,.05-.31,.17-.42,.11-.11,.25-.17,.42-.17s.31,.05,.42,.17c.11,.11,.17,.25,.17,.42v7.26c0,.59,.15,1.11,.44,1.56,.29,.45,.71,.8,1.24,1.06,.53,.26,1.13,.38,1.82,.38s1.26-.13,1.79-.38c.52-.25,.93-.61,1.22-1.06,.29-.45,.44-.97,.44-1.56V3.12c0-.17,.05-.31,.16-.42,.11-.11,.25-.17,.42-.17,.18,0,.32,.05,.43,.17,.11,.11,.16,.25,.16,.42v7.26c0,.8-.2,1.51-.59,2.13-.4,.62-.94,1.11-1.63,1.46-.7,.35-1.49,.53-2.39,.53Z\"/>\n <path class=\"svg_letter2\" d=\"M59.36,14.25c-.17,0-.31-.05-.42-.17-.11-.11-.17-.25-.17-.42V3.12c0-.17,.05-.31,.17-.42,.11-.11,.25-.17,.42-.17s.31,.05,.42,.17c.11,.11,.17,.25,.17,.42V13.67c0,.17-.06,.31-.17,.42-.11,.11-.25,.17-.42,.17Z\"/>\n</svg>\n"}},"9":{"tag":"div","class":["nicegui-row","row","max-[1050px]:hidden"],"children":[10,11,12,13,14,15]},"10":{"tag":"nicegui-link","text":"Installation","class":["text-lg","text-white"],"props":{"href":"/#installation","target":"_self"},"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"11":{"tag":"nicegui-link","text":"Features","class":["text-lg","text-white"],"props":{"href":"/#features","target":"_self"},"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"12":{"tag":"nicegui-link","text":"Demos","class":["text-lg","text-white"],"props":{"href":"/#demos","target":"_self"},"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"13":{"tag":"nicegui-link","text":"Documentation","class":["text-lg","text-white"],"props":{"href":"/documentation","target":"_self"},"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"14":{"tag":"nicegui-link","text":"Examples","class":["text-lg","text-white"],"props":{"href":"/#examples","target":"_self"},"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"15":{"tag":"nicegui-link","text":"Why?","class":["text-lg","text-white"],"props":{"href":"/#why","target":"_self"},"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"16":{"tag":"q-dialog","props":{"model-value":false,"loopback":true},"children":[17],"events":[{"listener_id":"52139679-3d18-4043-af88-a586605c015d","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"17":{"tag":"q-card","class":["nicegui-card","nicegui-card-tight","w-[800px]","h-[600px]"],"children":[18,22,23]},"18":{"tag":"div","class":["nicegui-row","row","w-full","items-center","px-4"],"children":[19,20,21]},"19":{"tag":"q-icon","props":{"name":"search","size":"2em"}},"20":{"tag":"nicegui-input","class":["flex-grow"],"props":{"value":"","loopback":false,"error":null,"placeholder":"Search documentation","type":"text","_autocomplete":[],"borderless":true,"autofocus":true},"events":[{"listener_id":"de3b6785-c912-4f98-9c32-062407f7c612","type":"update:value","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}],"component":{"key":"b0b17893a51343979e2090deee730538/input.js","name":"input","tag":"nicegui-input"}},"21":{"tag":"q-btn","class":["shadow"],"props":{"color":"grey-5","label":"ESC","padding":"2px 8px","outline":true,"size":"sm"},"events":[{"listener_id":"1503ca5b-2d28-49a0-9632-7ed8cba8aa60","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"22":{"tag":"q-separator","class":["nicegui-separator"]},"23":{"tag":"q-list","class":["w-full"],"props":{"separator":true}},"24":{"tag":"nicegui-keyboard","props":{"events":["keydown","keyup"],"repeating":true,"ignore":["input","select","button","textarea"]},"events":[{"listener_id":"05da1084-bb3b-4184-848f-4aa7827b591b","type":"key","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}],"component":{"key":"b0b17893a51343979e2090deee730538/keyboard.js","name":"keyboard","tag":"nicegui-keyboard"}},"25":{"tag":"q-btn","props":{"color":"white","label":"","icon":"search","flat":true},"children":[26],"events":[{"listener_id":"e1f75471-0029-4f85-9014-d0af70fa98ed","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"26":{"tag":"q-tooltip","text":"Press Ctrl+K or / to search the documentation"},"27":{"tag":"div","class":["max-[420px]:hidden"],"children":[28,29,30,31]},"28":{"tag":"q-tooltip","text":"Cycle theme mode through dark, light, and system/auto."},"29":{"tag":"q-btn","class":["hidden"],"props":{"color":"white","label":"","icon":"dark_mode","flat":true,"fab-mini":true},"events":[{"listener_id":"b2fdc663-4cfb-4c61-b0be-e084d15b2247","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"30":{"tag":"q-btn","class":["hidden"],"props":{"color":"white","label":"","icon":"light_mode","flat":true,"fab-mini":true},"events":[{"listener_id":"0e6a85a7-a7a4-4e6d-9055-5398bfbf0a1c","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"31":{"tag":"q-btn","props":{"color":"white","label":"","icon":"brightness_auto","flat":true,"fab-mini":true},"events":[{"listener_id":"18f8bd98-8c8d-49a2-8787-ae2165b8206c","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"32":{"tag":"nicegui-link","text":"","class":["nicegui-link","max-[515px]:hidden"],"props":{"href":"https://discord.gg/TEpFeAaF4f","target":"_self"},"children":[33,34],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"33":{"tag":"q-tooltip","text":"Discord"},"34":{"tag":"div","class":["fill-white","scale-125","m-1"],"props":{"innerHTML":"<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20.317 4.4921C18.7873 3.80147 17.147 3.29265 15.4319 3.00122C15.4007 2.9956 15.3695 3.00965 15.3534 3.03777C15.1424 3.40697 14.9087 3.88862 14.7451 4.26719C12.9004 3.99545 11.0652 3.99545 9.25832 4.26719C9.09465 3.8802 8.85248 3.40697 8.64057 3.03777C8.62449 3.01059 8.59328 2.99654 8.56205 3.00122C6.84791 3.29172 5.20756 3.80054 3.67693 4.4921C3.66368 4.49772 3.65233 4.5071 3.64479 4.51928C0.533392 9.09311 -0.31895 13.5545 0.0991801 17.9606C0.101072 17.9822 0.11337 18.0028 0.130398 18.0159C2.18321 19.4993 4.17171 20.3998 6.12328 20.9967C6.15451 21.0061 6.18761 20.9949 6.20748 20.9695C6.66913 20.3492 7.08064 19.6952 7.43348 19.0073C7.4543 18.967 7.43442 18.9192 7.39186 18.9033C6.73913 18.6597 6.1176 18.3626 5.51973 18.0253C5.47244 17.9981 5.46865 17.9316 5.51216 17.8997C5.63797 17.8069 5.76382 17.7104 5.88396 17.613C5.90569 17.5952 5.93598 17.5914 5.96153 17.6026C9.88928 19.3672 14.1415 19.3672 18.023 17.6026C18.0485 17.5905 18.0788 17.5942 18.1015 17.612C18.2216 17.7095 18.3475 17.8069 18.4742 17.8997C18.5177 17.9316 18.5149 17.9981 18.4676 18.0253C17.8697 18.3692 17.2482 18.6597 16.5945 18.9024C16.552 18.9183 16.533 18.967 16.5538 19.0073C16.9143 19.6942 17.3258 20.3483 17.7789 20.9686C17.7978 20.9949 17.8319 21.0061 17.8631 20.9967C19.8241 20.3998 21.8126 19.4993 23.8654 18.0159C23.8834 18.0028 23.8948 17.9831 23.8967 17.9616C24.3971 12.8676 23.0585 8.4428 20.3482 4.52021C20.3416 4.5071 20.3303 4.49772 20.317 4.4921ZM8.02002 15.2778C6.8375 15.2778 5.86313 14.2095 5.86313 12.8976C5.86313 11.5857 6.8186 10.5175 8.02002 10.5175C9.23087 10.5175 10.1958 11.5951 10.1769 12.8976C10.1769 14.2095 9.22141 15.2778 8.02002 15.2778ZM15.9947 15.2778C14.8123 15.2778 13.8379 14.2095 13.8379 12.8976C13.8379 11.5857 14.7933 10.5175 15.9947 10.5175C17.2056 10.5175 18.1705 11.5951 18.1516 12.8976C18.1516 14.2095 17.2056 15.2778 15.9947 15.2778Z\"/></svg>\n"}},"35":{"tag":"nicegui-link","text":"","class":["nicegui-link","max-[465px]:hidden"],"props":{"href":"https://www.reddit.com/r/nicegui/","target":"_self"},"children":[36,37],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"36":{"tag":"q-tooltip","text":"Reddit"},"37":{"tag":"div","class":["fill-white","scale-125","m-1"],"props":{"innerHTML":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"3 3 14 14\" width=\"24\" height=\"24\">\n <path fill=\"#FFF\" d=\"M16.67,10A1.46,1.46,0,0,0,14.2,9a7.12,7.12,0,0,0-3.85-1.23L11,4.65,13.14,5.1a1,1,0,1,0,.13-0.61L10.82,4a0.31,0.31,0,0,0-.37.24L9.71,7.71a7.14,7.14,0,0,0-3.9,1.23A1.46,1.46,0,1,0,4.2,11.33a2.87,2.87,0,0,0,0,.44c0,2.24,2.61,4.06,5.83,4.06s5.83-1.82,5.83-4.06a2.87,2.87,0,0,0,0-.44A1.46,1.46,0,0,0,16.67,10Zm-10,1a1,1,0,1,1,1,1A1,1,0,0,1,6.67,11Zm5.81,2.75a3.84,3.84,0,0,1-2.47.77,3.84,3.84,0,0,1-2.47-.77,0.27,0.27,0,0,1,.38-0.38A3.27,3.27,0,0,0,10,14a3.28,3.28,0,0,0,2.09-.61A0.27,0.27,0,1,1,12.48,13.79Zm-0.18-1.71a1,1,0,1,1,1-1A1,1,0,0,1,12.29,12.08Z\"></path>\n</svg>\n"}},"38":{"tag":"nicegui-link","text":"","class":["nicegui-link","max-[365px]:hidden"],"props":{"href":"https://github.com/zauberzeug/nicegui/","target":"_self"},"children":[39,40],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"39":{"tag":"q-tooltip","text":"GitHub"},"40":{"tag":"div","class":["fill-white","scale-125","m-1"],"props":{"innerHTML":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/></svg>\n"}},"41":{"tag":"nicegui-link","text":"","class":["nicegui-link","star-container","max-[550px]:hidden"],"props":{"href":"https://github.com/zauberzeug/nicegui/","target":"_self"},"children":[42,44],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"42":{"tag":"svg","class":["star"],"props":{"viewBox":"0 0 24 24"},"children":[43]},"43":{"tag":"path","props":{"d":"M23.555,8.729a1.505,1.505,0,0,0-1.406-.98H16.062a.5.5,0,0,1-.472-.334L13.405,1.222a1.5,1.5,0,0,0-2.81,0l-.005.016L8.41,7.415a.5.5,0,0,1-.471.334H1.85A1.5,1.5,0,0,0,.887,10.4l5.184,4.3a.5.5,0,0,1,.155.543L4.048,21.774a1.5,1.5,0,0,0,2.31,1.684l5.346-3.92a.5.5,0,0,1,.591,0l5.344,3.919a1.5,1.5,0,0,0,2.312-1.683l-2.178-6.535a.5.5,0,0,1,.155-.543l5.194-4.306A1.5,1.5,0,0,0,23.555,8.729Z"}},"44":{"tag":"q-tooltip","text":"","class":["bg-[#486991]","w-96","p-4"],"children":[45]},"45":{"tag":"div","class":["nicegui-row","row","items-center","no-wrap"],"children":[46,47]},"46":{"tag":"div","class":["w-14","stroke-white","stroke-[1pt]"],"props":{"innerHTML":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Ebene_1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 62.44 71.74\">\n <defs>\n <style>.svg_face{fill:none;stroke-linecap:round;stroke-linejoin:round}</style>\n </defs>\n <path class=\"svg_face\" d=\"M55.35,18.98v23.97c0,14.34-10.89,25.96-24.34,25.96S6.68,57.29,6.68,42.95v-11.31c7.48,0,8.01-11.96,8.01-11.96,1.79-.78,3.82-.89,6.02,.23,11.9,6.08,26.13,1.69,31.33-.41,1.21-.49,2.34-.6,3.31-.52Z\"/>\n <path class=\"svg_face\" d=\"M14.7,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M39.71,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M6.68,34.87v9.97c-2.07,0-3.75-2.23-3.75-4.99s1.68-4.98,3.75-4.98Z\"/>\n <path class=\"svg_face\" d=\"M55.35,44.84v-9.97c2.07,0,3.75,2.23,3.75,4.99s-1.68,4.98-3.75,4.98Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-1.33-.96-3.34-1.13c-.97-.08-2.1,.03-3.31,.52-5.2,2.1-19.43,6.49-31.33,.41-2.2-1.12-4.23-1.01-6.02-.23,0,0-.53,11.96-8.01,11.96v-10.33c0-.18,0-.35,.01-.53,.03-2.34,.17-4.72,.61-7,.62-3.05,4.35-7.48,9.01-8.8C34.04-.04,47.2,4.46,51.85,7.66c4.91,3.39,6.85,12.41,6.84,12.45Z\"/>\n <path class=\"svg_face\" d=\"M7.3,13.78c-.44,2.28-.58,4.66-.61,7,.01-2.33,.15-4.71,.61-7Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-.99-6.57-7.03-6.71c-2.46-.05-4.13,1.75-7.1,1.77-3.8,.02-5.11-1.97-5.11-1.97\"/>\n <path class=\"svg_face\" d=\"M14.82,51.45s4.92,6.49,15.65,6.49,16.74-6.49,16.74-6.49\"/>\n</svg>\n"}},"47":{"tag":"div","class":["nicegui-column","p-2","gap-2"],"children":[48,49]},"48":{"tag":"div","text":"Star us on GitHub!","class":["text-[180%]"]},"49":{"tag":"div","text":"And tell others about NiceGUI.","class":["text-[140%]"]},"50":{"tag":"div","class":["nicegui-row","row","min-[1051px]:hidden"],"children":[51]},"51":{"tag":"q-btn","props":{"color":"white","label":"","icon":"more_vert","flat":true,"round":true},"children":[52]},"52":{"tag":"q-menu","class":["bg-primary","text-white","text-lg"],"props":{"model-value":false,"loopback":true},"children":[53,55,57,59,61,63],"events":[{"listener_id":"819fd96e-1a43-4fd8-a70b-2744b3b5ff97","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"53":{"tag":"q-item","props":{"clickable":true},"children":[54],"events":[{"listener_id":"f77dc3bd-a83d-402d-b6ad-a1d295588ec3","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"860fbc5f-fcba-4e56-8f5a-9d10825848bd","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"54":{"tag":"q-item-section","text":"Installation"},"55":{"tag":"q-item","props":{"clickable":true},"children":[56],"events":[{"listener_id":"dccab19b-4046-4c29-b6a4-a0cbee2bcdf1","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"95048a77-41ec-4523-8656-c343766d3926","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"56":{"tag":"q-item-section","text":"Features"},"57":{"tag":"q-item","props":{"clickable":true},"children":[58],"events":[{"listener_id":"a72fa346-e23e-4df2-9e1c-b07c16f40f3e","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"052b9037-9240-4424-8d59-3308098b9710","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"58":{"tag":"q-item-section","text":"Demos"},"59":{"tag":"q-item","props":{"clickable":true},"children":[60],"events":[{"listener_id":"ec1018da-cc35-4e31-9f65-6a1ce2166813","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"17029318-4a25-450d-b73b-5ccb7548b54e","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"60":{"tag":"q-item-section","text":"Documentation"},"61":{"tag":"q-item","props":{"clickable":true},"children":[62],"events":[{"listener_id":"1d855680-4c9d-4f4f-842f-cb015a85324e","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"c4467b40-9f7e-4147-8d0d-a588503ccf59","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"62":{"tag":"q-item-section","text":"Examples"},"63":{"tag":"q-item","props":{"clickable":true},"children":[64],"events":[{"listener_id":"478d3a83-5139-41fd-be53-77fd31bc075b","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"ef28b0c1-0b3d-4795-80b4-fe81cef85ea6","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"64":{"tag":"q-item-section","text":"Why?"},"65":{"tag":"div","class":["nicegui-row","row","w-full","h-screen","items-center","gap-8","pr-4","no-wrap","into-section"],"children":[66,67]},"66":{"tag":"div","class":["stroke-black","dark:stroke-white","w-[200px]","md:w-[230px]","lg:w-[300px]"],"props":{"innerHTML":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Ebene_1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"31.22 0 31.22 71.74\">\n <defs>\n <style>.svg_face{fill:none;stroke-linecap:round;stroke-linejoin:round}</style>\n </defs>\n <path class=\"svg_face\" d=\"M55.35,18.98v23.97c0,14.34-10.89,25.96-24.34,25.96S6.68,57.29,6.68,42.95v-11.31c7.48,0,8.01-11.96,8.01-11.96,1.79-.78,3.82-.89,6.02,.23,11.9,6.08,26.13,1.69,31.33-.41,1.21-.49,2.34-.6,3.31-.52Z\"/>\n <path class=\"svg_face\" d=\"M14.7,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M39.71,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M6.68,34.87v9.97c-2.07,0-3.75-2.23-3.75-4.99s1.68-4.98,3.75-4.98Z\"/>\n <path class=\"svg_face\" d=\"M55.35,44.84v-9.97c2.07,0,3.75,2.23,3.75,4.99s-1.68,4.98-3.75,4.98Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-1.33-.96-3.34-1.13c-.97-.08-2.1,.03-3.31,.52-5.2,2.1-19.43,6.49-31.33,.41-2.2-1.12-4.23-1.01-6.02-.23,0,0-.53,11.96-8.01,11.96v-10.33c0-.18,0-.35,.01-.53,.03-2.34,.17-4.72,.61-7,.62-3.05,4.35-7.48,9.01-8.8C34.04-.04,47.2,4.46,51.85,7.66c4.91,3.39,6.85,12.41,6.84,12.45Z\"/>\n <path class=\"svg_face\" d=\"M7.3,13.78c-.44,2.28-.58,4.66-.61,7,.01-2.33,.15-4.71,.61-7Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-.99-6.57-7.03-6.71c-2.46-.05-4.13,1.75-7.1,1.77-3.8,.02-5.11-1.97-5.11-1.97\"/>\n <path class=\"svg_face\" d=\"M14.82,51.45s4.92,6.49,15.65,6.49,16.74-6.49,16.74-6.49\"/>\n</svg>\n"}},"67":{"tag":"div","class":["nicegui-column","gap-4","md:gap-8","pt-32"],"children":[68,69,70]},"68":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-4xl","sm:text-5xl","md:text-6xl","font-medium","fancy-em"],"props":{"innerHTML":"<p>Meet the <em>NiceGUI</em>.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"69":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-xl","sm:text-2xl","md:text-3xl","leading-7","max-w-[20rem]","sm:max-w-[24rem]","md:max-w-[30rem]"],"props":{"innerHTML":"<p>And let any browser be the frontend of your Python code.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"70":{"tag":"nicegui-link","text":"","class":["nicegui-link","scroll-indicator"],"props":{"href":"#about","target":"_self"},"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"71":{"tag":"div","class":["nicegui-row","row","dark-box","min-h-screen","no-wrap","justify-center","items-center","flex-col","md:flex-row","py-20","px-8","lg:px-16","gap-8","sm:gap-16","md:gap-8","lg:gap-16","relative"],"children":[72,73,77]},"72":{"tag":"a","style":{"position":"absolute","top":"0","left":"0"},"props":{"name":"about"}},"73":{"tag":"div","class":["nicegui-column","text-white","max-w-4xl"],"children":[74,75]},"74":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-2xl","md:text-3xl","xl:text-4xl","font-medium","text-white"],"props":{"innerHTML":"<p>Interact with Python through buttons, dialogs, 3D&nbsp;scenes, plots and much more.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"75":{"tag":"div","class":["nicegui-column","gap-2","bold-links","arrow-links","text-lg"],"children":[76]},"76":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<p>NiceGUI manages web development details, letting you focus on Python code for diverse applications,\nincluding robotics, IoT solutions, smart home automation, and machine learning.\nDesigned to work smoothly with connected peripherals like webcams and GPIO pins in IoT setups,\nNiceGUI streamlines the management of all your code in one place.\n<br><br>\nWith a gentle learning curve, NiceGUI is user-friendly for beginners\nand offers advanced customization for experienced users,\nensuring simplicity for basic tasks and feasibility for complex projects.\n<br><br><br>\nAvailable as\n<a href=\"https://pypi.org/project/nicegui/\">PyPI package</a>,\n<a href=\"https://hub.docker.com/r/zauberzeug/nicegui\">Docker image</a> and on\n<a href=\"https://github.com/zauberzeug/nicegui\">GitHub</a>.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"77":{"tag":"div","class":["nicegui-row","row"],"style":{"filter":"drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))"},"children":[78]},"78":{"tag":"q-card","class":["nicegui-card","pb-16","no-shadow"],"style":{"clip-path":"polygon(0 0, 100% 0, 100% 90%, 0 100%)"},"children":[79]},"79":{"tag":"div","class":["nicegui-row","row","no-wrap"],"children":[80,86]},"80":{"tag":"div","class":["nicegui-column","items-center"],"children":[81,82,83,84,85]},"81":{"tag":"div","class":["w-16","mx-6","stroke-black","dark:stroke-gray-100","stroke-2"],"props":{"innerHTML":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Ebene_1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 62.44 71.74\">\n <defs>\n <style>.svg_face{fill:none;stroke-linecap:round;stroke-linejoin:round}</style>\n </defs>\n <path class=\"svg_face\" d=\"M55.35,18.98v23.97c0,14.34-10.89,25.96-24.34,25.96S6.68,57.29,6.68,42.95v-11.31c7.48,0,8.01-11.96,8.01-11.96,1.79-.78,3.82-.89,6.02,.23,11.9,6.08,26.13,1.69,31.33-.41,1.21-.49,2.34-.6,3.31-.52Z\"/>\n <path class=\"svg_face\" d=\"M14.7,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M39.71,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M6.68,34.87v9.97c-2.07,0-3.75-2.23-3.75-4.99s1.68-4.98,3.75-4.98Z\"/>\n <path class=\"svg_face\" d=\"M55.35,44.84v-9.97c2.07,0,3.75,2.23,3.75,4.99s-1.68,4.98-3.75,4.98Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-1.33-.96-3.34-1.13c-.97-.08-2.1,.03-3.31,.52-5.2,2.1-19.43,6.49-31.33,.41-2.2-1.12-4.23-1.01-6.02-.23,0,0-.53,11.96-8.01,11.96v-10.33c0-.18,0-.35,.01-.53,.03-2.34,.17-4.72,.61-7,.62-3.05,4.35-7.48,9.01-8.8C34.04-.04,47.2,4.46,51.85,7.66c4.91,3.39,6.85,12.41,6.84,12.45Z\"/>\n <path class=\"svg_face\" d=\"M7.3,13.78c-.44,2.28-.58,4.66-.61,7,.01-2.33,.15-4.71,.61-7Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-.99-6.57-7.03-6.71c-2.46-.05-4.13,1.75-7.1,1.77-3.8,.02-5.11-1.97-5.11-1.97\"/>\n <path class=\"svg_face\" d=\"M14.82,51.45s4.92,6.49,15.65,6.49,16.74-6.49,16.74-6.49\"/>\n</svg>\n"},"events":[{"listener_id":"8bc8dccf-f5f9-45fb-ae90-33d8bcf75938","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"82":{"tag":"q-btn","class":["w-full"],"props":{"color":"primary","label":"Click me!"},"events":[{"listener_id":"11257b7c-9b3b-4972-9079-afc03dd1ae3c","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"83":{"tag":"nicegui-input","props":{"value":"abc","loopback":false,"error":null,"label":"Text","type":"text","_autocomplete":[]},"events":[{"listener_id":"83b72cc0-486a-460c-8c23-ba9f16a1d7e8","type":"update:value","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}],"component":{"key":"b0b17893a51343979e2090deee730538/input.js","name":"input","tag":"nicegui-input"}},"84":{"tag":"q-checkbox","text":"Check","props":{"model-value":false,"loopback":true},"events":[{"listener_id":"974f46bc-4247-44e2-a125-96296f08e292","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"85":{"tag":"q-toggle","text":"Switch","props":{"model-value":false,"loopback":true},"events":[{"listener_id":"f0b27997-af0b-46c3-8637-02bec51d88f1","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"86":{"tag":"div","class":["nicegui-column","items-center"],"children":[87,88,89,92,93]},"87":{"tag":"div","text":"Try it out!","class":["w-44","my-6","h-8","text-xl","text-gray-800","dark:text-gray-200","overflow-hidden","text-ellipsis","text-center"]},"88":{"tag":"q-slider","style":{"width":"150px","margin-bottom":"2px"},"props":{"model-value":50,"loopback":true,"min":0,"max":100,"step":0.1},"events":[{"listener_id":"7368bdf5-dc80-408d-a248-6c5b7699b64a","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0.05,"leading_events":true,"trailing_events":true,"js_handler":null}]},"89":{"tag":"div","class":["nicegui-row","row"],"children":[90,91]},"90":{"tag":"q-input","class":["w-20"],"props":{"model-value":"3.14","loopback":false,"error":null,"type":"number","label":"Number"},"events":[{"listener_id":"0a24593c-3a68-46b2-a1bd-30619b7ef6c5","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"93b90b47-afb9-4156-8991-fb7c155fb5da","type":"blur","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"91":{"tag":"nicegui-select","props":{"model-value":{"value":0,"label":"One"},"loopback":true,"options":[{"value":0,"label":"One"},{"value":1,"label":"Two"},{"value":2,"label":"Three"}],"error":null,"multiple":false,"clearable":false},"events":[{"listener_id":"d53b9222-30e8-4b68-ba74-01227ee2d6b6","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"83a678ea-8341-4034-818c-e1229308a93c","type":"popupShow","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"79404240-d76c-4eec-8777-6893312eac60","type":"popupHide","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}],"component":{"key":"b0b17893a51343979e2090deee730538/select.js","name":"select","tag":"nicegui-select"}},"92":{"tag":"q-btn-toggle","props":{"model-value":0,"loopback":true,"options":[{"value":0,"label":"1"},{"value":1,"label":"2"},{"value":2,"label":"3"}],"clearable":false},"events":[{"listener_id":"fc8da24e-f7fa-4405-b495-85eb30ecb94c","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"93":{"tag":"q-option-group","props":{"model-value":0,"loopback":true,"options":[{"value":0,"label":"A"},{"value":1,"label":"B"},{"value":2,"label":"C"}],"inline":true},"events":[{"listener_id":"35fa004f-a4dd-4655-96d2-31f70d906d13","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"94":{"tag":"div","class":["nicegui-column","w-full","text-lg","p-8","lg:p-16","max-w-[1600px]","mx-auto","relative"],"children":[95,96,97,98,141]},"95":{"tag":"a","style":{"position":"absolute","top":"-50px","left":"0"},"props":{"name":"installation"}},"96":{"tag":"div","text":"Installation","class":["md:text-lg","font-bold"]},"97":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-3xl","md:text-5xl","font-medium","mt-[-12px]","fancy-em"],"props":{"innerHTML":"<p>Get <em>started</em></p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"98":{"tag":"div","class":["nicegui-row","row","w-full","text-lg","leading-tight","grid","grid-cols-1","lg:grid-cols-2","xl:grid-cols-3","gap-8"],"children":[99,111,123]},"99":{"tag":"div","class":["nicegui-column","w-full","max-w-md","gap-2"],"children":[100,101,102]},"100":{"tag":"div","class":["text-3xl","font-bold","fancy-em"],"props":{"innerHTML":"<em>1.</em>"}},"101":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-lg"],"props":{"innerHTML":"<p>Create <strong>main.py</strong></p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"102":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#eef5fb]","dark:bg-[#2b323b]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","h-52"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[103,109]},"103":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[104,108]},"104":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[105,106,107]},"105":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"106":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"107":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"108":{"tag":"div","text":"main.py","class":["text-sm","text-gray-600","dark:text-gray-400","absolute","left-1/2","top-[6px]"],"style":{"transform":"translateX(-50%)"}},"109":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","px-4","py-2","python-window"],"children":[110]},"110":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<div class=\"codehilite\">\n<pre><span></span><code><span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">nicegui</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">ui</span>\n\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">label</span><span class=\"p\">(</span><span class=\"s1\">&#39;Hello NiceGUI!&#39;</span><span class=\"p\">)</span>\n\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">run</span><span class=\"p\">()</span>\n</code></pre>\n</div>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"111":{"tag":"div","class":["nicegui-column","w-full","max-w-md","gap-2"],"children":[112,113,114]},"112":{"tag":"div","class":["text-3xl","font-bold","fancy-em"],"props":{"innerHTML":"<em>2.</em>"}},"113":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-lg"],"props":{"innerHTML":"<p>Install and launch</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"114":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#e8e8e8]","dark:bg-[#2b323b]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","h-52"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[115,121]},"115":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[116,120]},"116":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[117,118,119]},"117":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"118":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"119":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"120":{"tag":"div","text":"bash","class":["text-sm","text-gray-600","dark:text-gray-400","absolute","left-1/2","top-[6px]"],"style":{"transform":"translateX(-50%)"}},"121":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","px-4","py-2","bash-window"],"children":[122]},"122":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<div class=\"codehilite\">\n<pre><span></span><code>pip3<span class=\"w\"> </span>install<span class=\"w\"> </span>nicegui\npython3<span class=\"w\"> </span>main.py\n</code></pre>\n</div>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"123":{"tag":"div","class":["nicegui-column","w-full","max-w-md","gap-2"],"children":[124,125,126]},"124":{"tag":"div","class":["text-3xl","font-bold","fancy-em"],"props":{"innerHTML":"<em>3.</em>"}},"125":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-lg"],"props":{"innerHTML":"<p>Enjoy!</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"126":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#ffffff]","dark:bg-[#181c21]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","h-52"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[127,139]},"127":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[128,132]},"128":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[129,130,131]},"129":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"130":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"131":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"132":{"tag":"div","class":["nicegui-row","row","gap-0"],"children":[133,135,137]},"133":{"tag":"div","text":"","class":["w-2","h-[24px]","bg-[#ffffff]","dark:bg-[#181c21]"],"children":[134]},"134":{"tag":"div","text":"","class":["w-full","h-full","bg-[#00000010]","dark:bg-[#ffffff10]","rounded-br-[6px]"]},"135":{"tag":"div","class":["nicegui-row","row","text-sm","text-gray-600","dark:text-gray-400","px-6","py-1","h-[24px]","rounded-t-[6px]","bg-[#ffffff]","dark:bg-[#181c21]","items-center","gap-2"],"children":[136]},"136":{"tag":"div","text":"NiceGUI"},"137":{"tag":"div","text":"","class":["w-2","h-[24px]","bg-[#ffffff]","dark:bg-[#181c21]"],"children":[138]},"138":{"tag":"div","text":"","class":["w-full","h-full","bg-[#00000010]","dark:bg-[#ffffff10]","rounded-bl-[6px]"]},"139":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","p-4","browser-window"],"children":[140]},"140":{"tag":"div","text":"Hello NiceGUI!"},"141":{"tag":"q-expansion-item","class":["nicegui-expansion","w-full","gap-2","bold-links","arrow-links"],"props":{"model-value":false,"loopback":true,"label":"...or use Docker to run your main.py"},"children":[142],"events":[{"listener_id":"aa58ba52-c56e-4f1a-a3a8-557b142efabe","type":"update:modelValue","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"142":{"tag":"div","class":["nicegui-row","row","mt-8","w-full","justify-center","items-center","gap-8"],"children":[143,144]},"143":{"tag":"nicegui-markdown","class":["nicegui-markdown","max-w-xl"],"props":{"innerHTML":"<p>With our <a href=\"https://hub.docker.com/repository/docker/zauberzeug/nicegui\">multi-arch Docker image</a>\nyou can start the server without installing any packages.</p>\n\n<p>The command searches for <code>main.py</code> in in your current directory and makes the app available at http://localhost:8888.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"144":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#e8e8e8]","dark:bg-[#2b323b]","rounded-xl","overflow-hidden","p-0","gap-0","max-w-lg","w-full","h-52"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[145,151]},"145":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[146,150]},"146":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[147,148,149]},"147":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"148":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"149":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"150":{"tag":"div","text":"bash","class":["text-sm","text-gray-600","dark:text-gray-400","absolute","left-1/2","top-[6px]"],"style":{"transform":"translateX(-50%)"}},"151":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","px-4","py-2","bash-window"],"children":[152]},"152":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<div class=\"codehilite\">\n<pre><span></span><code>docker<span class=\"w\"> </span>run<span class=\"w\"> </span>-it<span class=\"w\"> </span>--rm<span class=\"w\"> </span>-p<span class=\"w\"> </span><span class=\"m\">8888</span>:8080<span class=\"w\"> </span><span class=\"se\">\\</span>\n<span class=\"w\"> </span>-v<span class=\"w\"> </span><span class=\"s2\">&quot;</span><span class=\"nv\">$PWD</span><span class=\"s2\">&quot;</span>:/app<span class=\"w\"> </span>zauberzeug/nicegui\n</code></pre>\n</div>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"153":{"tag":"div","class":["nicegui-column","w-full","p-8","lg:p-16","bold-links","arrow-links","max-w-[1600px]","mx-auto","relative"],"children":[154,155,156,157]},"154":{"tag":"a","style":{"position":"absolute","top":"-50px","left":"0"},"props":{"name":"features"}},"155":{"tag":"div","text":"Features","class":["md:text-lg","font-bold"]},"156":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-3xl","md:text-5xl","font-medium","mt-[-12px]","fancy-em"],"props":{"innerHTML":"<p>Code <em>nicely</em></p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"157":{"tag":"div","class":["nicegui-row","row","w-full","text-lg","leading-tight","grid","grid-cols-1","sm:grid-cols-2","xl:grid-cols-3","gap-8"],"children":[158,162,166,170,174,178]},"158":{"tag":"div","class":["nicegui-column","gap-1"],"children":[159,160,161]},"159":{"tag":"q-icon","class":["max-sm:hidden","text-3xl","md:text-5xl","mb-3","text-primary","opacity-80"],"props":{"name":"swap_horiz"}},"160":{"tag":"div","text":"Interaction","class":["font-bold","mb-3"]},"161":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links","-ml-4"],"props":{"innerHTML":"<ul>\n<li><a href=\"/documentation/section_controls\">buttons, switches, sliders, inputs, ...</a></li>\n<li><a href=\"/documentation/section_page_layout\">notifications, dialogs and menus</a></li>\n<li><a href=\"/documentation/interactive_image\">interactive images</a> with SVG overlays</li>\n<li>web pages and <a href=\"/documentation/section_configuration_deployment#native_mode\">native window apps</a></li>\n</ul>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"162":{"tag":"div","class":["nicegui-column","gap-1"],"children":[163,164,165]},"163":{"tag":"q-icon","class":["max-sm:hidden","text-3xl","md:text-5xl","mb-3","text-primary","opacity-80"],"props":{"name":"space_dashboard"}},"164":{"tag":"div","text":"Layout","class":["font-bold","mb-3"]},"165":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links","-ml-4"],"props":{"innerHTML":"<ul>\n<li><a href=\"/documentation/section_page_layout\">navigation bars, tabs, panels, ...</a></li>\n<li>grouping with rows, columns, grids and cards</li>\n<li><a href=\"/documentation/html\">HTML</a> and <a href=\"/documentation/markdown\">Markdown</a> elements</li>\n<li>flex layout by default</li>\n</ul>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"166":{"tag":"div","class":["nicegui-column","gap-1"],"children":[167,168,169]},"167":{"tag":"q-icon","class":["max-sm:hidden","text-3xl","md:text-5xl","mb-3","text-primary","opacity-80"],"props":{"name":"insights"}},"168":{"tag":"div","text":"Visualization","class":["font-bold","mb-3"]},"169":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links","-ml-4"],"props":{"innerHTML":"<ul>\n<li><a href=\"/documentation/section_data_elements\">charts, diagrams, tables</a>, <a href=\"/documentation/section_audiovisual_elements\">audio/video</a></li>\n<li><a href=\"/documentation/scene\">3D scenes</a></li>\n<li>straight-forward <a href=\"/documentation/section_binding_properties\">data binding</a></li>\n<li>built-in <a href=\"/documentation/timer\">timer for data refresh</a></li>\n</ul>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"170":{"tag":"div","class":["nicegui-column","gap-1"],"children":[171,172,173]},"171":{"tag":"q-icon","class":["max-sm:hidden","text-3xl","md:text-5xl","mb-3","text-primary","opacity-80"],"props":{"name":"brush"}},"172":{"tag":"div","text":"Styling","class":["font-bold","mb-3"]},"173":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links","-ml-4"],"props":{"innerHTML":"<ul>\n<li>customizable <a href=\"/documentation/section_styling_appearance#color_theming\">color themes</a></li>\n<li>custom CSS and classes</li>\n<li>modern look with material design</li>\n<li><a href=\"https://v3.tailwindcss.com/\">Tailwind CSS</a> auto-completion</li>\n</ul>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"174":{"tag":"div","class":["nicegui-column","gap-1"],"children":[175,176,177]},"175":{"tag":"q-icon","class":["max-sm:hidden","text-3xl","md:text-5xl","mb-3","text-primary","opacity-80"],"props":{"name":"source"}},"176":{"tag":"div","text":"Coding","class":["font-bold","mb-3"]},"177":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links","-ml-4"],"props":{"innerHTML":"<ul>\n<li>routing for multiple <a href=\"/documentation/page\">pages</a></li>\n<li>auto-reload on code change</li>\n<li>persistent <a href=\"/documentation/storage\">user sessions</a></li>\n<li>super nice <a href=\"/documentation/section_testing\">testing framework</a></li>\n</ul>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"178":{"tag":"div","class":["nicegui-column","gap-1"],"children":[179,180,181]},"179":{"tag":"q-icon","class":["max-sm:hidden","text-3xl","md:text-5xl","mb-3","text-primary","opacity-80"],"props":{"name":"anchor"}},"180":{"tag":"div","text":"Foundation","class":["font-bold","mb-3"]},"181":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links","-ml-4"],"props":{"innerHTML":"<ul>\n<li>generic <a href=\"https://vuejs.org/\">Vue</a> to Python bridge</li>\n<li>dynamic GUI through <a href=\"https://quasar.dev/\">Quasar</a></li>\n<li>content is served with <a href=\"https://fastapi.tiangolo.com/\">FastAPI</a></li>\n<li>Python 3.8+</li>\n</ul>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"182":{"tag":"div","class":["nicegui-column","w-full","p-8","lg:p-16","max-w-[1600px]","mx-auto","relative"],"children":[183,184,185,186]},"183":{"tag":"a","style":{"position":"absolute","top":"-50px","left":"0"},"props":{"name":"demos"}},"184":{"tag":"div","text":"Demos","class":["md:text-lg","font-bold"]},"185":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-3xl","md:text-5xl","font-medium","mt-[-12px]","fancy-em"],"props":{"innerHTML":"<p>Try <em>this</em></p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"186":{"tag":"div","class":["nicegui-column","w-full"],"children":[187,188,192,193,220,221,225,226,253,254,258,259]},"187":{"tag":"div","style":{"position":"relative","top":"-90px"},"props":{"innerHTML":"<div id=\"styling\"></div>"}},"188":{"tag":"div","class":["nicegui-row","row","gap-2","items-center","relative"],"children":[189,190]},"189":{"tag":"div","text":"Styling","class":["text-2xl"]},"190":{"tag":"nicegui-link","text":"","class":["nicegui-link","absolute"],"style":{"transform":"translateX(-150%)"},"props":{"href":"#styling","target":"_self"},"children":[191],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"191":{"tag":"q-icon","class":["opacity-10","hover:opacity-80"],"props":{"name":"link","size":"sm"}},"192":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links"],"props":{"innerHTML":"<p>While having reasonable defaults, you can still modify the look of your app with CSS as well as Tailwind and Quasar classes.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"193":{"tag":"div","class":["nicegui-column","w-full","items-stretch","gap-8","no-wrap","min-[1500px]:flex-row"],"children":[194,204]},"194":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#eef5fb]","dark:bg-[#2b323b]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","max-w-[44rem]"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[195,201]},"195":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[196,200]},"196":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[197,198,199]},"197":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"198":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"199":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"200":{"tag":"div","text":"main.py","class":["text-sm","text-gray-600","dark:text-gray-400","absolute","left-1/2","top-[6px]"],"style":{"transform":"translateX(-50%)"}},"201":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","px-4","py-2","python-window"],"children":[202,203]},"202":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<div class=\"codehilite\">\n<pre><span></span><code><span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">nicegui</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">ui</span>\n\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">icon</span><span class=\"p\">(</span><span class=\"s1\">&#39;thumb_up&#39;</span><span class=\"p\">)</span>\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">markdown</span><span class=\"p\">(</span><span class=\"s1\">&#39;This is **Markdown**.&#39;</span><span class=\"p\">)</span>\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">html</span><span class=\"p\">(</span><span class=\"s1\">&#39;This is &lt;strong&gt;HTML&lt;/strong&gt;.&#39;</span><span class=\"p\">)</span>\n<span class=\"k\">with</span> <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">row</span><span class=\"p\">():</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">label</span><span class=\"p\">(</span><span class=\"s1\">&#39;CSS&#39;</span><span class=\"p\">)</span><span class=\"o\">.</span><span class=\"n\">style</span><span class=\"p\">(</span><span class=\"s1\">&#39;color: #888; font-weight: bold&#39;</span><span class=\"p\">)</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">label</span><span class=\"p\">(</span><span class=\"s1\">&#39;Tailwind&#39;</span><span class=\"p\">)</span><span class=\"o\">.</span><span class=\"n\">classes</span><span class=\"p\">(</span><span class=\"s1\">&#39;font-serif&#39;</span><span class=\"p\">)</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">label</span><span class=\"p\">(</span><span class=\"s1\">&#39;Quasar&#39;</span><span class=\"p\">)</span><span class=\"o\">.</span><span class=\"n\">classes</span><span class=\"p\">(</span><span class=\"s1\">&#39;q-ml-xl&#39;</span><span class=\"p\">)</span>\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">link</span><span class=\"p\">(</span><span class=\"s1\">&#39;NiceGUI on GitHub&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;https://github.com/zauberzeug/nicegui&#39;</span><span class=\"p\">)</span>\n\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">run</span><span class=\"p\">()</span>\n</code></pre>\n</div>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"203":{"tag":"q-icon","class":["absolute","right-2","top-10","opacity-10","hover:opacity-80","cursor-pointer"],"props":{"name":"content_copy","size":"xs"},"events":[{"listener_id":"a8b31947-a882-48f6-b43a-b6f913352103","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":"() => navigator.clipboard.writeText(\"from nicegui import ui\\n\\nui.icon('thumb_up')\\nui.markdown('This is **Markdown**.')\\nui.html('This is <strong>HTML</strong>.')\\nwith ui.row():\\n ui.label('CSS').style('color: #888; font-weight: bold')\\n ui.label('Tailwind').classes('font-serif')\\n ui.label('Quasar').classes('q-ml-xl')\\nui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')\\n\\nui.run()\")"},{"listener_id":"eff394d8-36f3-4a97-bafe-cdef32ff5595","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"204":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#ffffff]","dark:bg-[#181c21]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","max-w-[44rem]","min-[1500px]:max-w-[20rem]","min-h-[10rem]","browser-window"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[205,217]},"205":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[206,210]},"206":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[207,208,209]},"207":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"208":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"209":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"210":{"tag":"div","class":["nicegui-row","row","gap-0"],"children":[211,213,215]},"211":{"tag":"div","text":"","class":["w-2","h-[24px]","bg-[#ffffff]","dark:bg-[#181c21]"],"children":[212]},"212":{"tag":"div","text":"","class":["w-full","h-full","bg-[#00000010]","dark:bg-[#ffffff10]","rounded-br-[6px]"]},"213":{"tag":"div","class":["nicegui-row","row","text-sm","text-gray-600","dark:text-gray-400","px-6","py-1","h-[24px]","rounded-t-[6px]","bg-[#ffffff]","dark:bg-[#181c21]","items-center","gap-2"],"children":[214]},"214":{"tag":"div","text":"NiceGUI"},"215":{"tag":"div","text":"","class":["w-2","h-[24px]","bg-[#ffffff]","dark:bg-[#181c21]"],"children":[216]},"216":{"tag":"div","text":"","class":["w-full","h-full","bg-[#00000010]","dark:bg-[#ffffff10]","rounded-bl-[6px]"]},"217":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","p-4","browser-window"],"children":[218,219]},"218":{"tag":"q-spinner","props":{"color":"primary","size":"lg","thickness":"2"}},"219":{"tag":"nicegui-intersection_observer","events":[{"listener_id":"fce52a00-f5e2-4999-9058-15ee91bfadde","type":"intersection","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}],"component":{"key":"85399eb40199d450158f9cadc41dea61/intersection_observer.js","name":"intersection_observer","tag":"nicegui-intersection_observer"}},"220":{"tag":"div","style":{"position":"relative","top":"-90px"},"props":{"innerHTML":"<div id=\"common_ui_elements\"></div>"}},"221":{"tag":"div","class":["nicegui-row","row","gap-2","items-center","relative"],"children":[222,223]},"222":{"tag":"div","text":"Common UI Elements","class":["text-2xl"]},"223":{"tag":"nicegui-link","text":"","class":["nicegui-link","absolute"],"style":{"transform":"translateX(-150%)"},"props":{"href":"#common_ui_elements","target":"_self"},"children":[224],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"224":{"tag":"q-icon","class":["opacity-10","hover:opacity-80"],"props":{"name":"link","size":"sm"}},"225":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links"],"props":{"innerHTML":"<p>NiceGUI comes with a collection of commonly used UI elements.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"226":{"tag":"div","class":["nicegui-column","w-full","items-stretch","gap-8","no-wrap","min-[1500px]:flex-row"],"children":[227,237]},"227":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#eef5fb]","dark:bg-[#2b323b]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","max-w-[44rem]"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[228,234]},"228":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[229,233]},"229":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[230,231,232]},"230":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"231":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"232":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"233":{"tag":"div","text":"main.py","class":["text-sm","text-gray-600","dark:text-gray-400","absolute","left-1/2","top-[6px]"],"style":{"transform":"translateX(-50%)"}},"234":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","px-4","py-2","python-window"],"children":[235,236]},"235":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<div class=\"codehilite\">\n<pre><span></span><code><span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">nicegui</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">ui</span>\n<span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">nicegui.events</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">ValueChangeEventArguments</span>\n\n<span class=\"k\">def</span><span class=\"w\"> </span><span class=\"nf\">show</span><span class=\"p\">(</span><span class=\"n\">event</span><span class=\"p\">:</span> <span class=\"n\">ValueChangeEventArguments</span><span class=\"p\">):</span>\n <span class=\"n\">name</span> <span class=\"o\">=</span> <span class=\"nb\">type</span><span class=\"p\">(</span><span class=\"n\">event</span><span class=\"o\">.</span><span class=\"n\">sender</span><span class=\"p\">)</span><span class=\"o\">.</span><span class=\"vm\">__name__</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">notify</span><span class=\"p\">(</span><span class=\"sa\">f</span><span class=\"s1\">&#39;</span><span class=\"si\">{</span><span class=\"n\">name</span><span class=\"si\">}</span><span class=\"s1\">: </span><span class=\"si\">{</span><span class=\"n\">event</span><span class=\"o\">.</span><span class=\"n\">value</span><span class=\"si\">}</span><span class=\"s1\">&#39;</span><span class=\"p\">)</span>\n\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">button</span><span class=\"p\">(</span><span class=\"s1\">&#39;Button&#39;</span><span class=\"p\">,</span> <span class=\"n\">on_click</span><span class=\"o\">=</span><span class=\"k\">lambda</span><span class=\"p\">:</span> <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">notify</span><span class=\"p\">(</span><span class=\"s1\">&#39;Click&#39;</span><span class=\"p\">))</span>\n<span class=\"k\">with</span> <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">row</span><span class=\"p\">():</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">checkbox</span><span class=\"p\">(</span><span class=\"s1\">&#39;Checkbox&#39;</span><span class=\"p\">,</span> <span class=\"n\">on_change</span><span class=\"o\">=</span><span class=\"n\">show</span><span class=\"p\">)</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">switch</span><span class=\"p\">(</span><span class=\"s1\">&#39;Switch&#39;</span><span class=\"p\">,</span> <span class=\"n\">on_change</span><span class=\"o\">=</span><span class=\"n\">show</span><span class=\"p\">)</span>\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">radio</span><span class=\"p\">([</span><span class=\"s1\">&#39;A&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;B&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;C&#39;</span><span class=\"p\">],</span> <span class=\"n\">value</span><span class=\"o\">=</span><span class=\"s1\">&#39;A&#39;</span><span class=\"p\">,</span> <span class=\"n\">on_change</span><span class=\"o\">=</span><span class=\"n\">show</span><span class=\"p\">)</span><span class=\"o\">.</span><span class=\"n\">props</span><span class=\"p\">(</span><span class=\"s1\">&#39;inline&#39;</span><span class=\"p\">)</span>\n<span class=\"k\">with</span> <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">row</span><span class=\"p\">():</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">input</span><span class=\"p\">(</span><span class=\"s1\">&#39;Text input&#39;</span><span class=\"p\">,</span> <span class=\"n\">on_change</span><span class=\"o\">=</span><span class=\"n\">show</span><span class=\"p\">)</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">select</span><span class=\"p\">([</span><span class=\"s1\">&#39;One&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;Two&#39;</span><span class=\"p\">],</span> <span class=\"n\">value</span><span class=\"o\">=</span><span class=\"s1\">&#39;One&#39;</span><span class=\"p\">,</span> <span class=\"n\">on_change</span><span class=\"o\">=</span><span class=\"n\">show</span><span class=\"p\">)</span>\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">link</span><span class=\"p\">(</span><span class=\"s1\">&#39;And many more...&#39;</span><span class=\"p\">,</span> <span class=\"s1\">&#39;/documentation&#39;</span><span class=\"p\">)</span><span class=\"o\">.</span><span class=\"n\">classes</span><span class=\"p\">(</span><span class=\"s1\">&#39;mt-8&#39;</span><span class=\"p\">)</span>\n\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">run</span><span class=\"p\">()</span>\n</code></pre>\n</div>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"236":{"tag":"q-icon","class":["absolute","right-2","top-10","opacity-10","hover:opacity-80","cursor-pointer"],"props":{"name":"content_copy","size":"xs"},"events":[{"listener_id":"27382d7e-a9ea-4c3e-bb5c-e9736d350f04","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":"() => navigator.clipboard.writeText(\"from nicegui import ui\\nfrom nicegui.events import ValueChangeEventArguments\\n\\ndef show(event: ValueChangeEventArguments):\\n name = type(event.sender).__name__\\n ui.notify(f'{name}: {event.value}')\\n\\nui.button('Button', on_click=lambda: ui.notify('Click'))\\nwith ui.row():\\n ui.checkbox('Checkbox', on_change=show)\\n ui.switch('Switch', on_change=show)\\nui.radio(['A', 'B', 'C'], value='A', on_change=show).props('inline')\\nwith ui.row():\\n ui.input('Text input', on_change=show)\\n ui.select(['One', 'Two'], value='One', on_change=show)\\nui.link('And many more...', '/documentation').classes('mt-8')\\n\\nui.run()\")"},{"listener_id":"ce075bbf-6a11-45d7-9a3b-7e3303cc9736","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"237":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#ffffff]","dark:bg-[#181c21]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","max-w-[44rem]","min-[1500px]:max-w-[20rem]","min-h-[10rem]","browser-window"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[238,250]},"238":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[239,243]},"239":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[240,241,242]},"240":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"241":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"242":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"243":{"tag":"div","class":["nicegui-row","row","gap-0"],"children":[244,246,248]},"244":{"tag":"div","text":"","class":["w-2","h-[24px]","bg-[#ffffff]","dark:bg-[#181c21]"],"children":[245]},"245":{"tag":"div","text":"","class":["w-full","h-full","bg-[#00000010]","dark:bg-[#ffffff10]","rounded-br-[6px]"]},"246":{"tag":"div","class":["nicegui-row","row","text-sm","text-gray-600","dark:text-gray-400","px-6","py-1","h-[24px]","rounded-t-[6px]","bg-[#ffffff]","dark:bg-[#181c21]","items-center","gap-2"],"children":[247]},"247":{"tag":"div","text":"NiceGUI"},"248":{"tag":"div","text":"","class":["w-2","h-[24px]","bg-[#ffffff]","dark:bg-[#181c21]"],"children":[249]},"249":{"tag":"div","text":"","class":["w-full","h-full","bg-[#00000010]","dark:bg-[#ffffff10]","rounded-bl-[6px]"]},"250":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","p-4","browser-window"],"children":[251,252]},"251":{"tag":"q-spinner","props":{"color":"primary","size":"lg","thickness":"2"}},"252":{"tag":"nicegui-intersection_observer","events":[{"listener_id":"c928210c-af92-4eeb-a4de-c3a48495e9c8","type":"intersection","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}],"component":{"key":"85399eb40199d450158f9cadc41dea61/intersection_observer.js","name":"intersection_observer","tag":"nicegui-intersection_observer"}},"253":{"tag":"div","style":{"position":"relative","top":"-90px"},"props":{"innerHTML":"<div id=\"value_binding\"></div>"}},"254":{"tag":"div","class":["nicegui-row","row","gap-2","items-center","relative"],"children":[255,256]},"255":{"tag":"div","text":"Value Binding","class":["text-2xl"]},"256":{"tag":"nicegui-link","text":"","class":["nicegui-link","absolute"],"style":{"transform":"translateX(-150%)"},"props":{"href":"#value_binding","target":"_self"},"children":[257],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"257":{"tag":"q-icon","class":["opacity-10","hover:opacity-80"],"props":{"name":"link","size":"sm"}},"258":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links"],"props":{"innerHTML":"<p>Binding values between UI elements and data models is built into NiceGUI.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"259":{"tag":"div","class":["nicegui-column","w-full","items-stretch","gap-8","no-wrap","min-[1500px]:flex-row"],"children":[260,270]},"260":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#eef5fb]","dark:bg-[#2b323b]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","max-w-[44rem]"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[261,267]},"261":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[262,266]},"262":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[263,264,265]},"263":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"264":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"265":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"266":{"tag":"div","text":"main.py","class":["text-sm","text-gray-600","dark:text-gray-400","absolute","left-1/2","top-[6px]"],"style":{"transform":"translateX(-50%)"}},"267":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","px-4","py-2","python-window"],"children":[268,269]},"268":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<div class=\"codehilite\">\n<pre><span></span><code><span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">nicegui</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">ui</span>\n\n<span class=\"k\">class</span><span class=\"w\"> </span><span class=\"nc\">Demo</span><span class=\"p\">:</span>\n <span class=\"k\">def</span><span class=\"w\"> </span><span class=\"fm\">__init__</span><span class=\"p\">(</span><span class=\"bp\">self</span><span class=\"p\">):</span>\n <span class=\"bp\">self</span><span class=\"o\">.</span><span class=\"n\">number</span> <span class=\"o\">=</span> <span class=\"mi\">1</span>\n\n<span class=\"n\">demo</span> <span class=\"o\">=</span> <span class=\"n\">Demo</span><span class=\"p\">()</span>\n<span class=\"n\">v</span> <span class=\"o\">=</span> <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">checkbox</span><span class=\"p\">(</span><span class=\"s1\">&#39;visible&#39;</span><span class=\"p\">,</span> <span class=\"n\">value</span><span class=\"o\">=</span><span class=\"kc\">True</span><span class=\"p\">)</span>\n<span class=\"k\">with</span> <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">column</span><span class=\"p\">()</span><span class=\"o\">.</span><span class=\"n\">bind_visibility_from</span><span class=\"p\">(</span><span class=\"n\">v</span><span class=\"p\">,</span> <span class=\"s1\">&#39;value&#39;</span><span class=\"p\">):</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">slider</span><span class=\"p\">(</span><span class=\"nb\">min</span><span class=\"o\">=</span><span class=\"mi\">1</span><span class=\"p\">,</span> <span class=\"nb\">max</span><span class=\"o\">=</span><span class=\"mi\">3</span><span class=\"p\">)</span><span class=\"o\">.</span><span class=\"n\">bind_value</span><span class=\"p\">(</span><span class=\"n\">demo</span><span class=\"p\">,</span> <span class=\"s1\">&#39;number&#39;</span><span class=\"p\">)</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">toggle</span><span class=\"p\">({</span><span class=\"mi\">1</span><span class=\"p\">:</span> <span class=\"s1\">&#39;A&#39;</span><span class=\"p\">,</span> <span class=\"mi\">2</span><span class=\"p\">:</span> <span class=\"s1\">&#39;B&#39;</span><span class=\"p\">,</span> <span class=\"mi\">3</span><span class=\"p\">:</span> <span class=\"s1\">&#39;C&#39;</span><span class=\"p\">})</span><span class=\"o\">.</span><span class=\"n\">bind_value</span><span class=\"p\">(</span><span class=\"n\">demo</span><span class=\"p\">,</span> <span class=\"s1\">&#39;number&#39;</span><span class=\"p\">)</span>\n <span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">number</span><span class=\"p\">()</span><span class=\"o\">.</span><span class=\"n\">bind_value</span><span class=\"p\">(</span><span class=\"n\">demo</span><span class=\"p\">,</span> <span class=\"s1\">&#39;number&#39;</span><span class=\"p\">)</span>\n\n<span class=\"n\">ui</span><span class=\"o\">.</span><span class=\"n\">run</span><span class=\"p\">()</span>\n</code></pre>\n</div>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"269":{"tag":"q-icon","class":["absolute","right-2","top-10","opacity-10","hover:opacity-80","cursor-pointer"],"props":{"name":"content_copy","size":"xs"},"events":[{"listener_id":"0d5343ec-2617-47ce-946f-450679f990a6","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":"() => navigator.clipboard.writeText(\"from nicegui import ui\\n\\nclass Demo:\\n def __init__(self):\\n self.number = 1\\n\\ndemo = Demo()\\nv = ui.checkbox('visible', value=True)\\nwith ui.column().bind_visibility_from(v, 'value'):\\n ui.slider(min=1, max=3).bind_value(demo, 'number')\\n ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(demo, 'number')\\n ui.number().bind_value(demo, 'number')\\n\\nui.run()\")"},{"listener_id":"3fc184ed-d50f-42f1-a4d6-f8211704c244","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"270":{"tag":"q-card","class":["nicegui-card","no-wrap","bg-[#ffffff]","dark:bg-[#181c21]","rounded-xl","overflow-hidden","p-0","gap-0","w-full","max-w-[44rem]","min-[1500px]:max-w-[20rem]","min-h-[10rem]","browser-window"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"children":[271,283]},"271":{"tag":"div","class":["nicegui-row","row","w-full","h-8","p-2","bg-[#00000010]","dark:bg-[#ffffff10]"],"children":[272,276]},"272":{"tag":"div","class":["nicegui-row","row","gap-1","relative","left-[1px]","top-[1px]"],"children":[273,274,275]},"273":{"tag":"q-icon","class":["text-[13px]","text-red-400"],"props":{"name":"circle"}},"274":{"tag":"q-icon","class":["text-[13px]","text-yellow-400"],"props":{"name":"circle"}},"275":{"tag":"q-icon","class":["text-[13px]","text-green-400"],"props":{"name":"circle"}},"276":{"tag":"div","class":["nicegui-row","row","gap-0"],"children":[277,279,281]},"277":{"tag":"div","text":"","class":["w-2","h-[24px]","bg-[#ffffff]","dark:bg-[#181c21]"],"children":[278]},"278":{"tag":"div","text":"","class":["w-full","h-full","bg-[#00000010]","dark:bg-[#ffffff10]","rounded-br-[6px]"]},"279":{"tag":"div","class":["nicegui-row","row","text-sm","text-gray-600","dark:text-gray-400","px-6","py-1","h-[24px]","rounded-t-[6px]","bg-[#ffffff]","dark:bg-[#181c21]","items-center","gap-2"],"children":[280]},"280":{"tag":"div","text":"NiceGUI"},"281":{"tag":"div","text":"","class":["w-2","h-[24px]","bg-[#ffffff]","dark:bg-[#181c21]"],"children":[282]},"282":{"tag":"div","text":"","class":["w-full","h-full","bg-[#00000010]","dark:bg-[#ffffff10]","rounded-bl-[6px]"]},"283":{"tag":"div","class":["nicegui-column","w-full","h-full","overflow-auto","p-4","browser-window"],"children":[284,285]},"284":{"tag":"q-spinner","props":{"color":"primary","size":"lg","thickness":"2"}},"285":{"tag":"nicegui-intersection_observer","events":[{"listener_id":"ed85780c-dbc2-46a2-85cf-1d1cd40b85e7","type":"intersection","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}],"component":{"key":"85399eb40199d450158f9cadc41dea61/intersection_observer.js","name":"intersection_observer","tag":"nicegui-intersection_observer"}},"286":{"tag":"div","class":["nicegui-column","dark-box","p-8","lg:p-16","my-16"],"children":[287]},"287":{"tag":"div","class":["nicegui-column","mx-auto","items-center","gap-y-8","gap-x-32","lg:flex-row"],"children":[288,291]},"288":{"tag":"div","class":["nicegui-column","gap-1","max-lg:items-center","max-lg:text-center"],"children":[289,290]},"289":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-white","text-2xl","md:text-3xl","font-medium"],"props":{"innerHTML":"<p>Browse through plenty of live demos.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"290":{"tag":"div","class":["text-white","text-lg","md:text-xl"],"props":{"innerHTML":"Fun-Fact: This whole website is also coded with NiceGUI."}},"291":{"tag":"nicegui-link","text":"Documentation","class":["nicegui-link","rounded-full","mx-auto","px-12","py-2","bg-white","font-medium","text-lg","md:text-xl"],"style":{"color":"black !important"},"props":{"href":"/documentation","target":"_self"},"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"292":{"tag":"div","class":["nicegui-column","w-full","p-8","lg:p-16","max-w-[1600px]","mx-auto","relative"],"children":[293,294,295,296]},"293":{"tag":"a","style":{"position":"absolute","top":"-50px","left":"0"},"props":{"name":"examples"}},"294":{"tag":"div","text":"In-depth examples","class":["md:text-lg","font-bold"]},"295":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-3xl","md:text-5xl","font-medium","mt-[-12px]","fancy-em"],"props":{"innerHTML":"<p>Pick your <em>solution</em></p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"296":{"tag":"div","class":["nicegui-row","row","w-full","text-lg","leading-tight","grid","grid-cols-1","sm:grid-cols-2","xl:grid-cols-3","gap-4"],"children":[297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444]},"297":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/slideshow/","target":"_self"},"children":[298,299],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"298":{"tag":"div","text":"Slideshow","class":["font-bold"]},"299":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>implements a keyboard-controlled image slideshow</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"300":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/authentication/","target":"_self"},"children":[301,302],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"301":{"tag":"div","text":"Authentication","class":["font-bold"]},"302":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>shows how to use sessions to build a login screen</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"303":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/modularization/","target":"_self"},"children":[304,305],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"304":{"tag":"div","text":"Modularization","class":["font-bold"]},"305":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>provides an example of how to modularize your application into multiple files and reuse code</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"306":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/fastapi/","target":"_self"},"children":[307,308],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"307":{"tag":"div","text":"FastAPI","class":["font-bold"]},"308":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>illustrates the integration of NiceGUI with an existing FastAPI application</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"309":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/ai_interface/","target":"_self"},"children":[310,311],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"310":{"tag":"div","text":"AI Interface","class":["font-bold"]},"311":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>utilizes the <a href=\"https://replicate.com\">replicate</a> library to perform voice-to-text transcription and generate images from prompts with Stable Diffusion</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"312":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/3d_scene/","target":"_self"},"children":[313,314],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"313":{"tag":"div","text":"3D Scene","class":["font-bold"]},"314":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>creates a webGL view and loads an STL mesh illuminated with a spotlight</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"315":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/custom_vue_component/","target":"_self"},"children":[316,317],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"316":{"tag":"div","text":"Custom Vue Component","class":["font-bold"]},"317":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>shows how to write and integrate a custom Vue component</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"318":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/image_mask_overlay/","target":"_self"},"children":[319,320],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"319":{"tag":"div","text":"Image Mask Overlay","class":["font-bold"]},"320":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>shows how to overlay an image with a mask</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"321":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/infinite_scroll/main.py","target":"_self"},"children":[322,323],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"322":{"tag":"div","text":"Infinite Scroll","class":["font-bold"]},"323":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>presents an infinitely scrolling image gallery</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"324":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/opencv_webcam/","target":"_self"},"children":[325,326],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"325":{"tag":"div","text":"OpenCV Webcam","class":["font-bold"]},"326":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>uses OpenCV to capture images from a webcam</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"327":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/svg_clock/main.py","target":"_self"},"children":[328,329],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"328":{"tag":"div","text":"SVG Clock","class":["font-bold"]},"329":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>displays an analog clock by updating an SVG with <code>ui.timer</code></p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"330":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/progress/main.py","target":"_self"},"children":[331,332],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"331":{"tag":"div","text":"Progress","class":["font-bold"]},"332":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>demonstrates a progress bar for heavy computations</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"333":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/global_worker/main.py","target":"_self"},"children":[334,335],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"334":{"tag":"div","text":"Global Worker","class":["font-bold"]},"335":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>demonstrates a global worker for heavy computations with progress feedback</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"336":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/nginx_subpath/","target":"_self"},"children":[337,338],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"337":{"tag":"div","text":"NGINX Subpath","class":["font-bold"]},"338":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>shows the setup to serve an app behind a reverse proxy subpath</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"339":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/script_executor/","target":"_self"},"children":[340,341],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"340":{"tag":"div","text":"Script Executor","class":["font-bold"]},"341":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>executes scripts on selection and displays the output</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"342":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/local_file_picker/","target":"_self"},"children":[343,344],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"343":{"tag":"div","text":"Local File Picker","class":["font-bold"]},"344":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>demonstrates a dialog for selecting files locally on the server</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"345":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/search_as_you_type/main.py","target":"_self"},"children":[346,347],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"346":{"tag":"div","text":"Search as you type","class":["font-bold"]},"347":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>using public API of <a href=\"https://www.thecocktaildb.com/\">thecocktaildb.com</a> to search for cocktails</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"348":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/menu_and_tabs/main.py","target":"_self"},"children":[349,350],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"349":{"tag":"div","text":"Menu and Tabs","class":["font-bold"]},"350":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>uses Quasar to create foldable menu and tabs inside a header bar</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"351":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/todo_list/","target":"_self"},"children":[352,353],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"352":{"tag":"div","text":"Todo list","class":["font-bold"]},"353":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>shows a simple todo list with checkboxes and text input</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"354":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/trello_cards/","target":"_self"},"children":[355,356],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"355":{"tag":"div","text":"Trello Cards","class":["font-bold"]},"356":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>shows Trello-like cards that can be dragged and dropped into columns</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"357":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/slots/main.py","target":"_self"},"children":[358,359],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"358":{"tag":"div","text":"Slots","class":["font-bold"]},"359":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>shows how to use scoped slots to customize Quasar elements</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"360":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/table_and_slots/main.py","target":"_self"},"children":[361,362],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"361":{"tag":"div","text":"Table and slots","class":["font-bold"]},"362":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>shows how to use component slots in a table</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"363":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/single_page_app/","target":"_self"},"children":[364,365],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"364":{"tag":"div","text":"Single Page App","class":["font-bold"]},"365":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>navigate without reloading the page</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"366":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/chat_app/","target":"_self"},"children":[367,368],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"367":{"tag":"div","text":"Chat App","class":["font-bold"]},"368":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>a simple chat app</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"369":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/chat_with_ai/","target":"_self"},"children":[370,371],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"370":{"tag":"div","text":"Chat with AI","class":["font-bold"]},"371":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>a simple chat app with AI</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"372":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/sqlite_database/","target":"_self"},"children":[373,374],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"373":{"tag":"div","text":"SQLite Database","class":["font-bold"]},"374":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>CRUD operations on a SQLite database with async-support through Tortoise ORM</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"375":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/pandas_dataframe/main.py","target":"_self"},"children":[376,377],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"376":{"tag":"div","text":"Pandas DataFrame","class":["font-bold"]},"377":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>displays an editable <a href=\"https://pandas.pydata.org\">pandas</a> DataFrame</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"378":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/lightbox/main.py","target":"_self"},"children":[379,380],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"379":{"tag":"div","text":"Lightbox","class":["font-bold"]},"380":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>a thumbnail gallery where each image can be clicked to enlarge</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"381":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/ros2/","target":"_self"},"children":[382,383],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"382":{"tag":"div","text":"ROS2","class":["font-bold"]},"383":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Using NiceGUI as web interface for a ROS2 robot</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"384":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/docker_image/","target":"_self"},"children":[385,386],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"385":{"tag":"div","text":"Docker Image","class":["font-bold"]},"386":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>use the official <a href=\"https://hub.docker.com/r/zauberzeug/nicegui\">zauberzeug/nicegui</a> docker image</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"387":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/download_text_as_file/main.py","target":"_self"},"children":[388,389],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"388":{"tag":"div","text":"Download Text as File","class":["font-bold"]},"389":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>providing in-memory data like strings as file download</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"390":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/generate_pdf/","target":"_self"},"children":[391,392],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"391":{"tag":"div","text":"Generate PDF","class":["font-bold"]},"392":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>create an SVG preview and PDF download from input form elements</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"393":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/custom_binding/main.py","target":"_self"},"children":[394,395],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"394":{"tag":"div","text":"Custom Binding","class":["font-bold"]},"395":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>create a custom binding for a label with a bindable background color</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"396":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/descope_auth/","target":"_self"},"children":[397,398],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"397":{"tag":"div","text":"Descope Auth","class":["font-bold"]},"398":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>login form and user profile using <a href=\"https://descope.com\">Descope</a></p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"399":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/editable_table/main.py","target":"_self"},"children":[400,401],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"400":{"tag":"div","text":"Editable table","class":["font-bold"]},"401":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>editable table allowing to add, edit, delete rows</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"402":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/editable_ag_grid/main.py","target":"_self"},"children":[403,404],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"403":{"tag":"div","text":"Editable AG Grid","class":["font-bold"]},"404":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>editable AG Grid allowing to add, edit, delete rows</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"405":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/fullcalendar/","target":"_self"},"children":[406,407],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"406":{"tag":"div","text":"FullCalendar","class":["font-bold"]},"407":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>show an interactive calendar using the <a href=\"https://fullcalendar.io/\">FullCalendar library</a></p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"408":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/pytests/","target":"_self"},"children":[409,410],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"409":{"tag":"div","text":"Pytests","class":["font-bold"]},"410":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>test a NiceGUI app with pytest</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"411":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/pyserial/","target":"_self"},"children":[412,413],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"412":{"tag":"div","text":"Pyserial","class":["font-bold"]},"413":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>communicate with a serial device</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"414":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/webserial/","target":"_self"},"children":[415,416],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"415":{"tag":"div","text":"Webserial","class":["font-bold"]},"416":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>communicate with a serial device using the WebSerial API</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"417":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/websockets/","target":"_self"},"children":[418,419],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"418":{"tag":"div","text":"Websockets","class":["font-bold"]},"419":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>use <a href=\"https://websockets.readthedocs.io/\">websockets library</a> to start a websocket server</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"420":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/audio_recorder/","target":"_self"},"children":[421,422],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"421":{"tag":"div","text":"Audio Recorder","class":["font-bold"]},"422":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Record audio, play it back or download it</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"423":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/zeromq/","target":"_self"},"children":[424,425],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"424":{"tag":"div","text":"ZeroMQ","class":["font-bold"]},"425":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Simple ZeroMQ PUSH/PULL server and client</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"426":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/nginx_https/","target":"_self"},"children":[427,428],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"427":{"tag":"div","text":"NGINX HTTPS","class":["font-bold"]},"428":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Use NGINX to serve a NiceGUI app with HTTPS</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"429":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/node_module_integration/","target":"_self"},"children":[430,431],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"430":{"tag":"div","text":"Node Module Integration","class":["font-bold"]},"431":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Use NPM to add dependencies to a NiceGUI app</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"432":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/signature_pad/","target":"_self"},"children":[433,434],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"433":{"tag":"div","text":"Signature Pad","class":["font-bold"]},"434":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>A custom element based on [signature<em>pad](https://www.npmjs.com/package/signature</em>pad</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"435":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/openai_assistant/","target":"_self"},"children":[436,437],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"436":{"tag":"div","text":"OpenAI Assistant","class":["font-bold"]},"437":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Using OpenAI's Assistant API with async/await</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"438":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/redis_storage/","target":"_self"},"children":[439,440],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"439":{"tag":"div","text":"Redis Storage","class":["font-bold"]},"440":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Use Redis storage to share data across multiple instances behind a reverse proxy or load balancer</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"441":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/google_one_tap_auth/main.py","target":"_self"},"children":[442,443],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"442":{"tag":"div","text":"Google One-Tap Auth","class":["font-bold"]},"443":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Authenticate users via Google One-Tap</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"444":{"tag":"nicegui-link","text":"","class":["nicegui-link","bg-[#5898d420]","p-4","self-stretch","rounded","flex","flex-col","gap-2"],"style":{"box-shadow":"0 1px 2px rgba(0, 0, 0, 0.1)"},"props":{"href":"https://github.com/zauberzeug/nicegui/tree/main/examples/google_oauth2/","target":"_self"},"children":[445,446],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"445":{"tag":"div","text":"Google OAuth2","class":["font-bold"]},"446":{"tag":"nicegui-markdown","class":["bold-links","arrow-links"],"props":{"innerHTML":"<p>Authenticate with Google OAuth2</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"447":{"tag":"div","class":["nicegui-column","dark-box","p-8","lg:p-16","my-16","bg-transparent","border-y-2"],"children":[448]},"448":{"tag":"div","class":["nicegui-column","mx-auto","items-center","gap-y-8","gap-x-32","lg:flex-row"],"children":[449,453]},"449":{"tag":"div","class":["nicegui-column","max-lg:items-center","max-lg:text-center","relative"],"children":[450,451,452]},"450":{"tag":"a","style":{"position":"absolute","top":"0","left":"0"},"props":{"name":"sponsors"}},"451":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-2xl","md:text-3xl","font-medium"],"props":{"innerHTML":"<p>NiceGUI is supported by</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"452":{"tag":"nicegui-markdown","class":["nicegui-markdown","bold-links","arrow-links"],"props":{"innerHTML":"<p>20 <a href=\"https://github.com/sponsors/zauberzeug\">sponsors</a>\nand 150 <a href=\"https://github.com/zauberzeug/nicegui/graphs/contributors\">contributors</a>.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"453":{"tag":"nicegui-link","text":"","class":["nicegui-link","rounded-full","mx-auto","px-12","py-2","border-2","border-[#3e6a94]","font-medium","text-lg","md:text-xl"],"style":{"color":"black !important"},"props":{"href":"https://github.com/sponsors/zauberzeug","target":"_self"},"children":[454],"component":{"key":"b0b17893a51343979e2090deee730538/link.js","name":"link","tag":"nicegui-link"}},"454":{"tag":"div","class":["nicegui-row","row","items-center","gap-4"],"children":[455,456]},"455":{"tag":"q-icon","style":{"color":"#3e6a94"},"props":{"name":"sym_o_favorite"}},"456":{"tag":"div","text":"Become a sponsor","class":["text-[#3e6a94]"]},"457":{"tag":"div","class":["nicegui-row","row","dark-box","min-h-screen","mt-16","relative"],"children":[458,459]},"458":{"tag":"a","style":{"position":"absolute","top":"0","left":"0"},"props":{"name":"why"}},"459":{"tag":"div","class":["nicegui-column","max-w-[1600px]","m-auto","py-20","px-8","lg:px-16","items-center","justify-center","no-wrap","flex-col","md:flex-row","gap-16"],"children":[460,465]},"460":{"tag":"div","class":["nicegui-column","gap-8"],"children":[461,462]},"461":{"tag":"nicegui-markdown","class":["nicegui-markdown","text-2xl","md:text-3xl","xl:text-4xl","font-medium","text-white"],"props":{"innerHTML":"<p>Why?</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"462":{"tag":"div","class":["nicegui-column","gap-2","text-xl","text-white","bold-links","arrow-links"],"children":[463,464]},"463":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<p>We at\n<a href=\"https://zauberzeug.com\">Zauberzeug</a>\nlike\n<a href=\"https://streamlit.io/\">Streamlit</a>\nbut find it does\n<a href=\"https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651\">too much magic</a>\nwhen it comes to state handling.\nIn search for an alternative nice library to write simple graphical user interfaces in Python we discovered\n<a href=\"https://justpy.io/\">JustPy</a>.\nAlthough we liked the approach, it is too \"low-level HTML\" for our daily usage.\nBut it inspired us to use\n<a href=\"https://vuejs.org/\">Vue</a>\nand\n<a href=\"https://quasar.dev/\">Quasar</a>\nfor the frontend.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"464":{"tag":"nicegui-markdown","class":["nicegui-markdown"],"props":{"innerHTML":"<p>We have built on top of\n<a href=\"https://fastapi.tiangolo.com/\">FastAPI</a>,\nwhich itself is based on the ASGI framework\n<a href=\"https://www.starlette.io/\">Starlette</a>\nand the ASGI webserver\n<a href=\"https://www.uvicorn.org/\">Uvicorn</a>\nbecause of their great performance and ease of use.</p>\n","codehilite_css_url":"/_nicegui/2.13.0/codehilite.css"},"component":{"key":"b0b17893a51343979e2090deee730538/markdown.js","name":"markdown","tag":"nicegui-markdown"}},"465":{"tag":"div","class":["stroke-white","shrink-0","w-[200px]","md:w-[300px]","lg:w-[450px]"],"props":{"innerHTML":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg id=\"Ebene_1\"\n xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 62.44 71.74\">\n <defs>\n <style>.svg_face{fill:none;stroke-linecap:round;stroke-linejoin:round}</style>\n </defs>\n <path class=\"svg_face\" d=\"M55.35,18.98v23.97c0,14.34-10.89,25.96-24.34,25.96S6.68,57.29,6.68,42.95v-11.31c7.48,0,8.01-11.96,8.01-11.96,1.79-.78,3.82-.89,6.02,.23,11.9,6.08,26.13,1.69,31.33-.41,1.21-.49,2.34-.6,3.31-.52Z\"/>\n <path class=\"svg_face\" d=\"M14.7,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M39.71,38.09s3.18-2.52,6.99,0\"/>\n <path class=\"svg_face\" d=\"M6.68,34.87v9.97c-2.07,0-3.75-2.23-3.75-4.99s1.68-4.98,3.75-4.98Z\"/>\n <path class=\"svg_face\" d=\"M55.35,44.84v-9.97c2.07,0,3.75,2.23,3.75,4.99s-1.68,4.98-3.75,4.98Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-1.33-.96-3.34-1.13c-.97-.08-2.1,.03-3.31,.52-5.2,2.1-19.43,6.49-31.33,.41-2.2-1.12-4.23-1.01-6.02-.23,0,0-.53,11.96-8.01,11.96v-10.33c0-.18,0-.35,.01-.53,.03-2.34,.17-4.72,.61-7,.62-3.05,4.35-7.48,9.01-8.8C34.04-.04,47.2,4.46,51.85,7.66c4.91,3.39,6.85,12.41,6.84,12.45Z\"/>\n <path class=\"svg_face\" d=\"M7.3,13.78c-.44,2.28-.58,4.66-.61,7,.01-2.33,.15-4.71,.61-7Z\"/>\n <path class=\"svg_face\" d=\"M58.69,20.11s-.99-6.57-7.03-6.71c-2.46-.05-4.13,1.75-7.1,1.77-3.8,.02-5.11-1.97-5.11-1.97\"/>\n <path class=\"svg_face\" d=\"M14.82,51.45s4.92,6.49,15.65,6.49,16.74-6.49,16.74-6.49\"/>\n</svg>\n"}}}`), { version: "2.13.0", prefix: "", query: {'fly_instance_id': '3d8de59be40658', 'client_id': '6a0ebed1-99e2-463c-8881-0c02dea31cc1', 'next_message_id': 0}, extraHeaders: {'fly-force-instance-id': '3d8de59be40658'}, transports: ['websocket', 'polling'], quasarConfig: {"brand":{"primary":"#5898d4"},"loadingBar":{"color":"primary","skipHijack":false}}, }); import { default as dark_mode } from "/_nicegui/2.13.0/components/b0b17893a51343979e2090deee730538/dark_mode.js"; app.component("nicegui-dark_mode", dark_mode); import { default as link } from "/_nicegui/2.13.0/components/b0b17893a51343979e2090deee730538/link.js"; app.component("nicegui-link", link); import { default as input } from "/_nicegui/2.13.0/components/b0b17893a51343979e2090deee730538/input.js"; app.component("nicegui-input", input); import { default as keyboard } from "/_nicegui/2.13.0/components/b0b17893a51343979e2090deee730538/keyboard.js"; app.component("nicegui-keyboard", keyboard); import { default as markdown } from "/_nicegui/2.13.0/components/b0b17893a51343979e2090deee730538/markdown.js"; app.component("nicegui-markdown", markdown); import { default as select } from "/_nicegui/2.13.0/components/b0b17893a51343979e2090deee730538/select.js"; app.component("nicegui-select", select); import { default as intersection_observer } from "/_nicegui/2.13.0/components/85399eb40199d450158f9cadc41dea61/intersection_observer.js"; app.component("nicegui-intersection_observer", intersection_observer); var joystick = app.component('nicegui-joystick', {template:'#tpl-joystick', async mounted() { await import("nipplejs"); const joystick = nipplejs.create({ zone: this.$el.children[0], position: { left: "50%", top: "50%" }, dynamicPage: true, ...this.options, }); joystick.on("start", (e) => this.$emit("start", e)); joystick.on("move", (_, data) => this.$emit("move", { data })); joystick.on("end", (e) => this.$emit("end", e)); }, props: { options: Object, }, }); var plotly = app.component('nicegui-plotly', {template:'#tpl-plotly', async mounted() { await import("plotly"); this.update(); }, methods: { update() { // wait for plotly to be loaded if (typeof Plotly === "undefined") { setTimeout(this.update, 10); return; } // default responsive to true const options = this.options; if (options.config === undefined) options.config = { responsive: true }; if (options.config.responsive === undefined) options.config.responsive = true; // re-use plotly instance if config is the same if (JSON.stringify(options.config) == JSON.stringify(this.last_options.config)) { Plotly.react(this.$el.id, this.options.data, this.options.layout); } else { Plotly.newPlot(this.$el.id, this.options.data, this.options.layout, options.config); this.set_handlers(); } // store last options this.last_options = options; }, set_handlers() { // forward events for (const name of [ // source: https://plotly.com/javascript/plotlyjs-events/ "plotly_click", "plotly_legendclick", "plotly_selecting", "plotly_selected", "plotly_hover", "plotly_unhover", "plotly_legenddoubleclick", "plotly_restyle", "plotly_relayout", "plotly_webglcontextlost", "plotly_afterplot", "plotly_autosize", "plotly_deselect", "plotly_doubleclick", "plotly_redraw", "plotly_animated", ]) { this.$el.on(name, (event) => { const args = { ...event, points: event?.points?.map((p) => ({ ...p, fullData: undefined, xaxis: undefined, yaxis: undefined, })), xaxes: undefined, yaxes: undefined, }; this.$emit(name, args); }); } }, }, data() { return { last_options: {}, }; }, props: { options: Object, }, }); const dark = False; Quasar.lang.set(Quasar.lang["en-US".replace('-', '')]); Quasar.Dark.set(dark === None ? "auto" : dark); if (dark !== None) tailwind.config.darkMode = "class"; if (dark === True) document.body.classList.add("dark"); app.mount("#app"); </script> </body> </html>