Introduction to NiceGUI – A Python based UI framework

In this article, we will learn about NiceGUI, It is a Python-based UI Framework, which shows up in Web Browsers and we can create buttons, dialogs, Markdown, 3D scenes, plots, and much more. It works well for dashboards, robotics initiatives, smart house solutions, and other related use cases. Additionally, it can be applied in the creation process, such as when modifying or setting a machine learning method or adjusting motor controllers.

Users only need to take care of the Python code and it will handle the web development i.e GUI details. It is more lightweight than Streamlit and is not only available as a PyPI package but also in Docker. One of the best things about this is that whenever we modify our Python code it will automatically refresh and the changes will be reflected in our browser, no need to manually reload the browser or run the code every time.

Features of NiceGUI

• Browser-based interaction with a graphical user
• Standard GUI components like label, icon, checkbox, switch, scale, input, file upload, etc., implicitly refresh when the code is changed.
• A straightforward organization using rows, columns, cards, and dialogue boxes
• General-purpose Markdown and HTML components
• Powerful high-level components to create 3D landscapes, draw graphs and charts, and receive steering inputs from simulated joysticks
• Engage with tables, comment, and overlay pictures, and traverse foldable tree structures
• Built-in schedule to periodically update the info (even every 10 ms)
• Simple data coupling to create even less code
• Modern user contact is provided by notifications, dialogs, and menus on both public and private online sites.
• Adding custom paths and data replies
• Recording keystrokes for use in universal shortcuts, etc.
• Define main, secondary, and accent colors to create a unique appearance

Required module

To install NiceGUI write the below command in any terminal.

python3 -m pip install nicegui

Simple GUI Program using NiceGUI 

Now we will display a simple hello message using NiceGUI. These messages are known as labels and the method we will use to add any text is also called a label.

Python3

# Importing the module
from nicegui import ui

# passing the text we will show
ui.label('Hello Geeks from NiceGUI!')

# running it
ui.run()

To run this code simply save it and execute it normally like any other Python code. either using the run button or writing the below command in terminal.

python <filename>.py

This run opens up users’ default browser in localhost and every time we make any change to our code just save it and the page will reload automatically, no need to explicitly reload it.

Output:

We can display some text also using the set_text() method of the label. Even if we have something written inside a normal label, only the text passed in set_text will be shown, and the other one will be replaced.

Python3

from nicegui import ui

# set_text will replace the text
# passed in label
ui.label('Hello Geeks from NiceGUI!').set_text("This text is passed in set_text")


ui.run()

Output:

Setting visibility of the text

We can explicitly set the visibility of the text using the set_visibility() method, which takes one parameter either True or False.

Python3

from nicegui import ui

ui.label().set_text(text="This text is passed in set_text")

ui.label("Text visible or not").set_visibility(False)

ui.run()

Output:

Adding Icons

Now we will see how we can add icons using NiceGUI using the icon() method.

Python3

from nicegui import ui

ui.label().set_text(text="This text is passed in set_text.")

ui.icon("lock")

ui.run()

Output:

Changing the color and the size of the Icon

Python3

from nicegui import ui

ui.label().set_text(text="This text is passed in set_text.")

ui.icon("lock",color="green",size="50px")

ui.run()

Output:

Users can use any icons available on the Google Fonts website and go to the Icon section. Just pass the name of the font as a parameter and add styling if necessary.

Set the Visibility of the Icon using set_visibility() Method

Visibility is set to False.

Python3

from nicegui import ui

ui.label().set_text(text="This text is passed in set_text.")

# visibility is set to False
ui.icon("lock",color="green",size="50px").set_visibility(False)

ui.run()

Output:

Visibility is set to True 

Python3

from nicegui import ui

ui.label().set_text(text="This text is passed in set_text.")

# visibility is set to True
ui.icon("lock",color="green",size="50px").set_visibility(True)

ui.run()

Output:

Adding UI Elements

In this example, we are trying to learn how we can insert a toggle, slider, and number container in our GUI web page using NiceGUI using Python.

Python3

from nicegui import ui

class Demo:
    def __init__(self):
        self.number = 1

demo = Demo()
# creating slider
ui.slider(min=1, max=5).bind_value(demo, 'number')
# creating number
ui.number().bind_value(demo, 'number')
# creating toggle buttons
ui.toggle({1: 'A', 2: 'B', 3: 'C', 4:'D', 5: 'E'}).bind_value(demo, 'number')

ui.run()

Output:

Adding Avatars

We can also add Avatars of our choice, it can be any icon (available Material Icons website) or any downloaded image or URL of an image.

Python3

from nicegui import ui

# The name of these icons is available in Google Fonts or
# Material Icons website. Only those names will be recognized

ui.avatar('adb')


ui.run()

Output:

By default, we can see that the avatar color is black and the background is blue and the structure is a circle. We can change all of them according to our needs.

Changing color, background color, size, structure, and shape of the Avatar

Python3

from nicegui import ui


ui.avatar('adb',text_color='green', square=True,color='yellow',size="50px")

ui.run()

Output:

Adding Hyperlink

Now we will see how can we add hyperlinks using NiceGUI. For that, we will use the link() method, which takes two parameters. First, the text will be shown and the second is the link to which the link will redirect after clicking it.

Python3

from nicegui import ui

ui.link("The best Computer Science Portal","https://www.geeksforgeeks.org/")

ui.run()

Output: