每周源代码57- 用C# 4, ASP.NET MVC和jQuery控制一个Eagletron TrackerPod


[原文发表地址] The Weekly Source Code 57 -Controlling an Eagletron TrackerPod with C# 4, ASP.NET MVC and jQuery

[原文发表时间] 2010-11-22 01:24 AM

我在西雅图有一个42英寸的“高清晰度电视,在任何时候它都作为"嵌入式社交代理人."被挂接着。它是微软Redmond园区和我在俄勒冈的房子之间的桥梁。我之前在博客上写过一个作为9频道的拍摄视频的嵌入式社交代理人。它在工作时被称作"HanselCart",尽管最近它不再是一辆运载车,现在它是一个整体的办公室:42号楼的人们可以顺便过来看我,嗯,是虚拟的我。

其中一个还不是百分百顺利的事情是:尽管LifeCam Cinema HD 720p是一个好相机,我却不能移动它。我不得不叫其他人来为替我移动,这可有些烦人。

我正准备前往西雅图参加一个会议。当我正在收拾行李的时候,我在我的壁橱里发现了这个TrackerPod motorized WebCam pan/tilt/zoom。我肯定是在很长时间以前买了这个东西然后忘掉了。我在这个LifeCam Cinema HD的金属底部钻了一个洞,并且在TrackerPod的标准三脚架式的外螺纹上转了半圈,这样很好的固定了它。

天很晚了,但是我想明天我要到西雅图去,或许我可以像黑客那样获取并结合一些这个装置代码,这样就可以把它一起带去西雅图。在TrackerPod网站上,有一个客户编程 API 的网页 ,那里有一个TrackerPod COM Client

这就是我创建的步骤:

如下是我是如何在40分钟内做到这个的。首先,我做了一个新的ASP.NET MVC 3网页项目,沿用了默认模板。这很快也很不厚道,是吧?

是的,我使用了一个<TABLE>,鄙视我吧。

clip_image002

这就是完整的Razor View。我知道我会需要一堆的按钮来移动摄像机,我想我会使用jQuery在服务器端创建一个运行ASP.NET MVC的AJAX。我使用的是最新的jQuery 1.4.4并且我从升级后的Microsoft cookieless CDN (Content Delivery Network.)上获得它。

我没有为不同的按钮或不同的事件处理程序创建一个复杂的switch语句, 而是决定使用任意的HTML5数据属性。每一个INPUT按钮都有属性就像data-xvalue和data-yvalue一样。

还有一个挂接到所有按钮的Click() 处理程序。它会得到这些数据属性的值,并把数据POSTs到主控制器的Move方法中。

@{

View.Title = "Home Page";

}

<script src="•http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"

type="text/javascript"></script>

<table border="0">

<tr>

<td></td><td>

<input type="button" value=" up " name="up"

data-xvalue="0" data-yvalue="-10" data-method="0" />

</td><td></td>

</tr>

<tr>

<td>

<input type="button" value="left" name="left"

data-xvalue="10" data-yvalue="0" data-method="0" />

</td>

<td>

<input type="button" value="home" name="home"

data-xvalue="0" data-yvalue="0" data-method="1" />

</td>

<td>

<input type="button" value="right" name="right"

data-xvalue="-10" data-yvalue="0"

data-method="0" />

</td>

</tr>

<tr>

<td>

</td>

<td>

<input type="button" value="down" name="down"

data-xvalue="0" data-yvalue="10" data-method="0" />

</td>

<td>

</td>

</tr>

</table>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function () {

$('input').click(function (event) {

var target = event.target;

x = $(target).data('xvalue');

y = $(target).data('yvalue');

m = $(target).data('method');

$.post("/Home/Move", { x: x, y: y, method: m });

}

);

});

//]]>

 

</script>

 

 

在主控制器中,有一个方法叫做Move(int x, int y, int method),这是移动摄像头的方法-相对的是0或绝对的是1. 这是相机调用约定的一部分。

using TRACKERPOD_DUAL_COMLib;

namespace TrackerPodWeb.Controllers

{

public class HomeController : Controller

{

private dynamic cam = MvcApplication.myCameraInstance;

[HttpPost]

public void Move(int x, int y, int method)

{

cam.x = x;

cam.y = y;

cam.move_method = method;

cam.move();

}

public ActionResult Index()

{

return View();

}

}

看到那个动态对象了吗?那是让我始料未及的部分。我一直以来都把COM 互操作当作是.NET中的一个的噩梦,以至于我花费大部分的时间来鼓弄COM接口、类型库及异常,然后我突然意识到C# 4本应该来解决所有的这些的。

就像我一直这么说Razor来着-“不要老是想着语法而是要使用它”。这同样也适用于.NET 4的COM 互操作(记住:Visual Basic的这些家伙们已经有好多年这样的好日子了…这就是为什么VB是如此流行的一种商业自动化语言)

只需使用“dynamic”关键字 ,并开始调用COM方法说真的,还真管用。我是在把TrackerCam's VB6(是的Visual Basic 6)样本的代码复制/粘贴到C#4以及一些分号以外,它就直接可以运行了!

如下是我的网页应用程序的启动代码:

public static dynamic myCameraInstance { get; set; }

protected void Application_Start()

{

//snip the MVC init stuff...

myCameraInstance = new TrackerPod();

myCameraInstance.app_name = "hanselcam";

myCameraInstance.initialize();

}

在这里我把摄像机的COM对象作为一个可怜的人的单例,这样它也能在其他地方使用。或许我应该在这周围放一个guard-code以确保它不会消失或发生什么事但是目前为止它仍在工作。我想它应该是一个合适的单例。

然后我使用这个接口在我的主控制器里使用那个例子并在Move()里调用COM方法。ASP.NET MVC很好的处理从jQuery到Action Method的绑定;.NET 4, C# 和the DLR很好的处理对COM TrackerCam stuff的调用。

HTML5+jQuery -> ASP.NET MVC -> C# 4 dynamic keyword -> DLR COM Binder -> COM Library = It just works.

这是一些HTML5属性, 5行JS并且在我的Move() 方法上基本上会有4行COM 互操作。

现在我从俄勒冈就可以控制我的西雅图WebCam了。我可以做到这个,所以我可以从Office Communicator Lync聊天客户端或其它东西上控制它。如果有人把TrackerPod包装为一个不错的C#库并把它放到CodePlex上也会很好。

我会把这添加到我的待办事项列表上,或许你也会这么做的,亲爱的读者。

相关链接:

* VIDEO: Hanselminutes on 9: Embodied Social Proxies (and Remote Video Heads!) with Microsoft Research

* YOUTUBE VIDEO: Embodied Social Proxy: Connecting Hub-and-Satellite Teams

* Virtual Camaraderie - A Persistent Video "Portal" for the Remote Worker

* Buy a TrackerCam

全面披露:刚刚我花了一点时间并得到了TrackerCam的一个附属代码因为这个摄像机很容易使用。我买了这个TrackerPod很多年了,今晚在我的壁橱里发现了它。在Eagletron我不认识任何人。


Comments (0)

Skip to main content