From 0c7aa4d07dd4a7636fbad4c5457f0907a22196cc Mon Sep 17 00:00:00 2001
From: lolodomo <lg.hc@free.fr>
Date: Sun, 21 Apr 2024 16:29:19 +0200
Subject: [PATCH] [BasicUI] Fix slider behaviour and implement two different
 modes (#2535)

Fix #2525
Also related to openhab/openhab-core#4084 and openhab/openhab-core#3430

Two behaviour modes are now supported.
- If releaseOnly parameter is set, the new value is sent to the item
only when the slider is released.
- If releaseOnly parameter is not set, new values are sent to the item
while moving the slider. Events are sent at a certain frequency, this
frequency is defined by the sendFrequency parameter if set or every 200
ms by default. Event is not sent when the value is is unchanged (when
stopping the move but keeping the mouse pressed).

The brightness slider of the colorpicker widget is also updated to send
regular new color commands when moving the slider.

Signed-off-by: Laurent Garnier <lg.hc@free.fr>
---
 .../basic/internal/render/SliderRenderer.java |  5 +-
 .../src/main/resources/snippets/slider.html   |  2 +-
 .../org.openhab.ui.basic/web-src/smarthome.js | 71 ++++++++++++-------
 3 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SliderRenderer.java b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SliderRenderer.java
index 8f8d02cadb..dd5316d57b 100644
--- a/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SliderRenderer.java
+++ b/bundles/org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SliderRenderer.java
@@ -65,9 +65,6 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
         String snippetName = "slider";
         String snippet = getSnippet(snippetName);
 
-        // set the default send-update frequency to 200ms
-        String frequency = s.getFrequency() == 0 ? "200" : Integer.toString(s.getFrequency());
-
         String unit = getUnitForWidget(w);
         if (unit == null) {
             // Search the unit in the item state
@@ -82,7 +79,7 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
         }
 
         snippet = preprocessSnippet(snippet, w);
-        snippet = snippet.replace("%frequency%", frequency);
+        snippet = snippet.replace("%release_only%", s.isReleaseOnly() ? "true" : "false");
         snippet = snippet.replace("%switch%", s.isSwitchEnabled() ? "1" : "0");
         snippet = snippet.replace("%unit%", unit == null ? "" : unit);
         snippet = snippet.replace("%minValue%", minValueOf(s));
diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html
index db25da5fe7..e3ffa570f4 100644
--- a/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html
+++ b/bundles/org.openhab.ui.basic/src/main/resources/snippets/slider.html
@@ -21,7 +21,7 @@
 		data-icon-color="%icon_color%"
 	>
 		<input
-			data-freq="%frequency%"
+			data-release-only="%release_only%"
 			data-state="%state%"
 			class="mdl-slider mdl-js-slider"
 			type="range"
diff --git a/bundles/org.openhab.ui.basic/web-src/smarthome.js b/bundles/org.openhab.ui.basic/web-src/smarthome.js
index 23a3b1ea92..ae07c7233c 100644
--- a/bundles/org.openhab.ui.basic/web-src/smarthome.js
+++ b/bundles/org.openhab.ui.basic/web-src/smarthome.js
@@ -296,10 +296,10 @@
 				callback.apply(null, args);
 				_t.lock = true;
 				setTimeout(function() {
+					_t.lock = false;
 					if (!finished) {
-						callback.apply(null, args);
+						_t.call(callback, callInterval);
 					}
-					_t.lock = false;
 				}, callInterval);
 			}
 		};
