-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #117 from flowforge/ui-template-help
Update in-NR template docs
- Loading branch information
Showing
2 changed files
with
30 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,29 @@ | ||
| <script type="text/html" data-help-name="ui-template"> | ||
| <p>The template widget can contain any valid html and Angular/Angular-Material directives.</p> | ||
| <p>This node can be used to create a dynamic user interface element that changes its appearance | ||
| based on the input message and can send back messages to Node-RED.</p> | ||
| <p><b>For example:</b><br> | ||
| <pre style="font-size:smaller;"><div layout="row" layout-align="space-between"> | ||
| <p>The number is</p> | ||
| <font color="{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}"> | ||
| {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}} | ||
| </font> | ||
| </div></pre> | ||
| Will display if the number received as <code>msg.payload</code> is even or odd. It will also | ||
| change the color of the text to green if the number is even or red if odd.<br/> | ||
| The next example shows how to set a unique id for your template, pick up the default theme colour, | ||
| and watch for any incoming message.</p> | ||
| <pre style="font-size:smaller;"> | ||
| <div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div> | ||
| <script> | ||
| (function(scope) { | ||
| scope.$watch('msg', function(msg) { | ||
| if (msg) { | ||
| // Do something when msg arrives | ||
| $("#my_"+scope.$id).html(msg.payload); | ||
| } | ||
| }); | ||
| })(scope); | ||
| </script></pre> | ||
| <p>Templates made in this way can be copied and remain independent of each other.</p> | ||
| <p><b>Sending a message:</b><br> | ||
| <pre style="font-size:smaller;"> | ||
| <script> | ||
| var value = "hello world"; | ||
| // or overwrite value in your callback function ... | ||
| this.scope.action = function() { return value; } | ||
| </script> | ||
| <md-button ng-click="send({payload:action()})"> | ||
| Click me to send a hello world | ||
| </md-button></pre> | ||
| Will display a button that when clicked will send a message with the payload <code>'Hello world'</code>.</p> | ||
| <p><b>Using <code>msg.template</code>:</b><br> | ||
| You can also define the template content via <code>msg.template</code>, so you can use external files for example.<br> | ||
| Template will be reloaded on input if it has changed.<br> | ||
| Code written in the Template field will be ignored when <code>msg.template</code> is present.</p> | ||
| <p>The following icon fonts are available: <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a> | ||
| <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a> | ||
| <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>. | ||
| You can use the full set of Google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.</p> | ||
| <p>If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a <code>msg.className</code> string property.</p> | ||
| </script> | ||
| <p> | ||
| Provide custom HTML (including any <a href="https://vuetifyjs.com/en/components/all/" target="blank"> | ||
| Vuetify component</a>) to render in the Dashboard. | ||
| </p> | ||
| <p> | ||
| You can render dynamic content using any VueJS data-binding expressions, (e.g. <code>v-if</code>, <code>v-for</code>) | ||
| and access incoming data to the node via the <code>msg</code> object, e.g: | ||
| <pre style="font-size:smaller;">{{ msg?.payload }}</pre> | ||
| </p> | ||
| <p> | ||
| <b>send(msg)</b><br> | ||
| The template comes with two built-in functions the first of which is a <code>send(msg)</code> function that | ||
| can be used to send a <code>msg</code> from the template, e.g: | ||
| <pre style="font-size:smaller;"><v-btn @click="send({'hello': 'world'})"></v-btn></pre> | ||
| </p> | ||
| <p> | ||
| <b>submit()</b><br> | ||
| The second built-in function can be attached to a form. The <code>msg</code> sent will be an object | ||
| representation of the <code>FormData</code> from the attached form, e.g: | ||
| <pre style="font-size:smaller;"><form @submit.prevent="submit"> | ||
| <v-text-field name="first" label="First Name"></v-text-field> | ||
| <v-text-field name="last" label="Last Name"></v-text-field> | ||
| <v-btn type="submit"></v-btn> | ||
| </form></pre> | ||
| Would return the following <code>msg</code> when submitted: | ||
| <pre style="font-size:smaller;">{"first": <value>, "last": <value>}</pre> | ||
| </p> | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters