Vuforia Studio CSS備忘録：2D画面上の指定位置に縦スライダーを表示

はじめに

Vuforia Studioには、2Dスライダーウィジェットがあり、横方向のスライダーを簡単に追加できる。しかし、縦方向のスライダーは用意されていない。だが、CSSを使うと、縦方向のスライダーを実現できる。その例を、備忘録としておく。

前提

この備忘録は、Vuforia Studioで、2Dウィジェットを含むARコンテンツを独力で作成できる人が対象。

CSSの例

スライダーウィジットを縦表示にする方法に、以下の例がある。
・How to add vertical slider widget in right and left panel ? @ ptc community
試してみた。確かに縦スライダーにはなるが、位置を思い通りに指定するのが難しそうだった。そこで、この例を参考に、位置指定の方法を試してみた。

右端中央に位置指定する例

以下の CSSを、Studioの画面左の「アプリケーション（Application）」に追加する。

.position7 {
  position:  fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  //margin-left: -25%;
  margin-top: -30px; // 横スライダーで位置基準を少し上に移動
  transform: rotate(-90deg); // 左に90度回転する
  margin-left: 15%; // -25%で中心。負値の追加で左へ。正値の追加で右へ。
}

そして、配置したスライダーウィジェットのプロパティのクラスに、"posision7"　を入力する。

プレビューで確認してみる。右端中央に表示できた！

以下は、上記の位置指定例に至った過程について。縦スライダーの位置をさらに調整したい場合には、この過程を理解するとよい。

過程１：画面の中央に縦スライダーを表示する

Vuforia Studioで、とりあえず、2D画面レイアウトの中央パネルに、スライダーウィジェットをドラッグ＆ドロップで配置してみる。プレビューで位置を確認すると、横スライダーになっている。

まずは、スライダーの位置を、画面中央にしてみる。
・Vuforia Studio CSS備忘録：2D画面上の指定位置にウィジェットを表示
を参考にして、以下の CSSを、Studioの画面左の「アプリケーション（Application）」に追加する。そして、配置したスライダーウィジェットのプロパティのクラスに、"posision3"　を入力し、プレビューで確認してみる。

.position3 {
  position:  fixed;
  top: 50%;
  left: 50%;
  width: 70%;
  margin-left: -35%;
}

スライダーが、ほぼ画面中央に表示されるが、やや下に表示される。位置の基準がスライダーの上側になっている様だ。

スライダーの細い側の幅のデフォルトは 60px のようなので、30px 上げてみる。クラス名は "position4"。

.position4 {
  position:  fixed;
  top: 50%;
  left: 50%;
  width: 70%;
  margin-left: -35%;
  margin-top: -30px; // 横スライダーで位置基準を少し上に移動
}

ほぼ中央に表示されたので、90度回転を追加する。＋が上になるように、左に 90度回転する。クラス名は "position5"。

.position5 {
  position:  fixed;
  top: 50%;
  left: 50%;
  width: 70%;
  margin-left: -35%;
  margin-top: -30px; // 横スライダーで位置基準を少し上に移動
  transform: rotate(-90deg); // 左に90度回転する
}

画面の中央に縦スライダーを表示できた！

過程２：縦スライダーの位置を変更する

中央の縦スライダーを右に移動してみる。クラス名は "position6"。

.position6 {
  position:  fixed;
  top: 50%;
  left: 50%;
  width: 70%;
  //margin-left: -35%;
  margin-top: -30px; // 横スライダーで位置基準を少し上に移動
  transform: rotate(-90deg); // 左に90度回転する
  margin-left: 5%; // -35%で中心。負値の追加で左へ。正値の追加で右へ。
}

この例では、右に画面幅の 40% 移動させるために、margin-left に 40% を追加した。

おぉ！ 右端に移動できた！
上下方向の移動は、margin-top を調整すればよさそうだ。

過程３：横長画面の場合への考慮

上記は、縦長画面での表示例だった。画面を回転して横長にするとどうなるか。スライダーが長くなり、画面におさまらなかったりする。これは、width に 70%を指定しているが、画面を横長にするとその横長の 70% がスライダーの長さになるため。
with を 50% にしてみる。with が 20% 減るので、margin-left はその半分の 10% プラスする。クラス名は "position7"。

.position7 {
  position:  fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  //margin-left: -25%;
  margin-top: -30px; // 横スライダーで位置基準を少し上に移動
  transform: rotate(-90deg); // 左に90度回転する
  margin-left: 15%; // -25%で中心。負値の追加で左へ。正値の追加で右へ。
}

できた！

様々な画面サイズ比で、縦長でも横長でも使えるようにするとなると、こんなところだろうか。
iPad など特定の端末機器で、縦長または横長のどちらで使う、など利用する画面の指定がある場合には、% での相対的な設定でなく、px値を直接設定してもよいだろう。

おわりに

Vuforia Studioで、スライダーウィジットを縦表示できると、より効果的なAR画面を、より簡単に作成出来る。いざというときに使える。
尚、スライダーウィジェットの見栄えを変更する CSSの設定については、また別の備忘録としたい。

参考

・Vuforia Studio CSS備忘録：2D画面上の指定位置にウィジェットを表示

・Vuforia Studio で作成できるAR例～タブレットAR例、3D形状の特徴で実物にARを重畳（モデルターゲット）、2D画面上の表示や操作を組合せ