/
light-transition.html
123 lines (122 loc) · 6.39 KB
/
light-transition.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<script type="text/javascript">
RED.nodes.registerType('light-transition', {
category: 'function',
color: "#33B2FF",
defaults: {
name: { value: "" },
startRGB: { value: "#ff0000", required: false, validate: RED.validators.regex(/^(#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3})|)$/i) },
transitionRGB: { value: "#ffc864", required: false, validate: RED.validators.regex(/^(#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3})|)$/i) },
endRGB: { value: "#ffffff", required: false, validate: RED.validators.regex(/^(#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3})|)$/i) },
startMired: { value: "", required: false, validate: RED.validators.regex(/^\d*$/) },
endMired: { value: "", required: false, validate: RED.validators.regex(/^\d*$/) },
transitionTime: { value: "15", required: true, validate: RED.validators.number() },
transitionTimeUnits: { value: "Minute" },
steps: { value: "30", required: true, validate: RED.validators.number() },
startBright: { value: "1", required: true, validate: RED.validators.regex(/^[0-9][0-9]?$|^1[0-9]{1,2}$|^2[0-4][0-9]$|^25[0-5]$/) },
endBright: { value: "100", required: true, validate: RED.validators.regex(/^[0-9][0-9]?$|^1[0-9]{1,2}$|^2[0-4][0-9]$|^25[0-5]$/) },
brightnessType: { value: "Percent" },
transitionType: { value: "Linear" },
colorTransitionType: { value: "Weighted"},
},
inputs: 1,
outputs: 2,
icon: "font-awesome/fa-lightbulb-o",
label: function () {
const name = 'light-transition.time.' + this.transitionTimeUnits;
return this.name || `${this.transitionTime} ${this._(name)} ${this._('light-transition.label.transition')}`;
},
labelStyle: function () {
return this.name ? "node_label_italic" : "";
},
outputLabels: ["original msg", "stopped msg"]
});
</script>
<script type="text/html" data-template-name="light-transition">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
</div>
<div class="form-row">
<label for="node-input-transitionTime"><i class="fa fa-clock-o"></i> <span data-i18n="light-transition.label.time"></label>
<input type="text" id="node-input-transitionTime" style="text-align:end; width:70px !important">
<select id="node-input-transitionTimeUnits" style="width:140px !important">
<option value="Second" data-i18n="node-red:delay.secs"></option>
<option value="Minute" data-i18n="node-red:delay.mins"></option>
<option value="Hour" data-i18n="node-red:delay.hours"></option>
</select>
</div>
<div class="form-row">
<label for="node-input-steps"><i class="fa fa-repeat"></i> <span data-i18n="light-transition.label.steps"></label>
<input type="text" id="node-input-steps" style="text-align:end; width:100px !important">
</div>
<div style="margin:0px; line-height: 0%">
<hr style="margin-top:10px; margin-bottom:10px">
<h3><span data-i18n="light-transition.label.colors">:</h3>
</div>
<div class="form-row">
<table style="border-collapse: collapse; border:none; width:100%">
<tbody>
<tr>
<th></th>
<th style="text-align:center"><span data-i18n="light-transition.label.starting"></th>
<th style="text-align:center"><span data-i18n="light-transition.label.middle"></th>
<th style="text-align:center"><span data-i18n="light-transition.label.end"></th>
</tr>
<tr>
<td><i class="fa fa-eyedropper"></i> RGB</td>
<td style="text-align:center"><input type="color" id="node-input-startRGB" style="text-align:end; width:90px !important"></td>
<td style="text-align:center"><input type="color" id="node-input-transitionRGB" style="text-align:end; width:90px !important"></td>
<td style="text-align:center"><input type="color" id="node-input-endRGB" style="text-align:end; width:90px !important"></td>
</tr>
<tr>
<td><i class="fa fa-arrows-h"></i> Mired</td>
<td style="text-align:center"><input type="text" id="node-input-startMired" style="text-align:end; width:90px !important; margin-top:4px;"></td>
<td></td>
<td style="text-align:center"><input type="text" id="node-input-endMired" style="text-align:end; width:90px !important; margin-top:4px;"></td>
</tr>
</tbody>
</table>
</div>
<div class="form-row">
<label for="node-input-colorTransitionType"><i class="fa fa-line-chart"></i> <span data-i18n="light-transition.label.transition"></label>
<select id="node-input-colorTransitionType" style="width:170px !important">
<option value="Weighted">Weighted</option>
<option value="Half">Half & Half</option>
<option value="None">No Transition Color</option>
</select>
</div>
<div style="margin:0px; line-height: 0%">
<hr style="margin-top:10px; margin-bottom:10px">
<h3><span data-i18n="light-transition.label.brightness">:</h3>
</div>
<div class="form-row">
<table style="border-collapse: collapse; border:none; width:50%">
<tbody>
<tr>
<th></th>
<th style="text-align:center"><span data-i18n="light-transition.label.starting"></th>
<th style="text-align:center"><span data-i18n="light-transition.label.end"></th>
</tr>
<tr>
<td><i class="fa fa-lightbulb-o"></i> <span data-i18n="light-transition.label.value"></td>
<td style="text-align:center"><input type="text" id="node-input-startBright" style="text-align:end; width:70px !important"></td>
<td style="text-align:center"><input type="text" id="node-input-endBright" style="text-align:end; width:70px !important"></td>
</tr>
</tbody>
</table>
</div>
<div class="form-row">
<label for="node-input-brightnessType"><i class="fa fa-arrows-v"></i> <span data-i18n="light-transition.label.type"></label>
<select id="node-input-brightnessType" style="width:140px !important">
<option value="Percent">Percent</option>
<option value="Integer">Integer</option>
</select>
</div>
<div class="form-row">
<label for="node-input-transitionType"><i class="fa fa-line-chart"></i> <span data-i18n="light-transition.label.transition"></label>
<select id="node-input-transitionType" style="width:140px !important">
<option value="Linear">Linear</option>
<option value="Exponential">Exponential</option>
</select>
</div>
</script>