文本控件(Text)

Guition 文本控件是 Guition 平台提供的一种界面元素，用于在串口屏上显示静态或动态文本内容。本节将介绍 Guition 文本控件可设置的属性值以及如何通过串口指令设置这些属性。

可设置的属性值说明

Guition 文本控件的主要属性包括：

文本内容（txt）：控件中要显示的文本内容。
文本颜色（color）：文本的颜色，使用十六进制表示的颜色值。
背景颜色（bgcolor）：文本的背景颜色，使用十六进制表示的颜色值。
背景透明度（bgopa）：文本背景色的透明度，取值范围为 0 到 255。
文本透明度（opa）：文本的透明度，取值范围为 0 到 255。
字体（font）：文本所使用的字体，通常是一个数字，代表字体的索引或编号。
水平居中（xcen）：控件中的文本是否水平居中，取值范围为 0、1、2，其中 0 表示左对齐，1 表示居中，2 表示右对齐。
X 坐标（x）：控件左上角的 X 坐标值，即控件在屏幕上的水平位置。
Y 坐标（y）：控件左上角的 Y 坐标值，即控件在屏幕上的垂直位置。
宽度（w）：控件的宽度，即控件在水平方向上的大小。
高度（h）：控件的高度，即控件在垂直方向上的大小。
显示（vis）：显示或隐藏控件，参数0为隐藏，1为显示。

使用 JSON 格式通过串口指令设置属性值示例

以下是一个示例 JSON 格式的串口指令，用于设置 Guition 文本控件的属性值：

{
    "id": "t0",
    "name": "you define",
    "prop": {
        "txt": "hello,world",
        "color": "#FF0000",
        "bgcolor": "#00FF00",
        "bgopa": 60,
        "opa": 100,
        "font": 0,
        "xcen": 0,
        "x": 200,
        "y": 100,
        "w": 150,
        "h": 50
    }
}

在这个示例中，我们设置了文本内容为 “hello,world”，文本颜色为红色，背景颜色为绿色，背景透明度为 60，文本透明度为 100，字体为索引为 0 的字体，水平居中为否，位置为 (200, 100)，宽度为 150，高度为 50。

当然，也可以分开设置每个属性值，下面是相关说明：

1. 文本内容（txt）

说明：指定要在文本控件中显示的文本内容。

示例代码：

{
    "id": "t0",
    "prop": {
        "txt": "Hello, world!"
    }
}

示例说明：以上示例将文本控件的内容设置为 “Hello, world!”。

2. 文本颜色（color）

说明：设置文本的颜色。

示例代码：

{
    "id": "t0",
    "prop": {
        "color": "#FF0000" // 红色
    }
}

示例说明：以上示例将文本控件的颜色设置为红色。

3. 背景颜色（bgcolor）

说明：设置文本的背景颜色。

示例代码：

{
    "id": "t0",
    "prop": {
        "bgcolor": "#00FF00" // 绿色
    }
}

示例说明：以上示例将文本控件的背景颜色设置为绿色。

4. 背景透明度（bgopa）

说明：设置文本背景色的透明度，取值范围为 0 到 255，其中 0 表示完全透明，255 表示完全不透明。

示例代码：

{
    "id": "t0",
    "prop": {
        "bgopa": 128 // 半透明
    }
}

示例说明：以上示例将文本控件的背景透明度设置为半透明，取值为 128。

5. 文本透明度（opa）

说明：设置文本的透明度，取值范围为 0 到 255，其中 0 表示完全透明，255 表示完全不透明。

示例代码：

{
    "id": "t0",
    "prop": {
        "opa": 192 // 半透明
    }
}

示例说明：以上示例将文本控件的文本透明度设置为半透明，取值为 192。

6. 字体（font）

说明：指定文本所使用的字体，通常是一个数字，代表字体的索引或编号。

示例代码：

{
    "id": "t0",
    "prop": {
        "font": 0 // 默认字体
    }
}

