当前位置：物联沃-IOTWORD物联网 > 技术教程 > 使用NiceGUI框架提升Python应用程序的用户界面
代码收藏家代码收藏家 技术教程

使用NiceGUI框架提升Python应用程序的用户界面

介绍

随着机器学习和深度学习网站应用程序的快速增长，开发人员一直在寻找新的 Web 框架，以便更轻松地构建这些网站应用程序。

数据科学应用程序的普及程度已经上升，因此新的框架也在增加。开发人员创建了许多新的框架，这些框架被证明对构建这些网站应用程序很有帮助。其中一个框架就是NiceGUI。在本文中，我们将关注这个框架以及如何使用它构建简单的应用程序。

学习目标

  • 了解 NiceGUI

  • 学习使用 NiceGUI 编写基本元素

  • 了解值绑定的工作原理

  • 使用 NiceGUI 在 UI 中显示数据

  • 使用 NiceGUI 构建应用程序

    • 目录

  • 介绍

  • 什么是 NiceGUI？

  • 安装 NiceGUI

  • NiceGUI 的基本元素

  • 用户输入和值绑定

  • 数据元素和图表

  • 带有 NiceGUI 的 Pandas DataFrame

  • 用例和应用程序

  • 结论

    • 什么是 NiceGUI？

    NiceGUI是一个简单易用的基于Python的Web-UI框架，其目的是使在Python中开发前端应用程序变得容易。

    NiceGUI Framework 的 UI 元素基于 Vue 和 Quasar。NiceGUI带有许多现成的元素。它甚至允许不同元素之间的值绑定。NiceGUI 可以轻松显示各种图表。它的开发人员选择在 Fast API Framework 之上构建它，因为它具有快速的性能和用户友好的界面。

    NiceGUI 中的样式随着 CSS、Tailwind 和 Quasar 的变化而变化。默认情况下，它允许自定义样式。使用 NiceGUI 构建从短脚本到仪表板再到完整的机器人项目，甚至是机器学习网站应用程序。

    一些功能包括：

  • 预加载了随时可用的 GUI 元素，如按钮、标签、复选框、滑块、开关等

  • 表情符号图标、SVG 和 base64 支持

  • 提供简单的数据绑定

  • 用于刷新数据的内置定时器

  • 能够渲染 3D 场景，绘制图表

  • 可以轻松显示图像和视频

  • 它使自定义页面和布局变得容易，并且内置了对 Tailwind CSS 的支持

    • 安装 NiceGUI

    像使用 pip 的其他普通 Python 包一样下载 NiceGUI。

    python3 -m pip install nicegui

    请注意，NiceGUI 甚至提供了一个 Docker Image 来测试其功能，而无需将其下载到机器上。让我们看一些示例代码：

    from nicegui import ui

ui.label('Welcome to NiceGUI!')
ui.button('Click Here', on_click=lambda: ui.notify('Button Pressed'))

ui.run()

    要使用 NiceGUI，我们需要导入库nicegui。我们将在这里使用nicegui的三个函数

  • **label()**：使用此函数在 UI 上显示文本

  • **button()**：此函数用于为 UI 创建可单击的按钮。

  • **notify()**：底部的弹出窗口将显示此函数中编写的内容。

    • 让我们运行代码并查看下面的输出

    3dbdb725989391595db14d3764ee6b3e.jpeg
    1c622c53d0b8f8f7b6e9b3a834215730.jpeg

    该应用程序可以从端口 8080 访问。我们看到这里有一个按钮 Click Here。单击该按钮后，会显示一个弹出窗口，告知按钮已按下

    NiceGUI 的基本元素

    在本节中，我们将研究一些我们将使用 NiceGUI 框架创建的基本元素。

    图标和链接

    让我们从显示图标和将网站链接到 UI 中的文本开始

    from nicegui import ui

ui.label('Display Icon')
ui.icon('fingerprint', color='primary').classes('text-5xl')
ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')

ui.run()

    从上面的代码创建以下函数：

  • “icon()”函数允许我们在 UI 上显示图标。要显示一个图标，我们需要提供一个图标名称。此功能依赖于 Quasar 的 QIcon。可以使用 CSS、Quasar 或 Tailwind 颜色指定颜色选项。大小选项由 classes() 方法使用 CSS 单位确定。

  • “link()”函数使我们能够将链接分配给 UI 中的文本。首先，我们指定应链接的文本，然后是相应的网站 URL。

    • 运行代码将产生以下输出

    547116f02985c1eaf166d33e8381d08f.jpeg

    我们看到屏幕上显示了指纹图标。同样点击“GitHub 上的 NiceGUI”，将我们重定向到 NiceGUI 的 GitHub 页面。

    选择元素

    NiceGUI 有不同的选择元素，如切换框、单选框和复选框。下面的代码包含从 NiceGUI 导入的所有这些元素。

    from nicegui import ui

ui.label('Toggle Box')
toggle = ui.toggle([1, 2, 3], value=1)

ui.label('Radio Selection')
radio = ui.radio(["one","two","three"], value=1).props('inline')

ui.label('Dropdown Select')
select = ui.select(["red","blue","green"], value=1)

ui.label('Check Box')
checkbox = ui.checkbox('check me')

ui.run()

    上面代码中的函数包括：

  • **toggle()**：此函数可以生成一个切换框，我们在其中通过包含值到标签的映射的字典值列表传递选项。当用户选择一个选项时，它被保存在toggle变量中。

  • **radio()**：这类似于 toggle() 函数，但在这里我们可以选择单选选项。

  • **select()**：此函数生成一个下拉列表以选择特定选项。与上述函数相比，此函数的输入和存储的输出值相同。

  • **checkbox()**：当用户选中复选框时，checkbox 变量被分配一个布尔值 True。

    • 516a6658dfd57fd7797bce61ffce9b7f.jpeg
    875ca61ad18924f34ceb09d56168015c.jpeg

    在这里，我们看到了我们创建的所有选择元素。单击 Dropdown Selection，出现下拉操作，允许我们选择其中一个选项。这些只是我们研究过的部分元素。NiceGUI 提供了广泛的元素以在各种场景中使用。

    用户输入和值绑定

    在本节中，我们将了解允许用户在 UI 中输入文本或数字数据的功能。

    from nicegui import ui

ui.input(label='Text',
         on_change=lambda e: text_input.set_text('Your Input: ' + e.value))
text_input = ui.label()

ui.number(label='Number', value=3.1415, format='%.2f',
          on_change=lambda e: number_input.set_text('Your Input: ' + str(e.value)))
number_input = ui.label()

ui.run()

    上面代码中的函数包括：

  • **input()**：使用此函数时，将创建一个空文本框，用户可以在其中键入数据。它有一个名为“ label ”的变量，它告诉用户它期望的输入类型。每当用户在输入框中输入内容时，ui.label() 的 .set_text() 函数就会激活并在屏幕上显示键入的文本。

  • **number()**：此函数的工作方式与 input() 函数类似，唯一的区别是此函数接受数字而不是文本

    • 代码运行时，将产生以下输出

    4430d096b96868378c3994b21c7ee769.jpeg
    857ab6b39d42b8ab0d486a80a00a2b92.jpeg

    探索 NiceGUI 中的 UI 元素

    在上图中，当用户输入输入字段时，用户的输入会显示在屏幕上。NiceGUI 支持不同 UI 元素之间的绑定值，允许无缝集成。让我们探讨一个例子。

    from nicegui import ui

ui.label("Value Bindings")

with ui.row():
    radio1 = ui.radio([1, 2, 3], value=1).props('inline')
    toggle = ui.toggle({1: 'A', 2: 'B', 3: 'C'}).props('inline').bind_value(radio1, 'value')

ui.run()

    在上面的代码中，我们使用 ui.row() 元素将两个元素（radio 和 toggle）水平分组。要将它们垂直分组，我们可以使用 ui.column()。toggle() 函数包含变量 bind_values()，它将单选选项连接到切换选项。例如，在收音机中选择 1 会将开关切换到 A，而选择 2 会将其切换到 B。

    442c87aaf897cd7df4892c7e17cf4d80.jpeg
    2655c88ad6aec3d1230eb99bfc14270e.jpeg

    在上面的图片中，我们可以清楚地看到两个 UI 元素之间的值绑定。同样，bind_value() 函数能够在 NiceGUI 提供的不同 UI 元素中工作。

    数据元素和图表

    在本节中，我们将看到 NiceGUI 提供的数据元素。我们将探讨如何使用 NiceGUI 在 UI 上显示表格和图表。首先，我们将从通过 NiceGUI 显示表格数据开始。显示它的代码将是：

    from nicegui import ui

columns = [
    {'name': 'Name', 'label': 'Name', 'field': 'Name', 'required': True, 'align': 'center'},
    {'name': 'Employee-ID', 'label': 'Employee-ID', 'field': 'Employee-ID'},
    {'name': 'experience', 'label': 'experience', 'field': 'experience'}
    ]
rows = [
    {'Name': 'Akash', 'Employee-ID':1230, 'experience': 5},
    {'Name': 'Karen', 'Employee-ID': 1245, 'experience': 10},
    {'Name': 'Thanish', 'Employee-ID': 1980, 'experience': 9},
    {'Name': 'Samuel', 'Employee-ID': 1120, 'experience': 8},
    ]

ui.table(title='Employee Data',columns=columns, rows=rows, row_key='Name')

