【更新威力加强版】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://<your local ip>:<local 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：使用 nvm
wget -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/distributions
curl -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/bash
echo -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.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 && 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/default
sudo nano /etc/systemd/system/ttyd.service
sudo systemctl daemon-reload
sudo systemctl restart ttyd
sudo systemctl status ttyd
tmux ls
sudo netstat -lnp
参考与备注：
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_Adjust |
Z轴倾斜调整 |
| Screws_Tilt_Calculate |
辅助调平螺丝 |
7、提交官方
参考：Fork + Pull模式。我们目前已经提交到官方等待审核，预计下个版本就能和大家见面了。
预告
下次一起讲讲 Klipper 使用摄像头的问题吧：
- 树莓派、网络、USB 摄像头的使用
- 如何查找设备以及修改参数
- 为何没有
webcam.txt 文件或者内容为空
- 如何设置延时摄影以及自动生成视频，并创建文件夹方便下载
- 如何使用摄像头结合 AI 自动识别打印失败并通知（Optional）
- 如何用旧 Andorid 手机充当 IPCAM（带打光）
- 多摄像头设置
- 多实例设置（一台上位机带多台打印机）
转播
淘帖
支持
踩
置顶卡
变色卡
千斤顶
萌萌哒新人
活跃会员
宣传大使
版主限定
牛X认证
老版主限定
创作达人
小蘑菇
编辑选择奖
ARD DAY
编辑选择奖
摸鱼团员
编辑选择奖
志“童”道合
编辑选择奖
