Google VR Viewに情報ウィンドウをOverlayで表示してみました

VR Viewに情報表示用の窓を付けてみました。

ぐるぐる動かしている時に状況に応じて固定位置に”なんか”表示します。

PCとスマホ・タブレットではDOM要素を使います。

カードボードではDOM要素が見えないので、Overlayを使います。

HotspotをクリックしてSceneを切り替えることでツアーのような効果を得られます。

このOverlayがうまく機能しない場合は、別のOverlayを使うやり方でやってみてください。

サンプル

左上に見えているのはマウスムーブした時の情報

スマホ・タブレット

左上に見えているのはデバイスモーションの情報

カードボード（Cardboard）

右下に見えているのはデバイスモーションの情報ですが、Cardboard装着時には視界の中央で表示されます。

ヘッドアップディスプレイの文字表示みたいで、ちょっとカッコイイと勝手に思ってます(^^)。

コード

対象はembed.js

デバッグモード時に表示されるStatsを参考にしてみました。

function onLoad() {
・
・
addInfoElement();
・
・
}
function addInfoElement() {
var element = document.createElement('div');
element.id = "XXXXX";
element.innerHTML = "まいど！";
element.style.backgroundColor = 'transparent';

element.style.position = 'absolute';
element.style.left = '100px';
element.style.top = '10px';
element.style.width = '200px';
element.style.height = '50px';
element.style.color = '#ff0000';
element.style.fontWeight = 700;
element.style.fontSize = '12px';
document.body.appendChild(element);
}

function onLoad() {

・

addInfoElement();

・

}

function addInfoElement() {

var element = document.createElement('div');

element.id = "XXXXX";

element.innerHTML = "まいど！";

element.style.backgroundColor = 'transparent';

element.style.position = 'absolute';

element.style.left = '100px';

element.style.top = '10px';

element.style.width = '200px';

element.style.height = '50px';

element.style.color = '#ff0000';

element.style.fontWeight = 700;

element.style.fontSize = '12px';

document.body.appendChild(element);

}

Cardboard対応

ちょっとイレギュラーですが…..。

VR Viewでカードボード対応にする場合、

このアイコンをタップします。

タップする際は、スマホは横向きにしておいた方がいいみたいです。

デフォルトの場合、こういう注意書きが３秒ほど表示されるようになっています。

これはembed.jsの中では「RotateInstructions」という機能が担っています。

RotateInstructionsはoverlayを用いる恰好のサンプルです。

これを利用してみます。

コードを改変して、出しっぱなしにして、ここに文字を表示します。

改変部分

RotateInstructions（）という関数を書き換えます。

前のaddInfoElementとIDがかぶらないようにします。

textは中央に表示すると二重に見えてしまうので、左右どちらかに偏らせて表示します。

function RotateInstructions() {

var overlay = document.createElement('div');
var s = overlay.style;
s.position = 'fixed';
s.top = '50%';
s.left = '50%';
s.backgroundColor = 'transparent';
s.fontFamily = 'sans-serif';
s.zIndex = 1000000;

var text = document.createElement('div');

text.id = 'YYYYY';
var s = text.style;
s.textAlign = 'center';
s.fontSize = '16px';
s.lineHeight = '24px';
s.margin = '24px 25%';
s.width = '50%';
text.innerHTML = 'information';
overlay.appendChild(text);

this.overlay = overlay;
this.text = text;

this.hide();
}

function RotateInstructions() {

var overlay = document.createElement('div');

var s = overlay.style;

s.position = 'fixed';

s.top = '50%';

s.left = '50%';

s.backgroundColor = 'transparent';

s.fontFamily = 'sans-serif';

s.zIndex = 1000000;

var text = document.createElement('div');

text.id = 'YYYYY';

var s = text.style;

s.textAlign = 'center';

s.fontSize = '16px';

s.lineHeight = '24px';

s.margin = '24px 25%';

s.width = '50%';

text.innerHTML = 'information';

overlay.appendChild(text);

this.overlay = overlay;

this.text = text;

this.hide();

}

出しっぱなしにする場合

タイマーを使っているのを出しっぱなしにします。

this.rotateInstructions_.showTemporarily(3000, this.layer_.source.parentElement);

