抛弃你的U盘和遥控器,工业大屏也许你可以用这种方式来配置

698 阅读3分钟

一、前言

在工业互联网中,电视大屏用来展示了很多UI设计和前端仔们精心开发的大屏展示网页,让用户能更直观的感知到所在单位的各种运行情况。

但在实施过程中,我们往往需要使用 U盘 来为电视安装浏览器的 APK 应用,然后使用 遥控器 来输入账号、密码、大屏地址来实现大屏的登录和访问。

试想一下:

  • 电视有点高,你要借助梯子爬上去
  • USB口在电视背面,你要从缝里插进去
  • 遥控器要输入英文、数字、. / : 之类的符号
  • ...

是不是有点太麻烦了?

二、通过 WIFI ADB 来安装 APK

首先,我们来解决一下 APK 的安装问题。

我们可以使用 WIFI ADB 来安装 APK。因为大多电视都是 Android 设备,如果我们能开启电视的 ADB 调试功能,那么我们就可以使用 WIFI ADB 来安装 APK

如何开启 ADB 本文就不讲了,大家可以搜索具体的型号来了解。

开启 WIFI ADB 后,我们可以使用 ADB 来安装 APK

2.1 WIFI 连接电视 ADB

首先,我们需要知道电视的 IP 地址。

然后,我们可以在相同局域网下的电脑上使用 ADB 来连接到电视上。

这里你可能需要先安装你对应操作系统的 ADB 工具。

adb connect 192.168.1.100:5555

不出意外的话,你会看到控制台输出:

connected to 192.168.1.100:5555

2.2 安装 APK 浏览器容器应用

在连接到电视上后,我们可以使用 ADB 来安装 APK

adb install bi.apk

不出意外的话,你将会在控制台看到输出:

Installing 'bi.apk'...
Success!

三、固定 APK 浏览器应用的启动页

为了减少交互,我们给浏览器应用一个固定的启动页,这样用户每次打开就可以进入到配置页面,如:

hamm.cn/setup/

而这个页面,我们做了一些巧妙的设计:

四、电视大屏用户登录

为了减少输入,我们通过下面的方式来登录:

sequenceDiagram
    用户->>大屏: 打开大屏APK
    大屏-->>服务器: 请求配置页面
    服务器--)大屏: 返回配置页面
    大屏--)大屏: 生成带随机ID的URL二维码
    大屏-->>服务器: 开始轮询随机ID的缓存
    用户->>大屏: 扫描电视大屏的二维码
    大屏-)用户: 打开带随机ID的URL
    用户->>服务器: 登录
    服务器--)服务器: 缓存随机ID和用户信息
    服务器-)用户: 登录成功
    服务器--)大屏: 轮询到用户信息
    大屏->>用户: 登录成功

4.1 大屏生成随机ID的URL

首先,大屏生成一个 随机IDURL , 然后通过二维码展示到大屏上:

hamm.cn/login?uuid=…

然后大屏开始轮询这个 随机ID 的缓存是否包含用户信息令牌

4.2 用户扫码打开这个网页

  • 用户扫码打开这个网页,然后输入账号、密码,然后点击登录;
  • 登录将提交账号、密码、随机ID到服务器;
  • 服务器判断登录成功后,将用户身份的令牌 + 随机ID缓存到服务器;
  • 提示用户登录成功

4.3 大屏轮询到令牌

大屏轮询到用户信息后,大屏将显示用户信息,然后继续轮询到后续的大屏配置信息。

这时大屏的配置页面将用户令牌缓存到本地,后续就不需要再进行登录的操作了。

4.4 配置大屏

大屏的配置,比如显示哪块屏、显示什么自定义内容等等配置,也都可以使用刚才的流程来设计,这样我们就可以彻底抛弃掉遥控器来操作,毕竟手机还是比遥控器方便太多了。

五、总结

很详细了,就懒得总结了。

祝你在产品设计和优化上有更多的收获~

又水了一篇,美滋滋。

Bye~