示例说明：以上示例将文本控件的字体设置为默认字体。

7. 水平居中（xcen）

说明：设置文本在水平方向上的对齐方式，取值范围为 0、1、2，其中 0 表示左对齐，1 表示居中，2 表示右对齐。

示例代码：

{
    "id": "t0",
    "prop": {
        "xcen": 1 // 居中对齐
    }
}

示例说明：以上示例将文本控件的文本水平居中对齐。

8. X 坐标（x）

说明：指定文本控件左上角的 X 坐标值，即控件在屏幕上的水平位置。

示例代码：

{
    "id": "t0",
    "prop": {
        "x": 200 // X 坐标为 200
    }
}

示例说明：以上示例将文本控件的 X 坐标设置为 200。

9. Y 坐标（y）

说明：指定文本控件左上角的 Y 坐标值，即控件在屏幕上的垂直位置。

示例代码：

{
    "id": "t0",
    "prop": {
        "y": 100 // Y 坐标为 100
    }
}

示例说明：以上示例将文本控件的 Y 坐标设置为 100。

10. 宽度（w）

说明：指定文本控件的宽度，即控件在水平方向上的大小。

示例代码：

{
    "id": "t0",
    "prop": {
        "w": 150 // 宽度为 150
    }
}

示例说明：以上示例将文本控件的宽度设置为 150。

11. 高度（h）

说明：指定文本控件的高度，即控件在垂直方向上的大小。

示例代码：

{
    "id": "t0",
    "prop": {
        "h": 50 // 高度为 50
    }
}

示例说明：以上示例将文本控件的高度设置为 50。

12. 显示（vis）

说明：显示或隐藏控件，参数0为隐藏，1为显示。。

示例代码：

{
    "id": "t0",
    "prop": {
        "vis": 0
    }
}

示例说明：以上示例将文本控件进行隐藏。

设置单个属性的示例

设置文本内容（txt）

示例代码：

{
    "id": "t0",
    "prop": {
        "txt": "Hello, world!"
    }
}

示例说明：以上示例将文本控件的内容设置为 “Hello, world!”。

设置多个属性的示例

设置文本颜色和背景颜色

示例代码：

{
    "id": "t0",
    "prop": {
        "color": "#FF0000",     // 红色文本
        "bgcolor": "#00FF00"    // 绿色背景
    }
}

示例说明：以上示例将文本控件的文本颜色设置为红色，背景颜色设置为绿色。

设置水平居中和透明度

示例代码：

{
    "id": "t0",
    "prop": {
        "xcen": 1,    // 居中对齐
        "opa": 128    // 半透明
    }
}

示例说明：以上示例将文本控件的文本水平居中对齐，并设置文本透明度为半透明。

通过以上示例，您可以了解如何单独设置一个属性或同时设置多个属性，以实现对 Guition 文本控件的灵活控制。

指定汉字显示说明

为了在 Guition 文本控件中显示指定的汉字，需要进行以下步骤：

创建字库（font）：首先，您需要创建一个包含待显示汉字的字库。字库是一种数据结构，用于存储文字的字形信息。
设置字库ID（font）：在设置文本控件的字体属性时，需要指定使用的字库ID。通过这个ID，Guition 将从字库中加载对应的汉字。

示例代码和说明

创建字库

假设您已经创建了一个包含待显示汉字的字库，并为它分配了一个唯一的字库ID。

设置字体和字库ID

下面是设置文本控件字体和字库ID的示例代码：

{
    "id": "t0",
    "prop": {
        "font": 1     // 字库ID为 1
    }
}

通过以上示例，您可以将文本控件的字体设置为使用字库ID为 1 的字库，从而实现在 Guition 文本控件中显示指定的汉字。

需要注意的是，在创建字库时，确保字库中包含了您想要显示的所有汉字，以便在控件中正确显示。

关于字库将在后面的章节中说明