LazyBoard是什么

LazyBoard方案

LazyBoard致力于提供简单好用的数据看板方案。

它提供一个可以接受(通过API)并展示数据的数据中台(下图中绿色部分),配合数据采集工具(下图中蓝色部分)和终端/设备(下图中红色部分)可以持久化显示实时数据。

目前整个方案包括以下部分:

LazyBoardServer截图

LazyBoardExt截图

LazyBoardServer

LazyBoardServer是整个方案的核心,它的主要特点包括:

  • 支持自架,可以搭建在局域网中安全显示企业内部数据
  • 基于网页实现,理论上所有能显示网页的设备都可用
  • 支持将看板内容输出为JPG图片,方便不能显示网页的设备使用
  • 支持多背景,除了看数据还可以当做相册
  • 自动更新数据,无需刷新网页
  • 支持自定义CSS,高阶用户可以完全控制看板的样式
  • 支持订阅MQTT通知,可以实时显示消息

搭建完成后即可通过API提交数据,并通过网页展示出来。其他项目均以Server为基础进行扩展。

多背景切换1 多背景切换2 自定义CSS RSS聚合和MQTT通知

安装

本地测试

下载并安装Docker桌面版 , 然后从下文「生成 docker-compose.yml」一节继续。

购买服务器

建议购买ubuntu18或20系统的云服务器,后续命令将以此系统为例。不知道怎么购买云服务器的同学请查看视频:

确认服务器是否安装 Docker 和 compose

以下命令如果运行失败,可去掉 sudo 再试

Docker

通过终端登录服务器,并运行

sudo docker

如果显示

Usage:  docker [OPTIONS] COMMAND

A self-sufficient runtime for containers
...

则表示已安装。

如果没有安装 Docker,则可以运行如下命令进行安装:

curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh

Docker-compose

运行

sudo docker-compose

如果显示

Define and run multi-container applications with Docker.

Usage:
  docker-compose [-f <arg>...] [--profile <name>...] [options] [--] [COMMAND] [ARGS...]
  docker-compose -h|--help
...

则表示 docker-compose 已安装。

反之,可以运行以下命令安装:

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose

生成 docker-compose.yml

为了方便大家,我们制作了一个生成docker-compose.yml的网页

在这个页面上,填写好你希望的网站名称、管理员电子邮箱和管理员密码。然后拉到页面下方,点击「短安装命令」生成命令。

再点击点此复制,将命令复制剪切板,粘贴到终端中运行。

等待五到十分钟,应该就安装完成了。

运行以下命令可以看到容器是否正常启动:

sudo docker ps
CONTAINER ID   IMAGE                                              COMMAND                  CREATED          STATUS                    PORTS                                   NAMES
46e3e46a4de4   ccr.ccs.tencentyun.com/ftqq/lazyboardsolo:latest   "/entrypoint supervi…"   8 seconds ago    Up 7 seconds              443/tcp, 0.0.0.0:80->80/tcp, 9000/tcp   lb_app_1
ecb85cc71518   mariadb:10.5.8-focal                               "docker-entrypoint.s…"   39 seconds ago   Up 37 seconds (healthy)   0.0.0.0:3306->3306/tcp                  lb_mariadb_1

如果发现有 *_app_1*_mariadb_1 两个容器,那么就已经启动了(但内部服务不一定完成)。

访问服务

当容器启动成功后,就可以通过浏览器访问 LazyBoardServer 了。如果没有调整端口,服务的地址为 http://

如果需要使用https,可以在之前架设代理,或者使用类似一键HTTPS等服务。

停止服务

如果要停止容器,可运行以下命令:

sudo docker-compose down

显示以下内容则表示停止成功。

Stopping lb_app_1     ... done
Stopping lb_mariadb_1 ... done
Removing lb_app_1     ... done
Removing lb_mariadb_1 ... done
Removing network lb_default

更新LazyBoardServer