↓

this.rotateInstructions_.showPermanent(this.layer_.source.parentElement);

関数追加

RotateInstructions.prototype.showPermanent = function(parent) { this.show(parent);

};

文字を表記する場合

CardboardのDOM要素は後で追加されるようになっているので、起動時には存在しません。

try・・・catchで逃げておきます。

try{ document.getElementById(“YYYYY”).innerHTML = “????”; }catch(e){}

RotateInstructions()の完全書き換え以外のサンプル

function RotateInstructions() {
  this.loadIcon_();

  var overlay = document.createElement('div');
  overlay.id='overlay_parent';
  var s = overlay.style;
  s.position = 'fixed';
  s.top = 0;
  s.right = 0;
  s.bottom = 0;
  s.left = 0;
  s.backgroundColor = 'gray';
  s.fontFamily = 'sans-serif';
  s.zIndex = 1000000;

  var img = document.createElement('img');
  img.id = 'icon_image';
  img.src = this.icon;
  var s = img.style;
  s.marginLeft = '25%';
  s.marginTop = '25%';
  s.width = '50%';
  s.display = 'block';
  overlay.appendChild(img);

  var text = document.createElement('div');
  text.id = 'info_panel';
  var s = text.style;
  s.textAlign = 'center';
  s.fontSize = '16px';
  s.lineHeight = '24px';
  s.margin = '24px 25%';
  s.width = '50%';
  s.color = "#ffffff";
  s.display = 'block';
  text.innerHTML = 'Place your phone into your Cardboard viewer.';
  overlay.appendChild(text);


  var snackbar = document.createElement('div');
  snackbar.id = 'snackbar';
  var s = snackbar.style;
  s.backgroundColor = '#CFD8DC';
  s.position = 'fixed';
  s.bottom = 0;
  s.width = '100%';
  s.height = '48px';
  s.padding = '14px 24px';
  s.boxSizing = 'border-box';
  s.color = '#656A6B';
  overlay.appendChild(snackbar);

  var snackbarText = document.createElement('div');
  snackbarText.id = 'snackbartext';
  snackbarText.style.float = 'left';
  snackbarText.innerHTML = 'No Cardboard viewer?';

  var snackbarButton = document.createElement('a');
  snackbarButton.id = 'snackbarbutton';
  snackbarButton.href = 'https://www.google.com/get/cardboard/get-cardboard/';
  snackbarButton.innerHTML = 'get one';
  snackbarButton.target = '_blank';
  var s = snackbarButton.style;
  s.float = 'right';
  s.fontWeight = 600;
  s.textTransform = 'uppercase';
  s.borderLeft = '1px solid gray';
  s.paddingLeft = '24px';
  s.textDecoration = 'none';
  s.color = '#656A6B';

  snackbar.appendChild(snackbarText);
  snackbar.appendChild(snackbarButton);

  this.overlay = overlay;
  this.text = text;

  this.hide();
}



RotateInstructions.prototype.hide = function() {
  //this.overlay.style.display = 'none';//出しっぱなし
  
  var overlay_parent = document.getElementById('overlay_parent');
  try{
      overlay_parent.style.backgroundColor = 'transparent';
      overlay_parent.style.top = '30%';
      overlay_parent.style.left = '52%';//右にシフトgearアイコンを避けます
  }catch(e){}
  
  var image_node = document.getElementById('icon_image');
  var text_node = document.getElementById('info_panel');
  var snackbar_node = document.getElementById('snackbar');
  var snackbartext_node = document.getElementById('snackbartext');
  var snackbarbutton_node = document.getElementById('snackbarbutton');
  try{
      image_node.style.display = 'none';
      snackbar_node.style.backgroundColor = 'transparent';
      snackbartext_node.innerHTML = "";
      snackbarbutton_node.innerHTML = "";
      text_node.style.color = '#ff0000';
  }catch(e){}
  
};

100

101

102

103

104

105

106

