Node-Red configuration
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

ui_text_input.html 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <script type="text/javascript">
  2. RED.nodes.registerType('ui_text_input',{
  3. category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
  4. color: 'rgb(176, 223, 227)',
  5. defaults: {
  6. name: {value: ''},
  7. label: {value: ''},
  8. tooltip: {value: ''},
  9. group: {type: 'ui_group', required: true},
  10. order: {value: 0},
  11. width: {value: 0, validate: function(v) {
  12. var width = v||0;
  13. var currentGroup = $('#node-input-group').val()||this.group;
  14. var groupNode = RED.nodes.node(currentGroup);
  15. var valid = !groupNode || +width <= +groupNode.width;
  16. $("#node-input-size").toggleClass("input-error",!valid);
  17. return valid;
  18. }
  19. },
  20. height: {value: 0},
  21. passthru: {value: true},
  22. mode: {value: 'text', required: true},
  23. delay: {value: 300, validate: RED.validators.number()},
  24. topic: {value: 'topic', validate: (RED.validators.hasOwnProperty('typedInput')?RED.validators.typedInput('topicType'):function(v) { return true})},
  25. sendOnBlur: {value: true},
  26. className: {value: ''},
  27. topicType: {value: 'msg'}
  28. },
  29. inputs:1,
  30. outputs:1,
  31. outputLabels: function() { return this.mode; },
  32. icon: "ui_text.png",
  33. paletteLabel: 'text input',
  34. label: function() { return this.name || (~this.label.indexOf("{{") ? null : this.label) || this.mode+' input'; },
  35. labelStyle: function() { return this.name?"node_label_italic":""; },
  36. oneditprepare: function() {
  37. $("#node-input-size").elementSizer({
  38. width: "#node-input-width",
  39. height: "#node-input-height",
  40. group: "#node-input-group"
  41. });
  42. $('#node-input-topic').typedInput({
  43. default: 'str',
  44. typeField: $("#node-input-topicType"),
  45. types: ['str','msg','flow','global']
  46. });
  47. }
  48. });
  49. </script>
  50. <script type="text/html" data-template-name="ui_text_input">
  51. <div class="form-row">
  52. <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
  53. <input type="text" id="node-input-group">
  54. </div>
  55. <div class="form-row">
  56. <label><i class="fa fa-object-group"></i> Size</label>
  57. <input type="hidden" id="node-input-width">
  58. <input type="hidden" id="node-input-height">
  59. <button class="editor-button" id="node-input-size"></button>
  60. </div>
  61. <div class="form-row">
  62. <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
  63. <input type="text" id="node-input-label">
  64. </div>
  65. <div class="form-row">
  66. <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
  67. <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
  68. </div>
  69. <div class="form-row">
  70. <label for="node-input-mode"><i class="fa fa-keyboard-o"></i> Mode</label>
  71. <select style="width:128px" id="node-input-mode">
  72. <option value="text">text input</option>
  73. <option value="email">email address</option>
  74. <option value="password">password</option>
  75. <option value="number">number</option>
  76. <option value="tel">telephone input</option>
  77. <option value="color">color picker</option>
  78. <option value="time">time picker</option>
  79. <option value="datetime-local">datetime picker</option>
  80. <option value="week">week picker</option>
  81. <option value="month">month picker</option>
  82. <!-- <option value="date">date picker</option> -->
  83. </select>
  84. <label for="node-input-delay" style="text-align:right; width:100px"><i class="fa fa-clock-o"></i> Delay (ms)</label>
  85. <input type="text" style="width:58px" id="node-input-delay">
  86. </div>
  87. <div class="form-row">
  88. <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
  89. <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
  90. </div>
  91. <div class="form-row">
  92. <label style="width:auto" for="node-input-sendOnBlur">Send value on focus leave: </label>
  93. <input type="checkbox" checked id="node-input-sendOnBlur" style="display:inline-block; width:auto; vertical-align:top;">
  94. </div>
  95. <div class="form-row">
  96. <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
  97. </div>
  98. <div class="form-row">
  99. <label style="padding-left: 25px; margin-right: -25px">Payload</label>
  100. <label style="width:auto">Current value</label>
  101. </div>
  102. <div class="form-row">
  103. <label for="node-input-topic" style="padding-left: 25px; margin-right: -25px">Topic</label>
  104. <input type="text" id="node-input-topic">
  105. <input type="hidden" id="node-input-topicType">
  106. </div>
  107. <div class="form-row">
  108. <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
  109. <input type="text" id="node-input-className" placeholder="Optional CSS class name(s) for widget"/>
  110. </div>
  111. <div class="form-row">
  112. <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  113. <input type="text" id="node-input-name">
  114. </div>
  115. <div class="form-tips">Setting <b>Delay</b> to 0 waits for Enter or Tab key, to send input.</span></div>
  116. </script>