LazyBoardServer 的更新非常简单,只需要拉取最新的镜像即可。

首先停止当前的服务:

sudo docker-compose down

然后拉取最新的镜像:

sudo docker pull ccr.ccs.tencentyun.com/ftqq/lazyboardsolo:latest

再次启动:

sudo docker-compose up

UI使用

安装并成功启动后,访问服务器的80端口,即可看到管理UI的界面。

登入

登入界面的管理邮箱和密码由docker-compose.yml中指定,在此可按之前的设置直接输入。默认值为:

  • 邮箱:admin@admin.com
  • 密码:******(六个星号)

本地测试(通过127.0.0.1访问)时,授权码可以为空。如果需要部署在服务器,那么请购买授权码

创建看板

点击看板列表右侧的新看板按钮,创建一个新看板。

设置看板名称

看板创建完成后,页面会自动转向到编辑界面。修改看板名称后点击保存,即可保存修改。

设置看板尺寸

看板网页会随着设备尺寸自行调整,但为了能实时看到特定尺寸设备上的效果,可以修改此处的数值。同时,使用看板内容生成JPG图片时,图片尺寸也会以此数值为准。

设置看板背景

点击左上角看板设置部分的背景标签页,可以设置看板背景。这里直接输入URL,每行一张,会定时切换。

设置数据源

现在我们的看板上并没有数据,这需要通过左下角的数据源来设置。这里我们来添加一个每日新增用户的数据。

填入以下数据:

  • 名称:每日新增用户
  • 当前值:1

点击新增按钮,可以看到看板上出现了新的数据。

修改数据源

下边我们修改这个数据,给这个数据添加一个后缀:人。

点击看板上「每日新增用户」的文字,左下角的数据源设置会进入编辑状态;点击看板上其他地方,左下角的数据源设置会再次返回新增状态。

后缀一栏填上,保存后可以看到显示效果的更新。

通过API更新数据

除了通过界面修改数据源,我们更多的是通过API来修改数据。

点击图中复制按钮,可以得到一个形如下方的API URL:

http://127.0.0.1:/index.php/data/set?key=LBSK...&id=1&value=<new_value>

<new_value>部分换成要更新的数据,在浏览器地址栏输入后回车,可以查看更新结果:

{
    "source": {
    "id": 1,
    "board_id": 2,
    "name": "每日新增用户",
    "value": "2",
    "prefix": null,
    "postfix": "人",
    "channel_id": 1,
    "channel_data": null,
    "order": 0,
    "column_count": 1,
    "is_active": 1,
    "enable_history": 0,
    "created_at": "2022-03-23T10:44:19.000000Z",
    "updated_at": "2022-03-23T10:51:05.000000Z"
    },
    "updated": 1,
    "webhook_response": ""
}

除了输入URL,我们还可以:

  • 在服务器、路由器脚本中用过wget或者curl等命令更新命令
  • 在浏览器插件中请求URL设置数据

详细内容我们会在数据采集一节中介绍。

修改样式

现在看板上「每日新增用户」处因为字体过大,出现了换行,下边我们就通过修改CSS样式表来调整。

点击左上角看板菜单中的CSS标签页,将编辑框拉到下方,将 .board-screen .board-item .title 的样式中 font-size 改为 20px :

.board-screen .board-item .title {
  font-size: 20px;
}

LazyBoardServer 支持实时预览,可以看到现在折行问题已经解决了。

记得将CSS编辑框下拉到底,点击保存按钮保存。

输出为图片

很多自制设备上不能运行主流的浏览器,因此网页方式可能无法展示或者丢失样式,为此,我们添加了输出为图片功能。

点击左上角看板菜单中的I/O标签页,将「生成JPG图片」设置为「启用」并「保存」。这样当数据更新时,LazyBoardServer 会自动生成图片。

需要注意的是,这个图片生成是通过headless浏览器来实现的,因此在字体和背景图上需要注意:

  1. 只能使用容器环境中的预置的字体,所以和预览界面会有些许不同
  2. headless浏览器载入背景如果太慢,生成的图片可能没有背景图片

