简历

一个建立在 OpenCV 绘图原语之上的（非常）简单的 UI 库。其他 UI 库，例如imgui，需要图形后端（例如 OpenGL）才能工作，因此如果您想在 OpenCV 应用程序中使用 imgui，您必须使其启用 OpenGL。cvui 并非如此，它仅使用OpenCV 绘图原语来完成所有渲染（不需要 OpenGL 或 Qt）。

特征

• 轻量级且易于使用的用户界面；
• 仅标头，没有外部依赖项（OpenCV 除外）；
• 仅基于 OpenCV 绘图原语（不需要 OpenGL 或 Qt）；
• 友好且类 C 的 API（无类/对象等）；
• 轻松渲染组件而不用担心它们的位置（使用行/列）；
• 简单（但功能强大）的鼠标 API；
• UI 组件数量适中（总共 11 个）；
• 在 C++ 和 Python 中可用（纯实现，无绑定）。

用法

cvui 的使用围绕着调用cvui.init()初始化 lib，将 cvui 组件渲染为 a np.ndarray（您自己处理），最后np.ndarray使用cvui.imshow()cvui 版本的cv2.imshow(). 或者，您可以使用cv2.imshow()来显示事物，但在这种情况下，您必须cvui.update()在调用之前调用自己cv.imshow()。

下面是一个例子：

import numpy as np
import cv2
import cvui

WINDOW_NAME = 'CVUI Test'

# Initialize cvui and create/open a OpenCV window.
cvui.init(WINDOW_NAME)
# Create a frame to render components to.
frame = np.zeros((200, 400, 3), np.uint8)

while True:
    # Clear the frame.
    frame[:] = (49, 52, 49)
    # Render a message in the frame at position (10, 15)
    cvui.text(frame, 10, 15, 'Hello world!')
    # Show frame in a window.
    cvui.imshow(WINDOW1_NAME, frame)

    if cv2.waitKey(20) == 27:
        break

以下部分详细解释了使用 cvui 所需的每个步骤。

1.导入并初始化cvui

在使用 cvui 之前，需要调用cvui.init()初始化它。最简单的方法是初始化 cvui 并告诉它创建将使用的任何 OpenCV 窗口，例如：

import numpy as np
import cv2
import cvui

WINDOW_NAME = 'CVUI Test'

# Tell cvui to init and create a window
cvui.init(WINDOW_NAME)

while True:
    # your app logic here
    if cv2.waitKey(20) == 27:
        break

提示：如果您需要在多个窗口中使用 cvui，或者您希望对创建窗口的过程进行更多控制，请查看Multiple OpenCV windows page 和multiple-windows and multiple-windows-complex示例。

2.渲染和使用cvui组件

所有 cvui 组件都呈现为np.ndarray. 下面是一个示例，展示了如何在named上呈现'Hello world'消息：np.ndarrayframe

import numpy as np
import cv2
import cvui

WINDOW_NAME = 'CVUI Test'

cvui.init(WINDOW_NAME)

# Create a frame
frame = np.zeros((200, 400, 3), np.uint8)

while True:
    # clear the frame
    frame[:] = (49, 52, 49)

    # render a message in the frame at position (10, 15)
    cvui.text(frame, 10, 15, 'Hello world!')

    if cv2.waitKey(20) == 27:
        break

一些 cvui 组件，即counter、trackbar和checkbox . ，使用了一个需要修改的外部变量来控制它们的内部状态。由于 Python 中没有指向内置类型的指针，因此需要更改外部变量的 cvui 组件必须接收具有单个元素的数组/列表等变量。

下面是一个复选框的示例，其状态存储在变量中checkboxState：

import numpy as np
import cv2
import cvui

WINDOW_NAME = 'CVUI Test'
cvui.init(WINDOW_NAME)
frame = np.zeros((200, 400, 3), np.uint8)

# use an array/list because this variable will be changed by cvui
checkboxState = [False]

while True:
    frame[:] = (49, 52, 49)

    # Render the checkbox. Notice that checkboxState is used AS IS,
    # e.g. simply "checkboxState" instead of "checkboxState[0]".
    # Only internally that cvui will use checkboxState[0].
    cvui.checkbox(frame, 10, 15, 'My checkbox', checkboxState)

    # Check the state of the checkbox. Here you need to remember to
    # use the first position of the array/list because that's the
    # one being used by all cvui components that perform changes
    # to external variables.
    if checkboxState[0] == True:
        print('Checkbox is checked')

    if cv2.waitKey(20) == 27:
        break

提示：请参阅在线文档以了解有关所有可用 cvui 组件的更多信息。

3.显示（窗口）内容

渲染组件后，使用cvui.imshow()cvui 对 OpenCV 的改进版本显示最终结果cv2.imshow()：

import numpy as np
import cv2
import cvui

WINDOW_NAME = 'CVUI Test'

cvui.init(WINDOW_NAME)
frame = np.zeros((200, 400, 3), np.uint8)

while True:
    frame[:] = (49, 52, 49)
    cvui.text(frame, 10, 15, 'Hello world!')

    # Show window content
    cvui.imshow(WINDOW1_NAME, frame)

    if cv2.waitKey(20) == 27:
        break

当你使用cvui.imshow()instead of 时cv2.imshow()，cvui 不仅会显示内容，还会更新其内部结构以确保所有 UI 交互都能正常工作。

如果要使用cv2.imshow()，则必须在调用完 cvui 组件cvui.update()之前和之后调用，以便 cvui 可以执行其内部处理来处理鼠标交互。cv2.imshow()例如

import numpy as np
import cv2
import cvui

WINDOW_NAME = 'CVUI Test'

cvui.init(WINDOW_NAME)
frame = np.zeros((200, 400, 3), np.uint8)

while True:
    frame[:] = (49, 52, 49)
    cvui.text(frame, 10, 15, 'Hello world!')

    # Update cvui internal stuff
    cvui.update()

    # Show window content
    cv2.imshow(WINDOW1_NAME, frame)

    if cv2.waitKey(20) == 27:
        break