跟着思兼学Klipper(05) Fluidd 中文本地化

zhujue 2024-01-31 10:43:00 50 抢沙发

默认

摘要： ...

[youbanshan]

【更新威力加强版】Fluidd 界面中文本地化补全及优化，增加网页终端

前言

原创文章，转载引用请务必注明链接，水平有限，如有疏漏，欢迎交流指正。
请访问原文链接以获得文章更新。
目前的 Fluidd 发行版本为 1.16.2，既往已经有朋友做过中文本地化工作，但随着新版本的发布，部分中文界面有些翻译不完全或欠妥，我（思兼）和 Creeper_MZ 一起基于最新的 Fluidd 开发版本（显示为 1.7.0 ）做了本地化翻译补全与优化，现在编译并经过初步测试后发布出来，希望大家找出其中翻译不准或者有疑义的地方，并在大家的帮助下，向 Fluidd 官方提交 PR，这样下一版本就能看到我们努力的成果了。有任何建议请@我即可。【2022年3月23日】

基于官方最新版编译，补全了新的翻译内容，增加了新词条：关闭电机等，欢迎测试提供意见 * 修复三角洲机型的切片预览等
一键切换命令：curl -fsSL http://klipper.7130404.xyz:8001/install.sh | bash -s -- 2

【2022年2月26日更新】

官方发布了 v1.17.0 版本，推荐升级。具体内容可以查看更新日志。
除了一些功能性的更新外，个人认为比较重要的更新是：

摄像头支持 HTTP Page，此模式下启用 GPU 硬件加速，提高流畅度，降低系统资源占用。
摄像头支持 idle camera FPS，众所周知啊，MJPEG-Streamer 还是比较占用系统资源的，此特性可以在摄像头窗口失去焦点时降低帧率，减少系统占用。
修复 websocket cache issue with arrays，应该是解决上传大 Gcode 文件（上百兆）以及修改配置文件不稳定的问题，有待验证。

此版本中文本地化页面翻译由我（思兼）和 Creeper_MZ 一起完成，在此表示感谢，同时由于提交官方后 Fluidd 又合并了新特性，所以有些词条没有翻译。也希望大家对已翻译内容提出建议。

前段时间 Fluidd 开发停滞，最近又开始恢复更新，虽然相比于 Mainsail 还有些进度需要追赶，但是 Fluidd 界面确实符合个人审美，希望以后越来越好。

如果可以畅通访问外网的话，直接下载 Fluidd Release 解压即可，否则可以使用一键替换脚本，保留威力加强版。

curl -fsSL http://klipper.7130404.xyz:8001/install.sh | bash -s -- 1

【2021年12月22日更新】

基于 xiaok 的分支编译，支持内置网页终端（ttyd），如需远程访问，请做好安全措施。
支持简单的文件上传/下载（lrzsz），默认不启用
威力加强版：由于 Fluidd 官方开发太慢，也为了配合网页终端名称显示，将部分 i18n 多语言支持文件外的词条也进行了翻译

本文介绍以下知识：

node.js 的安装
vue.js 的编译
fluidd 的实时预览
最小远程访问
git 的 Fork + Pull 开发流程
Fluidd 新功能介绍
ttyd 以及 lrzsz 的使用

精简版：

执行一行命令就可以更换到 Fluidd 自编译开发版本，目前已经更新 v3 威力加强版（2021年12月22日）：

 复制代码 隐藏代码
# 切换 不带终端的普通 develop 版本curl -fsSL http://klipper.7130404.xyz:8001/install.sh | bash -s -- 1# 切换 附带终端的 develop 威力加强版本（感谢xiaok）curl -fsSL http://klipper.7130404.xyz:8001/install.sh | bash -s -- 3 pi# 默认用户名为 pi,请根据自己情况修改，如用户名为 fly，则如下所示# curl -fsSL http://klipper.7130404.xyz:8001/install.sh | bash -s -- 3 fly

过程中需要输入密码重启 nginx 系统服务及安装必要组件

完整版：

1、克隆源码进行修改

首先我们克隆 Fluidd 源码的 develop 分支，并使用 VSCode 配合 i18n Ally 插件进行修改，该插件会自动识别多国语言文件。多国语言源文件位于：src\locales\cn.yaml。

 复制代码 隐藏代码
