このチュートリアルでは、ウィジェットやオペレータから Dashboard Management API を使用する方法の例をいくつか提供して、それを使用する方法を説明します。

Dashboard Management API を使用するウィジェットとオペレータは、 現在のダッシュボードに新しいウィジェット/オペレータを追加することができます。 Dashboard Management API を使用しているウィジェットとオペレータは、 作成されたウィジェットとオペレータを完全に制御できます。例えば、 それらはワイヤリング接続を設定したり、閉じたり、自分の好みのカスタム値を 割り当てたりすることができます。

WidgetAPI ドキュメント に Dashboard Management API の参照資料があります (DashboardManagement関連資料のセクションを検索してください)。

Dashboard Management API を使用できるようにするための最初のステップは、 ウィジェット/オペレータの要件として DashboardManagement 機能を追加することです。

たとえば、xml バージョンの MACDL を使用する場合、これは <widget> または <operator> 要素内に次のコードを追加することによって行われます (この機能をウィジェットまたはオペレータに追加するかどうかによって異なります) :

<requirements>
    <feature name="DashboardManagement"/>
</requirements>

イントロダクション

この例では、サードパーティ・ウィジェットへビデオ会議サポートを提供するための Kurento one2one ウィジェットの使用方法を説明します。

その機能を追加する手順は次のとおりです :

1. Dasbhoard Management APIを有効にします (前のセクションで示したように)
2. 現在のダッシュボードに Kurento One2one ウィジェットを追加します
3. サードパーティ製のウィジェット/オペレータに動的なエンドポイントを作成します
4. それらのエンドポイントを Kurento One2one ウィジェットによって 提供されるものと接続します
5. Kurento One2one が kurento サービスに接続するまで待ちます
6. Kurento One2one ウィジェットに通話イベントを送信してビデオ会議を開始します

one2one ウィジェットを追加します

addWidget メソッドを使って現在のダッシュボードに Kurento One2one ウィジェットを追加することができます。 たとえば、次のコードを使用します :

var widget = MashupPlatform.mashup.addWidget('CoNWeT/kuernto-one2one/1.0', {
    "permissions": {
        "close": false,
        "configure": false
    },
    "preferences": {
        "stand-alone": {
            "value": false
        }
    },
    "top": "0px",
    "left": "66%"
});

one2one ウィジェットを追加します

前のコードでは、Kurento One2one ウィジェットを追加して静的位置 (0px, 66%) に配置しました。また、Kurento One2one ウィジェットを設定してユーザが 閉じることをブロックする permissions オプションを使用しています。 preferences オプションを使用して、非スタンドアロン・モードでそれを 設定しています。

テレビ会議のサポートをウィジェットに追加しているなら、おそらくテレビ会議を 作成しているでしょう。なぜなら、ユーザがボタンをクリックしたからです。 この場合、top と left オプションを使用するよりよい代替方法は、 refposition オプションを使用することです。このようにして、Kurento One2one ウィジェットはユーザがクリックしたボタンの近くに配置されます。

one2one ウィジェットを追加します

この refposition オプションを使用するには、ボタンを表す ClientRect インスタンスを取得する必要があります。 getBoundingClientRect メソッドを使用してそのようなオブジェクトを取得できます :

var one2one_widget = MashupPlatform.mashup.addWidget('CoNWeT/kuernto-one2one/1.0', {
    "permissions": {
        "close": false,
        "configure": false
    },
    "preferences": {
        "stand-alone": {
            "value": false
        }
    },
    "refposition": button.getBoundingClientRect()
});

ワイヤリング構成

Kurento One2one ウィジェットと接続するためにウィジェット/オペレータの説明 (config.xml ファイル) で定義されたエンポイントを利用することができるので、 動的に新しいエンドポイントを作成することは必須ではありません。ただし、 Dashboard Management API を使用してこれらを作成することで、 ウィジェット/オペレータのコードからのみ使用されることになります。 ユーザは、ワイヤリング・エディタ・ビューでこれらのエンドポイントを 使用して接続を作成できません。

ワイヤリング構成

このコードを使用して必要なエンドポイントを作成できます :

var call_endpoint = MashupPlatform.widget.createOutputEndpoint();
var state_endpoint = MashupPlatform.widget.createInputEndpoint(function (state) {
    if (state === 'REGISTERED') {
        // Update the call button that tiggered the videoconference to become a
        // hang button. This button should call one2one_widget.remove() to end
        // the videoconference

        // By sending this event, the one2one widget will start the videoconferece
        call_endpoint.pushEvent(information.username);
    } else if (state === 'ENABLED_CALL') {
        one2one_widget.remove();
    }
});

注: オペレータを開発している場合は、代わりに MashupPlatform.operator.createOutputEndpoint と MashupPlatform.operator.createInputEndpoint を使用してください。

ワイヤリング構成

これらの動的エンドポイントと Kurento One2one ウィジェットの エンドポイントとの間の接続は、次のコードを使用して確立できます :

call_endpoint.connect(one2one_widget.inputs['call-user']);
one2one_widget.outputs['call-state'].connect(state_endpoint);

イントロダクション

この例では、Map viewer ウィジェットを使用して動的に (Map viewer ウィジェットを常に表示することなく) マップ内の特定の地点を表示する方法を説明します。

前の例との主な違いは、この場合は、Map Viewer ウィジェットで期待されるものと 互換性があるようにイベント・データを変換するために NGSI Entity 2 PoI オペレータを使用することです。

Map viewer ウィジェットを追加します

このステップは、Kurento One2one ウィジェットを使用した場合と同じ方法で実行できます :

var map_widget = MashupPlatform.mashup.addWidget('CoNWeT/map-viewer/2.5.7', {
    "permissions": {
        "close": false,
        "configure": false
    },
    "preferences": {
        "stand-alone": {
            "value": false
        }
    },
    "top": "0px",
    "left": "66%"
});

該当する場合、top と left オプションの代わりに refposition を使用することを忘れないでください。

NGSI entity to PoI オペレータを追加します

The addOperator method works in a very similar way to the addWidget operator. E.g. for adding the NGSI Entity 2 PoI operator, we can make use of the following code:

var operator = MashupPlatform.mashup.addOperator('CoNWeT/ngsientity2poi/3.0.3', {
    "preferences": {
        "coordinates_attr": {
            "value": "position"
        }
    }
});

注: 必要に応じて coordinates_attr の値を変更することを 忘れないでください。

ワイヤリング構成

var poi_endpoint = MashupPlatform.widget.createOutputEndpoint();

poi_endpoint.connect(operator.inputs['entityInput']);
operator.outputs['poiOutput'].connect(map_widget.inputs['poiInput']);

これで、poi_endpoint を使ってイベントを送ることができます。例えば :

poi_endpoint.pushEvent(JSON.stringify({
    "id": "Big Ben",
    "position": "51.5008715, -0.1259872"
});