1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Update range node ui

This commit is contained in:
Nick O'Leary 2014-03-29 23:05:46 +00:00
parent 99ab6eaafd
commit e2bac40b17
2 changed files with 30 additions and 20 deletions

View File

@ -59,7 +59,7 @@
category: 'function',
defaults: {
action: {value:"replace",required:true},
property: {value:"payload"},
property: {value:"payload",required:true},
from: {value:"",validate: function(v) {
if (this.action == "change" && this.reg) {
try {
@ -79,7 +79,14 @@
outputs: 1,
icon: "swap.png",
label: function() {
return this.name || this.action || "change";
if (this.name) {
return this.name;
}
if (this.action == "replace") {
return "set msg."+this.property;
} else {
return this.action+" msg."+this.property
}
},
labelStyle: function() {
return this.name ? "node_label_italic" : "";

View File

@ -16,27 +16,30 @@
<script type="text/x-red" data-template-name="range">
<div class="form-row">
Re-map input values between<br/>
<input type="text" id="node-input-minin" placeholder="0" style="width:35%;"/>
and
<input type="text" id="node-input-maxin" placeholder="99" style="width:35%;"/>
</div>
<div class="form-row">
to be between<br/>
<input type="text" id="node-input-minout" placeholder="0" style="width:35%;"/>
and
<input type="text" id="node-input-maxout" placeholder="255" style="width:35%;"/>
</div>
<div class="form-row">
and <select id="node-input-action" style="width:90%; margin-right:5px;">
<option value="scale">try to scale if outside this range</option>
<option value="clamp">clamp to max and min values of this range</option>
<option value="roll">perform modulus to keep within this range</option>
<select id="node-input-action" style="width:90%; margin-right:5px;">
<option value="scale">Scale msg.payload</option>
<option value="clamp">Scale and limit to the target range</option>
<option value="roll">Scale and wrap within the target range</option>
</select>
</div>
<br/>
<div class="form-row">
<label for="node-input-round" style="width:200px;">Round to nearest integer ?</label>
<input type="checkbox" id="node-input-round" style="display: inline-block; width: auto; vertical-align: top;">
From the range:
</div>
<div class="form-row">
&nbsp;&nbsp;&nbsp;&nbsp;min: <input type="text" id="node-input-minin" placeholder="0" style="width:100px;"/>
&nbsp;&nbsp;max: <input type="text" id="node-input-maxin" placeholder="99" style="width:100px;"/>
</div>
<div class="form-row">
to the range:
</div>
<div class="form-row">
&nbsp;&nbsp;&nbsp;&nbsp;min: <input type="text" id="node-input-minout" placeholder="0" style="width:100px;"/>
&nbsp;&nbsp;max: <input type="text" id="node-input-maxout" placeholder="255" style="width:100px;"/>
</div>
<br/>
<div class="form-row">
<input type="checkbox" id="node-input-round" style="display: inline-block; width: auto; vertical-align: top;"> <label style="width: auto;" for="node-input-round">Round to nearest integer?</label></input>
</div>
<br/>
<div class="form-row">