只要1美元！教你给MacBook装上触摸屏

来源：anishathalye

编译：洪颖菲、秦泽宇、钱天培

１美元可以做什么呢？买一瓶水，买半个冰激凌，或者让你用上半小时的GPU。但这些都不够酷！

今天，文摘菌决定，只用１美元，给MacBook装上触摸屏！

你没有听错，只要１美元！用上1美元的硬件，和一点计算机视觉原理，一个来自MIT的小哥Anish Athalye在与几个队友的合作下，就将MacBook变成了触摸屏。

此项目已经在Github上开源，赶紧来学一学！

Github链接：

https://github.com/bijection/sistine

基本原理

该项目背后的基本原理很简单。从一个特定角度看屏幕，屏幕会反光，你可以通过检查手指是否碰触到自己的镜像来判断手指是否接触到屏幕。

我的队友Kevin在初中就发现了这种现象，并建立了ShinyTouch这一软件。该软件只需利用外部网络摄像头，就可以轻松构建一个触摸输入系统。

ShinyTouch软件链接：

https://antimatter15.com/project/shinytouch/

我们想试试是否可以将这个系统进一步简化，并使其在没有外部网络摄像头的情况下工作。我们的想法是，在MacBook的内置网络摄像头前改装一个小镜子，这样网络摄像头就会以锐角向下拍摄电脑屏幕。相机可以看到手指悬停或触摸屏幕，这样我们就可以使用计算机视觉将视频输入转换为触摸事件。

硬件 我们的硬件设置很简单。我们所需要的只是在网络摄像头前面以适当的角度放置一面镜子。这是我们的物料清单：

• 一个小镜子
• 硬纸盘
• 门铰链
• 热熔胶

经过一番重复实验之后，我们决定使用刀和热胶枪在几分钟内完成设计。

这个是最后的成品：

手指检测

处理视频帧的第一步是检测手指。以下是网络摄像头看到的典型示例：

手指检测算法需要找到触摸/悬停点以进行进一步处理。我们目前的方法是使用经典计算机视觉技术，处理方式包括以下步骤：

1. 通过肤色进行过滤，并设置相应的二进制阈值;
2. 找到手指及反射轮廓;
3. 找出两个最大的轮廓并确保轮廓在水平方向上重叠，而较小的轮廓在较大的轮廓上方;
4. 将触摸/悬停点标识为连接较大轮廓顶部和较小轮廓底部的线的中点;
5. 根据两个轮廓之间的垂直距离区分触摸和悬停。

上面显示的是将此过程应用于网络摄像头的每一帧的输出结果。手指和反射（轮廓）以绿色标出，边界框以红色显示，触摸点以红色显示。

映射和校准

处理输入的最后一步是将触摸/悬停点从网络摄像头坐标映射到屏幕上的坐标。这两者是与单应性相关的。我们通过校准，即找到用户触摸屏幕上的特定点，得到单应矩阵。在我们收集了相应的网络摄像头坐标的数据后，可以使用RANSAC准确地得到其单应性。这为我们提供了一个投影矩阵，这个矩阵可以将网络摄像头得到的坐标映射到屏幕上的坐标。

上面的动图演示了校准过程，其中用户必须在屏幕周围跟随绿点移动手指。该动图包含一些调试过程，这些过程会覆盖网络摄像头的实时视频。网络摄像头坐标中的触摸点以红色显示。在校准过程完成之后，投影矩阵会以红线的方式显示出来，并且软件切换到以估测点为蓝色的模式。

应用

在当前的原型中，我们将悬停和触摸转换为鼠标事件，使现有应用程序可以随时随地启用触摸功能。

如果我们编写自己的触控式应用程序，我们可以直接使用触摸数据，如悬停高度等信息。

结论

我们的项目是一个概念性项目，你只需1美元的硬件即可将笔记本电脑变成触摸屏。作为一个原型，它的效果非常好！

通过一些简单的修改，例如更高分辨率的网络摄像头（我们的是480p）和一个允许网络摄像头捕捉整个屏幕的曲面镜，Sistine可以成为一个实用的低成本触摸屏系统。

相关报道：

https://www.anishathalye.com/2018/04/03/macbook-touchscreen/