树莓派cm0信息屏:textual物理屏文字显示

Posted on by dsx2016

textual

Textual 是一个用 Python 编写的现代 Terminal UI（TUI）框架，可以让你像写前端 Web 一样构建漂亮、交互式、动画丰富的终端应用

因为树莓派cm0，内存相对有限，我需要运行内存小于30M，可以显示文字和图表的，比如温湿度仪表盘

这种情况无法运行chrome之类的浏览器，也无法再另外加一个桌面显示gui图形，所以选择在树莓派lite os server终端上展示仪表盘，需要支持触控，显示在物理屏幕上，作为信息屏或者中控屏等

像写前端一样写终端 UI

Textual 的布局方式借鉴 Web 技术：

  • 类似 CSS 的样式系统（改成了 .tcss）
  • 类似 DOM 树 的组件结构
  • 支持 Flexbox 布局

2. Rich 渲染加持

内置 Rich，支持：

  • 彩色文本、渐变、emoji
  • 表格、Markdown、语法高亮
  • 动画、进度条、log 面板

3. 支持鼠标、键盘事件

不仅能按键盘，还能用 鼠标点按钮、拖动区域。

4. 支持终端 + Web（Textual Web）双端

一个应用可以同时：

  • 在终端运行
  • 在浏览器运行（WebAssembly 渲染）

5. 支持“热重载开发”

像前端 Vite 那样的体验，界面会自动更新。

安装textual

在树莓派cm0 树莓派lite server,默认安装了python3.13.5
还需要继续安装2个依赖

一个是 python3-venv，用来创建python虚拟环境，隔离系统

一个是 python3-pip，用来下来python项目相关的依赖包

安装python3-venv

sudo apt install -y python3-pip

安装python3-pip

sudo apt install -y python3-pip

创建虚拟环境

python -m venv ~/textual-env

激活虚拟环境

source ~/textual-env/bin/activate

安装textual

pip install textual

编写tui代码，如hello_textual.py

from textual.app import App
from textual.widgets import Static

class HelloApp(App):
    CSS = """
    Screen {
        align: center middle;
        background: black;
    }
    Static {
        color: yellow;
        text-style: bold;

        content-align: center middle;
    }
    """

    def compose(self):
        yield Static("Hello World")

if __name__ == "__main__":
    HelloApp().run()

在虚拟环境中执行

python hello_textual.py

到目前为止

我们安装了python虚拟环境用于textual

安装了textual且启动了，并显示在远程ssh终端，一个黄色字体的hello world文字

但是还有2个问题

一个是hdmi接入的屏幕停留在登录页面，我们执行后屏幕内容没变，只有ssh远程终端有效

一个是需要开机自动就显示textual写的页面，而不是远程开启或者其他方式手动开启

设置自启动

linux有自带的systemd service自启动，但是本文使用pm2守护进程和自启动

pm2可以设置自启动，也可以运行shell脚本，但同时需要先安装nodejs环境

安装nodejs

cd /opt
sudo curl -fsSL https://nodejs.org/dist/v20.18.0/node-v20.18.0-linux-arm64.tar.xz | sudo tar -xJ
sudo ln -sf /opt/node-v20.18.0-linux-arm64/bin/node /usr/local/bin/node
sudo ln -sf /opt/node-v20.18.0-linux-arm64/bin/npm /usr/local/bin/npm

验证安装

node -v
npm -v

安装pm2

npm install pm2 -g

查看版本

pm2 –version

编写textual显示到物理屏的shell脚本，start_textual.sh

实际虚拟环境等，根据自己的内容修改，核心是/dev/tty1代表本文的物理屏幕，一般默认是，如有变化，记得修改

#!/bin/bash
# 绑定物理终端
exec >/dev/tty1 2>&1

clear
# 激活虚拟环境
source /home/dsx2016/textual-env/bin/activate

# 切换到脚本目录
cd /home/dsx2016/html

# 启动 Python 信息屏脚本
python3 hello_textual.py

pm2启动程序

pm2 start start_textual.sh —name start_textual.sh

pm2保存程序和设置自启动

pm2 save
pm2 startup

重启查看屏幕

sudo reboot

Tips

可以创建一个本地简单的温湿度等图表仪表盘，可以设置开关灯之类的触控

这样一些关键数据就不需要单独打开软件，来查看信息面板，而是文本和图表实时展示

比如电脑的配置副屏，显示cpu，gpu占用和温度，显示风扇转速，显示网络信号和速度等