How to set a static Backdrop with openModal(templateUrl, [noAnimation, [size]])

Hello.

I am trying to create a custom widget [Edit: for the HabPanel] to control my Fibaro Wall Plugs (FGWP102). But I am totally new with angularjs and need some help to prevent the user to close a modal window by clicking outside of the window.

Reason: I did use ‘setTimeout’ to implement a color loop on the wall plug (to visually identify the wall plug… I have several of those :D). But if the user does not close properly the modal window, I can’t call ‘clearTimeout’ to stop the loop. And it continues for ever :roll_eyes:

I read here that it should be possible to define the backdrop as ‘static’ in order to prevent a user to close the modal window by clicking outside. But the only parameters for the function openModal are templateUrl, noAnimation and size…

Would someone have an idea how to do this ?
NB.: Another option for me would be to have an event when the modal windows is closed… But being new with angularjs, I don’t see how to do this either…

Here is the draft code that I have so far for my widget (with a lot of hardcoded values):

/static/vletroye/fibaro.js
(function() {

  'use strict';
  angular.module('app', []).
	controller('ngclickCtrl', ['$scope', function($scope) {
		$scope.initOn = 0;
		$scope.initOff = 0;
		$scope.img = 0;
		$scope.count = 0;
		$scope.timerId = 0;
		$scope.colorLoopImg;
		$scope.startColorLoop = function () {
			if ($scope.timerId > 0) {
				$scope.stopColorLoop();
			} else {
				$scope.initOn = $scope.itemValue('WallPlug36_Switch_Color_On');
				$scope.colorLoopImg=document.getElementById('#colorLoopImg');
				$scope.doColorLoop();
			}
		};
		$scope.stopColorLoop = function () {
			if ($scope.timerId > 0) {
				clearTimeout($scope.timerId);
				$scope.timerId = 0;
				//alert('End:' + $scope.count + ':' + $scope.timerId);
				$scope.sendCmd('WallPlug36_Switch_Color_On', $scope.initOn);
			}
		};
		$scope.doColorLoop = function () {
			$scope.count = ($scope.count + 1) % 7;
			$scope.img = ($scope.count + 1) % 4;
			//alert('Step:' + $scope.count + ':' + $scope.timerId);
			$scope.sendCmd('WallPlug36_Switch_Color_On', 3+$scope.count);
			$scope.colorLoopImg.src = '/static/vletroye/images/colorloop'+($scope.img + 1)+'.png';
			$scope.timerId = setTimeout($scope.doColorLoop, 1000);
		};		
		}]
	);
})();

Custom Widget
Fibaro Wall Plug.widget (1).json (9.9 KB)

Any help would be very appreciated. Many thx in adv !

V.

Likely a stupid question, but which of OH’s many user interfaces?

I am using the HABpanel both in a browser and in the openHAB app for Android.

V.

Thanks. That explains why it did not appear familiar to me.