实战Multitouch(1)

阅读更多

一、前言

 

    随着各类multitouch硬件设备的不断推出和普及，Multi-touch带来的人机交互的革新也已经为期不远了。

    面对铺天盖地的Multitouch技术，和山雨欲来的开发形势，您是否也动心了呢。

 

    为什么要这么早弄这个，是不是超前了？我也不想的，其实我们都可以跟着微软走，反正支持multitouch的windows 7已经要出来了，iphone也有很多人正在使用，开发包也满天飞了。或者你们只是想去弄流行的Ajax技术，那么您可以直接忽略本篇。如果感兴趣，可以关注一下，但是对于其发展和未来，谁也不知道，我们也不能妄加猜测，所以我们也不能指着这门技术去糊口，起码现在不能。

 

二、前期准备

 

    工欲善其事，必先利其器。

 

    在使用工具上，主要分为如下几类，同样开发也是分为如下几个方面进行：

 

    1、数据提供端

    2、应用程序端

    3、两者之间的接口

 

    我们一个一个来说：

 

    1、数据提供端：

 

    数据由数据提供端提供。其实，手势数据的提供是来自硬件设备的，如红外探测摄像头、触控板、Wii手柄其他多路设备等等。但是由于条件所限，一般测试和开发推荐使用摄像头和TUIO模拟器。

          (1) 使用摄像头：事实上这也算是一个真正意义上的真实的硬件设备了，因为很多成品的multitouch设备都是用摄像头来做。故我们可以选用touchlib的OSC工具连接摄像头，进行捕获数据。TouchLib的代码可以在Google Code上找到并下载。

          (2) 使用模拟器：推荐reactable的TUIOSimulator，操作简单，直观。

 

    2、应用程序端：

 

    程序的实现部分，主要实现正常界面和业务逻辑等。这跟正常的开发没什么两样，只是输入设备由原先的鼠标、键盘变为多路输入设备，这个设备提供了多路数据，该数据由数据提供端提供给应用程序端。

 

    由于应用程序端是程序的实现，实现程序的语言当然就有很多种，目前单TUIO就支持C++、JAVA、C#、FLASH、Python等语言。为了方便起见，本文选择Flash系列的TUIO开发包。

 

    3、两者之间的接口：

 

   由于开发语言支持的众多，两者之间的接口也都不同，现在我们就Flash和数据提供者之间的接口为例简单阐述：

 

    FlashOSC：又叫FLOSC，用JAVA写用于连接一切使用OpenSound Control协议的的服务器。而TouchLib等恰恰使用这个协议进行通信。

 

三、Hello World

 

    这年头比较新比较难的技术资料不是很好找，但Hello World的资料倒是信手拈来，多得不能再多。

 

    这不，NUI Group论坛上就为我们准备了一份精致的DEMO，它就是由FLOSC、TUIOSimulator和TouchLib的as3 DEMO文件组合而成的(不过这个例子的FLOSC有点老了，似乎有一些BUG，建议去下个新的替换掉)，当然如果您自己去组合更好了就是三个工具放一起，就是这么简单。

    我们启动它做一下测试(FLOSC已经替换为新版)：

    1、启动FLOSC： java -jar FlOSC.jar，弹出窗口提示选择数据和应用两者之间的端口，我们按默认进行，直接点Start。

    2、启动TUIOSimulator：java -jar simulator.jar

    3、启动应用Test：双击Test.exe

 

    好了选择TUIOSimulator的界面，开始享受multitouch的感觉吧 。

 

四、TUIOSimulator操作的方法

 

    事实上TUIOSimulator是给reactable的产品专门使用的模拟器，有很多我们很少使用的东西，比如那些个方块和圆圈。

   

简单操作：

 

    1、在白色区域内点击鼠标或点击鼠标并拖动：表示一只手点击或点击拖动，但是一旦松开鼠标，就表示手离开

    2、按住Shift 点击鼠标或点击鼠标并拖动：表示一只手点击或拖动，但是松开鼠标，还表示手在拖动。这样我们利用Shift可以表示出多个手指的点击和拖动

    3、去掉Shift造成的拖动，按Shift点灰色的圆点即可去掉这个拖动效果。

    4、边上的圆圈和方块是用来测试把物体放在真实的设备上的，圆的代表一种物体，方的代表另一种，目前我们还用不到。

 

五、OSC的操作方法

 

    1、先连接摄像头

    2、开启OSC

    3、开启FLOSC

    4、开启应用

 

    也就是说把TUISimulator替换成OSC。

    使用OSC时注意，OSC会把一切白色的东西都认为是手指点击或手指拖动轨迹，原因是，真实的环境是红外光探测摄像头和FTIR有机玻璃，摄像头根本探测不到其他可见光。而摄像头不是，故要用暗室或者调节明暗等参数去处理，比如用黑色做幕然后白色的点放幕上当手指等。

 

六、更多的例子

 

    1、touchlib的源码包内有个AS3文件夹，里面就有很多例子，比如图片，游戏，音乐等等例子，有兴趣的可以一一试验，实验时要注意，Flash的安全沙箱问题。

    2、从reactable上下载TUIO_Flash或者Google Code上下载TUIO-as-lib，然后编译，即可完成一个基础例子。

 

    而且这几个例子都是有源码的哦，我们可以稍作修改就做出自己的例子啦。