dynamic-ui

使用 HTML 模板和 wkhtmltoimage 将表格、图表、统计数据、卡片和仪表板渲染为图像。

# Dynamic UI Skill

Render dynamic visual content (tables, charts, stats, cards, dashboards) as images using HTML templates and wkhtmltoimage.

## Triggers
- "render", "visualize", "chart", "dashboard", "dynamic-ui"

## Usage

```bash
# Basic usage
./scripts/render.sh <template> --data '<json>'

# With options
./scripts/render.sh table --data '{"columns":["A","B"],"rows":[["1","2"]]}' --style dark --output out.png

# From stdin
echo '{"labels":["Q1","Q2"],"values":[100,200]}' | ./scripts/render.sh chart-bar --style modern
```

## Templates

| Template | Description | Input Schema |
|----------|-------------|--------------|
| `table` | Data tables | `{"columns": [...], "rows": [[...], ...]}` |
| `chart-bar` | Bar charts | `{"labels": [...], "values": [...], "title": "..."}` |
| `stats` | KPI cards | `{"stats": [{"label": "...", "value": "...", "change": "..."}]}` |
| `card` | Info card | `{"title": "...", "subtitle": "...", "body": "...", "status": "green\|yellow\|red"}` |
| `dashboard` | Composite | `{"title": "...", "widgets": [{"type": "stat\|table\|chart", ...}]}` |

## Options

| Option | Description | Default |
|--------|-------------|---------|
| `--data`, `--input` | JSON data (or use stdin) | - |
| `--style` | Theme: modern, dark, minimal | modern |
| `--output`, `-o` | Output path | stdout (base64) |
| `--width` | Image width in pixels | 800 |

## Themes

- **modern** — Purple/blue gradients, shadows, rounded corners
- **dark** — Dark background, light text, subtle borders
- **minimal** — Clean white, thin borders

## Examples

```bash
# Render a table
./scripts/render.sh table --data '{"columns":["Name","Score"],"rows":[["Alice","95"],["Bob","87"]]}' -o table.png

# Render a bar chart
./scripts/render.sh chart-bar --data '{"labels":["Jan","Feb","Mar"],"values":[120,150,180],"title":"Monthly Sales"}' --style dark -o chart.png

# Render stats
./scripts/render.sh stats --data '{"stats":[{"label":"Users","value":"12.5K","change":"+12%"},{"label":"Revenue","value":"$45K","change":"+8%"}]}' -o stats.png
```

## 💡 Sending Images to Users

After rendering an image, you'll typically want to send it to the user. Here's the recommended workflow:

### Recommended Workflow:
```bash
# 1. Render to ~/.openclaw/media/ (recommended path)
./scripts/render.sh table --data '...' -o ~/.openclaw/media/my-table.png

# 2. Send inline via message tool
message(action=send, filePath=/home/ubuntu/.openclaw/media/my-table.png, caption="Caption", channel=telegram, to=<user_id>)
```

### Tips:
- **Save to `~/.openclaw/media/`** — this path works reliably for inline sending
- **Use descriptive captions** — helps users understand the visual
- **Consider the context** — sometimes saving to disk is fine if the user requested it

### Example (complete flow):
```bash
# Render
echo '{"title":"My Data","columns":["A","B"],"rows":[["1","2"]]}' | \
  ./scripts/render.sh table -o ~/.openclaw/media/data.png

# Send
message(action=send, filePath=/home/ubuntu/.openclaw/media/data.png, caption="Here's your data", channel=telegram, to=USER_ID)
```

## Dependencies
- `/usr/bin/wkhtmltoimage` — HTML to image conversion
- `jq` — JSON parsing

---

## 中文说明

# Dynamic UI Skill

使用 HTML 模板和 wkhtmltoimage 将动态可视化内容（表格、图表、统计数据、卡片、仪表板）渲染为图像。

## 触发词
- "render"、"visualize"、"chart"、"dashboard"、"dynamic-ui"

## 用法

```bash
# Basic usage
./scripts/render.sh <template> --data '<json>'

# With options
./scripts/render.sh table --data '{"columns":["A","B"],"rows":[["1","2"]]}' --style dark --output out.png

# From stdin
echo '{"labels":["Q1","Q2"],"values":[100,200]}' | ./scripts/render.sh chart-bar --style modern
```

## 模板

| 模板 | 说明 | 输入结构 |
|----------|-------------|--------------|
| `table` | 数据表格 | `{"columns": [...], "rows": [[...], ...]}` |
| `chart-bar` | 柱状图 | `{"labels": [...], "values": [...], "title": "..."}` |
| `stats` | KPI 卡片 | `{"stats": [{"label": "...", "value": "...", "change": "..."}]}` |
| `card` | 信息卡片 | `{"title": "...", "subtitle": "...", "body": "...", "status": "green\|yellow\|red"}` |
| `dashboard` | 组合视图 | `{"title": "...", "widgets": [{"type": "stat\|table\|chart", ...}]}` |

## 选项

| 选项 | 说明 | 默认值 |
|--------|-------------|---------|
| `--data`、`--input` | JSON 数据（或使用 stdin） | - |
| `--style` | 主题：modern、dark、minimal | modern |
| `--output`、`-o` | 输出路径 | stdout (base64) |
| `--width` | 图像宽度（像素） | 800 |

## 主题

- **modern** — 紫/蓝渐变、阴影、圆角
- **dark** — 深色背景、浅色文字、淡边框
- **minimal** — 纯净白底、细边框

## 示例

```bash
# Render a table
./scripts/render.sh table --data '{"columns":["Name","Score"],"rows":[["Alice","95"],["Bob","87"]]}' -o table.png

# Render a bar chart
./scripts/render.sh chart-bar --data '{"labels":["Jan","Feb","Mar"],"values":[120,150,180],"title":"Monthly Sales"}' --style dark -o chart.png

# Render stats
./scripts/render.sh stats --data '{"stats":[{"label":"Users","value":"12.5K","change":"+12%"},{"label":"Revenue","value":"$45K","change":"+8%"}]}' -o stats.png
```

## 💡 向用户发送图像

渲染图像后，你通常需要将其发送给用户。以下是推荐的工作流程：

### 推荐工作流程：
```bash
# 1. Render to ~/.openclaw/media/ (recommended path)
./scripts/render.sh table --data '...' -o ~/.openclaw/media/my-table.png

# 2. Send inline via message tool
message(action=send, filePath=/home/ubuntu/.openclaw/media/my-table.png, caption="Caption", channel=telegram, to=<user_id>)
```

### 提示：
- **保存到 `~/.openclaw/media/`** — 此路径可可靠地用于内联发送
- **使用描述性的标题** — 帮助用户理解图像内容
- **考虑上下文** — 如果用户明确要求，保存到磁盘也是可以的

### 示例（完整流程）：
```bash
# Render
echo '{"title":"My Data","columns":["A","B"],"rows":[["1","2"]]}' | \
  ./scripts/render.sh table -o ~/.openclaw/media/data.png

# Send
message(action=send, filePath=/home/ubuntu/.openclaw/media/data.png, caption="Here's your data", channel=telegram, to=USER_ID)
```

## 依赖
- `/usr/bin/wkhtmltoimage` — HTML 转图像
- `jq` — JSON 解析