pATAq 发表于 2021-12-5 03:48:17

【2022-3-23更新v1.17.2+】跟着思兼学Klipper(05) Fluidd 中文本地化

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

## 前言
原创文章，转载引用请务必注明链接，水平有限，如有疏漏，欢迎交流指正。
请访问 [**原文链接**](https://mc.dfrobot.com.cn/thread-311596-1-1.html?fromuid=725344) 以获得文章更新。
目前的 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 版本，推荐升级。具体内容可以查看 [更新日志](https://github.com/fluidd-core/fluidd/releases/tag/v1.17.0)。
* 除了一些功能性的更新外，个人认为比较重要的更新是：
    1. 摄像头支持 `HTTP Page`，此模式下启用 GPU 硬件加速，提高流畅度，降低系统资源占用。
    2. 摄像头支持 `idle camera FPS`，众所周知啊，MJPEG-Streamer 还是比较占用系统资源的，此特性可以在摄像头窗口失去焦点时降低帧率，减少系统占用。
    3. 修复 `websocket cache issue with arrays`，应该是解决上传大 Gcode 文件（上百兆）以及修改配置文件不稳定的问题，有待验证。
* 此版本中文本地化页面翻译由我（思兼）和 `Creeper_MZ` 一起完成，在此表示感谢，同时由于提交官方后 Fluidd 又合并了新特性，所以有些词条没有翻译。也希望大家对已翻译内容提出建议。
* 前段时间 Fluidd 开发停滞，最近又开始恢复更新，虽然相比于 Mainsail 还有些进度需要追赶，但是 Fluidd 界面确实符合个人审美，希望以后越来越好。
* 如果可以畅通访问外网的话，直接下载 (https://github.com/fluidd-core/fluidd/releases/download/v1.17.0/fluidd.zip) 解压即可，否则可以使用一键替换脚本，保留威力加强版。
* `curl -fsSL http://klipper.7130404.xyz:8001/install.sh | bash -s -- 1`

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20220226150507.png)

**【2021年12月22日更新】**

* 基于 (https://hub.fastgit.org/kluoyun/fluidd/) 的分支编译，支持内置网页终端（(https://hub.fastgit.org/tsl0922/ttyd/)），如需远程访问，请做好安全措施。
* 支持简单的文件上传/下载（(https://ohse.de/uwe/software/lrzsz.html)），**默认不启用**

* **威力加强版：**由于 Fluidd 官方开发太慢，也为了配合网页终端名称显示，将部分 i18n 多语言支持文件外的词条也进行了翻译

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/202112230004616.png)

本文介绍以下知识：

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

## 精简版：

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

```shell
# 切换 不带终端的普通 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 系统服务及安装必要组件

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20211205151226.png)

## 完整版：

## 1、克隆源码进行修改

首先我们克隆 (https://hub.fastgit.org/fluidd-core/fluidd) 源码的 `develop` 分支，并使用 VSCode 配合 **i18n Ally** 插件进行修改，该插件会自动识别多国语言文件。多国语言源文件位于：`src\locales\cn.yaml`。

```shell
git clone https://github.com/fluidd-core/fluidd/ -b develop
```
!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20211205025138.png)

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

## 2、实时预览修改结果

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

### 2.1 基本设置

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

```shell
mv .env.development.local.example env.development.local
echo 'VUE_APP_HOSTNAME=192.168.0.15' > env.development.local
```

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

```yaml
# 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

```shell
# 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以上进行编译
* 由于需要安装 (https://www.cypress.io/) ，仅支持 x86 处理器，不支持 ARM 处理器主机如树莓派上进行编译

#### 2.2.2 Windows

参考 [使用nvm管理node.js版本以及更换npm淘宝镜像源 ](https://www.cnblogs.com/-pdd/p/14688381.html)。手动访问下载地址：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 启动预览服务

```shell
npm run serve # 开启当前测试服务
```

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20211205024920.png)

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

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20211205031919.png)

### 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 语言不同，这也是为什么源码和发行版不一样的原因。进入到源码所在文件夹，执行编译命令：

```shell
./node_modules/.bin/vue-cli-service build
mv dist/ fluidd/
zip -q -r fluidd.zip fluidd/*
mv fluidd/ dist/
```

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20211205032745.png)

如图所示即为编译成功。

```shell
# 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
   
    Description=TTYD
    After=syslog.target
    After=network.target

   
    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'

   
    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
```

**参考文档：**

* (https://blog.csdn.net/Young4Dream/article/details/97245065)
* (https://stackoverflow.com/questions/4642915/passing-parameters-to-bash-when-executing-a-script-fetched-by-curl/4642975)
* (https://www.jianshu.com/p/d1b4f554e6f1)

## 4、新版本新功能介绍

就像前文 [跟着思兼学习Klipper(04) 解决新版Klipper不支持中文gcode文件](https://mc.dfrobot.com.cn/thread-311545-1-1.html?fromuid=725344) 介绍的那样，我们可以通过查看 `commit` 和 `PR` 的方法了解新功能。这次最主要的是引入了一个新的摄像头选项 HTTP 页面（HTTP Page），具体参考 (https://github.com/fluidd-core/fluidd/pull/425)

简单来说：

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

Fluidd 文档 [也说过](https://docs.fluidd.xyz/faq#my-camera-is-delayed-or-slow) 有时候摄像头显示拖滞、慢的问题，主要靠换接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.

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20211205150127.png)

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

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20211205150202.png)

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

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

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

```shell
# 克隆 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

Description=TTYD
After=syslog.target
After=network.target


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'


WantedBy=multi-user.target
_EOF_
sudo mv /tmp/ttyd.service /etc/systemd/system/

# 启动 ttyd 服务并设置开机自启动
sudo systemctl start ttyd && sudo systemctl enable ttyd
```

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

```shell
/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
```

**参考与备注：**

* [阮一峰-Tmux 使用教程](https://www.ruanyifeng.com/blog/2019/10/tmux.html)

* [金步国-systemd.service 中文手册](http://www.jinbuguo.com/systemd/systemd.service.html) | [命令行](http://www.jinbuguo.com/systemd/systemd.service.html#%E5%91%BD%E4%BB%A4%E8%A1%8C) | (http://www.jinbuguo.com/systemd/systemd.service.html#ExecStart=)

* (https://github.com/tsl0922/ttyd/wiki/Systemd-service) | ttyd systemd.service官方示例

此方法会导致网路掉线后，原本终端内执行的服务终止；且不同设备访问的终端是独立的

* (https://github.com/tsl0922/ttyd/issues/840) | 网友 (https://github.com/TaChao) 的 service 示例

参考其使用 tmux 将会话与窗口的"解绑"，但是他的配置我测试失败，进行重新优化与修正

* (https://www.cnblogs.com/sparkdev/p/10287164.html)

* (https://blog.csdn.net/networken/article/details/80564824)

* (https://cloud.tencent.com/developer/article/1721753)

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

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

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

!(https://cdn.jsdelivr.net/gh/sjqlwy/blog_imgs@default/images/20211223140802.png)


> - 我们的默认方案启动了 tmux 之后，无法使用 rz/sz 命令，这是由于 tmux 不支持 Zmodem 协议，如果想要使用 rz/sz 的话只能先退出 tmux
> - rz/sz 不支持超过4G的文件，上传下载4G及以上大小的文件只能由 FTP 或者 WinScp 等工具来解决了 —— source: (https://www.cnblogs.com/wanng/p/lrzsz-tools.html)
> - 按住Ctrl键, 再按五次x键 (强行终断传输) 可以快速退出 tmux/screen rz/sz 文件卡死 —— source: (https://blog.csdn.net/qq_34104669/article/details/105231853)
>
> 笔者注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、提交官方

参考：(http://www.worldhello.net/gotgithub/04-work-with-others/010-fork-and-pull.html)。我们目前已经提交到官方等待审核，预计下个版本就能和大家见面了。

## 预告

下次一起讲讲 Klipper 使用摄像头的问题吧：

* 树莓派、网络、USB 摄像头的使用
* 如何查找设备以及修改参数
* 为何没有 `webcam.txt` 文件或者内容为空
* 如何设置延时摄影以及自动生成视频，并创建文件夹方便下载
* 如何使用摄像头结合 AI 自动识别打印失败并通知（Optional）
* 如何用旧 Andorid 手机充当 IPCAM（带打光）
* 多摄像头设置
* 多实例设置（一台上位机带多台打印机）





y5000 发表于 2022-1-8 19:20:10

用精简版安装后 fluidd版本提示1.7.0 但是界面没有任何变化，是什么问题啊。luidd v1.7.0 -> v1.16.2另：期待您讲解摄像头的问题

y5000 发表于 2022-1-8 19:23:03

版本已经是1.7.0了
界面没有变化

也没有网页终端


y5000 发表于 2022-1-8 20:24:39

找到原因了，是网页缓存问题。现在能看见ttyd窗口了，但是现在提示{"AuthToken":""}
1{"columns":72,"rows":19}
1tmux a -t ttyd (klipper-n1)
2{ }
0no sessions




pATAq 发表于 2022-1-9 18:43:20

y5000 发表于 2022-1-8 20:24
找到原因了，是网页缓存问题。现在能看见ttyd窗口了，但是现在提示{"AuthToken":""}
1{"columns":72,"rows" ...

今天太忙了，晚点帮你看。你可以手动执行看tmux和ttyd有没有正确安装

y5000 发表于 2022-1-9 20:45:25





已经正确安装了。

pATAq 发表于 2022-1-10 10:39:02

y5000 发表于 2022-1-9 20:45
已经正确安装了。

你为什么是root账户？可以加我QQ：471463727，我帮你远程看看

y5000 发表于 2022-1-10 20:33:51

用非root账户也是一样，可以正常运行。但是网页不正常。

y5000 发表于 2022-1-11 20:47:00

谢谢版主忙里抽闲弄到0点多终于搞定

505329191 发表于 2022-3-13 23:41:00

pATAq 发表于 2021-12-5 03:48
【更新威力加强版】Fluidd 界面中文本地化补全及优化，增加网页终端

# 前言


版主你好，麻烦问问我的fluidd安装以后插上usb摄像头没有图像，点最大打不开页面，webcam.txt文件是空白的，这个问题要怎么弄啊？百度也没有答案。谢谢！

hhhhhh1y 发表于 2022-4-20 01:08:07

思兼老师，请问一下大概啥时候出摄像头教程呀，就等着这个了
页: [1]
查看完整版本: 【2022-3-23更新v1.17.2+】跟着思兼学Klipper(05) Fluidd 中文本地化