进度条控件(Loads)

Guition 进度条控件允许您在界面上显示进度条,并具有多种可设置的属性,使您能够自定义进度条的外观和行为。

可设置的属性值说明:

  1. 进度颜色 (color):

    • 类型: 字符串(十六进制颜色值)

    • 默认值: “#000000”(黑色)

    • 说明: 设置进度条经过部分的背景颜色。

  2. 背景颜色 (bgcolor):

    • 类型: 字符串(十六进制颜色值)

    • 默认值: “#CCCCCC”(浅灰色)

    • 说明: 设置整个进度条的背景颜色。

  3. 背景透明度 (bgopa):

    • 类型: 整数

    • 默认值: 100

    • 说明: 设置进度条背景的透明度,取值范围为 0(完全透明)到 255(完全不透明)。

  4. 当前进度值 (val):

    • 类型: 整数

    • 默认值: 0

    • 说明: 设置当前进度条的值,表示进度的百分比。

  5. 横坐标 (x):

    • 类型: 整数

    • 默认值: 0

    • 说明: 设置进度条左上角的横坐标位置。

  6. 纵坐标 (y):

    • 类型: 整数

    • 默认值: 0

    • 说明: 设置进度条左上角的纵坐标位置。

  7. 宽度 (w):

    • 类型: 整数

    • 默认值: 100

    • 说明: 设置进度条的宽度。

  8. 高度 (h):

    • 类型: 整数

    • 默认值: 20

    • 说明: 设置进度条的高度。

  9. 可见性 (vis):

    • 类型: 布尔值 (0 或 1)

    • 默认值: 1

    • 说明: 设置进度条是否可见,1 表示可见,0 表示隐藏。

通过串口指令设置属性示例:

{
    "name": "Loads0",
    "prop": {
        "color": "#FF0000",
        "bgcolor": "#00FF00",
        "bgopa": 60,
        "val": 50,
        "x": 200,
        "y": 100,
        "w": 150,
        "h": 50,
        "vis": 1
    }
}

说明:

在上面的示例中,设置了一个进度条控件的属性,包括进度颜色、背景颜色、背景透明度、当前进度值以及位置和尺寸等属性。

属性设置示例

1. 进度颜色 (color):

{
    "name": "Loads0",
    "prop": {
        "color": "#FF0000"
    }
}

说明:设置进度条经过部分的背景颜色为红色。

2. 背景颜色 (bgcolor):

{
    "name": "Loads0",
    "prop": {
        "bgcolor": "#00FF00"
    }
}

说明:设置整个进度条的背景颜色为绿色。

3. 背景透明度 (bgopa):

{
    "name": "Loads0",
    "prop": {
        "bgopa": 60
    }
}

说明:设置进度条背景的透明度为 60。

4. 当前进度值 (val):

{
    "name": "Loads0",
    "prop": {
        "val": 50
    }
}

说明:设置当前进度条的值为 50,表示进度的百分比为 50%。

5. 横坐标 (x):

{
    "name": "Loads0",
    "prop": {
        "x": 200
    }
}

说明:设置进度条左上角的横坐标位置为 200。

6. 纵坐标 (y):

{
    "name": "Loads0",
    "prop": {
        "y": 100
    }
}

说明:设置进度条左上角的纵坐标位置为 100。

7. 宽度 (w):

{
    "name": "Loads0",
    "prop": {
        "w": 150
    }
}

说明:设置进度条的宽度为 150。

8. 高度 (h):

{
    "name": "Loads0",
    "prop": {
        "h": 50
    }
}

说明:设置进度条的高度为 50。

9. 可见性 (vis):

{
    "name": "Loads0",
    "prop": {
        "vis": 1
    }
}

说明:设置进度条可见。