「第50回 HTML5とか勉強会」のlt発表資料

乾杯可視化システム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での実行を推奨