「第50回 html5とか勉強会」のlt発表資料
Post on 14-Jun-2015
203 Views
Preview:
DESCRIPTION
TRANSCRIPT
乾杯可視化システム0101室サーバ担当チーム
0101室サーバ担当チームのメンバー
加茂 聡 独立行政法人 理化学研究所 産業技術大学院大学 情報アーキテクチャ専攻
石井 学 独立行政法人 理化学研究所
!CheerZ!の概要
乾杯を可視化 遠隔地の人とも乾杯できる 遠い異国の言葉も通じない人とも乾杯を通じてコミュニケーションが可能
ニコニコ生放送の飲み配信のように、生主とリスナーが遠隔地にいても乾杯ができる
地図上で乾杯!
現在地からグラスが飛んできて乾杯
地球上で乾杯!
各人の乾杯数を可視化!
乾杯した人々の関係を可視化!
システムの概要
センサー付きグラス
集計サーバ
ブラウザ
センサーで計測した加速度を送信
センサーサーバ
BLEの到達範囲
センサーサーバ
センサーサーバ
表示データ取得
html5で可視化
位置情報等のデータ送信
システムの完成形
センサー付きグラス
集計サーバ
ブラウザ
センサーで計測した加速度を取得
スマホ
BLEの到達範囲
スマホ スマホ
位置情報等のデータ送信
表示データ取得
html5で可視化
加速度センサーのデータを用いて乾杯を検知
グラスの裏側に取り付けたセンサー
試作一号
Raspberry PiとUSB無線 LANアダプタ
3軸加速度センサー
モバイルバッテリ
試作 2号
XBee(Series1)加速度センサー
電池ボタン電池でも動作
センサー作る必要なかったかも…
使用ソフト等
センサー付きグラス
集計サーバ
ブラウザ
BLEの到達範囲
センサーサーバ
乾杯したユーザの情報等を push
以下を使用Three.js(地球儀、地図 )
jQuery(グラフ )
位置情報等のデータ送信
センサーサーバ側から加速度をpull
python等を使用
node.js+expressを使用
球体を作ってテクスチャを貼り付け
mesh = new THREE.Mesh( new THREE.SphereGeometry( 600, 40, 40 ), new THREE.MeshBasicMaterial( {
map: THREE.ImageUtils.loadTexture( 'earth.jpg' ), overdraw: true } )
);scene.add( mesh );
座標変換
http://help.arcgis.com/ja/arcgisdesktop/10.0/help/index.html#//00v20000000q000000
赤道
極座標系 直交座標系
3D版
動作環境
WebGLが動作するブラウザ Windows8.1上の以下のブラウザで動作確認 Internet Explorer11 Firefox30.0 Chrome35.0.1916.153
Chromeでの実行を推奨
top related