フロアプランチュートリアル

DevOps Tools Engineer試験のObjective

クライアント ビルダーと GeoJSON オブジェクトに精通し、実際の位置追跡アプリケーションを構築する

目的

• フロアプランウィジェットを使用してクライアントを作成する
• 追跡する領域の寸法を定義する
• geoJSON データ型を使用して関連する位置情報を提供し、クライアントにグラフィカルに表示されます。

チュートリアルの概要

このチュートリアルでは、Vantiq システムでフロアプランクライアントを作成する方法を開発者向けに解説します。このクライアントは、シミュレーションデータを用いて2階建ての建物内を移動する居住者を表示します。レッスンでは、居住者データタイプの定義、シミュレーションによる動作データの生成、そしてデータを表示するためのフロアプランクライアントの定義について学習します。

すべてのセクションでは、開発者が実際の知識を持っていることを前提としています。 ヴァンティックIDE。 新しい開発者は、 入門チュートリアル このチュートリアルを始める前に。

注: 必要に応じて、 プロジェクト -> インポート メニュー項目。 選択するだけ チュートリアル [インポート タイプ] で、[インポート タイプ] を選択します。 フロアプラン XNUMX 番目のドロップダウンから、 インポート.

このチュートリアルを最大限に活用するには、短くて無料のVantiqチュートリアルを完了することを強くお勧めします。 開発者基礎コース 最初。

1: フロアプランプロジェクトの作成

Vantiq フロア プラン ウィジェットについて学ぶ最初のタスクは、Vantiq IDE でプロジェクトを作成して、すべてのクライアント コンポーネントを組み立てることです。

 プロジェクト ボタンを選択 新規プロジェクトをクリックすると、新しいプロジェクト ウィザードが表示されます。 新しい名前空間を作成するか (推奨)、現在の名前空間に新しいプロジェクトを追加し、 空の プロジェクト タイプとして「FloorPlan」という名前を付けます。

このチュートリアルの残りの部分は、このプロジェクト内で行われます。

2: データ型の作成

この例のシミュレーション データは、フロア プラン クライアント ウィジェットの駆動に使用できるように、Vantiq データベースに保存する必要があります。 データ型を作成して、シミュレートされた各建物居住者に関連付けられたデータを指定する必要があります。

 追加 ボタンを押して選択する タイプ…:

 新しいタイプ ボタンをクリックして常駐タイプを作成します。 スタンダードタイプにしてください。

その レジデント type には XNUMX つのプロパティが含まれます。

• Floor: 居住者が立っているフロアを識別する文字列
• location: 指定されたフロアの居住者の X 座標と Y 座標を識別する GeoJSON オブジェクト
• name: 居住者の一意の識別子である文字列

一方、 場所 プロパティは GeoJSON として定義されていますが、プロパティの値はフロア プランを目的とした緯度と経度の値ではありません。 具体的には、GeoJSON オブジェクトの座標プロパティには、次のセクションで定義するフロア プラン画像の左上隅からの X 座標と Y 座標のオフセットが含まれます。 経度座標プロパティは X オフセット座標であり、緯度座標は Y オフセット座標です。

これら XNUMX つのユーザー プロパティを定義したら、 Save を保存するボタン レジデント と入力してプロジェクトに追加します。

3: 居住者データのシミュレーション

居住者データ タイプを作成したので、IDE を使用して、XNUMX 階建ての建物内で居住者が場所を変更する様子をシミュレートします。 イベント ジェネレーター ツールを使用して、常駐データ ストリームをシミュレートします。

 ホイール試乗 ボタンを押して選択する イベント ジェネレータ をクリックし 新しいイベントジェネレーター。 イベント ジェネレータに名前を付ける 常駐ジェネレータ.

クリック New [イベント ジェネレーター] ペインの ボタンをクリックして、新しいイベント記述子を追加します。 選択する 種類 リソースとして、 レジデント resourceIdとして、そして INSERT 操作としては。 をセットする 繰り返します 入力する 反復 値をに設定します 20。 をセットする インターバル 〜へ 1第二。 これは、イベント記述子が 20 個の挿入を生成することを意味します。 レジデント XNUMX 秒あたり XNUMX つの割合で入力します。

以下を行うには、 特性 ドロップダウンをクリックしてインスタンス データを設定します。

をセットする  床 プロパティ バリエーション タイプから 作成セッションプロセスで をクリックして ランダム チェックボックス。 クリック 文字列のセットを編集する のそばに 床 財産。 XNUMX つの値を含むようにリストを構成します。 XNUMXつ の三脚と 2。 これは可能な下限値のセットです。 実行時に値がセットからランダムに選択されます。

のバリエーションタイプを設定します。 場所 プロパティへ レンジ チェック ランダムに設定します。 OK をクリックします。 Origin Origin GeoJSON値を設定します。Location Typeを ポイント 緯度と経度を次のように設定します 5.

詳しくはこちら 開催場所 宛先 GeoJSON 値を設定します。 場所のタイプを次のように設定します。 ポイント そして経度を次のように設定します 25 と経度 20.

出発地と目的地の値を設定すると、フロア プランの範囲内のランダムな場所にユーザーが表示されます。 GeoJSON オブジェクトの X 座標と Y 座標は、フロア プラン イメージの左上隅からの X オフセットと Y オフセットです。

をセットする  名 プロパティ バリエーション タイプから 作成セッションプロセスでに設定します。 OK をクリックします。 文字列のセットを編集する のそばに 名 財産。 XNUMX つの値を含むようにリストを構成します。 ショット, ボブ, キャロル。 これが名前のセットです。 実行時に、イベント名はこれら XNUMX つの名前を循環します。

これで、20個のResidentモーションポイントをVantiqデータベースにストリーミングするイベントジェネレーターが完成しました。「保存」ボタンでジェネレーターを保存し、プロジェクトに戻ります。

4: 実行中のシステムの視覚化

次に、IDE のクライアント ビルダー機能を使用して、建物の XNUMX つのフロアと、それらのフロアの周囲の居住者の動きの視覚的表現を作成します。

 追加 ボタンを押して選択する クライアント…、次に 新しいクライアント ボタンをクリックして、「新規クライアント」ダイアログを表示します。

クライアント名として「Resident」と入力し、デフォルトを使用します。 ブラウザ向けのデザイン クライアントをブラウザで実行するため、ラジオ ボタンをオンにします。 使用 OK ボタンをクリックしてクライアントビルダーを表示します。

XNUMX つの計画ウィジェットと XNUMX つのラベル ウィジェットをドラッグ アンド ドロップします。 データ表示 リストをウィジェット パレットの下のキャンバス領域に追加して、次のような Client Builder レイアウトを作成します。

各ウィジェットの構成については後ほど説明するので、ウィジェットの正確な外観についてはまだ心配する必要はありません。

Client Builder ウィジェットがキャンバスに表示されたので、ウィジェットに表示するライブ データをフィードするデータ ストリームを作成する必要があります。 データ ストリームは、クライアント ウィジェットがデータを受信する場所を定義します。 フロア プラン ウィジェットは、場所の値を表示する必要があります。 レジデント セクション 3 のシミュレートされたデータから生成されるレコード。

[編集] タブを選択して、 データストリーム メニュー項目を右クリックして、新しい「データ変更時」データ ストリームを作成します。 「新しいデータ ストリームの作成」ダイアログが表示されます。

データ ストリームに「常駐」という名前を付けて、[常駐] を選択します。 レジデント タイプメニューからチェックしてください インサート チェックボックス。 さらに、フロアプランウィジェットは グループ化する 間取り図の各階の居住者を区別する機能。 この例では居住者名を使用しています (選択 名前(文字列)   グループ化する プルダウン) は、フロア プランの各フロアの居住者を一意に区別するために使用されるためです。 使用 Save ボタンをクリックして、新しいデータ ストリームを保存します。

上の図には XNUMX つの表示ウィジェットと XNUMX つのラベル ウィジェットがあります。 以下に、これらの各ウィジェットのプロパティを示します。 言及されていないプロパティはすべて、そのウィジェットのデフォルト値です。 ウィジェットのプロパティ シートを表示するには、ウィジェットをクリックします。 たとえば、XNUMX 階のフロア プランのプロパティ シートは次のとおりです。

フロア プラン ウィジェットは、次の XNUMX つのプロパティの設定に依存します。