function RotateInstructions() {

this.loadIcon_();

var overlay = document.createElement('div');

overlay.id='overlay_parent';

var s = overlay.style;

s.position = 'fixed';

s.top = 0;

s.right = 0;

s.bottom = 0;

s.left = 0;

s.backgroundColor = 'gray';

s.fontFamily = 'sans-serif';

s.zIndex = 1000000;

var img = document.createElement('img');

img.id = 'icon_image';

img.src = this.icon;

var s = img.style;

s.marginLeft = '25%';

s.marginTop = '25%';

s.width = '50%';

s.display = 'block';

overlay.appendChild(img);

var text = document.createElement('div');

text.id = 'info_panel';

var s = text.style;

s.textAlign = 'center';

s.fontSize = '16px';

s.lineHeight = '24px';

s.margin = '24px 25%';

s.width = '50%';

s.color = "#ffffff";

s.display = 'block';

text.innerHTML = 'Place your phone into your Cardboard viewer.';

overlay.appendChild(text);

var snackbar = document.createElement('div');

snackbar.id = 'snackbar';

var s = snackbar.style;

s.backgroundColor = '#CFD8DC';

s.position = 'fixed';

s.bottom = 0;

s.width = '100%';

s.height = '48px';

s.padding = '14px 24px';

s.boxSizing = 'border-box';

s.color = '#656A6B';

overlay.appendChild(snackbar);

var snackbarText = document.createElement('div');

snackbarText.id = 'snackbartext';

snackbarText.style.float = 'left';

snackbarText.innerHTML = 'No Cardboard viewer?';

var snackbarButton = document.createElement('a');

snackbarButton.id = 'snackbarbutton';

snackbarButton.href = 'https://www.google.com/get/cardboard/get-cardboard/';

snackbarButton.innerHTML = 'get one';

snackbarButton.target = '_blank';

var s = snackbarButton.style;

s.float = 'right';

s.fontWeight = 600;

s.textTransform = 'uppercase';

s.borderLeft = '1px solid gray';

s.paddingLeft = '24px';

s.textDecoration = 'none';

s.color = '#656A6B';

snackbar.appendChild(snackbarText);

snackbar.appendChild(snackbarButton);

this.overlay = overlay;

this.text = text;

this.hide();

}

RotateInstructions.prototype.hide = function() {

//this.overlay.style.display = 'none';//出しっぱなし

var overlay_parent = document.getElementById('overlay_parent');

try{

overlay_parent.style.backgroundColor = 'transparent';

overlay_parent.style.top = '30%';

overlay_parent.style.left = '52%';//右にシフトgearアイコンを避けます

}catch(e){}

var image_node = document.getElementById('icon_image');

var text_node = document.getElementById('info_panel');

var snackbar_node = document.getElementById('snackbar');

var snackbartext_node = document.getElementById('snackbartext');

var snackbarbutton_node = document.getElementById('snackbarbutton');

try{

image_node.style.display = 'none';

snackbar_node.style.backgroundColor = 'transparent';

snackbartext_node.innerHTML = "";

snackbarbutton_node.innerHTML = "";

text_node.style.color = '#ff0000';

}catch(e){}

};

テスト版 (機能実装としてはこちらが正です)

ホットスポットにフォーカスが当たると少し拡大されますが、その際、説明分を表示します。フォーカスが解除されると消えます。

PC版のマウスオーバーでTOAST表示しているもののCardboard版です。

HotspotをクリックするとSceneの移動や動画の再生、静止画の表示、サウンド再生などを行います。

CardboardでのHotSpotクリック

初期型では側面のマグネットスイッチで行っていました。

マグネットスイッチはうまく機能しない場合もあるようです。

最近のCardboard（V2)は物理的にタッチディスプレイを押すタイプになっているもよう。スイッチもコツみたいなもんがあって、クリックする感覚で押せばいいです、しっかり押すと反応しない場合がありますね。

レンズもなにやら大きくなっている気がする。

2018/01/30現在、Amazonでは799円です。

その他のOverlay

embed.jsではRotateInstructions以外に、ViewerSelectorやLoadingIndicatorでもOverlayが使われています。

ViewerSelectorはDialogを表示するサンプルになります。

次回はこれのご紹介をしてみます。

FRONT

地図と画像のサイト

Google VR Viewに情報ウィンドウをOverlayで表示してみました

Be the first to comment

Leave a Reply コメントをキャンセル