git clone https://github.com/fluidd-core/fluidd/ -b develop

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18n)指让产品（出版物，软件，硬件等）无需做大的改变就能够适应不同的语言和地区的需要。对程序来说，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面。在全球化的时代，国际化尤为重要，因为产品的潜在用户可能来自世界的各个角落。通常与i18n相关的还有L10n（“本地化”的简称）。——source: baidu.com

2、实时预览修改结果

我们根据个人经验，翻译 -> 校对 -> 二翻 -> 二校。但是有些词条不知道在哪里出现，或者同一词条有不同意思，所以需要进行实际测试。一种方法是编译成发行版，另一种方式是实时预览。实时预览的方法在 MainSail 文档中有介绍（Fluidd 文档没提，但是基于 Mainsail，而且经过测试是可以的）。它可以监视文件变动实时预览，这样我们就可以在本地不用费时打包编译的情况下进行验证，大大加快了测试速度。

2.1 基本设置

将源代码文件夹中的 .env.development.local.example 重命名并添加编译主机的 IP 地址，假如其地址为 192.168.0.15：

 复制代码 隐藏代码
mv .env.development.local.example env.development.local
echo 'VUE_APP_HOSTNAME=192.168.0.15' > env.development.local

同时修改 运行 klipper + moonraker 服务的主机（可以与编译主机相同或不同）上的 moonraker.cfg 文件，添加 cors 域名：

 复制代码 隐藏代码
# cors_domains:    http:// local ip>: port>    http://192.168.0.15:8080    http://localhost:8080

其中端口号为 nodejs 自动设置。

2.2 安装 Nodejs

我们查看 Fluidd 源码可以看到 .node-version 为 14.17.1 。我根据情况不同，分别在 Linux 和 Windows 下安装配置了 NodeJS，后者需要添加环境变量，并且所在文件夹不能有中文字符或者空格。分述如下：

2.2.1 Linux

 复制代码 隐藏代码
# Method 1：使用 nvmwget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm install 14.17.1
node -v# Method 2：手动下载安装包# 参考 https://github.com/nodesource/distributionscurl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs# 安装node-red# bash <(curl -sL https://raw.fastgit.org/node-red/linux-installers/master/deb/update-nodejs-and-nodered)# 添加国内镜像源并切换到 fluidd 目录npm config set registry https://registry.npmjs.org
npm install  # 一般仅在安装或升级包时执行一次

注意：

npm install 会有aduit fix，不用管，时间比较长，建议使用国内镜像
建议内存4GB以上进行编译
由于需要安装 Cypress ，仅支持 x86 处理器，不支持 ARM 处理器主机如树莓派上进行编译

2.2.2 Windows

参考使用nvm管理node.js版本以及更换npm淘宝镜像源。手动访问下载地址：https://nodejs.org/dist/v14.17.1/

注意：

需要添加系统环境变量
编译时报错：./node_modules/.bin/vue-cli-service : 无法加载文件 D:\gitee\fluidd\node_modules.bin\vue-cli-service.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 bout_Execution_Policies。
解决方法：Windows PowerShell，并以管理员身份运行：set-ExecutionPolicy RemoteSigned回车，输入 A 回车，再输入 get-ExecutionPolicy回车，出现 RemoteSigned 即为成功

2.3 启动预览服务

 复制代码 隐藏代码
npm run serve # 开启当前测试服务

如下图所示代表服务启用成功。此时添加 moonraker 服务器地址，即可以进行实时测试。

2.4 番外：最简远程访问

这里我们发现，Fluidd 并不一定要在运行 Klipper+Moonraker 的主机上就可以控制打印机，这也就是说最简单的远程访问，只需要暴露主机的 7125（Moonraker API 默认端口）即可。只需要添加域名到 moonraker.cfg 的 cors_domains 区域即可。实际上，fluidd 和 mainsail 已经提供了类似的远程网页交互前端，并且预加入了 cors_domains，其地址为http://app.fluidd.xyz/ 和 http://my.mainsail.xyz/，快去试试吧！

3、编译发行版进行发布

Fluidd 使用 Vue.js 框架，需要编译才能使用，和 html 语言不同，这也是为什么源码和发行版不一样的原因。进入到源码所在文件夹，执行编译命令：

 复制代码 隐藏代码
