uBI 用户指南

概述

uBI 是一个可视化智慧大屏快速搭建平台，只需简单理解其概念和操作，即可轻松创建符合您预期的智慧大屏。它功能强大，同时操作简便，非常适合零基础的用户使用。

特性

多样化的展示方式：uBI 提供了丰富的看板和组件库，结合我们的 uBuilder（建模工具）和 uSpace（场景在线制作工具），不仅可以以图表等形式展示数据，还可以呈现引人入胜的3D场景模型。
交互性丰富：uBI 组件提供了丰富的交互功能，支持多种协议，包括物联网协议MQTT等。这不仅使其能够呈现数据，还可以与真实世界的设备进行联动。
高效易用：我们通过拖拽和表单配置实现了几乎零代码的大屏搭建方式，可以满足绝大部分需求，大幅降低了使用门槛。

术语

数据源：数据源中心是所有页面组件的动态数据的根源。在这里，您可以轻松地统一管理大屏的数据来源，实现快速切换接口环境并进行配置、数据的高效复用。
画布：画布的大小直接对应最终智慧大屏的展示尺寸。您可以通过画布配置来定义智慧大屏的宽高尺寸、背景以及主题等属性。
页面：数字大屏一般通过多屏图表切换展示，在BI里对应的就是多个页面，页面中可以放置图表等组件。
组件：在BI中，内容可以以各种形式呈现，如场景、图表、图片、文字、视频等，每一个都是一个独立的组件。

步骤

编辑器介绍

BI编辑器是一个功能全面的用于从零开始构建大屏项目的工具平台，主要包括以下几个关键模块：

项目操作区：这个区域提供了项目级别的各种操作，例如数据源管理、预览、分享和导出等功能。
组件区：这个区域用于展示可用的组件库，您可以轻松将所需组件拖放到画布上进行使用。
页面组件列表区：这个区域里您可以查看关于页面以及已使用组件的详细信息。
画布区：这个区域用于直观地展示组件的最终外观和样式，让您能够清晰地预览和编辑组件的呈现方式。
配置区：这个区域里您可以对项目、组件以及分组进行详细配置，以满足特定需求。
杂项：这个区域包括历史记录、快捷键列表、项目状态以及缩放功能等，以提供更全面的编辑体验。

快速使用

创建项目

在这个阶段，我们的主要目的是创建一个大屏项目，并进行配置，包括设置宽高、选择背景、定义预览模式以及进行主题基础配置等。

快速创建

配置项目

在这一步，我们的主要任务包括设置项目名称、缩略图、大屏的宽高、背景、预览模式以及主题滤镜等。

配置项目名称

配置缩略图

配置宽高

配置的宽高应当与最终投放大屏的屏幕的像素宽高相匹配。

配置背景

支持多种背景选项，包括背景色、背景图片和背景视频。它们的权重大小对比关系如下：背景视频 > 背景图片 > 背景色。

配置预览模式

支持多种预览模式，包括：

自适应：根据屏幕窗口大小自动调整，可能会留有空白区域。
全屏拉伸：将画面拉伸以填充整个屏幕，可能导致画面变形。
水平拉伸：根据屏幕窗口的宽度进行水平拉伸，可能会导致画面变形。
垂直拉伸：根据屏幕窗口的高度进行垂直拉伸，可能会导致画面变形。
实际像素：按照实际像素显示，可能会留白或部分内容被遮挡。

请注意：除了实际像素模式外，其他模式可能导致画面模糊、失真等问题。因此，最佳做法是将大屏的宽高配置与最终投放屏幕的像素宽高相匹配，并使用【实际像素】模式。

配置主题、滤镜

主题、滤镜配置用于定义组件的基础颜色。那些支持跟随主题变化颜色的组件，在主题变化时会相应地改变自身的颜色。这种方式非常方便，可以轻松地进行调色。

配置数据

在这个阶段，我们的主要目的是统一管理和配置大屏数据的来源接口，以便供组件使用。

概述

uBI 数据源功能模块是数字大屏数据来源管理的核心，目前支持HTTP、MQTT和WebSocket等多种协议。它具有以下特点：

实现数字大屏数据来源的集中化管理，从而实现接口复用。
使用图形化配置界面，使其更加易于理解和上手。
支持快速切换接口环境，让接口配置更加方便和快捷。
提供测试功能，方便快捷地调试接口配置的准确性。
支持返回数据过滤，使数据处理更加灵活。

术语

环境：指某个提供接口的服务器地址，可以是一个域名，也可以是一个IP地址。
接口：指某个服务器地址下的具体接口，即服务器地址后面的路径。

使用

HTTP

配置环境

名称：环境的名称，用于区分不同环境。
链接：服务器的域名或ID，支持 http:// 和 https:// 协议。（http:// 协议仅在私有化部署环境下可用）
端口：服务器的端口号，http:// 协议默认为 80，https:// 协议默认为 443。
请求头：请求时携带的自定义请求头。