@@ -1627,7 +1627,8 @@
 	/* class Colorpicker */
 	function Colorpicker(parentNode, color, callback) {
 		var
-			_t = this;
+			_t = this,
+			lastBrightnessSent = null;
 
 		/* rgb2hsv and hsv2rgb are modified versions from http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c */
 		function rgb2hsv(rgbColor) {
@@ -1838,7 +1839,10 @@
 		}
 
 		_t.debounceProxy = new DebounceProxy(function() {
-			callback(_t.hsvValue);
+			if (_t.hsvValue.v !== lastBrightnessSent) {
+				callback(_t.hsvValue);
+				lastBrightnessSent = _t.hsvValue.v;
+			}
 		}, 200);
 
 		_t.updateColor = function(c) {
@@ -1849,26 +1853,30 @@
 			setColor(c);
 		};
 
-		// Some browsers fire onchange while the slider handle is being moved.
-		// This is incorrect, according to the specs, but it's impossible to detect,
-		// so DebounceProxy is used
+		function onSliderChangeStart() {
+			lastBrightnessSent = null;
+		}
+
 		function onSliderChange() {
+			_t.debounceProxy.finish();
 			_t.hsvValue.v = _t.slider.value / 100;
-			_t.debounceProxy.call();
+			if (_t.hsvValue.v !== lastBrightnessSent) {
+				callback(_t.hsvValue);
+				lastBrightnessSent = _t.hsvValue.v;
+			}
 		}
 
-		function onSliderFinish() {
+		function onSliderInput() {
 			_t.hsvValue.v = _t.slider.value / 100;
-
 			_t.debounceProxy.call();
-			_t.debounceProxy.finish();
 		}
 
 		var
 			eventMap = [
+				[ _t.slider, "touchstart", onSliderChangeStart ],
+				[ _t.slider, "mousedown",  onSliderChangeStart ],
+				[ _t.slider, "input",      onSliderInput ],
 				[ _t.slider, "change",     onSliderChange ],
-				[ _t.slider, "touchend",   onSliderFinish ],
-				[ _t.slider, "mouseup",    onSliderFinish ],
 				[ _t.image,  "mousedown",  onMove ],
 				[ _t.image,  "mousemove",  onMove ],
 				[ _t.image,  "touchmove",  onMove ],
@@ -2354,9 +2362,12 @@
 		Control.call(this, parentNode);
 
 		var
-			_t = this;
+			_t = this,
+			unlockTimeout = null,
+			lastSentCmd = null;
 
 		_t.input = _t.parentNode.querySelector("input[type=range]");
+		_t.releaseOnly = _t.input.getAttribute("data-release-only") === "true";
 		_t.hasValue = _t.parentNode.getAttribute("data-has-value") === "true";
 		_t.valueNode = _t.parentNode.parentNode.querySelector(o.formValue);
 		_t.locked = false;
@@ -2379,7 +2390,14 @@
 		})();
 
 		function emitEvent() {
-			var command = _t.input.value;
+			var
+				value = _t.input.value,
+				command = value;
+
+			if (value === lastSentCmd) {
+				return;
+			}
+
 			if (_t.unit) {
 				command = command + " " + _t.unit;
 			}
@@ -2387,6 +2405,7 @@
 				item: _t.item,
 				value: command
 			}));
+			lastSentCmd = value;
 		}
 
 		_t.debounceProxy = new DebounceProxy(function() {
@@ -2418,11 +2437,15 @@
 			_t.valueNode.style.color = smarthome.UI.adjustColorToTheme(_t.valueColor);
 		};
 
-		var
-			unlockTimeout = null;
-
 		function onChange() {
-			_t.debounceProxy.call();
+			_t.debounceProxy.finish();
+			emitEvent();
+		}
+
+		function onInput() {
+			if (!_t.releaseOnly) {
+				_t.debounceProxy.call();
+			}
 		}
 
 		function onChangeStart() {
@@ -2430,20 +2453,13 @@
 				clearTimeout(unlockTimeout);
 			}
 			_t.locked = true;
-			smarthome.changeListener.pause();
+			lastSentCmd = null;
 		}
 
 		function onChangeEnd() {
-			// mouseUp is fired earlier than the value is changed
-			// quite a dirty hack, but I don't see any other way
-			_t.debounceProxy.call();
-			setTimeout(function() {
-				smarthome.changeListener.resume();
-			}, 5);
 			unlockTimeout = setTimeout(function() {
 				_t.locked = false;
 			}, 300);
-			_t.debounceProxy.finish();
 		}
 
 		var
@@ -2452,6 +2468,7 @@
 				[ _t.input, "mousedown",  onChangeStart ],
 				[ _t.input, "touchend",   onChangeEnd ],
 				[ _t.input, "mouseup",    onChangeEnd ],
+				[ _t.input, "input",      onInput ],
 				[ _t.input, "change",     onChange ]
 			];