ui.run()

    要显示表格，请在列列表中指定列名。每列由列表中的字典表示。包括每列的名称、标签和字段值（通常所有列都相同）。可以根据需要提供额外的键值对。

    例如，“required:True”键值对确保名称列需要添加到表中的任何新元素的值。“align”:”center” 将整个行对齐到该列名称下的居中对齐方式。

    接下来是行列表。行列表是包含上述列值的字典列表。这里使用字段名称，我们在字典中提供field:value对。然后使用 ui.table() 函数，我们将表格显示到 UI。在这里我们可以给表格命名。row_key 的列名包含唯一值。运行此代码将给出以下输出

    5c459bebd85e3e778bb3d3fcc30d5d08.jpeg

    带有 NiceGUI 的 Pandas DataFrame

    我们甚至可以使用 NiceGUI 显示 Pandas Dataframe。使用 table() 函数本身可以显示 Pandas 数据。

    import pandas as pd
from nicegui import ui

data = pd.DataFrame(data={'Name': ["Karan", "Shoaib"], 'Role': ["Developer", "Designer"]})
ui.table(
    columns=[{'name': column, 'label': column, 'field': column} for column in data.columns],
    rows=data.to_dict('records'),
)

ui.run()

    b009eaa69bf25550be5ad2c5c00fca0f.jpeg

    现在我们将看看如何使用 NiceGUI 在屏幕上显示图形。使用 NiceGUI 函数，我们可以在屏幕上显示通过 matplotlib 绘制的图。为此，我们使用 NiceGUI 中的 pyplot() 函数，它在 UI 上显示 matplotlib 图形。代码将是：

    import matplotlib
import numpy
from nicegui import ui

with ui.pyplot(figsize=(3, 2)):
    x = numpy.linspace(0.0, 10000.0, 10)
    y = numpy.log(x)
    matplotlib.pyplot.title('Log Graph')
    matplotlib.pyplot.plot(x, y, '-')

ui.run()

    在这里，我们使用 with 命令，然后使用 ui.pyplot() 函数。我们甚至将图的大小传递给函数。现在，在with下面，我们编写通过matplotlib绘制图形的代码。这里我们编写了一个简单的图，其中x轴包含从0到10000的值，步长为10，y轴包含它们的对数值。代码运行时的输出将是:

    d1703bf05d781a88dc8e54aba5a84d81.jpeg

    你可以在上面的屏幕上看到该图。使用 NiceGUI，我们不仅可以显示 matplotlib 图形，我们还可以显示通过 Plotly 制作的图形。

    用例和应用程序

    NiceGUI 类似于其他 Web 框架，可以在不同的开发场景中提供帮助，例如：

  • 机器学习 UI：凭借其众多元素，NiceGUI 成为为机器学习应用程序创建前端部件的最佳库之一。在处理需要大量用户输入的 ML 应用程序时，NiceGUI 提供的不同选择元素将真正派上用场

  • 快速原型制作：无需编写 HTML、CSS 或 Javascript 文件，并且能够完全在 NiceGUI 中编写从显示文本到选择框再到图形的所有内容，从而减少了开发快速原型的大量工作。NiceGUI 提供的大量元素有助于创建成熟的工作原型。

  • 仪表板应用程序： NiceGUI 允许开发人员通过其图表元素轻松显示不同的图表。需要注意的一件好事是 NiceGUI 甚至可以显示 3D 场景。它甚至带有进度条来展示数据的加载。它具有不同的数据元素，可以在屏幕上显示不同类型的 Python 数据类型。

    • 结论

    开发人员使用 NiceGUI（一种 Python Web 框架）来创建网站应用程序。NiceGUI 提供了必要的工具来开发一个完整的网站，所有的前端部分都完全在 Python 中。我们甚至看到了 NiceGUI 的不同元素以及如何接受用户输入。最后，我们通过绑定值了解了我们可以在不同的 UI 元素之间进行绑定的方法。

    本文的一些要点包括：

  • NiceGUI 带有不同的即用型 UI 元素。

  • 它为用户提供创建多页面网站的功能。

  • NiceGUI 内置了数据绑定。

  • 基于 FastAPI 将内容提供给网络。

    • ☆ END ☆

    如果看到这里，说明你喜欢这篇文章，请转发、点赞。微信搜索「uncle_pn」，欢迎添加小编微信「 woshicver」，每日朋友圈更新一篇高质量博文。

    ↓扫描二维码添加小编↓

    60c6b838d7e473b65e82c0238f7d2def.jpeg

    您可能感兴趣的内容:

    物联沃分享整理
    物联沃-IOTWORD物联网 » 使用NiceGUI框架提升Python应用程序的用户界面

    代码收藏家 普通

    分享到：

    相关推荐

    发表评论