配置接口

名称：接口的名称，用于区分不同接口。
接口：接口的URL，选择相应的数据源、请求方式并填写具体的接口路径。
间隔时间：每隔一段时间发起一次请求，设为0则只发起一次请求。
请求参数：附带发送给服务器的请求数据。
- Params：请求参数，即Query String。
- Headers：请求头，接口的请求头优先级高于环境的请求头。如果接口和环境同时存在某个请求头，将优先选择接口请求头的值。
- Body：请求体，支持JSON、表单、XML等格式。
返回值过滤：返回值过滤函数，配置了此函数后，请求返回的值会经过此函数过滤后再传递给使用此接口的组件。

测试

使用

选择 HTTP 请求。
选择接口。
编写过滤器函数。（当接口返回的数据结构不符合组件的需求时，可以通过组件的过滤器函数进行处理和转换）

MQTT

配置环境

名称：环境的名称，用于区分不同环境。
链接：服务器的域名或ID，支持 ws:// 和 wss:// 协议。（ws:// 协议仅在私有化部署环境下可用）
端口：服务器的端口号，ws:// 协议默认为 1883，wss:// 协议默认为 8883。

配置接口

名称：接口的名称，用于区分不同接口。
接口：接口的URL，选择相应的数据源并填写具体的接口路径。
链接配置：
- 基础配置：
  - Client ID：每个连接到MQTT服务器的客户端都需要唯一的客户端ID。客户端ID用于在服务器上标识和区分不同的客户端。
  - Username：如果MQTT服务器要求身份验证，你需要提供有效的用户名。
  - Password：如果MQTT服务器要求身份验证，你需要提供有效的密码。
  - Keep Alive: 用于定义客户端与服务器之间的保持活动时间间隔。客户端会定期发送PINGREQ消息给服务器以保持连接活动状态。
  - Version：支持不同的协议版本，如MQTT v3.1、v3.1.1和MQTT v5.0。你需要根据服务器支持的协议版本进行配置。
- Will Message：遗嘱消息是在客户端意外断开连接时，由服务器代表客户端发布的一条消息。通过设置遗嘱消息，客户端可以通知其他订阅者它的离线状态或断开连接的原因。
  - Topic：主题是消息的标识符，用于将消息进行分类和发布。它是一个字符串，可以具有层次结构，由多个层级组成，使用斜杠（/）进行分隔。
  - QoS：QoS级别定义了消息的传递可靠性和保证级别。
  - Retain：在发布消息时，可以设置消息的"Retain"标志位。当设置为true时，表示该消息是保留消息（Retained Message）。保留消息会被持久化存储在MQTT服务器上，并在有新的订阅者连接到主题时立即发送给它们。
  - Message：消息是通过主题进行发布和传递的数据单元。
订阅：
- Topic：主题。
- QoS：消息质量。
连接处理：
- 连接成功处理：在连接成功后会执行此函数，你可以利用此函数来配置在连接成功后需要处理的事务。
- 连接失败处理：在连接失败后会执行此函数，你可以利用此函数来配置在连接失败后需要处理的事务。

测试

使用

选择 MQTT 请求。
选择接口。
选择主题。
编写过滤器函数。（当接口返回的数据结构不符合组件的需求时，可以通过组件的过滤器函数进行处理和转换）

WebSocket

配置环境

名称：环境的名称，用于区分不同环境。
链接：服务器的域名或ID，支持 ws:// 和 wss:// 协议。（ws:// 协议仅在私有化部署环境下可用）
端口：服务器的端口号，ws:// 协议默认为 80，wss:// 协议默认为 443。

配置接口

名称：接口的名称，用于区分不同接口。
接口：接口的URL，选择相应的数据源并填写具体的接口路径。
Name Space：Socket.IO 中的命名空间是一种逻辑上的分组机制，用于将相关联的连接和事件归类到一个命名空间下。它允许你创建多个独立的通信通道，每个通道都有自己的事件和数据传输。通过命名空间，你可以将不同类型的通信隔离开，从而更好地管理和组织代码。
Sub Protocols：子协议是一种简单的字符串标识，用于标识当前连接所使用的通信协议或数据格式。通过子协议，你可以在客户端和服务器之间约定使用特定的协议，以实现定制化的数据交换。
参数配置：
- Query：请求参数，即Query String。
- Headers：请求头，接口的请求头优先级高于环境的请求头。如果接口和环境同时存在某个请求头，将优先选择接口请求头的值。
监听：通过事件监听，可以捕获和处理特定类型的事件，以便在事件发生时执行相应的操作。
- 事件名：监听的事件名称。
连接处理：
- 连接成功处理：在连接成功后会执行此函数，你可以利用此函数来配置在连接成功后需要处理的事务。
- 连接失败处理：在连接失败后会执行此函数，你可以利用此函数来配置在连接失败后需要处理的事务。