18 lines
1.6 KiB
HTML
18 lines
1.6 KiB
HTML
<script type="text/html" data-help-name="ui_numeric">
|
|
<p>Adds a numeric input widget to the user interface.</p>
|
|
<p>The user can set the value between
|
|
the limits (<b>min</b> and <b>max</b>). Each value change will generate a <code>msg.payload</code>.</p>
|
|
<p>If <b>Topic</b> is specified, it will be added as <code>msg.topic</code>.<p>
|
|
<p>Any input <code>msg.payload</code> will be converted to a number, the <b>min</b> value will be used if conversion fails,
|
|
and it will update the user interface. If the value changes, it will also be passed to the output.</p>
|
|
<p>The <b>Value Format</b> field can be used to change the displayed format. For example, a <b>Value Format</b>
|
|
of <code>{{value}} %</code>
|
|
with a value of <b>23</b> will show <b>23 %</b> on the user interface. The <b>Value Format</b> field can contain
|
|
HTML or Angular filters to format the output (eg: <code>&deg;</code> will show the degree symbol).</p>
|
|
<p>Setting the Value Format field to <code>{{msg.payload}}</code> will make the input field editable so you can type in a number.</p>
|
|
<p>The label can also be set by a message property by setting
|
|
the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
|
|
<p>Setting <code>msg.enabled</code> to <code>false</code> will disable the widget output.</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>
|