45 lines
3.6 KiB
HTML
45 lines
3.6 KiB
HTML
<script type="text/html" data-help-name="ui_template">
|
||
<p>Template WidgetにはHTMLコードおよびAngular/Angular-Materialディレクティブを指定できます。</p>
|
||
<p>このノードで動的なユーザインターフェイス要素を作成し、入力によって見た目を変更したり、メッセージをNode-REDに送り返したりできます。</p>
|
||
<p><b>例:</b><br>
|
||
<pre style="font-size:smaller;"><div layout="row" layout-align="space-between">
|
||
<p>数値は</p>
|
||
<font color="{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}">
|
||
{{(msg.payload || 0) % 2 === 0 ? '偶数' : '奇数'}}
|
||
</font>
|
||
</div></pre>
|
||
このコードは<code>msg.payload</code>で受け取った数値が偶数か奇数かを表示します。同時に、偶数であれば緑に、奇数であれば赤にテキストの色を変更します。<br/>
|
||
次は、一意なIDをテンプレートに設定、デフォルトのテーマカラーを設定、入力メッセージの到着を監視する例です。</p>
|
||
<pre style="font-size:smaller;">
|
||
<div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">何らかのテキスト</div>
|
||
<script>
|
||
(function(scope) {
|
||
scope.$watch('msg', function(msg) {
|
||
if (msg) {
|
||
// メッセージ同着時に適当な処理を実行
|
||
$("#my_"+scope.$id).html(msg.payload);
|
||
}
|
||
});
|
||
})(scope);
|
||
</script></pre>
|
||
<p>この方法で作成したテンプレートはコピー可能です。コピーはそれぞれ独立して利用できます。</p>
|
||
<p><b>メッセージ送信:</b><br>
|
||
<pre style="font-size:smaller;">
|
||
<script>
|
||
var value = "こんにちは世界";
|
||
// もしくは、コールバック関数で値を書き換え
|
||
this.scope.action = function() { return value; }
|
||
</script>
|
||
<md-button ng-click="send({payload:action()})">
|
||
クリックすると「こんにちは世界」を送信します
|
||
</md-button></pre>
|
||
この例は、クリックするとペイロードに<code>'こんにちは世界'</code>を持つメッセージを送信するボタンを表示します。</p>
|
||
<p><b><code>msg.template</code>の使用:</b><br>
|
||
<code>msg.template</code>によってテンプレートを定義することもできます。例えば、外部ファイルに格納したテンプレートを用いる場合に有用です。<br>
|
||
テンプレートは入力が変化した場合に再ロードされます。<br>
|
||
「HTMLコード」フィールドに記述したコードは、<code>msg.template</code>が存在する場合には無視されます。</p>
|
||
<p>以下のアイコンフォントの利用も可能です: <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">マテリアルデザインアイコン</a><i>(例:'check'、'close')</i>、<a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesomeアイコン</a><i>(例:'fa-fire')</i>、<a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">天気アイコン</a>。
|
||
アイコン名に'mi-’に追加することでGoogleマテリアルアイコン一式を利用できます。例:'mi-videogame_asset'。</p>
|
||
<p>クラスが指定されている場合、そのクラスは親要素に追加されます。 このようにして、カスタムCSSを使用して、カードとその中の要素のスタイルを設定できます。 クラスは、<code> msg.className </code>文字列プロパティを設定することで実行時に設定できます。</p>
|
||
</script>
|