Merge branch 'v1' of github.com:zauberzeug/nicegui into v1

main.py

@@ -94,7 +94,7 @@ async def index_page(client: Client):
         with ui.column().classes('gap-8'):
             ui.html('Meet the <em>NiceGUI</em>.') \
                 .style('font-size: 400%; line-height: 0.9; font-weight: 500')
-            ui.markdown('An easy-to-use Python-based UI framework\n\nwhich shows up in your web browser.') \
+            ui.markdown('Your easy-to-use Python framework to create\n\nuser interfaces which show up in the browser.') \
                 .style('font-size: 200%; line-height: 0.9')
 
     with ui.row() \
@@ -127,7 +127,8 @@ async def index_page(client: Client):
             with ui.column().classes('gap-1'):
                 ui.label('User Interface').classes('text-bold mb-4')
                 ui.markdown('- common elements like label, button, checkbox, switch, slider, input, ...')
-                ui.markdown('- layouting with rows, columns, cards and dialogs')
+                ui.markdown('- page layout with navigation bars, tabs, panels, ...')
+                ui.markdown('- grouping with rows, columns, cards and dialogs')
                 ui.markdown('- HTML and markdown elements')
                 ui.markdown('- high-level elements like charts, tables, trees, 3D scenes, joystick, ...')
                 ui.markdown('- built-in timer to refresh data in intervals')
@@ -229,13 +230,18 @@ ui.run()
                 In search for an alternative nice library to write simple graphical user interfaces in Python we discovered
                 <strong><a href="https://justpy.io/">JustPy</a></strong>.
                 Although we liked the approach, it is too "low-level HTML" for our daily usage.
+                But it inspired us to use 
+                <strong><a href="https://vuejs.org/">Vue</a></strong>
+                and 
+                <strong><a href="https://quasar.dev/">Quasar</a></strong>
+                for the frontend.<br/>
 
-                Therefore we created NiceGUI on top of
+                The backend is build on top of
                 <strong><a href="https://fastapi.tiangolo.com/">FastAPI</a></strong>,
                 which itself is based on the ASGI framework
                 <strong><a href="https://www.starlette.io/">Starlette</a></strong>,
                 and the ASGI webserver
-                <strong><a href="https://www.uvicorn.org/">Uvicorn</a></strong>.
+                <strong><a href="https://www.uvicorn.org/">Uvicorn</a></strong>.                
             ''').style('font-size: 150%; color: white').classes('leading-tight')
 
         ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-white').style('width: 1500px')

nicegui/templates/index.html

@@ -78,7 +78,7 @@
         },
         mounted() {
           const query = { client_id: {{ client_id }} };
-          window.socket = io("{{ socket_address }}", { path: "/ws/socket.io", query });
+          window.socket = io("{{ socket_address }}", { path: "/ws/socket.io", query: query });
           window.socket.on("update", (msg) => {
             Object.entries(msg.elements).forEach(([id, element]) => this.elements[element.id] = element);
           });

website/demo_card.py

@@ -11,8 +11,8 @@ def create():
                 ui.html((STATIC / 'happy_face.svg').read_text()) \
                     .classes('w-16 mx-6 stroke-black').on('click', lambda _: output.set_text("That's my face!"))
                 ui.button('Click me!', on_click=lambda: output.set_text('Clicked')).classes('w-full')
-                ui.checkbox('Check', on_change=lambda e: output.set_text('Checked' if e.value else 'Not checked'))
-                ui.switch('Switch', on_change=lambda e: output.set_text('Switched' if e.value else 'Not switched'))
+                ui.checkbox('Check', on_change=lambda e: output.set_text('Checked' if e.value else 'Unchecked'))
+                ui.switch('Switch', on_change=lambda e: output.set_text('Switched on' if e.value else 'Switched off'))
                 ui.input('Text', value='abc', on_change=lambda e: output.set_text(e.value))
 
             with ui.column().classes('items-center'):