利用Ubuntu系统实现类触摸屏一体机的设计

本文的缘由

实习的公司提出了一个需求,公司的前端编写一个后台系统的页面,希望利用Ubuntu作为操作系统开发一套类似于ATM的类触屏一体机系统。但不像ATM机只能触屏或者使用数字键盘,这套系统可以使用键盘和鼠标。总的来说有以下几点需求:

  • 开机后自动进入浏览器前端界面,不要显示系统内容及系统信息
  • 需要鼠标和键盘的支持,但不允许用户利用快捷键跳回系统桌面
  • 后台系统需要在浏览器启动前完成启动
  • 需要新的浏览器以支持前端的一些功能和操作
  • 需要中文输入法支持

接到这样的需求自然要进行一些分析,以及对使用什么软件有一个大致的了解。前置完成的任务有:

  • 后台系统已经部署到Docker上,利用docker命令可快速启动后台系统
  • 前端页面编写完毕并放置于后台系统中随后台系统启动
  • 前端对一些快捷键做出了限制,本流程仅需限制系统层面的快捷键即可

本文用于纪念这次项目的开发,以及开发过程的留档,希望有助于后期的成长。

软硬件配置

  • 硬件: Arm base 小主机 + 256 SSD + 16G 内存
  • 系统: 高度定制化的Ubuntu on Arm,且需要安装特定版本才提供所需要的API
  • 软件:Chrome, GUI, Ruby后台,Vue开发前端

解决方案

根据现有的需求以及已经完成的任务作为基础,从始至终我和小伙伴们逐一商讨了几套解决方案并解决了公司的需求,并在此一一列出供读者参考。

解决方案 Ver1.0

根据现有的情况以及需求的分析,经过和小伙伴的第一次简单商讨我们决定利用ubuntu系统中的 Systemctl 随机启动机制编写启动脚本,尝试是否能够符合公司的要求。首先让我们为难的是浏览器,Ubuntu自带的Firefox浏览器在全屏展示的情况下会列出网址输入框,不符合公司的要求。在经过多方寻找之后,小伙伴在某篇博客园的介绍中我们得到了想要的结果,即Chrome的kiosk模式:Chrome浏览器的Kiosk模式 - 千山_o - 博客园 (cnblogs.com),Kiosk模式,即嵌入式设备的前端展示,很多应用其实是web应用,操作界面是浏览器呈现的,比如ATM机,工控机,信息展示屏,这时候用这种模式就会很方便。

后面其实也发现firefox也支持kiosk模式,但这是后话了

这里列出如何在ubuntu系统启动kiosk模式的命令:

1
/usr/bin/chromium-browser -kiosk

利用chrome 的 kiosk模式,我们便可实现web应用的全屏展示,如果机器支持触摸屏操作,同时前端开发也支持触摸操作的话,web应用即可当作触摸展示屏进行操作。后面其实也发现Firefox也支持kiosk模式,但这是后话了

方案问题1

解决了浏览器的全屏问题, 接下来就是编写脚本让ubuntu在开机后自动跳出浏览器并打开前端web应用,具体编写Systemctl脚本代码不在此展示。但是在此刻第一个让人不满意的问题出现了:

利用Systemctl随机启动脚本会让ubuntu先进入类似GNOME2之类的GUI后再弹出浏览器,这就让用户有查看系统桌面的机会

这样的解决方案让我们感到不满意,很快就被pass掉了。

方案问题2

我们很快的就想到了,既然ubuntu要先启动桌面GUI再启动浏览器,那我们可以试试把GUI卸了让系统直接启动浏览器全屏模式,但是幻想很快就破灭了:

浏览器的UI环境需要Ubuntu系统的UI界面支持,没有GUI就是不给你启动

这条路被堵死之后,我和小伙伴陷入了开发的死循环,直到……

解决方案 Ver2.0

第一个解决方案被否决了之后,我们在系统上做了许多其他的尝试例如修改启动顺序以及缩减启动事件,结果却都不令人满意。没办法,只能从其他地方入手了,于是我想到了GUI界面,如果GUI够简单嘛都没有,那不就基本完美符合我们的要求了?但是经过大量的无用搜索后得到的结果大多是:gnome, cinnamon, kde, xfce这些类似Windows界面带有浮动窗口的GUI,直到某一天我闲来无事翻到了这篇文章:linux日常使用i3wm是什么体验? - 知乎 (zhihu.com) i3wm,你简直是我的宝~

i3wm使用平铺式窗口管理器,开多少个软件就把软件平铺在桌面UI上,没有打开应用的话桌面只有一张桌面壁纸非常干爽整洁。虽然i3wm的配置文件复杂繁多,一旦配置完毕即可轻松使用,后期如无需求无需修改配置文件。关于文件的配置可以参考下这个视频i3wm: Jump Start (1/3) - YouTube. 同时,i3wm的配置文件提供了强大的功能配置,对于公司关于某些快捷键的禁用以及浏览器的自启问题,i3wm的配置文件均提供了解决方案,同时也可提供su级的启动权限,例如:

自启动chrome浏览器:

1
exec /usr/bin/chromium-browser -kiosk

禁用某快捷键如F1:

1
bindsym F1 nop

在i3wm的设置中将公司的图片设置为桌面背景后,即使系统启动过程中没有及时的自启浏览器程序,用户也只能看到关于公司logo的桌面图片。从而杜绝了用户查看获取系统信息的机会。

方案问题

这套方案出来后公司的领导都比较满意。但接下来遇到的问题再次让本项目停滞。这是一个关于输入法的问题。本来这并不是什么问题找个输入法安装就是了, 但是由于本次项目采用的系统是高度定制的,适配arm处理器的ubuntu系统,这就很蛋疼了。Ubuntu本身很容易解决一些软件问题,但是碰上了Arm之后,很多软件的不适配给本项目的开发进度带来一些拖延。

我们原有的想法使用一些开源的或是常见的输入法软件如:搜狗linux输入法。但经过探究后发现要么不支持arm,要么需要较高版本的ubuntu系统,因此作罢。那么为什么不使用系统原有的输入法呢?因为i3wm不像其他gui提供中文输入法,需要自行安装。但这也给我们带来了思路,系统自带的输入法无非就俩,试试呗?

解决方案 Ver2.1

ubuntu自带的输入法就俩,要么fcitx要么ibus。我与ibus的结缘源自于谋篇知乎文章,但实在是找不到了就整另外一篇过来凑下数:Ubuntu20.04+i3wm折腾笔记_ibus i3wm_DexterLien的博客-CSDN博客 利用ibus输入法在chorme浏览器全屏的情况下仍可利用快捷键呼出输入法工具栏,从而解决输入法问题。一下为安装过程中需要注意的流程:

在安装i3wm之前,需要先设置ibus作为默认的输入法,同时安装ibus中文输入法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
打开设置
选择国家/语言(Region&Language)
选择管理安装语言(Manage Installed Languages)
将下面的键盘输入方法系统修改为(Keyboard input method system) fcitx -> ibus

打开terminal
将以下命令输入并开始安装ibus输入法:
sudo apt-get install ibus ibus-clutter ibus-gtk ibus-gtk3 ibus-qt4
切换当前输入框架至ibus框架
im-config -s ibus
安装ibus中文输入法
sudo apt-get install ibus-pinyin

安装成功后,启动ibus的设置使用以下命令:
sudo ibus-setup
在这里你可以设置组合键修改切换输入法的方法
需要注意的,linux系统下的super键即windows下的win键

方案问题

接下来需要处理的就是系统启动的先后顺序。在未设置启动先后顺序之前,经常出现后台系统还未完全加载而谷歌浏览器自行打开,从而出现无法访问页面的错误信息。而这类问题的解决方法也很简单,即:

解决方案 Ver2.2

利用systemd的依赖和前后顺序关系,增加i3wm的启动依赖,必须等到docker容器完全启动之后才可加载i3wm服务,通过此种方法来限制浏览器过快的启动从而导致的页面无法访问。

在systemd的Unit方面增加:

1
2
Requires= 后台服务的名称.service
After= 后台服务的名称.service

至此,关于利用Ubuntu系统实现类触摸屏一体机的设计的项目基本就已经实现且符合公司的要求,但是….

改进方案

  1. arm版本的chrome过于老旧,虽然足够运行公司的前端web application, 但是后期的新功能加入可能会因为浏览器的不支持从而出现问题。正如前面所提到的,Firefox也支持kiosk模式启动,而且Firfox在任何的系统类型(x86,arm)都有最新版本的支持,因此利用Firefox作为browser也是个可选项
  2. 即使使用了i3wm,开机过程中的啰嗦代码还是能给懂系统的人看出一些端倪,根据网上查到的资料,修改ubuntu的启动参数即可让ubuntu在启动过程中不罗嗦,直接显示加载图片如下图:

ubuntu加载过程中显示为图片

演示视频

总结

带来了一些挑战,挺好。若有纰漏烦请指出~或者有更好的解决方案也烦请一起讨论!

2021年6月22日


利用Ubuntu系统实现类触摸屏一体机的设计
http://blask.cn/2021/06/22/类触摸屏一体机的设计/
作者
Wayne Li
发布于
2021年6月22日
许可协议