容器包含的字体包括:

  • DejaVu LGC Sans Mono
  • DejaVu LGC Serif
  • Century Schoolbook L
  • DejaVu Math TeX Gyre
  • Source Han Sans CN,思源黑体 CN,Source Han Sans CN Regular,思源黑体 CN Regular
  • Cubic 11,俐方體11號,俐方體11号,俐方体11号
  • Droid Sans Mono
  • DejaVu Sans Mono
  • DejaVu LGC Sans,DejaVu LGC Sans Condensed
  • Open Sans,Open Sans Semibold
  • URW Palladio L
  • URW Gothic L
  • Dingbats
  • URW Chancery L
  • FreeSerif
  • DejaVu Sans,DejaVu Sans Light
  • DejaVu Sans
  • DejaVu Serif,DejaVu Serif Condensed
  • DejaVu Sans,DejaVu Sans Condensed
  • Liberation Sans Narrow
  • Open Sans
  • Liberation Mono
  • WenQuanYi Zen Hei Mono,文泉驛等寬正黑,文泉驿等宽正黑
  • Nimbus Sans L
  • Droid Serif
  • Standard Symbols L
  • Nimbus Mono L
  • DejaVu LGC Sans
  • Liberation Serif
  • DejaVu LGC Sans,DejaVu LGC Sans Light
  • Nimbus Roman No9 L
  • WenQuanYi Zen Hei Sharp,文泉驛點陣正黑,文泉驿点阵正黑
  • Liberation Sans
  • WenQuanYi Zen Hei,文泉驛正黑,文泉驿正黑
  • FreeSans
  • Georgia
  • DejaVu LGC Serif,DejaVu LGC Serif Condensed
  • Open Sans,Open Sans Light
  • DejaVu Serif
  • Open Sans,Open Sans Extrabold
  • FreeMono
  • URW Bookman L
  • Droid Sans

Webhook

当看板数据更新时,你可以通过 webhook 将变动发送出去。点击左上角看板菜单中的I/O标签页,将「Webhook」设置为「启用」,可以看到详细设置:

  • Webhook url: 要发送数据的URL
  • Webhook传值变量名: 变更数据将通过此变量发送

下边以Server酱为例,讲解将看板数据变更通知发送到微信。

登录 sct.ftqq.com ,点击 Sendkey 菜单,可以获取 Sendkey

Server酱通过两个参数发送内容,其中 title 为标题,desp 为内容,因此,我们将使用以下参数:

  • Webhook url: https://sctapi.ftqq.com/****************.send?title=LazyBoard数据更新
  • Webhook传值变量名: desp

填入并保存后,再次通过API此看板的数据源更新,即可在微信收到通知。

注意,只有数据有变更时才会调用webhook,相同的数据不会调用。

设置好 webhook 后,可以在数据源设置 API 返回值中查看到请求返回值。

{
    "source": {
    "id": 1,
    "board_id": 2,
    "name": "每日新增用户",
    "value": "3",
    "prefix": null,
    "postfix": "人",
    "channel_id": 1,
    "channel_data": null,
    "order": 0,
    "column_count": 1,
    "is_active": 1,
    "enable_history": 0,
    "created_at": "2022-03-23T10:44:19.000000Z",
    "updated_at": "2022-03-23T12:50:13.000000Z"
    },
    "updated": 1,
    "webhook_response": "{\"code\":0,\"message\":\"\",\"data\":{\"pushid\":\"51356963\",\"readkey\":\"SCTgAwDCKZhXa4U\",\"error\":\"SUCCESS\",\"errno\":0}}"
}

订阅MQTT通知

除了在看板显示数据源中的数据,看板还可以显示实时通知。这里我们使用的是MQTT协议,因此我们需要架设一个MQTT服务。

通过终端进入安置好Docker的服务器(可以和LazyBoardServer装到一起),运行以下命令,启动一个MQTT服务:

docker run -e API_KEY=9LKo3 -e MQTT_PORT=1883 -e MQTT_USER=easy -e MQTT_PASSWORD=y0urp@ss -e MQTT_BASE_TOPIC=default -p 1883:1883 -p 81:80 -p 9001:9001 -d ccr.ccs.tencentyun.com/ftqq/pushdeeresp 

你可以修改其中的 MQTT_USER 和 MQTT_PASSWORD 设置想要的用户名、密码

在左上角看板菜单中的I/O标签页,将订阅MQTT通知设置为启用,填入以下数据:

  • IP: MQTT服务器的IP和端口
  • Topic前缀: 完整的topic为 前缀+看板的GETKEY
  • Username: 上边 MQTT_USER 的值,可以为空
  • Password: 上边 MQTT_PASSWORD 的值,可以为空

保存后刷新页面,看板将自动连接到MQTT服务上。下边我们来尝试发送消息给它。

首先我们下载一个客户端——MQTTX

然后创建一个新的连接,填入上边设置好的数据:

成功连接服务器后,就可以发送消息了。消息格式为纯文本,Topic为 Topic前缀 + GETKEY

点击发送后,看板上即可看到内容。

数据采集

在看板编辑界面,点击右侧看板(预览模式)中的数据源,进入编辑状态。

点击图中复制按钮,可以得到一个形如下方的API URL(记为URL A):

http://127.0.0.1:/index.php/data/set?key=LBSK...&id=1&value=<new_value>

通过浏览器插件LazyBoardExt采集数据

请参考LazyBoardExt仓库首页的使用文档

插件中添加数据源时的数据回填URL就是上文中的URL A

通过服务器端脚本采集数据

另一个常用的场景就是通过定时任务(crontab)执行数据采集脚本,并在脚本中通过curl等方式发起http请求。

数据显示

通过浏览器

在看板编辑页面预览看板下方可以看到看板访问地址,点击URL后方的按钮,可以打开、复制和生成二维码。

将该URL输入浏览器地址栏,就可以得到一个纯净的看板网页。

在URL后可以添加参数来设置数据刷新速度和背景切换速度:

参数名含义默认值最小值URL实例
dttime数据刷新速度601http://127.0.0.1:3000/view?key=...&dttime=60
bgtime背景切换速度301http://127.0.0.1:3000/view?key=...&bgtime=30

最推荐的方式是将这个浏览器窗口(推荐使用Edge)放置到扩展显示屏上,并全屏显示。配合屏幕切换快捷键(Mac上是meta+方向键)可以快速在看板和日常桌面间切换。

如果觉得使用大显示器比较浪费,可以在淘宝购买这种8寸左右的、支持HDMI接口的副屏(约300元左右),既不占地方又保护隐私。

通过 MenuBarX

除了使用完整的桌面,你也可以通过托盘工具来显示LazyBoard。如果你使用Mac系统,那可以试试 MenuBarX。

在商店中搜索即可安装。

启动后顶栏菜单将多出一个图标,点击后会弹出窗口。

在最下方的地址栏输入看板URL即可。你可以通过右键菜单中的窗口选项进一步设置窗口大小、是否浮动等功能。

通过手机或平板

iOS

在iOS上,你可以通过Safari将看板添加到桌面,然后全屏打开。

Android

在 Android 设备上,Chrome浏览器直接就可以全屏(打开页面后向上轻微滚动,就能隐藏掉地址栏)。如果你的手机装不了Chrome浏览器,那么可以试试X浏览器。

APP

在部分Android设备上,除了不能全屏,还可能会遇到长时间无操作后的屏幕锁定、亮度降低问题,一般可以通过修改系统设置搞定。如果这样还不行,那么可以使用我们开源的LazyBoardAPP来显示网页。

下载:

安装后按音量-,呼出地址栏,可输入地址或扫码二维码。

购买授权码