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_slider.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <script type="text/javascript">
  2. (function () {
  3. function hasProperty (obj, prop) {
  4. return Object.prototype.hasOwnProperty.call(obj, prop)
  5. }
  6. RED.nodes.registerType('ui-slider', {
  7. category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
  8. color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.light'),
  9. defaults: {
  10. group: { type: 'ui-group', required: true },
  11. name: { value: '' },
  12. label: { value: 'slider' },
  13. tooltip: { value: '' },
  14. order: { value: 0 },
  15. width: {
  16. value: 0,
  17. validate: function (v) {
  18. const width = v || 0
  19. const currentGroup = $('#node-input-group').val() || this.group
  20. const groupNode = RED.nodes.node(currentGroup)
  21. const valid = !groupNode || +width <= +groupNode.width
  22. $('#node-input-size').toggleClass('input-error', !valid)
  23. return valid
  24. }
  25. },
  26. height: { value: 0 },
  27. passthru: { value: false },
  28. outs: { value: 'all' },
  29. topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
  30. topicType: { value: 'msg' },
  31. thumbLabel: { value: true },
  32. showTicks: { value: 'always' },
  33. min: { value: 0, required: true, validate: RED.validators.number() },
  34. max: { value: 10, required: true, validate: RED.validators.number() },
  35. step: { value: 1 },
  36. className: { value: '' },
  37. iconPrepend: { value: '' },
  38. iconAppend: { value: '' },
  39. color: { value: '' },
  40. colorTrack: { value: '' },
  41. colorThumb: { value: '' }
  42. },
  43. inputs: 1,
  44. outputs: 1,
  45. outputLabels: function () { return this.min + ' - ' + this.max },
  46. icon: 'font-awesome/fa-sliders',
  47. paletteLabel: 'slider',
  48. label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'slider' },
  49. labelStyle: function () { return this.name ? 'node_label_italic' : '' },
  50. oneditprepare: function () {
  51. // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
  52. // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
  53. if (RED.nodes.subflow(this.z)) {
  54. // change inputs from hidden to text & display them
  55. $('#node-input-width').attr('type', 'text')
  56. $('#node-input-height').attr('type', 'text')
  57. $('div.form-row.nr-db-ui-element-sizer-row').hide()
  58. $('div.form-row.nr-db-ui-manual-size-row').show()
  59. } else {
  60. // not in a subflow, use the elementSizer
  61. $('div.form-row.nr-db-ui-element-sizer-row').show()
  62. $('div.form-row.nr-db-ui-manual-size-row').hide()
  63. $('#node-input-size').elementSizer({
  64. width: '#node-input-width',
  65. height: '#node-input-height',
  66. group: '#node-input-group'
  67. })
  68. }
  69. $('#node-input-topic').typedInput({
  70. default: 'str',
  71. typeField: $('#node-input-topicType'),
  72. types: ['str', 'msg', 'flow', 'global']
  73. })
  74. // if (!$("#node-input-outs").val()) { $("#node-input-outs").val("all") }
  75. // handle older iteration of thumbLabel
  76. // otherwise, the value will match up to a valid selection
  77. if (this.thumbLabel === false) {
  78. $('#node-input-thumbLabel').val('false')
  79. } else if (this.thumbLabel === true) {
  80. $('#node-input-thumbLabel').val('true')
  81. }
  82. // handle no value for showTicks (from sliders created before this was a value)
  83. if (!this.showTicks) {
  84. $('#node-input-showTicks').val('false')
  85. }
  86. // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
  87. $('.ui-node-popover-title').tooltip({
  88. show: {
  89. effect: 'slideDown',
  90. delay: 150
  91. }
  92. })
  93. },
  94. oneditsave: function () {
  95. // make sure our boolean options are actually booleans
  96. const thumbLabel = $('#node-input-thumbLabel').find(':selected').val()
  97. if (thumbLabel === 'false') {
  98. this.thumbLabel = false
  99. } else if (thumbLabel === 'true') {
  100. this.thumbLabel = true
  101. }
  102. }
  103. })
  104. })()
  105. </script>
  106. <script type="text/html" data-template-name="ui-slider">
  107. <div class="form-row">
  108. <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
  109. <input type="text" id="node-input-name">
  110. <input type="hidden" id="node-input-topicType">
  111. </div>
  112. <div class="ui-slider">
  113. <div class="form-row">
  114. <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
  115. <input type="text" id="node-input-group">
  116. </div>
  117. <div class="form-row nr-db-ui-element-sizer-row">
  118. <label><i class="fa fa-object-group"></i> <span data-i18n="ui-slider.label.size">Size</label>
  119. <button class="editor-button" id="node-input-size"></button>
  120. </div>
  121. <div class="form-row nr-db-ui-manual-size-row">
  122. <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-slider.label.width">Width</label>
  123. <input type="hidden" id="node-input-width">
  124. </div>
  125. <div class="form-row nr-db-ui-manual-size-row">
  126. <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-slider.label.height">Height</label>
  127. <input type="hidden" id="node-input-height">
  128. </div>
  129. <div class="form-row">
  130. <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
  131. <div style="display: inline;">
  132. <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
  133. <a
  134. data-html="true"
  135. title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
  136. class="red-ui-button ui-node-popover-title"
  137. style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
  138. <i style="font-family: ui-serif;">fx</i>
  139. </a>
  140. </div>
  141. </div>
  142. <div class="form-row">
  143. <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
  144. <input type="text" id="node-input-label">
  145. </div>
  146. <div class="form-row">
  147. <label for="node-input-thumbLabel"><i class="fa fa-i-cursor"></i> Thumb</label>
  148. <select id="node-input-thumbLabel">
  149. <option value="false">Never</option>
  150. <option value="true">On Drag</option>
  151. <option value="always">Always</option>
  152. </select>
  153. </div>
  154. <div class="form-row">
  155. <label for="node-input-showTicks"><i class="fa fa-i-cursor"></i> Ticks</label>
  156. <select id="node-input-showTicks">
  157. <option value="false">Never</option>
  158. <option value="true">On Drag</option>
  159. <option value="always">Always</option>
  160. </select>
  161. </div>
  162. <!--<div class="form-row">
  163. <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
  164. <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
  165. </div>-->
  166. <div class="form-row">
  167. <label for="node-input-min"><i class="fa fa-arrows-h"></i> Range</label>
  168. <div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 70%">
  169. <div>
  170. <span for="node-input-min">min</span>
  171. <input type="text" id="node-input-min" style="width:60px">
  172. </div>
  173. <div>
  174. <span for="not-input-step">step</span>
  175. <input type="text" id="node-input-step" style="width:60px">
  176. </div>
  177. <div>
  178. <span for="not-input-max">max</span>
  179. <input type="text" id="node-input-max" style="width:60px">
  180. </div>
  181. </div>
  182. </div>
  183. <div class="form-row">
  184. <label for="node-input-iconPrepend"><i class="fa fa-picture-o"></i> Icons</label>
  185. <div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 70%">
  186. <div>
  187. <span for="node-input-iconPrepend">before</span>
  188. <input type="text" id="node-input-iconPrepend" placeholder="minus" style="width:60px">
  189. </div>
  190. <div>
  191. <span for="node-input-iconAppend">after</span>
  192. <input type="text" id="node-input-iconAppend" placeholder="plus" style="width:60px">
  193. </div>
  194. </div>
  195. </div>
  196. <div class="form-row">
  197. <label for="node-input-color"><i class="fa fa-adjust"></i> Color</label>
  198. <div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 70%">
  199. <div>
  200. <span for="node-input-color">slider</span>
  201. <input type="text" id="node-input-color" placeholder="red" style="width:60px">
  202. </div>
  203. <div>
  204. <span for="not-input-colorTrack">track</span>
  205. <input type="text" id="node-input-colorTrack" placeholder="green" style="width:60px">
  206. </div>
  207. <div>
  208. <span for="not-input-colorThumb">thumb</span>
  209. <input type="text" id="node-input-colorThumb" placeholder="#a5a5a5" style="width:60px">
  210. </div>
  211. </div>
  212. </div>
  213. <div class="form-row">
  214. <label for="node-input-outs"><i class="fa fa-sign-out"></i> Output</label>
  215. <select id="node-input-outs" style="width:204px">
  216. <option value="all">continuously while sliding</option>
  217. <option value="end">only on release</option>
  218. </select>
  219. </div>
  220. <div class="form-row">
  221. <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>
  222. <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
  223. </div>
  224. <div class="form-row">
  225. <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
  226. </div>
  227. <!-- <div class="form-row">
  228. <label style="padding-left:25px; margin-right:-25px">Payload</label>
  229. <label style="width:auto">Current value</label>
  230. </div> -->
  231. <div class="form-row">
  232. <label for="node-input-topic" style="padding-left:25px; margin-right:-25px">Topic</label>
  233. <input type="text" id="node-input-topic">
  234. </div>
  235. </div>
  236. </script>
  237. <style id="nr-db2-ui-slider-styles">
  238. .red-ui-editor div.ui-slider .form-row {
  239. display: flex;
  240. align-items: center;
  241. }
  242. .red-ui-editor div.ui-slider .form-row label {
  243. margin-bottom: 0;
  244. }
  245. </style>