### 面板控件（Panel）

Guition 面板控件用于在界面上创建一个矩形图形区域，具有多种可设置的属性，使您能够自定义面板的外观和行为，后期该控件将具有其他功能。

**可设置的属性值说明：**

1.  **横坐标 (x):**

    *   类型: 整数
    *   默认值: 0
    *   说明: 设置面板左上角的横坐标位置。
2.  **纵坐标 (y):**

    *   类型: 整数
    *   默认值: 0
    *   说明: 设置面板左上角的纵坐标位置。
3.  **宽度 (w):**

    *   类型: 整数
    *   默认值: 100
    *   说明: 设置面板的宽度。
4.  **高度 (h):**

    *   类型: 整数
    *   默认值: 100
    *   说明: 设置面板的高度。
5.  **背景颜色 (bgcolor):**

    *   类型: 字符串（十六进制颜色值）
    *   默认值: "#FFFFFF"（白色）
    *   说明: 设置面板的背景颜色。
6.  **背景透明度 (bgopa):**

    *   类型: 整数
    *   默认值: 100
    *   说明: 设置面板背景的透明度，取值范围为 0（完全透明）到 255（完全不透明）。
7.  **可见性 (vis):**

    *   类型: 布尔值 (0 或 1)
    *   默认值: 1
    *   说明: 设置面板是否可见，1 表示可见，0 表示隐藏。

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

```json
{
    "name": "Panel0",
    "prop": {
        "x": 200,
        "y": 100,
        "w": 150,
        "h": 50,
        "bgcolor":"#00FF00",
        "bgopa":60,
        "vis":1
    },
    "do": "click"
}

```

**说明:**

在上面的示例中，设置了一个面板控件的属性，包括位置、大小、背景颜色、背景透明度和可见性。当点击面板时，执行点击事件，其行为根据具体的应用场景而定。

#### 属性设置示例

\
设置面板控件左上角的横坐标位置为 200 像素。

```json
{
    "name": "Panel0",
    "prop": {
        "x": 200
    }
}

```

设置面板控件左上角的纵坐标位置为 100 像素。

```json
{
    "name": "Panel0",
    "prop": {
        "y": 100
    }
}

```

设置面板控件的宽度为 150 像素。

```json
{
    "name": "Panel0",
    "prop": {
        "w": 150
    }
}

```

设置面板控件的高度为 50 像素。

```json
{
    "name": "Panel0",
    "prop": {
        "h": 50
    }
}

```

设置面板控件的背景颜色为绿色。

```json
{
    "name": "Panel0",
    "prop": {
        "bgcolor": "#00FF00"
    }
}

```

设置面板控件的背景透明度为 60。

```json
{
    "name": "Panel0",
    "prop": {
        "bgopa": 60
    }
}

```

设置面板控件为可见状态。

```json
{
    "name": "Panel0",
    "prop": {
        "vis": 1
    }
}

```