• URL: 間取り図画像の場所。 この例ではデフォルトの IDE フロアプラン画像を使用していますが、画像 URL も機能します (例: https://strandexecutivepark.com/wp-content/uploads/2024/11/5625floorplan.gif).
• 幅と高さ: GeoJSON データで使用されるものと一致する単位 (フィートやメートルなど) でフロア プランの幅と奥行きを表すように構成します。 フロア プランの寸法が GeoJSON の X および Y オフセットと同じ単位で表現されている限り、実際の単位は問題ではありません。 レジデント 記録。 この例では、デフォルトの寸法 30×25 を使用します。
• フィルター プロパティ: 居住者を特定のフロア プランに関連付けるために使用される JSON オブジェクト。 この例では、 床 のプロパティ レジデント 居住者が「XNUMX 階」と「XNUMX 階」のどちらに住むべきかを判断するための記録。 より複雑な例では、クライアントは、いくつかのキャンパス サイトの XNUMX つ、特定の建物の特定のフロアの居住者を見つけたいと考えている場合があります。 その場合、 フィルタのプロパティ JSON オブジェクトは形式を取ることができます {"キャンパス":"ダウンタウン","建物":"心理学","フロア":"one"}.

XNUMX 階フロアプラン ウィジェット (左):

 Data Stream: Resident
 Filter Properties: {"floor":"one"}
 Data Stream Property: location
 Label Property: name (String)

XNUMX 階フロアプラン ウィジェット (右):

 Data Stream: Resident
 Filter Properties: {"floor":"two"}
 Data Stream Property: location
 Label Property: name

ラベル ウィジェットの場合 (各フロア プラン ウィジェットの上):

 Text: First Floor/Second Floor
 Font Size: 20

クライアント ウィジェットの追加と構成が完了したら、 Save ボタンをクリックしてクライアントを保存し、IDE に戻ります。 フロア プラン ウィジェットはデータ ストリームにバインドされており、定義されたデータ ストリームから受信したデータを自動的に表示します。 次に、セクション 3 で作成したイベント ジェネレーターを使用して、シミュレートされた常駐データを生成し、クライアントを実行します。

5: シミュレーションの実行

このチュートリアルの最後のステップでは、イベント ジェネレーターを起動し、Vantiq システムからの出力をリアルタイムで観察します。

[プロジェクト コンテンツ] サイド バーから、 クライアント リストをクリックしてから、 レジデント リストアップ。 これにより、常駐クライアントがまだ表示されていない場合は表示されます。

 ラン のアイコンボタン クライアント: 居住者 （ペインの右上にある小さな三角形の四角形）テストを開始するには、 常駐ジェネレータ ペインをクリックして、 ジェネレーターを実行する 

ジェネレーターがシミュレートされた常駐モーション データを Vantiq データベースに挿入すると、色付きのマーカーが XNUMX つのイメージ マップ画像上に表示されます。

この簡単な例では、フロア内のランダムな場所に居住者が生成されます。 現実世界のシナリオでは、座標は、より現実的な方法で常駐マーカーを移動させるモーション センサーまたはワイヤレス アクセス ポイントからの信号強度の読み取りによって提供される場合があります。

イベント ジェネレーターは 20 秒後に終了します。

6: マーカーのカスタマイズ

フロア プラン ウィジェット (およびマップ ウィジェット) には XNUMX つのプロパティがあります。 特定の ユーザーがデータ ポイントに使用されるマーカーをカスタマイズできるようにするセット: マーカーアレイ の三脚と マーカーハッシュ。 使用 マーカーアレイ フロア プラン ウィジェットのプロパティ シート内のリンクをクリックして、[マーカー配列] ダイアログを表示します。

上の例では、マーカー配列に 5 つの PNG 画像ドキュメント (star_green.png と star_blue.png) がアップロードされています。 (ファイルをアップロードするには、エントリの左側にある雲のアイコンをクリックします。) このフロア プランにデータ ポイントが表示される場合、上記のセクション XNUMX で示したデフォルトのマーカーではなく、これら XNUMX つの画像が循環ベースで使用されます。

その マーカーハッシュ フロア プラン ウィジェットのプロパティ シートのリンクを使用して、どのカスタム イメージをデータ ポイントに関連付けるかを指定することもできます。 このルックアップ テーブルを使用してデータ ポイントを特定の画像に関連付ける方法は XNUMX つあります。

データポイントごとに単一の画像

一意のデータ ポイントごとに個別の画像を割り当てたい場合は、この手法を使用できます。 各データ ポイントの一意の「キー」は、マーカー ハッシュ内のエントリを検索するために使用されます。

たとえば、マップ内を移動する従業員のセットを表示している場合、各従業員に顔のアイコンを表示することができます。 (つまり、従業員となる可能性のあるそれぞれのハッシュ内に XNUMX つのイメージが定義されている必要があります。)

この一意のキーは、次の XNUMX つの場所のいずれかから取得されます。

ウィジェットに関連付けられたデータ ストリームで、 グループ化する プロパティの場合、キー値は グループ化する データポイントのプロパティ。

ウィジェットに関連付けられたデータ ストリームがタイプに基づいている場合、キー値はタイプの自然キーから取得されます。

データ ポイント オブジェクトのキーの値は、マーカー ハッシュへのキーとして使用されます。

マーカー ハッシュ内のキー値に一致するものが見つからない場合は、マーカー配列が定義されている場合はその配列から、またはデフォルトのマーカーからマーカーが選択されます。

データポイントのセットの画像

データ ポイントが何らかの共通の特性を共有するグループに分割され、すべての共通ポイントに同じ画像を表示したい場合は、この手法を使用する必要があります。

たとえば、マップ内を移動する一連の従業員を表示する場合、すべてのマネージャーに XNUMX つのアイコンを表示し、すべての正規従業員に別のアイコンを表示することができます。 (つまり、データ ポイントは多数あるものの、画像は XNUMX つだけである可能性があります。)

この手法を使用することを示すには、ウィジェットのプロパティ シートで「マーカー ハッシュ キー プロパティ」を設定する必要があります。 (このプロパティを空白のままにした場合、上記で説明した「データ ポイントごとに単一のイメージ」手法を使用することが想定されます。) データ ポイント オブジェクト内のこのプロパティの値は、マーカー ハッシュへのキーとして使用されます。

マーカー ハッシュ内のキー値に一致するものが見つからない場合は、マーカー配列が定義されている場合はその配列から、またはデフォルトのマーカーからマーカーが選択されます。

結論

このチュートリアルを完了した開発者は、次の領域で Vantiq の機能を安心して構築できるようになりました。

• データ型の作成
• クライアントの作成
• プランウィジェットの構成
• データストリームを作成してクライアントにリンクし、ライブソースからのデータをシミュレートする
• GeoJSON ポイント座標