「逆引きリファレンス」カテゴリーアーカイブ

マウスジェスチャー

動作

マウスの動きを判断して、上下左右の軌跡になる場合、マウスジェスチャとして処理し、該当イベント(LeftRightMove、 RightLeftMove、UpDownMove、 DownUpMove)を発生させます。

バージョン

Curl Advanced UI 0.5

API説明

GestureFrameクラス

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

利用方法

本クラスは標準APIのFrameを継承しているため、基本的にFrameと同じ使い方でインスタンスを作成できます。
ただし、当たり前ですがマウスジェスチャのイベントを処理するためのイベントハンドラーを作成する必要があります。

次の簡単な例です:

{let gf:GestureFrame = {GestureFrame {CommandButton width=5cm, height=5cm} ,background=”white”, width = 8cm, height = 8cm}}

{do
{gf.add-event-handler
{on LeftRightMove do
{popup-message “LeftRight moved”}
}
}
{gf.add-event-handler
{on RightLeftMove do
{popup-message “RightLeft moved”}
}
}
{gf.add-event-handler
{on UpDownMove do
{popup-message “UpDown moved”}
}
}
{gf.add-event-handler
{on DownUpMove do
{popup-message “DownUp moved”}
}
}
}

 

サンプル

t-mouse-gesture.dcurl

関連Curl標準API

Frame
Event

 

画像を立体的に見せるフレーム

動作

画像を立体的に見せるフレームです。

バージョン

Curl Advanced UI 0.5

API説明

SolidBorderFrameクラス

パッケージ

COM.CURLAP.ADVANCED-UI.UTILS

利用方法

とても簡単。

SolidBorderFrameクラスのコンストラクタの引数に目的の画像(URL)を渡すだけ。

 

{SolidBorderFrame {url “./images/normal_lighthouse1.jpg”}}

 

引数で渡された画像を”いい感じ”に立体的に表示します。

サンプル

t-border.curl

関連Curl標準API

Frameクラス

borderオプション

イベント・マネージャ

動作

各コントロールのイベント間でコントロール操作をスパゲッティ状にコーディングすることを避けるため、イベントを一元管理します。これにより、コントロール間の依存関係を排除することができます。 

バージョン

Curl Advanced UI 0.5

API説明

EventManagerクラス

  イベントを一元管理するクラスです。 

パッケージ

  COM.CURLAP.ADVANCED-UI.EVENTS

スーパークラス

  なし

プロパティ

  なし

メソッド

  register  (管理するイベントを登録) ※fromで指定したコントロールのイベントが発生した際、toのイベントを発生させることができます。
    引数1(from:EventTarget):fromコントロール
    引数2(from-event-class:ClassType):fromイベント
    引数3(to:EventTarget):toコントロール
    引数4(to-event-class):toイベント
   戻り値:int  *管理ID(EventManagerの中で一意)

  register-some-events  (管理するイベントを複数登録)
    引数1(from:EventTarget):fromコントロール
    引数2(from-event-class:ClassType):fromイベント
    引数3(to-events:{Array-of {Tuple2-of EventTarget, Event)}:toコントロールとイベント(複数)
   戻り値:{Array-of int}  *管理ID(EventManagerの中で一意)

  unregister (管理するイベントの解除)
    引数1(manage-id:int):解除する管理ID (管理IDは登録時に取得します。)
   戻り値:void 

  unregister-some-events (管理する複数イベントの解除)
    引数1(manage-ids:{Array-of int)}:解除する管理ID (管理IDは登録時に取得します。)
   戻り値:void 

  clear (すべての管理するイベントを解除)
   戻り値:void 

 

NotifyEventクラス

  呼び出し元のコントロールやイベントをもつ通知Eventです 

パッケージ

  COM.CURLAP.ADVANCED-UI.EVENTS

スーパークラス

  Event

プロパティ

  subject:EventTarget  呼び出し元のコントロール
  subject-event-class:ClassType 呼び出し元のイベント

 

利用方法

EventManagerのインスタンスを生成し、registerメソッドに呼び出し元のコントロールとイベント、呼び出すコントロールとイベントを引数にセットし、実行します。これにより、呼び出し元のイベントが発生したと同時に、呼び出し先のイベントを起動します。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.EVENTS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet
    {manifest-url “file”, “DEFAULT-STYLE-SHEET”}
}

{value
    || from event.
    let rf:RadioFrame =
        {RadioFrame
            {spaced-hbox
                {RadioButton label = “user”, radio-value = “user”},
                {RadioButton label = “guest”, radio-value = “guest”}
            },
            value = “user”||,
            ||{on e:ValueChanged at v:RadioFrame do
            ||    {dump e, v}
            ||}

        }

    || to event.
    let tf1:TextField =
        {TextField
            {on e:NotifyEvent at v:TextField do
                let value:String =
                    (e.subject asa ValueControl).value-as-any
                    ||{if e.subject isa RadioFrame then
                    ||    (e.subject asa RadioFrame).value
                    || else
                    ||    (e.subject asa TextField).value
                    ||}

                {if value == “user” then
                    set v.enabled? = true
                    set v.value = “”
                 else
                    set v.enabled? = false
                    {if e.subject-event-class == ValueChanged then
                        set value = {value.to-upper-clone}
                    }
                    set v.value = value
                }
                {dump e, v}
            }
        }

    let tf2:TextField =
        {TextField
            {on e:NotifyEvent at v:TextField do
                {if (e.subject asa RadioFrame).value == “user” then
                    set v.enabled? = true
                    set v.value = “”
                 else
                    set v.enabled? = false
                    set v.value = (e.subject asa RadioFrame).value
                }
            }||,
            ||{on e:ValueChanged at TextField do
            ||    || do nothing
            ||
}
        }

    || new EventManager and register.
    def manager = {EventManager}
    {manager.register rf, ValueChanged, tf1, NotifyEvent}
    {manager.register rf, ValueChanged, tf2, NotifyEvent}
    {manager.register tf2, ValueChanged, tf1, NotifyEvent}

    {spaced-vbox
        rf,
        tf1,
        tf2,
        {CommandButton
            label = “remove”,
            {on Action do
                ||{manager.unregister id2}
                {manager.clear}
            }
        }
    }
}

 

RadioFrame(rf)の値が変わったら、TextField(tf1)とTextField(tf2)のNotifyEventが実行されます。また、TextField2の値を変化させた場合、TextField1のNotifyEventが実行されます。

サンプル

イベントマネージャサンプル

関連Curl標準API

Event
EventTarget

 

フィッシュアイ・メニュー

動作

Macのメニューのようにポインターの場所によって滑らかに大きさが変化します。
またクリックしたときの動作を3つ用意しています。

 

バージョン

Curl Advanced UI 0.5

API説明

FishEyeSubMenuクラス

後述するFishEyeMenuBarの中で表示されるアイコンになります。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

Frame

コンストラクタ

default
位置引数(urll):表示されるアイコン画像のurl

メソッド

なし

FishEyeMenuBarクラス

FishEyeSubMenuを表示し、クリックした場合のイベントやアニメーションを発生させます。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

HBox

コンストラクタ

default
キーワード引数(default-icon-size):表示されるアイコンのサイズ
キーワード引数(click-animation:ClickAnimation=”twirl”):アイコンをクリックしたときに発生するイベントの種類(”twirl”,”flash”,”warp”)

メソッド

なし

利用方法

FishEyeMenuBarの中にFishEyeSubMenuのインスタンスを必要なだけ生成し、表示します。

{curl 6.0 applet}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.CONTROLS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet {manifest-url “file”, “DEFAULT-STYLE-SHEET”}}

{value
    {FishEyeMenuBar
        valign=”bottom”,
        width=25cm,
        height=5cm,
        click-animation=”flash”,
        defalt-icon-size=3cm,
        {FishEyeSubMenu {url “images/archive.png”}},
        {FishEyeSubMenu enabled?=false, {url “images/bar_chart.png”}},
        {FishEyeSubMenu {url “images/cd.png”}},
        {FishEyeSubMenu {url “images/configuration.png”}},
        {FishEyeSubMenu {url “images/copy.png”}},
        {FishEyeSubMenu {url “images/database.png”}},
        {FishEyeSubMenu {url “images/email.png”}},
        {FishEyeSubMenu {url “images/folder_lock.png”}},
        {FishEyeSubMenu {url “images/image.png”}},
        {FishEyeSubMenu {url “images/messenger.png”}},
        {FishEyeSubMenu {url “images/movie.png”},
            {on PointerPress do
                {popup-message “押されました!”}
            }
        }
    }
}

 

関連Curl標準API

Menu 

ズームテキストフィールド

動作

TextFieldの内容を入力する際、ズームして入力できる。(小さな項目でも見やすいUIとなる)

バージョン

Curl Advanced UI 0.5

API説明

ZoonTextFieldクラス

TextFieldを拡張した入力時に文字とTextFieldがズームされるクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TextField

コンストラクタ

default
キーワード引数(popup-widht:any = null):ズームの幅
キーワード引数(popup-height:any = 1cm):ズームの高さ
キーワード引数(popup-font-size:any = 20pt):ズーム時のフォントサイズ
キーワード引数(popup-color:any = “black”):ズーム時の文字列の色
キーワード引数(popup-title:String = {host-localize “Pop-up Window”}):ズーム時のDialogのタイトル

メソッド

なし

利用方法

ズームテキストフィールドを利用するには、コンストラクタ呼び出し時に上記キーワード引数を指定します。

{curl 6.0 applet}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.CONTROLS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet {manifest-url “file”, “DEFAULT-STYLE-SHEET”}}

{View
    {spaced-vbox
        {ZoomTextField
            popup-title = “field1”
        },
        {ZoomTextField
            popup-title = “field2”,
            popup-color = “red”,
            value = “abc”
        },
        {ZoomTextField
            popup-title = “field3”,
            value = “xyz”
        }
    },
    visibility = “normal”,
    {on WindowClose do
        {exit}
    }
}

 

サンプル

t-zoom-textfield.dcurl

関連Curl標準API

TextField
 

One-click-ファイル選択テキストフィールド

動作

TextFieldをワンクリックするだけで、ファイル選択メニューが表示されます。

またオプションとして、ファイルサイズチェックも行います。

バージョン

Curl Advanced UI 0.5

API説明

OneClickTextfieldクラス

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

 

プロパティ

editable?:bool TexTfieldに直接編集が行えるかどうかを判別する値(default値はfalse)
min-size:int64 許容する最小のファイルサイズ(default値は0KB)
max-size:int64 許容する最大のファイルサイズ(default値は 100GB)

 

コンストラクタ

default
キーワード引数(editable?:bool = false):TextFieldを直接編集可能かどうかの判定
キーワード引数(min-size:int64 = 0):許容する最少ファイルサイズ
キーワード引数(max-size:int64 = 100000000):許容する最大ファイルサイズ(KBで換算)   

メソッド

on-pointer-release イベントの取得
戻り値: void

set-value-with-limitation ファイルサイズの上限、下限チェック
戻り値: void

利用方法

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.CONTROLS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet {manifest-url “file”, “DEFAULT-STYLE-SHEET”}}

{value
def octf:OneClickTextField = {OneClickTextField
width = 300pt,
min-size = 20,
max-size = 1000
}
{spaced-vbox
octf,
{TextField}
}
}

選択したファイルのURLが、プロパティで指定したファイルサイズの範囲内であれば、その値をTextFieldにセットします。

サンプル

t-oneclick-textfield.curl

 

 

関連Curl標準API

TextField

Google Sketchupから Curl 3D Galleryへファイルを読み込む方法

Curl 3D Galleryのダウンロードはこちらから
pcurl版(ユーザー用)
ソースコード版
(開発者用、sourceforge.net)

まずは、Curl 3D Gallery, Google SketchUpの連携に登場するファイル拡張子をご紹介します。


xxx.skp Google SketchUpモデルファイルです。このファイルを実行するとGoogle SketchUpが立ち上がります。

xxx.kmz Google Earth KMZ ファイルです。 このファイルを実行するとGoogle Earthが立ち上がります。
このファイルはGoogle Sketchup から、3Dモデルにエクスポートすることで生成されます。このファイルはkmlファイルを圧縮した形式のファイルです。

xxx.kml (通常はdoc.kml) Google Earth KML ファイルです。このファイルはkmzファイルを解凍すると生成されます。(Curl 3D Galleryでは、この形式のファイルを読み込みます。


次にファイルを変換していく方法をご紹介します。

流れは [Google Sketchup xxx.skp – Google Sketchup で エクスポート → xxx.kmz – 解凍 → xxx.kml Curl 3D Gallery で読み込み] という流れになります。

詳細な手順

皆さんが3Dモデルを Google 3D Gallery から取得してくる場合、そのファイルは xxx.skp という拡張子のファイルとなっています。

*モデル選択の目安は1MBサイズ程度のものまでで、複雑さも中程度までのものが、Curl 3D Galleryでスムーズに動かすポイントです。

まずは、このファイルを実行し、 Google Sketchupを立ち上げます。メニューバーの[ファイル]→[エクスポート]→[3D モデル]を選択し、ファイルを任意のフォルダに保存します。このときの保存形式は、xxx.kmz となっているはずです。


次に、この xxx.kmzファイルを解凍します。このファイルはzip形式と同様に解凍が可能です。

KMZファイル解凍の方法:ファイルをダブルクリックすると、Google Sketchupが立ち上がってしまいますので、解凍ソフト(よく出回っているものでOKです)をインストールしたのち、右クリックメニューから解凍、もしくは、ファイルの拡張子を kmz から zip に書き換えて解凍してください。

解凍先のフォルダの中に、xxx.kml (doc.kml)というファイルができていますか?

できていれば、このファイルを Curl 3D Gallery で読み込みます。

*注意:ローカルで起動した場合は、メニューが表示されますが、サーバで起動し、モデル情報をクエリ文字列にて指定した場合は、メニューは表示されなくなります。(詳細はこちら。)


どうでしょうか? 3D空間が再現されましたでしょうか?


もっときれいに再現するために

・イメージファイルを抽出するためには、Rubyのdxf出力サンプルをカスタマイズして使用します。
(dfx出力サンプルはこちら
SketchUpの「Plugins」フォルダにコピーして、再起動すると、Pluginsメニューに、LineDXF-3D==Faceが追加されます。(
Curl 3D Galleryのダウンロードはこちらから


出力対象のデータを選択状態にして、実行すると、DXFの出力先設定ダイアログが表示され、実行時に、選択した面で使用されているテクスチャイメージが、「C:textures」に出力されます。
(出力先は、固定にしていますので、Rubyスクリプトを変更し任意のディレクトリを指定してください。)
GetTexture.rbの40行目、tw.write_all(“C:\textures”, false) の部分を任意のディレクトリに変更します。

※ただし、ファイル名と、kmzで出力されたStyle名が異なる場合があるようです。その場合は、どちらかの名称の変更が必要になります。


Curl 3D Gallery 操作編-基本操作-

Curl 3D Galleryのダウンロードはこちらから
pcurl版(ユーザー用)
ソースコード版
(開発者用、sourceforge.net)

Google Sketchupのダウンロードはこちらから

この章では、Curl 3D Galleryの基本的な操作方法をCurl 3D Galleryに付属しているサンプルデータを用いて、説明していきます。

まずは、Curl 3D Galleryの機能をリストアップします。

・壁を認識した3D空間のウォークスルー
・リンク情報の読み込み(リンク情報とは、情報を持った画像のことです)
・リンク情報の貼り付け
リンク情報に関する機能
・URLリンク機能
・エレベーター機能
・モデルからモデルへの移動

・自分が動いた行動の記憶
・全体像の表示、全体像の表示からの移動
見た目や動きの設定変更

*注意:ローカルで起動した場合は、メニューが表示されますが、サーバで起動し、モデル情報をクエリ文字列にて指定した場合は、メニューは表示されなくなります。(詳細はこちら。)以下の操作は、モデル情報をクエリ文字で指定していない場合のみ有効な操作になります。

1.モデルの読み込み

起動画面は以下のようなイメージです。

「モデル情報読込み」にて、モデル情報ファイルを読み込みます。(”3D-GallerydataMusiamdoc.kml”)

モデル情報が読み込まれた状態

続いて、基本的な操作方法です。

2.基本的な操作の説明

操作に関する、画面右側のコントローラに関しての図説はこちらを参考にしてください。

次に画面上部にある各メニューの説明です

ファイル                    
モデル情報読み込み      …  モデル情報を読み込みます。        
リンク情報読み込み      …  リンク情報を読み込みます。        
リンク情報書き込み      …  リンク情報を書き込みます。        
操作履歴書き込み        …  操作履歴を読み込みます。        
操作履歴読み込み        …  操作履歴を書き込みます。        

編集                    
リンク情報設定          …  リンク情報の新規作成、既存編集を行います。        
リンク情報リスト        …  リンク情報をリスト形式で表示し、編集、削除を行います。        
操作履歴登録            …  操作履歴登録ダイアログを表示します。        
操作履歴再生            …  操作履歴を再生します。        
操作履歴クリア          …  操作履歴をクリアします。 

設定
カメラ リセット        …  カメラを起点位置に戻し、カメラパラメータも初期地に 戻します。        
パラメータ設定         …  カメラ パラメータ設定ダイアログを表示します。  

3.リンク情報の読み込み

リンク情報とは、壁や床に張られた、情報を持つイメージ画像の情報のことです。

「リンク情報読込み」にて、リンク情報ファイルを読み込みます。 (”3D-GallerydataMusiamLink.inf”)

リンク情報が読み込まれた状態

4.操作履歴情報の読み込み

操作履歴情報とは、自分の動いた動作記録のことです。操作履歴の作成方法は別の章でご説明いたします。

「操作履歴情報読込み」にて、操作履歴情報ファイルを読み込みます。 (”3D-GallerydataMusiamHistory.ope”)

操作履歴情報が読み込まれた状態

5.全体表示

全体表示では、モデルの上空から、モデルを眺め、指定したポイントに移動することが可能になります。

図による説明はこちら


6.惰性モード

惰性モードとは、Google Earthの挙動のように惰性で動くことを可能にするモードです。
どうでしょうか?基本的な操作はできましたか?

Curl 3D Gallery 操作編-応用操作-ではよりインタラクティブな操作の方法をご紹介しています。


Curl 3D Gallery 操作編-リンク情報設定-

Curl 3D Galleryのダウンロードはこちらから
pcurl版(ユーザー用)
ソースコード版
(開発者用、sourceforge.net)

Curl 3D Galleryでは、壁や床にリンク情報を画像ともにはりつけることが可能です。この章では、どのようにリンク情報を扱うかを説明します。

*注意:ローカルで起動した場合は、メニューが表示されますが、サーバで起動し、モデル情報をクエリ文字列にて指定した場合は、メニューは表示されなくなります。(詳細はこちら。)以下の操作は、モデル情報をクエリ文字で指定していない場合のみ有効な操作になります。

リンク情報の作成

リンク情報の作成、編集は、「リンク情報設定」メニューを押下します。

「配置面指示」ボタンを押下して、貼り付ける面を指示します。

貼り付ける面の張り付けたい位置の左下座標を指示します。

指示された面のID番号と左下座標が反映されます。

各パラメータの値を設定し、「実行」ボタンを押下します。(右上座標も画面指示できます。)

指示した面に貼り付けられます。

リンク情報を押下すると、指定した内容のポップアップ画面が表示されます。

「リンクを新規に開く」をクリックすると、新規ウインドウで、設定したURLリンクのページを開きます。



Curl 3D Gallery 操作編-操作履歴設定-

Curl 3D Galleryのダウンロードはこちらから
pcurl版(ユーザー用)
ソースコード版
(開発者用、sourceforge.net)

Curl 3D Galleryでは、自分の操作した情報を保存し、再現することが可能です。この章では、操作履歴の設定、保存、再現方法をご紹介いたします。

*注意:ローカルで起動した場合は、メニューが表示されますが、サーバで起動し、モデル情報をクエリ文字列にて指定した場合は、メニューは表示されなくなります。(詳細はこちら。)以下の操作は、モデル情報をクエリ文字で指定していない場合のみ有効な操作になります。

操作履歴登録画面の説明

操作履歴数              
記憶している操作履歴の数が表示されます。           

自動登録              
マウスオペレーション、移動操作、カメラ回転による操作を自動的に履歴に記憶します。           
操作の時間間隔も実時間で記憶されます。           

操作履歴登録              
現在位置、カメラ方向を記憶します。本登録では、前回の操作位置から滑らかな移動           
を行います。滑らかさは、分割数により調整できます。           

操作履歴は、追記されます。 クリアしたい場合は、メニューの「操作履歴クリア」で行います。

メニューの[設定]→[操作履歴再生]から、操作履歴を再生します。

操作履歴再生画面の説明

実行/中断                    
トグルボタンとなっており、押下中、操作履歴を再生します。                 

繰り返し再生                    
操作履歴が最後まで再生された際に、最初に戻るのかを指定します。                 

実行状況                    
再生中の操作履歴と操作履歴数を表示します。                 
スクロールバーの移動により、任意の操作履歴を表示することができます。

操作履歴の保存方法

メニューの[設定]→[操作履歴登録]から、操作履歴を保存します。

図での説明はこちらをご覧ください。

操作履歴ファイルの構造の情報についてはこちらをご覧ください。

Curl 3D Gallery 各種設定編

Curl 3D Galleryのダウンロードはこちらから
pcurl版(ユーザー用)
ソースコード版
(開発者用、sourceforge.net)

ここでは、各種設定の説明を行います。

*注意:ローカルで起動した場合は、メニューが表示されますが、サーバで起動し、モデル情報をクエリ文字列にて指定した場合は、メニューは表示されなくなります。(詳細はこちら。)以下の操作は、モデル情報をクエリ文字で指定していない場合のみ有効な操作になります。

まずは、パラメーターの設定を見てみましょう。

メニューにある[設定]→[パラメーター設定] から現在の設定情報の確認、変更が可能です。

パラメーターの設定

位置 (X座標、Y座標、Z座標)                  
現在の位置座標となっています。               

方向 (方位角、仰角)                  
方位角は、Y軸(デフォルト前方)を0として、反時計回りで指定します。               
仰角は、水平0で、-90°(真下)~80°の範囲で設定できます。               

視野角                  
Sceneのcameraの視野角となります。               

近クリップ面・遠クリップ面                  
Sceneのcameraの近クリップ面・遠クリップ面となります。               

移動量                  
マウス1ドット移動時の移動距離を設定します。 (左ボタン押下オペレーション)               

回転量 
マウス1ドット移動時の回転角度を設定します。 (右ボタン押下オペレーション)               

イベント最大
内部でのイベント保持の最大数 大きくすると遅延が中くなる場合があります。                
ただし、別の操作実行時(いったんマウスボタンを離すと別操作となります。)には、リセットされます。               

マウス比率 
マウスの移動量を増幅させます。 大きな値にすると、わずかな移動でも、大きな移動量となります。               

霧効果 
霧効果のON/OFFを設定します。               

霧開始距離・霧終了距離
霧効果の有効距離を設定します。               

アニメーション 
アニメーションGIFをアニメーション表示するかをON/OFFで設定します。               

更新間隔 
アニメーションの更新間隔を設定します。

図での説明はこちらをご覧ください。

Curl 3D Gallery 3Dモデル作成編-Google Sketchupを使ったモデル作成-

この章では、Google Sketchupを使った3Dオブジェクトを作成し、それをCurl 3D Galleryで読み込むことができる形式に変換するまでの流れをご紹介いたします。

まずは、Curl 3D Galleryのダウンロードと、Google Sketchupのダウンロードから始めましょう。

Curl 3D Galleryのダウンロードはこちらから
pcurl版(ユーザー用)
ソースコード版(開発者用、sourceforge.net)


Google Sketchupのダウンロードはこちらから


次にモデルの作成方法ですが、2つの方法があります。1つは自らGoogle SketchUpを利用し作成する方法、もう1つは既に存在するモデルを利用する方法です。以下にその2つの利用方法を記載します。

A: 自分で1から作成する場合

A-1.Google Sketchupを起動します。

*tips:寸法の調整
Google Sketchupの初期設定では寸法はインチ表示になっています。
Curl 3D Galleryでの壁の貼り付け、移動等の調整はミリ単位で行っていますので、Google Sketchupの単位を調整しておくと、見やすいかもしれません。

(調整の方法)


A-2.モデルを作成します。
今回は、簡単に床のみを作成してみましょう。

緑と赤の線上に面を作成します。

A-3.モデルのエクスポートを行います。

A-4.KMZファイルの解凍を行います。
エクスポートされて生成されたkmz形式のファイルはzip形式のファイルと同様に解凍することができます。

KMZファイル解凍の方法:ファイルをダブルクリックすると、Google Sketchupが立ち上がってしまいますので、解凍ソフト(よく出回っているものでOKです)をインストールしたのち、右クリックメニューから解凍、もしくは、ファイルの拡張子を kmz から zip に書き換えて解凍してください。

解凍されたファイルの中には、doc.kmlという形式のファイルが含まれています。

A-5.Curl 3D Galleryで読み込み。

*注意:ローカルで起動した場合は、メニューが表示されますが、サーバで起動し、モデル情報をクエリ文字列にて指定した場合は、メニューは表示されなくなります。(詳細はこちら。)


Curl 3D Galleryを起動し、[ファイル]->[モデル情報読み込み]を選択し、先ほど解凍されたファイルの中の、doc.kmlという形式のファイルを読み込みます。

いかがですか?
足もとに床が貼られたと思います。

ファイル変換が難しいですか?具体的な説明はこちら

B:Google 3D Galleryからファイルを読み込む場合


1から自分でモデルを作成しなくても、Google 3D Galleryからモデルをダウンロードし、使用することができます。

B-1.Google 3D Galleryからモデルをダウンロードする。

*モデル選択の目安は1MBサイズ程度のものまでで、複雑さも中程度までのものが、Curl 3D Galleryでスムーズに動かすポイントです。

B-2.以降はA-3からA-5までの手順と同様です。

モデルを作成する際の注意点

・面の表、裏には、気を付けてください。SketchUpの場合、裏面が見えていて、裏面にテクスチャを貼り付けていても、正しく見えますが、ファイルには、表面の情報しか出力されませんので、テクスチャの貼られていない面として表示されてしまうことになります。また、法線ベクトルも逆向きとなってしまいます。

参考ファイル

よりきれいに再現するために

・イメージファイルを抽出するためには、Rubyのdxf出力サンプルをカスタマイズして使用します。
(dxf出力サンプルのダウンロードはこちら
SketchUpの「Plugins」フォルダにコピーして、再起動すると、Pluginsメニューに、LineDXF-3D==Faceが追加されます。

出力対象のデータを選択状態にして、実行すると、DXFの出力先設定ダイアログが表示され、実行時に、選択した面で使用されているテクスチャイメージが、「C:textures」に出力されます。
(出力先は、固定にしていますので、Rubyスクリプトを変更し任意のディレクトリを指定してください。)
GetTexture.rbの40行目、tw.write_all(“C:\textures”, false) の部分を任意のディレクトリに変更します。

※ただし、ファイル名と、kmzで出力されたStyle名が異なる場合があるようです。その場合は、どちらかの名称の変更が必要になります。

・面の取り込みは、すべて三角形に分割して行っています。そのため、凹凸の激しい部分が極力ないモデルの方が、生成される面の数も減り、レスポンスもよくなります。ただし、テクスチャを張っている場合は、それらの境界部分がきれいに見えない(テクスチャがズレてしまう)ことがあり得ます。

・床と天井のように、隣り合う面は、隙間を空けて頂きますようお願いします。あまり接近しすぎていますと、Curl 3D Galleryでの表示の際に、両者が重なって、おかしく見えてしまう可能性があります。(10cm程度空けることが目安です。)

Curl 3D Gallery ローカル起動とサーバ起動の振る舞いの違い

Curl 3D Galleryのダウンロードはこちらから
pcurl版(ユーザー用)
ソースコード版
(開発者用、sourceforge.net)

ローカルで起動した場合は、メニューが表示されますが、サーバで起動し、モデル情報をクエリ文字列にて指定した場合は、メニューは表示されなくなります。

例: 下記のURLでは、メニューは表示されなくなります。
URL: http://localhost/curl/gallery/start.curl?model=data/Museum/doc.kml&link=data/Museum/link.inf&operation=data/Museum/History.ope )

クエリ文字列

model : モデル情報URL。start.curlからの相対パスで指定します。

link : リンク情報URL。start.curlからの相対パスで指定します。

operation : 操作履歴URL。start.curlからの相対パスで指定します。

emacsでCurl

Curlをemacsで利用する方法を記載します。

Curl IDEをインストールしますと、Curlインストールディレクトリに標準でelファイルがインストールされます。(無料IDEでも存在します。)

(Windowsの場合)
…./Curl Corporation/Surge/7/ide/share/emacs/site-lisp/curl.el

このファイルをロードしますとemacsでCurlが利用することができるようになります。

 

XPathを利用したXMLハンドリング

 

XMLのハンドリングについて、Curlでは、いくつかの方法が用意されています。
ここでは、WSDKというCurlの開発をサポートするキットで提供されている、
XPath表現を使ったハンドリングの例をご紹介します。

このエントリで紹介するアプリでは、顔ラボ から提供されている、画像の顔位置検出APIのXMLデータを利用しています。
顔ラボのサービスに画像のURLを渡すと、顔情報が保持されたXMLが返却されます。

 

■顔ラボ 返却XML例

<results version=”1.0″ xmlns=”http://xmlns.kaolabo.com/detect”>
   <faces>
     <face height=”60″ score=”742″ width=”60″ x=”234″ y=”117″>
        <left-eye x=”275″ y=”136″ />
        <right-eye x=”253″ y=”136″ />
     </face>
     <face height=”48″ score=”705″ width=”48″ x=”303″ y=”138″>
        <left-eye x=”336″ y=”153″ />
        <right-eye x=”318″ y=”153″ />
     </face>
     <face height=”36″ score=”505″ width=”36″ x=”134″ y=”143″>
        <left-eye x=”159″ y=”153″ />
        <right-eye x=”145″ y=”153″ />
     </face>
  </faces>
</results>

 results タグの中に、顔として認識されたブロックの位置情報が face タグとして格納されています。
各 face タグ の中には、属性として各顔位置情報が、
タグとして目の位置情報がそれぞれ格納されています。

顔ラボの詳細な仕様については、 http://kaolabo.com を見てください。

 

■顔マスクアプリ解説

顔マスクアプリ ([developers.curlap.com] に対する特権が必要です。)

アプリケーションダウンロード

上記WEBサービスを利用した顔マスクアプリケーションでは、
start.curl内の、下記コード部にて、返却されたXMLをXPathで解析しています。

|| XML構造をモデル化
let model:XDMElement = {build-xml preserve-whitespace? = false, strb}.root

・・・

|| 画像内の顔位置を示すXMLを解析する
{for i:int = 0 to ({model.search “//*[name()=’face’]”}.size) do

    let fr:ImageMask =
        {ImageMask
            {url “laughing-man-mini.gif”},
            height = ({model.search “//*[name()=’face’][” & i &”]/@height”}.as-int) * 1px,
            width = ({model.search “//*[name()=’face’][” & i &”]/@width”}.as-int) * 1px
        }
       
    {c.add
        fr,
        x = ({model.search “//*[name()=’face’][” & i &”]/@x”}.as-int) * 1px,
        y = ({model.search “//*[name()=’face’][” & i &”]/@y”}.as-int) * 1px + fr.height
    }
}

■{build-xml preserve-whitespace? = false, strb}

build-xml プロシージャを利用することで、対象のXMLをモデル化することが出来ます。
XDMDocument.root から XDMElementクラス型のXMLツリー全体を取得しています。

■{model.search “//*[name()=’face’]

{XDMElement.search XPath表現} では、XPath表現に合ったノードが、XDMNodeSetとして返却されます。
ここでは、XML内のタグで face という名前のタグをを取得しています。

さらに XDMNodeSetのサイズを、for文のカウントとして利用しています。

これによってXML内の顔情報の数だけループすることになります。

■{model.search “//*[name()=’face’][” & i &”]/@height”}

ループのカウントを表す変数 i を使って、順番に顔情報のタグを扱っています。
属性情報を取得するXPath表現である @ を利用して、height という属性の値を取得しています。

また、XDMNodeSet.as-int で、返却されたデータを int型で扱うようにしています。

 

XPathは、このプログラムで利用している表現以外にも、いろいろな書き方があります。
下記リソースなどを利用して、簡易なXMLハンドリングを試してみてください。

■XPath W3C 勧告
http://www.infoteria.com/jp/contents/xml-data/REC-xpath-19991116-jpn.htm

■XPath の概要
http://msugai.fc2web.com/java/XML/XPath.html

ファイルサイズチェック

動作

選択したファイルサイズをチェックするコンポーネントです。

バージョン

Curl Advanced UI 0.5

API説明

choose-file-with-limitationプロシージャ

パッケージ

COM.CURLAP.ADVANCED-UI.UTILS

 

プロパティ

style:FileDialogStyle = FileDialogStyle.read ファイルチェックなので、読み取り専用のファイルダイアログになります。
default-location:#Url = null                       ダイアログを表示する最初の場所既定の値です。
filters:{Array-of FileDialogFilter}
= FileDialogFilter.all-files-filter-array   フィルターをかけるファイル種別です。
owner:#View = null                     ファイル ダイアログのモーダルの親
title:#String = null                     ポップアップするファイルのタイトル
min-size:int64 = 0                     許容する最小のファイルサイズ(default値は0KB)
max-size:int64 = 100000000             許容する最大のファイルサイズ(default値は 100GB)

戻り値

Url:選択したファイルのURL
bool:指定したサイズの範囲内にいるかどうかの判定

利用方法

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.UTILS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet {manifest-url “file”, “DEFAULT-STYLE-SHEET”}}

{CommandButton
{on Action do
{def (file-url, flg) = {choose-file-with-size-range min-size = 1, max-size = 10}}
{popup-message file-url & ” ” & flg}
}
}

指定したファイルのURLと、そのファイルがプロパティで指定したファイルサイズの範囲内であるかどうかの値を返します。

サンプル

t-choose-file.curl

関連Curl標準API

choose-file

バリデーションチェック・フィールド

動作

入力バリデーションチェックをしてくれるTextFieldです。

 

バージョン

Curl Advanced UI 0.5

API説明

ValidationTextFieldクラス

  バリデーションチェックのTextFieldクラスです 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  MultiUIValueControlFrame-of

コンストラクタ

  default
    キーワード引数(ui-object:#ValidationTextFieldUI = null):ValidationtextFieldのUI
    キーワード引数(ok-image:#Url = null):バリデーションチェックOKのイメージ
    キーワード引数(ng-image:#Url = null):バリデーションチェックNGのイメージ

メソッド

  なし

利用方法

ValidationTextFieldのインスタンスを生成します。バリデーションチェックはvalidate-withマクロを利用し、指定します。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.CONTROLS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet {manifest-url “file”, “DEFAULT-STYLE-SHEET”}}

{value

    {spaced-vbox
        {text Normal TextField},
        {TextField
            {validate-with
                {NumericValidator}, required? = true
            },
            {on e:ValidationComplete at v:TextField do
                {if v.valid? then
                    {dump e, v}
                }
            }
        },

        {text ValidationTextField},
        {ValidationTextField
            {validate-with
                {NumericValidator},
                required? = true,
                dialog-on-finished? = false
            }
        },

        {ValidationTextField
            prompt = “Just numeric value.”,
            ok-image = {url “images/1.png”},
            ng-image = {url “images/5.png”},
            height = 2cm,
            width = 10cm,
            font-size = 1cm,
            color = “red”,
            {validate-with
                {NumericValidator},
                required? = true,
                dialog-on-finished? = false
            },
            || NOTE: v:CoreTextField (not ValidationTextField)
            {on e:ValueFinished at v:CoreTextField do
                {dump e, v.value}
            }
        }

    }
}

TextFieldに入力しますとバリデーションチェックが行われ、チェックがOKであればok-imageが表示され、NGであれば、ng-imageが表示されます。

サンプル

バリデーションチェック 

関連Curl標準API

TextField

 

ガイドプロンプト

動作

TextFieldやTextAreaなどのコントロールに、入力ガイドプロンプトを表示する。

 

バージョン

Curl Advanced UI 0.5

API説明

CoreTextFieldクラス

  Advanced UIのTextField基本クラスです。 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  TextField

コンストラクタ

  default
    キーワード引数(prompt:#String = null):プロンプト文字列
    キーワード引数(prompt-color:FillPattern = “grey”):プロンプト文字列の色
    キーワード引数(prompt-background = “white”):プロンプト文字列の背景色

メソッド

  なし

CoreTextAreaクラス

  Advanced UIのTextArea基本クラスです。 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  TextArea

コンストラクタ

  default
    キーワード引数(prompt:#String = null):プロンプト文字列
    キーワード引数(prompt-color:FillPattern = “grey”):プロンプト文字列の色
    キーワード引数(prompt-background = “white”):プロンプト文字列の背景色

メソッド

  なし

CoreDateFieldクラス

  Advanced UIのDateField基本クラスです。 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  DateField

コンストラクタ

  default
    キーワード引数(prompt:#String = null):プロンプト文字列
    キーワード引数(prompt-color:FillPattern = “grey”):プロンプト文字列の色
    キーワード引数(prompt-background = “white”):プロンプト文字列の背景色

メソッド

  なし

利用方法

ガイドプロンプトを利用するには、コンストラクタ呼び出し時にprompt, prompt-color, prompt-backgroundを指定します。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.CONTROLS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet {manifest-url “file”, “DEFAULT-STYLE-SHEET”}}

{value

    {spaced-vbox
       
        {text Normal TextField},
        {TextField},
        {TextField prompt = “入力してね。”},

        {text GuidePrompt TextField},
        {CoreTextField},
        {CoreTextField prompt = “入力してね。”},
        {CoreTextField prompt-background = “pink”},
        {CoreTextField control-content-background = “pink”},
        {CoreTextField
            prompt = “入力してね。”,
            prompt-color = “red”,
            prompt-background = “pink”,
            control-content-background = “yellow”,
            color = “green”
        },

        {text Normal DateField},
        {DateField},
        {DateField prompt = “入力してね。”},

        {text GuidePrompt DateField},
        {CoreDateField},
        {CoreDateField prompt = “入力してね。”},
        {CoreDateField prompt-background = “pink”},
        {CoreDateField control-content-background = “pink”},
        {CoreDateField
            prompt = “入力してね。”,
            prompt-color = “red”,
            prompt-background = “pink”,
            control-content-background = “yellow”,
            color = “green”
        },

        {text Normal TextArea},
        {TextArea},
        {TextArea prompt = “入力してね。”},

        {text GuidePrompt TextArea},
        {CoreTextArea},
        {CoreTextArea prompt = “入力してね。”},
        {CoreTextArea prompt-background = “pink”},
        {CoreTextArea control-content-background = “pink”},
        {CoreTextArea
            height = 2cm,
            width = 2cm,
            prompt-color = “white”,
            prompt-background = {url “images/curl-waves-32.gif”}
        }

    }
}

 

サンプル

ガイドプロンプト

関連Curl標準API

TextField
TextArea
DateField

 

サムネイル作成

動作

簡単にサムネイル画像を作成することができます。

 

バージョン

Curl Advanced UI 0.5

API説明

create-thumbnailプロシージャ

  サムネイルを作成するプロシージャです。 

    引数1(v:Frame):サムネイルの対象となるフレーム
    戻り値:Pixmap  サムネイルのPixmap

パッケージ

  COM.CURLAP.ADVANCED-UI.UTILS

 

create-thumbnail-to-urlプロシージャ

  サムネイルを作成するプロシージャです。ファイルとして保存します。 

    引数1(v:Frame):サムネイルの対象となるフレーム
    引数2(save-url:Url):サムネイル画像の保存先
    キーワード引数(mime-type:String = “image/jpeg”):mime type
    戻り値:void 

パッケージ

  COM.CURLAP.ADVANCED-UI.UTILS

利用方法

create-thumbnailもしくはcreate-thumbnail-to-urlプロシージャを利用して、サムネイル画像を作成します。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.UTILS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet {manifest-url “file”, “DEFAULT-STYLE-SHEET”}}

{value
    def v =
        {Frame
            valign = “top”,
            {spaced-vbox
                background = “pink”,
                {TextField width = 3cm},
                {ComboBox width = 3cm},
                {CommandButton label = “test”}
            }
        }

    def frame =
        {Frame width = 5cm, height = 5cm,
            {spaced-vbox
                v,
                {CommandButton
                    label = “pixmap”,
                    {on Action do
                        {create-thumbnail-to-url v,
                            {url “images/thumbnail.jpg”}}
                        def view =
                            {View {Frame width = 3cm, height = 2cm,
                                      background = {create-thumbnail v}}}
                        {view.show}
                    }
                }
            }
        }
   
    def tab-container =
        {TabContainer
            {TabPane
                {Frame valign = “top”,
                    {spaced-vbox
                        background = “pink”,
                        {TextField width = 3cm},
                        {text font-size = 28pt, 1}
                    }
                }
            },
            {TabPane
                {Frame valign = “top”,
                    {spaced-vbox
                        background = “yellow”,
                        {TextField width = 3cm},
                        {text font-size = 28pt, 2}
                    }
                }
            },
            {TabPane
                {Frame valign = “top”,
                    {spaced-vbox
                        background = “red”,
                        {TextField width = 3cm},
                        {text font-size = 28pt, 3}
                    }
                }
            }
        }

    {spaced-vbox
        {text test1},
        frame,
        {text test2},
        {spaced-vbox
            tab-container,
            {CommandButton
                label = “show thumbnails”,
                {on Action do
                    def thumbnails = {{Array-of Frame}}
                    {for tp in tab-container.tab-panes do
                        {thumbnails.append
                            {Frame width = 5cm, height = 2cm,
                                border-width = 2pt, border-style = BorderStyle.double,
                                background = {create-thumbnail (tp.content asa Frame)}}
                        }
                    }
                    def view =
                        {View width = 10cm, height = 10cm,
                            {spaced-vbox {splice thumbnails}}}
                    {view.show}
                }
            }
        }
    }
}

 

RadioFrame(rf)の値が変わったら、TextField(tf1)とTextField(tf2)のNotifyEventが実行されます。また、TextField2の値を変化させた場合、TextField1のNotifyEventが実行されます。

 

特権のエラー表示を回避する方法

特権が必要なアプレットを実行するときに、ユーザーは特権をつけ忘れてしまう場合が多くあります。
その際に、無機質な赤文字の警告をユーザーに見せることを回避する方法をお伝えします。
特権が付いているかどうかを判断するには

{process-privileged?}

を使います。
これを起動アプレット(多くの場合は start.curl だと思います。)のマニフェスト直下に置きます。以下に簡単な例を示します。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet
manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}
{value
{if not {process-privileged?} then
{popup-message “特権がありません!”}
{exit}
}

上記のように、特権が与えられていない場合の振る舞いの動作をアプリの最初の呼び出しの箇所で定義することで、赤い画面が表示されることが回避されます。

以下のサンプルで試してみてください。

(developers.curlap.com)に特権がついていない場合は、ダイアログが表示され、該当アプリは停止します。

サンプルアプリケーション

特権が必要なアプリケーション(start.curl)

特権が必要なアプリケーション(zip)