弧形滑块控件(Arc)

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

可设置的属性值说明:

  1. 滑块经过部分的背景颜色 (color):

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

    • 默认值: 无

    • 说明: 设置弧形滑块经过部分的背景颜色。

  2. 整个滑块的背景颜色 (bgcolor):

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

    • 默认值: 无

    • 说明: 设置整个弧形滑块的背景颜色。

  3. 滑块本身的背景颜色 (color2):

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

    • 默认值: 无

    • 说明: 设置弧形滑块本身的背景颜色。

  4. 弧形滑块的半径 (h):

    • 类型: 整数

    • 默认值: 无

    • 说明: 设置弧形滑块的半径。

  5. 滑块的宽度 (w):

    • 类型: 整数

    • 默认值: 无

    • 说明: 设置弧形滑块的宽度。

  6. 横坐标 (x):

    • 类型: 整数

    • 默认值: 无

    • 说明: 设置弧形滑块左上角的横坐标位置。

  7. 纵坐标 (y):

    • 类型: 整数

    • 默认值: 无

    • 说明: 设置弧形滑块左上角的纵坐标位置。

  8. 可见性 (vis):

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

    • 默认值: 1

    • 说明: 设置弧形滑块是否可见,1 表示可见,0 表示隐藏。

  9. 背景透明度 (bgopa):

    • 类型: 整数

    • 默认值: 0

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

  10. 初始值 (val):

    • 类型: 整数

    • 默认值: 0

    • 说明: 设置弧形滑块的初始值,即滑块位置的初始百分比。

  11. 执行事件 (do):

    • 类型: 字符串

    • 默认值: 无

    • 说明: 指定滑块触发的事件,例如 “value” 表示数值变化事件。

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

{
    "name": "arc0",
    "prop": {
        "color":"#FF0000",
        "bgcolor":"#00FF00",
        "bgopa":60,
        "color2":"#0000FF",
        "val":50,
        "x": 200,
        "y": 100,
        "w": 15,
        "h": 150,
        "vis":1
    },
    "do": "value"
}

说明:

  • 在上面的示例中,设置了一个弧形控件的属性,包括颜色、位置、大小、可见性等。

  • 当执行事件时,根据具体的应用场景而定。

属性设置示例

颜色 (color)

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

说明:设置弧形滑块经过部分的背景颜色为红色。

背景颜色 (bgcolor)

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

说明:设置整个弧形滑块的背景颜色为绿色。

滑块颜色 (color2)

{
    "name": "arc0",
    "prop": {
        "color2": "#0000FF"
    }
}

说明:设置弧形滑块本身的背景颜色为蓝色。

透明度 (opa)

{
    "name": "arc0",
    "prop": {
        "opa": 100
    }
}

说明:设置弧形滑块的透明度为100。

背景透明度 (bgopa)

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

说明:设置弧形滑块背景的透明度为60。

值 (val)

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

说明:设置弧形滑块的初始值为50。

横坐标 (x)

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

说明:设置弧形滑块左上角的横坐标位置为200。

纵坐标 (y)

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

说明:设置弧形滑块左上角的纵坐标位置为100。

宽度 (w)

{
    "name": "arc0",
    "prop": {
        "w": 15
    }
}

说明:设置弧形滑块的宽度为15。

高度 (h)

{
    "name": "arc0",
    "prop": {
        "h": 150
    }
}

说明:设置弧形滑块的高度为150。

可见性 (vis)

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

说明:设置弧形滑块为可见状态。

执行事件 (do)

{
    "name": "arc0",
    "do": "value"
}

说明:设置弧形滑块的执行事件为值改变。