./node_modules/.bin/vue-cli-service build
mv dist/ fluidd/
zip -q -r fluidd.zip fluidd/*
mv fluidd/ dist/

如图所示即为编译成功。

 复制代码 隐藏代码
# install.sh 安装#! /bin/bashecho -e "\033[36m#####################################################################\033[0m"
echo -e "# Fluidd 1.7.0 中文翻译补全, Modified by \033[31mCreeper_MZ\033[0m and \033[31m思兼\033[0m"
echo -e "# Compiled with \033[31mdev-xiaok\033[0m branch"
echo -e "\033[36m#####################################################################\033[0m"
echo -e "Backup previous Fluidd 1.16.2 and installing 1.7.0"

sleep 2
wget http://klipper.7130404.xyz:8001/fluiddv$1.zip
sudo systemctl stop nginx
cd ~
mv fluidd fluidd.old
unzip fluiddv$1.zip 

if [ $2 ]; then
    echo -e "\033[33m即将安装 Fluidd 威力加强版\033[0m"
    sleep 2
    # 下载 ttyd 安装
    sudo curl -L https://hub.fastgit.org/tsl0922/ttyd/releases/download/1.6.3/ttyd.armhf -o /usr/local/bin/ttyd
    sudo chmod a+rx /usr/local/bin/ttyd

    # 安装 lrzsz, 由于 tmux 不支持 Zmodem 协议，默认不启用
    # sudo apt install -y lrzsz

    # 创建 systemcd.service
    cat << _EOF_ > /tmp/ttyd.service
    [Unit]
    Description=TTYD
    After=syslog.target
    After=network.target

    [Service]
    ExecStart=/usr/local/bin/ttyd tmux a -t ttyd
    Type=simple
    Restart=always
    User=$2
    Group=$2
    ExecStartPre=-/usr/bin/bash -c '/usr/bin/tmux has-session -t ttyd >/dev/null 2>&1 || tmux new-session -d -s ttyd -c /home/$2/ && tmux set -g status off'

    [Install]
    WantedBy=multi-user.target
_EOF_

    sudo mv /tmp/ttyd.service /etc/systemd/system/ttyd.service

    # 启动 ttyd 服务并设置开机自启动
    sudo systemctl daemon-reload
    sudo systemctl start ttyd && sudo systemctl enable ttyd
fi

sudo systemctl start nginx

echo -e "\033[36m#####################################################################\033[0m"
echo -e "# 安装已完成，执行以下命令恢复旧版本 fluidd"
echo -e "\033[31mcd ~ && rm -rf fluidd && mv fluidd.old fluidd\033[0m"
echo -e "\033[36m#####################################################################\033[0m"## 删除并恢复sudo systemctl stop nginx
cd ~ && rm -rf fluidd && mv fluidd.old fluidd
sudo systemctl start nginx
sudo systemctl disable ttyd
sudo rm /etc/systemd/system/ttyd.service
sudo rm /usr/local/bin/ttyd
tmux kill-session -t ttyd

参考文档：

4、新版本新功能介绍

就像前文跟着思兼学习Klipper(04) 解决新版Klipper不支持中文gcode文件介绍的那样，我们可以通过查看 commit 和 PR 的方法了解新功能。这次最主要的是引入了一个新的摄像头选项 HTTP 页面（HTTP Page），具体参考 Add camera iframe option with height option

简单来说：

使用 h264硬件编码，占用带宽更小，支持硬件加速，可以明显感觉到高分辨率时拖滞感没有了
高度（Height）目前推荐设置为 480，但是还不支持自动缩放，可能会出现黑边，后续会解决。

Fluidd 文档也说过有时候摄像头显示拖滞、慢的问题，主要靠换接USB3.0、降低分辨率、FPS解决，但是实际上是由于没有开启硬件加速导致。

Here’s a couple of suggestions;
Some users have reported that their webcams were problematic when connected to the Pi4’s USB2.0 ports. Try plugging your webcam into the USB3.0 port.
Because mjpg streams static images, this can saturate your wifi. Try reducing the fps and resolution of your images. See the /boot/fluiddpi.txt folder on your Pi for more information on how to do this. You can also try connecting to wired ethernet.

【新版额外支持视频流类型】

【实际效果】流畅度非常高，体验良好，但是暂不支持自动缩放，可能会有黑边。

5、编译 xiaok 的内置终端分支

注意：如果默认的系统用户名是 pi，则根据情况修改服务中的 User=fly 为User=pi

 复制代码 隐藏代码
# 克隆 fluidd xiaok 分支git clone https://hub.fastgit.org/kluoyun/fluidd/ -b dev_xiaok# 替换 cn.yaml 并编译，此处省略，参考上文。# ...# 下载 ttyd 安装sudo curl -L https://hub.fastgit.org/tsl0922/ttyd/releases/download/1.6.3/ttyd.armhf -o /usr/local/bin/ttyd
sudo chmod a+rx /usr/local/bin/ttyd# 安装 lrzsz, 由于 tmux 不支持 Zmodem 协议，默认不启用# sudo apt install -y lrzsz# 创建 systemcd.servicecat << _EOF_ > /tmp/ttyd.service
[Unit]
Description=TTYD
After=syslog.target
After=network.target

[Service]
ExecStart=/usr/local/bin/ttyd tmux a -t ttyd
Type=simple
Restart=always
User=$2
Group=$2
ExecStartPre=-/usr/bin/bash -c '/usr/bin/tmux has-session -t ttyd >/dev/null 2>&1 || tmux new-session -d -s ttyd && tmux set -g status off'

[Install]
WantedBy=multi-user.target
_EOF_
sudo mv /tmp/ttyd.service /etc/systemd/system/# 启动 ttyd 服务并设置开机自启动sudo systemctl start ttyd && sudo systemctl enable ttyd

部分测试命令及过程记录：

 复制代码 隐藏代码
/usr/local/bin/ttyd tmux a -t ttyd
ps -ef | grep tmux
tmux kill-session ttyd
tmux set -g status off # 关闭状态栏，实时# && 左侧成功才执行# || 左侧失败则执行# 没有正确创建 tmux 则报错：no server running on /tmp/tmux-1000/defaultsudo nano /etc/systemd/system/ttyd.service
sudo systemctl daemon-reload
sudo systemctl restart ttyd
sudo systemctl status ttyd
tmux ls
sudo netstat -lnp

参考与备注：

阮一峰-Tmux 使用教程
金步国-systemd.service 中文手册 | 命令行 | ExecStart
Systemd service | ttyd systemd.service官方示例
此方法会导致网路掉线后，原本终端内执行的服务终止；且不同设备访问的终端是独立的
Make ttyd keep session alive | 网友 TaChao 的 service 示例
参考其使用 tmux 将会话与窗口的"解绑"，但是他的配置我测试失败，进行重新优化与修正
sudo 与输出重定向
Cat命令结合重定向功能实现文本内容写入
Linux中sudo、su和su -命令的区别小结

5.1 使用 lrzsz 进行简单的文件上传/下载【默认不启用】

ttyd 支持 lrzsz，可以进行网页内的文件上传下载：

 复制代码 隐藏代码
# 下载当前目录文件sz filename.txt# 上传文件到当前目录,输入以下命令会弹出对话框，可以选择文件上传rz

我们的默认方案启动了 tmux 之后，无法使用 rz/sz 命令，这是由于 tmux 不支持 Zmodem 协议，如果想要使用 rz/sz 的话只能先退出 tmux
rz/sz 不支持超过4G的文件，上传下载4G及以上大小的文件只能由 FTP 或者 WinScp 等工具来解决了 —— source: cnblogs.com
按住Ctrl键, 再按五次x键 (强行终断传输) 可以快速退出 tmux/screen rz/sz 文件卡死 —— source: csdn.net
笔者注1：
XShell 默认支持 Zmodem 协议，MobaXterm 默认不支持（毕竟有更方便的 sftp 传输文件）
如想使用网页 lrzsz，请以此命令后台启动或创建服务 ttyd bash
此外简单传输文件可以在 gcode_files 文件夹内创建目标文件夹的软链接，这在下载自动生成的打印过程延时录像中很有用。最终可以在主面板 任务列表 文件夹内找到。

6、威力加强版额外翻译的界面文本

原文翻译app.general.title.ttyd终端Part Fan模型风扇Other Files其他文件Add Category添加目录MOTORS OFF关闭电机BED_SCREWS_ADJUST手动调平螺丝QGL四点龙门调平Z_Tilt_AdjustZ轴倾斜调整Screws_Tilt_Calculate辅助调平螺丝