今回は「エディタ」プラグインの使い方。これを使うと、画像を貼り付けるホットスポットを簡単に配置し、座標を記したコードを取得することができます。また、多角形(ポリゴン)のホットスポットを描いてコードを得ることもできます。これらの手順を紹介していきます。
他に、レンズフレアーを設置することもできるのですが、これは現状html5に対応していないので説明は略します。

1)エディタの使い方。
2)画像(イメージ)ホットスポットの設置。
3)多角形(ポリゴン)のホットスポットの設置。
4)xmlコードの取得。

1)エディタの使い方

エディタプラグインをパノラマに組み込むと、画面下に「editor」ボタンが表示されます。



これをクリックすると、メニューが表示されます。


左から
hotspots・・・・ホットスポットを加える時に使います
lensflares・・・レンズフレアを加える時に使います
xml・・・・・・・xmlコードを取得する時に使います
close・・・・・・閉じます

ホットスポット(hotspots)ボタンをクリックすると、こんな画面になります。


左ボタンから
add/edit polygonal hotspot・・・・多角形(ポリゴナル)ホットスポットを加えたり編集します
add image hotspot・・・・・・・・画像(イメージ)ホットスポットを加えます
back・・・・・・・・・・・・・・・ホットスポットを加えた後、このボタンを押して戻り、xmlボタンからコードを取得します

つまり、ボタンを操作して、行ったり来たりするわけです。

2)画像(イメージ)ホットスポットの設置。

add image hotspot ボタンをクリックすると、画像選択ウインドウが表示されますので、配置する画像を選びます。



ただしこの機能では、xmlに画像ファイル名しか登録されません。
このため、後で、画像をパノラマ内のフォルダなどにコピーすることと、そのディレクトリーを指定する必要があります。

画像を選択すると配置されますので、ドラッグして位置を指定します。


back→xml と進むことで、登録された画像のurlや座標などがxmlに記述されていることがわかります。
これを適宜、コピーするなり、xmlを保存するなどして活用します。



3)多角形(ポリゴン)のホットスポットの設置。

add/edit polygonal hotspot をクリックすると、多角形ホットスポットを描画できるモードに変わります。
左上が使用説明になっています。
基本的な流れは下記のとおり。

1)ダブルクリックで描画開始。○アイコンが表示され、マウスの動きに応じて線が引かれます。
2)クリックでポイントを固定。続けて、多角形を描いていきます。
3)ダブルクリックで、多角形を閉じます。

3)閉じた後で、ポイントを動かしたい時は、そのポイントを一度クリックし、マウスボタンから手を離した状態で動かします。
4)ポイント状でダブルクリックすると、そのポイントが消えます。

5)多角形の中でダブルクリックをすると、その多角形が消えます。

ちょっと慣れないとワケがわからないような感じです。
多角形を閉じた後で、ポイントを追加することはできませんから、少し多めにポイントを打っておく方がよいです。



back→xml と進むことで、登録された画像のurlや座標などがxmlに記述されていることがわかります。
これを適宜、コピーするなり、xmlを保存するなどして活用します。



4)xmlコードの取得。

前述したよう、ホットスポットを加えたら、back→xml と進みます。

xmlウインドウの右側にマウスを置くとスクロールボタンが表示されますので、それを動かして新しく加わったホットスポットの記述を探し、必要に応じて編集します。ここで、コードの追加編集やコピペができますが、検索はできません。これが結構残念なんですけど・・。

エディタで追加されたホットスポットは、名称が、hs1、hs2・・・と付けられますので、必要に応じて名称も変更します。

また、このxmlには、パノラマ表示のために読み込まれた全ての記述が表示されますので、多くの(あるいは長文の)xmlをインクルードしていると煩雑になりすぎてワケがわからなくなります。ホットスポット作成用のパノラマデータを生成した方がやりやすいです。



ボタンの機能は下記のとおりです。左から。

load this xml・・・・上に表示されているxmlを反映したパノラマ表示をします。
get generated xml・・ホットスポットを追加したxmlを取得し、上に表示します。
get original xml・・ホットスポット追加前の、元のxmlを取得し、上に表示します。
load from disk・・・他のxmlを読み込み、上に表示します。
save to disk・・・・上に表示されているxmlをディスクに保存します。
copy to clipboard・・xmlをクリップボードに保存します。
back・・・・・・・・上のxmlウインドウを閉じて戻る。

尚、ブラウザによってsave to diskが上手く機能しなかったり、エディタの動作に不具合が生じることがあるようです。
何か問題があったら、とりあえず別のブラウザで試してみるとよいです。

 

futter