-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathdisplay.html
97 lines (91 loc) · 6.5 KB
/
display.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script type="text/javascript">
RED.nodes.registerType( 'ui_digital_display', {
category: 'dashboard',
paletteLabel: 'digital display',
inputs: 1,
outputs: 0,
color: '#2ed7e4',
icon: 'digit.svg',
align: 'right',
defaults: {
name: { value: '' },
group: { type: 'ui_group', required: true },
order: { value: 0 },
width: { value: 0, validate: function( width ) {
const group = RED.nodes.node( $( '#node-input-group' ).val() || this.group );
const valid = !group || +width <= +group.width;
$( '#node-input-size' ).toggleClass( 'input-error', !valid );
return valid;
} },
height: { value: 0 },
digits: { value: 5, validate: digits => ( +digits || 0 ) >= 1 && ( +digits || 0 ) <= 10 },
decimals: { value: 1, validate: function( decimals ) {
return ( +decimals || 0 ) >= 0 && ( +decimals || 0 ) < ( +$( '#node-input-digits' ).val() || +this.digits );
} }
},
label: function() {
return this.name || 'digital display';
},
oneditprepare: () => {
$( '#node-input-size' ).elementSizer( {
width: "#node-input-width",
height: "#node-input-height",
group: "#node-input-group"
} );
},
} );
</script>
<script type="text/html" data-template-name="ui_digital_display">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-fw fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name" />
</div>
<br />
<div class="form-row" id="template-row-group">
<label><i class="fa fa-fw fa-table"></i> Group</label>
<input type="text" id="node-input-group" />
</div>
<div class="form-row" id="template-row-size">
<label><i class="fa fa-fw fa-object-group"></i> Size</label>
<input type="hidden" id="node-input-width" />
<input type="hidden" id="node-input-height" />
<button id="node-input-size" class="editor-button"></button>
</div>
<br />
<div class="form-row">
<label for="node-input-digits">Digits</label>
<input type="number" id="node-input-digits" min="1" max="10" style="width: 35%;" />
</div>
<div class="form-row">
<label for="node-input-decimals">Decimals</label>
<input type="number" id="node-input-decimals" min="0" max="9" style="width: 35%;" />
</div>
<br />
<div class="form-tips" style="text-align: justify;">
The <b>Size</b> parameter determines the size the widget will take on the dashboard. By
adding additional <b>Digits</b>, even if they are not needed to display the value at all,
the height of the displayed value can also be influenced.
</div>
</script>
<script type="text/html" data-help-name="ui_digital_display">
<p style="text-align: justify;">
A digital display, with adjustable number of digits and decimals, for the Node-RED Dashboard.
</p>
<br />
<p style="text-align: center;">
<img alt="ui_digital_display" src="data:image/png;base64,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" />
</p>
<br />
<p style="text-align: justify;">
The value to be displayed is transferred to the display via <code>msg.payload</code>, which
may be of type Number or String.
</p>
<p style="text-align: justify;">
The <b>Digits</b> parameter determines the maximum number of digits that can be displayed.
Unused digits are not visible. Currently, a maximum of 10 digits is possible.
</p>
<p style="text-align: justify;">
<b>Decimals</b> can be used to determine the number of decimal places. This value must be
smaller than <b>Digits</b>.
</p>
</script>