Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update in-NR template docs #117

Merged
merged 1 commit into from
Aug 8, 2023
Merged

Update in-NR template docs #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 28 additions & 48 deletions nodes/widgets/locales/en-US/ui_template.html
View file
Open in desktop
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;">&lt;div layout=&quot;row&quot; layout-align=&quot;space-between&quot;&gt;
&lt;p&gt;The number is&lt;/p&gt;
&lt;font color=&quot;{{((msg.payload || 0) % 2 === 0) ? 'green' : 'red'}}&quot;&gt;
{{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
&lt;/font&gt;
&lt;/div&gt;</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;">
&lt;div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}"&gt;Some text&lt;/div&gt;
&lt;script&gt;
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg) {
// Do something when msg arrives
$("#my_"+scope.$id).html(msg.payload);
}
});
})(scope);
&lt;/script&gt;</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;">
&lt;script&gt;
var value = "hello world";
// or overwrite value in your callback function ...
this.scope.action = function() { return value; }
&lt;/script&gt;
&lt;md-button ng-click=&quot;send({payload:action()})&quot;&gt;
Click me to send a hello world
&lt;/md-button&gt;</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;">&lt;v-btn @click="send({'hello': 'world'})"&gt;&lt;/v-btn&gt;</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;">&lt;form @submit.prevent="submit"&gt;
&lt;v-text-field name="first" label="First Name"&gt;&lt;/v-text-field&gt;
&lt;v-text-field name="last" label="Last Name"&gt;&lt;/v-text-field&gt;
&lt;v-btn type="submit"&gt;&lt;/v-btn&gt;
&lt;/form&gt;</pre>
Would return the following <code>msg</code> when submitted:
<pre style="font-size:smaller;">{"first": &lt;value&gt;, "last": &lt;value&gt;}</pre>
</p>
</script>
4 changes: 2 additions & 2 deletions nodes/widgets/ui_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@
<div class="form-row node-text-editor-row" style="display: block;">
<div style="height:250px; min-height:100px" class="node-text-editor" id="node-input-format-editor" ></div>
</div>
<div id="template-pass-store">
<!--<div id="template-pass-store">
<div class="form-row" style="margin-bottom:0px;">
<input type="checkbox" id="node-input-fwdInMessages" style="display:inline-block; margin-left:8px; width:auto; vertical-align:top;">
<label for="node-input-fwdInMessages" style="width:70%;"> <span data-i18n="ui-template.label.pass-through"></span></label>
Expand All @@ -211,5 +211,5 @@
<input type="checkbox" id="node-input-resendOnRefresh" style="display:inline-block; margin-left:8px; width:auto; vertical-align:top;">
<label for="node-input-resendOnRefresh" style="width:70%;"> <span data-i18n="ui-template.label.resend"></span></label>
</div>
</div>
</div> -->
</script>