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.
# 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.
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.
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.
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
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.
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
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.
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.
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
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.
from nicegui import ui
ui.run() |
Output: