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

Article
07/20/2011

[原文发表地址] 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>，鄙视我吧。

这就是完整的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";

}

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

<tr>

<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>

//<![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上也会很好。

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

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

Additional resources