2021-12-5 03:48:17 [显示全部楼层]
33144浏览
查看: 33144|回复: 10

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

[复制链接]

【更新威力加强版】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 版本,推荐升级。具体内容可以查看 更新日志
  • 除了一些功能性的更新外,个人认为比较重要的更新是:
    1. 摄像头支持 HTTP Page,此模式下启用 GPU 硬件加速,提高流畅度,降低系统资源占用。
    2. 摄像头支持 idle camera FPS,众所周知啊,MJPEG-Streamer 还是比较占用系统资源的,此特性可以在摄像头窗口失去焦点时降低帧率,减少系统占用。
    3. 修复 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

image-20220226150459103

【2021年12月22日更新】

  • 基于 xiaok 的分支编译,支持内置网页终端(ttyd),如需远程访问,请做好安全措施。

  • 支持简单的文件上传/下载(lrzsz),默认不启用

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

image-20211223000435216

本文介绍以下知识:

  • 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 系统服务及安装必要组件

image-20211205151226721

完整版:

1、克隆源码进行修改

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

git clone https://github.com/fluidd-core/fluidd/ -b develop

image-20211205025138102

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 # 开启当前测试服务

image-20211205024913433

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

image-20211205031919818

2.4 番外:最简远程访问

这里我们发现,Fluidd 并不一定要在运行 Klipper+Moonraker 的主机上就可以控制打印机,这也就是说最简单的远程访问,只需要暴露主机的 7125(Moonraker API 默认端口)即可。只需要添加域名到 moonraker.cfgcors_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/

image-20211205032745280

如图所示即为编译成功。

# 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文件 介绍的那样,我们可以通过查看 commitPR 的方法了解新功能。这次最主要的是引入了一个新的摄像头选项 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.

image-20211205150120867

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

image-20211205150202487

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

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

注意:如果默认的系统用户名是 pi,则根据情况修改服务中的 User=flyUser=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

image-20211223140754967

  • 我们的默认方案启动了 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(带打光)
  • 多摄像头设置
  • 多实例设置(一台上位机带多台打印机)






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了【2022-3-23更新v1.17.2+】跟着思兼学Klipper(05) Fluidd 中文本地化图1
界面没有变化
【2022-3-23更新v1.17.2+】跟着思兼学Klipper(05) Fluidd 中文本地化图2
也没有网页终端
【2022-3-23更新v1.17.2+】跟着思兼学Klipper(05) Fluidd 中文本地化图3

回复

使用道具 举报

y5000  学徒

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

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


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

回复

使用道具 举报

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





已经正确安装了。
SunJanuary-202201094071..png
SunJanuary-202201098297..png
回复

使用道具 举报

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
[md]【更新威力加强版】Fluidd 界面中文本地化补全及优化,增加网页终端

# 前言

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

使用道具 举报

hhhhhh1y  学徒

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

思兼老师,请问一下大概啥时候出摄像头教程呀,就等着这个了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail