< [Ruby] RGh... |  ブログ記事一覧 | Rubyを使ってPaSoRi経由でSui... >
DoRubyの最新情報をTwitterでも配信してます

 

遠隔地のチョロQ(キューステア)をUSTREAM.TVのストリーミングビデオで見ながら、Webブラウザ上でのキーボード操作で操縦できるWebアプリを作ってみました。以下、その仕組みについて詳しく解説していきます。

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

 

チョロQ(キューステア)操縦Webアプリの動画

動作している様子と仕組みの概要については、以下の動画を見るのがてっとりばやいかも。

 

  チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

 

http://jp.youtube.com/watch?v=-n3XV6GGdWY 

 

  チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

 

http://www.nicovideo.jp/watch/sm2432398 

 

チョロQ(キューステア)Webアプリ概要図

 チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

ustream.tv

ustream.tv 

 

WebカメラとWebブラウザだけで動画配信できてしまうWebサービスです。今回はこのサービスを動画中継に使用しました。

Gainer 

GAINER.cc 

USBと電子部品の橋渡しをしてくれるI/Oモジュール。FlashやRubyなどから電子部品を簡単に扱えるようになります。今回はミニリレーの制御に使用しています。

Gainerについては以下のショップで購入すると良いかもしれません。



使用方法については、以下の書籍が非常に参考になります。

ミニリレー

電磁石を用いて電気的にスイッチをON/OFFする部品。今回は赤外線リモコンの制御に使用しています。

チョロQ(キューステア)

チョロQ(キューステア) 

付属の赤外線リモコンで制御できるチョロQ(キューステア)。今回はこれを操縦します。 

Amazonでも購入することができます。

Webアプリ動作環境

動作環境は MacOSX 10.5 ですが、

rubyとgainerの接続ができれば、他のOSでも動作すると思います。 

  

チョロQ(キューステア)-Gainer接続の参考書籍

GainerとチョロQ(キューステア)の接続方法については下記の書籍が詳しいです。

 

 

Rails config/environments/development.rb

以下、ソースについて解説していきます。 

 

 config/environments/development.rb あたりの最後に以下のような記述を追加してください。

 

require 'gainer'

$gainer = Gainer::Serial.new('/dev/cu.usbserial-A2002mcq')
$gainer.digital_output = 0xf
sleep(1)
$gainer.digital_output = 0
sleep(1)

 

require 'gainer' は、rubyからgainerを扱うためのgemです。gem install しておいてください。 

 

Rails app/controllers/top_controller.rb

 

require 'gainer'

class TopController < ApplicationController
  def frontleft
    $gainer.digital_output[0] = false
    $gainer.digital_output[1] = true
    $gainer.digital_output[2] = false
    $gainer.digital_output[3] = true
  end

  def front
    $gainer.digital_output[0] = false
    $gainer.digital_output[1] = true
    $gainer.digital_output[2] = true
    $gainer.digital_output[3] = true
  end

  def frontright
    $gainer.digital_output[0] = false
    $gainer.digital_output[1] = true
    $gainer.digital_output[2] = true
    $gainer.digital_output[3] = false
  end

  def stop
    $gainer.digital_output[0] = true
    $gainer.digital_output[1] = true
    $gainer.digital_output[2] = false
    $gainer.digital_output[3] = false
  end 

 

  def backleft
    $gainer.digital_output[0] = true
    $gainer.digital_output[1] = false
    $gainer.digital_output[2] = false
    $gainer.digital_output[3] = true
  end

  def back
    $gainer.digital_output[0] = true
    $gainer.digital_output[1] = false
    $gainer.digital_output[2] = true
    $gainer.digital_output[3] = true
  end

  def backright
    $gainer.digital_output[0] = true
    $gainer.digital_output[1] = false
    $gainer.digital_output[2] = true
    $gainer.digital_output[3] = false
  end
end

 gainerのIOポートから入出力するためのgemがあり、これを使うと上記のように簡単にgainerを扱うことができます.l

 

difital_output[0] = true などとすることで、gainerのデジタル出力を操作することができます。 

Rails app/views/top/index.rhtml

<html> <head> <%= javascript_include_tag :defaults %>

<script type="text/javascript">

function keyput(event){
          switch(event.keyCode){
                case 81: key_q(); break;
                case 87: key_w(); break;
                case 69: key_e(); break;
                case 90: key_z(); break;
                case 88: key_x(); break;
                case 67: key_c(); break;
        }
}

function key_q(){
           new Ajax.Request('/top/frontleft', {asynchronous:true, evalScripts:true, parameters:'authenticity_token='
 + encodeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}
function key_w(){
         new Ajax.Request('/top/front', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + enc
odeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}
function key_e(){
           new Ajax.Request('/top/frontright', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=
' + encodeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}
function key_z(){
           new Ajax.Request('/top/backleft', {asynchronous:true, evalScripts:true, parameters:'authenticity_token='
+ encodeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
} 

 

function key_x(){
           new Ajax.Request('/top/back', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + en
codeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}
function key_c(){
           new Ajax.Request('/top/backright', {asynchronous:true, evalScripts:true, parameters:'authenticity_token='
 + encodeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}

function keyputup(event){
          new Ajax.Request('/top/stop', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + enc
odeURIComponent('5c2a0299f9f219731bb72866e9831ce211999fad')}); return false;
}

document.onkeydown=keyput;
document.onkeyup=keyputup;

</script>
</head>

<body>
<embed width="416" height="340" flashvars="autoplay=true" src="http://ustream.tv/SxQwT0VkmQeydBJKd2fj1pniqS2xUiuz.us
c" type="application/x-shockwave-flash" allowfullscreen="true" />

<embed width="563" height="266" type="application/x-shockwave-flash" flashvars="channel=#gainer&server=chat1.ustream
.tv" pluginspage="http://www.adobe.com/go/getflashplayer" src="http://ustream.tv/IrcClient.swf" allowfullscreen="tru
e" />

<hr>

<table>

<tr>
<td><%= link_to_remote("left", :url => { :action => "frontleft" }) %></td>
<td><%= link_to_remote("front", :url => { :action => "front" }) %></td>
<td><%= link_to_remote("right", :url => { :action => "frontright" }) %></td>
</tr>

<tr>
<td><%= link_to_remote("left", :url => { :action => "backleft" }) %></td>
<td><%= link_to_remote("back", :url => { :action => "back" }) %></td>
<td><%= link_to_remote("right", :url => { :action => "backright" }) %></td>
</tr>

</table>
</body>

</html>

 

ustreamのブログパーツを張りつけて映像配信を実現しています。

JavaScriptでキーイベントを取得して、AJAXでサーバー側にリクエストを飛ばしています。なのでustreamによる映像配信がページ遷移で途絶えることはありません。

Railsのlink_to_remote()を用いたリンクも用意しています。

USB -> Gainer -> ミニリレー -> 赤外線リモコン 回路

 回路については先ほどの書籍と、以下の写真を参考にしてみて下さい。

使用しているリレーは941H-2C-5Dというもの。

秋葉原の秋月電子にて1個100円で購入しました。

 

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

 

ミニリレー -> チョロQ(キューステア)赤外線リモコン

リモコン側については以下のようにハンダ付けしています。

 

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

 

 

キーボード -> JavaScript -> AJAXの様子をFireBugで確認

FireBugを使うと、AJAXによるリクエストの様子が見れます。

 

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

 

AJAX -> Rails をログで確認

操縦中のサーバー側のログについては、こんな感じ。

 

チョロQ キューステア JavaScript AJAX Rails Gainer Webカメラ USTREAM.TV

 

チョロQ(キューステア) with JavaScript, AJAX, Rails, Gainer, Webカメラ, and USTREAM.TV まとめ

以上、WebブラウザでチョロQ(キューステア)を操縦する仕組みをGainerとRailsを使用して作ってみました。

この仕組みを使えば、色々と楽しそうなことができそうですね。

他にも面白いネタを考えています。次回もお楽しみに!

 


 

個人ブログ : 拡張現実ライフ

コメント (0)  |トラックバック (2)

ブックマークに追加する

トラックバック URL

トラックバック一覧

≫ 遠隔地のチョロQを操縦する方法 with JavaScript, AJAX, Rails, Gainer, Webカメラ, and USTREAM.TV
おお、おもしろい。同じ会社にこんなハッカーがおるとは。すげぇ、びっくりだ。 ついでに、Remote Control Wrapperを使ってApple Remote経由でチョロQが動かせると楽しいかも... [続きを読む] posted from すめるまん Broken Diary 2008.03.05 01:07
≫ 組み込み屋さんになりたかった
gihyo.jpの新刊案内メールに、こんなのが紹介されていた。 電子機器組立の総合研究 (技能研修&検定シリーズ) (技能研修&検定シリーズ) 著者／訳者：ものづくり技能強化委員会 出版社... [続きを読む] posted from Kwappa談話室 2009.01.14 17:57
この記事にコメントをする
ニックネーム:
メールアドレス:
URL:


.
web開発ならKBMJ
Rubyでのwebシステム開発は
実績豊富なKBMJにお任せ下さい
iPhone開発
iPhone開発は
KBMJにお任せ下さい
ブラウザゲーム エインヘリアル
ブラウザゲーム「エインへリアル」
αテスター募集中
オープンソースECパッケージ エレコマ
オープンソースECパッケージ
「エレコマ」

By TwitterIcon.com

プロフィール

ssato
ssato
佐藤伸吾です。拡張現実(AR)、フィジカルコンピューティング、ライフログ、iPhone、3Dグラフィックス、UIなどに興味があります。

個人ブログの拡張現実ライフもどうぞ。

最近チェックした記事

最新記事

アーカイブ

アクセスランキング

KBMJのWebソリューション
Ruby on railsの開発ならKBMJ
株式会社ケイビーエムジェイ