前回はホットスポットをパノラマの中央に配置しましたが、適切な箇所に配置するには、パノラマの座標の仕組みを理解しておく必要があります。今回はその説明をした後に、「オプション」と「エディタ」の二つのプラグインの説明をします。ちょっとややこしいです。

1)パノラマの座標を知る。
2)「オプション」と「エディタ」を使えるようにする。
3)「オプション」を使って座標を知る。

パノラマの座標

krpanoで使われるパノラマの座標は、こんな感じです。



横(水平)方向はhorizontalなので「h」で表され、座標を指定する時は「ath」を使います。画面中央が0、右回りが+、左回りが-で、角度の数値を指定します。真後ろは、+180でもあり、-180でも、どちらも同じ位置になります。また、0も、+360も、-360も、真正面になります。
ただ注意しておきたいのは、0と+360と-360は、同じ正面ではあるのですが、値としては異なる、という点です。つまり、0は、何も回転していない状態の正面。+360は、右回りに一周した正面。-360は、左回りに一周した正面、であって、まったく同じではありません。+180も、-180も、同じ位置ですが、回転方向が異なりますので、全く同じではありません。

縦(垂直方向は、verticalてので、「v」で表され、座標を指定する時は、「atv」を使います。注意が必要なのは、上方向が-、下方向が+になっていることです。

「オプション」と「エディタ」を使えるようにする

「オプション(options.swf)」と「エディタ(editor.swf)」は、フラッシュで動くプラグインで、パノラマのさまざまな情報を得たり(オプション)、ホットスポットを設定したり(エディタ)することができます。ところが、krpanoのv19では、html5が優先されるようになったため、これらのプラグインを使う場合は、フラッシュでパノラマが開くような設定にしなければなりません。
なんだかなぁ、という気持ちなんですが、ちょっと面倒でもこれらの設定ができるようになっておいた他が、何かと便利です。手続きは以下の通り。

1.「オプション」と「エディタ」をコピーする。
2.オプション、エディタ、画面中央がわかる画像を記述する。
3.htmlファイルを改造する。
4.tour_testingserver をコピーする。

1.「オプション」と「エディタ」をコピーする。

「オプション(options.swf)」と「エディタ(editor.swf)」は、krpano-1.19 フォルダ>templates>xml>plugins フォルダの中に入っています。



中央を示す画像はこちらを使ってください。もちろん自作してもよいです。

これら3つのファイルを、pluginsフォルダを作って、パノラマのフォルダの中に入れます。



3つのファイルを入れたらokです。

2.オプション、エディタ、画面中央がわかる画像を記述する。

メインのxmlに、オプションやエディタを記述します。

 
	<!-- エディターとオプション -->
	<plugin name="editor" url="plugins/editor.swf" keep="true" />
	<plugin name="options" url="plugins/options.swf" keep="true" />
	<layer name="center" url="plugins/center.png" align="center" scale="0.5" capture="false" keep="true" />

上のコードを加えます。

3.htmlファイルを改造する。

元のhtmlファイルは、ファイル名が元画像の名称になっています。「tour_testingserver」を使うには、index.html もしくは tour.htmlにしないと、正しく開けません。サーバーに上げたりする場合にも、index.htmlの方が使いやすいので、こちらに書き換えます。

次に、htmlファイルを開き、最後の方にある、「html5:”prefer”」を 「html5:”never”」に書き換えます。これによって、パノラマがhtml5ではなく、flashで開き、オプションとエディタが使えるようになります。



4.tour_testingserver をコピーする。

ここまで作業を進めると、flashを使ってパノラマを開けるようになるのですが、ローカル上でパノラマを開こうとするとブラウザ側のセキュリティの問題でエラーになります。
テスティングサーバーを使って開けば問題ないのですが面倒ですので、tour_testingserver.exe (win) やtour_testingserver_macos(mac)をコピーして、これでパノラマを開きます。



3)「オプション」を使って座標を知る

tour_testingserver.exe (win) やtour_testingserver_macos(mac)をダブルクリックして開くと、こんな感じになります。↓をクリックするとパノラマが開きます。



画面右上に▼ボタンがあり、これをクリックすると、オプション画面が開き、パノラマを各種情報を読み取れるようになります。画面中央に配置した画像の中心が画面中央になり、オプションの上の方に表示されるath、atvが、この座標になります。


この値を読み取っていけば、ホットスポットを配置する座標を正確に得ることができます。
次回は画面下に表示されている「editor」ボタンの使い方を紹介します。

 

futter