滑块控件（Slider）

Guition 滑块控件允许用户通过拖动滑块来选择数值，具有多种可设置的属性，使您能够自定义滑块的外观和行为。

可设置的属性值说明：

背景颜色 (bgcolor):
- 类型: 字符串（颜色值）
- 默认值: 无
- 说明: 设置整个滑块的背景颜色。
滑块经过部分背景颜色 (color):
- 类型: 字符串（颜色值）
- 默认值: 无
- 说明: 设置滑块经过部分的背景颜色。
滑块本身背景颜色 (color2):
- 类型: 字符串（颜色值）
- 默认值: 无
- 说明: 设置滑块本身的背景颜色。
背景透明度 (bgopa):
- 类型: 整数
- 默认值: 100
- 说明: 设置滑块背景的透明度，取值范围为 0（完全透明）到 255（完全不透明）。
初始值 (val):
- 类型: 整数
- 默认值: 0
- 说明: 设置滑块的初始数值。
横坐标 (x):
- 类型: 整数
- 默认值: 0
- 说明: 设置滑块左上角的横坐标位置。
纵坐标 (y):
- 类型: 整数
- 默认值: 0
- 说明: 设置滑块左上角的纵坐标位置。
宽度 (w):
- 类型: 整数
- 默认值: 100
- 说明: 设置滑块的宽度。
高度 (h):
- 类型: 整数
- 默认值: 100
- 说明: 设置滑块的高度。
可见性 (vis):
- 类型: 布尔值 (0 或 1)
- 默认值: 1
- 说明: 设置滑块是否可见，1 表示可见，0 表示隐藏。
执行事件 (do):
- 类型: 字符串
- 默认值: 无
- 说明: 指定滑块触发的事件，例如 “value” 表示数值变化事件。

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

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

说明： 在上面的示例中，设置了一个滑块控件的属性，包括背景颜色、滑块经过部分背景颜色、滑块本身背景颜色、背景透明度、初始值、位置、大小、可见性和执行事件。当滑动滑块时，执行数值变化事件，其行为根据具体的应用场景而定。

属性设置示例文档

1. 背景颜色 (bgcolor)

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

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

2. 滑块经过部分背景颜色 (color)

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

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

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

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

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

4. 背景透明度 (bgopa)

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

说明： 设置滑块背景的透明度为 60。

5. 初始值 (val)

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

说明： 设置滑块的初始数值为 50。

6. 横坐标 (x)

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

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

7. 纵坐标 (y)

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

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

8. 宽度 (w)

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

说明： 设置滑块的宽度为 150。

9. 高度 (h)

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

说明： 设置滑块的高度为 50。

10. 可见性 (vis)

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

说明： 设置滑块可见。

11. 执行事件 (do)

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

说明： 设置滑块触发的事件为数值变化事件。