Javascript tab and event in UI7

Plugins & Plugin Development General Plugin Discussion
#1

Hello,

as space on the dashboard is restricted, I’m seeking other solutions to display variables of a plugin.

I didn’t see, in the UI7 Javascript API, a way to respond at device events (as “luup.variable_watch”).
My goal is to be able to view real-time changes on variables, when the javascript panel is displayed.

#2

ok :slight_smile:

I’ve looked into the javascript code of the UI… The wiki was not very clear.

In fact, when you use api.registerEventHandler, it’s implicitly for the device of the current panel.

The registers are destroyed at the panel closure.

I will try and report.

#3

[quote=“vosmont, post:2, topic:186302”]ok :slight_smile:

I’ve looked into the javascript code of the UI… The wiki was not very clear.

In fact, when you use api.registerEventHandler, it’s implicitly for the device of the current panel.

The registers are destroyed at the panel closure.

I will try and report.[/quote]
This is true but it is the way it should be since what you are registering is an event on the UI. This is the nature of the web. Pages for other devices/tabs are not in existence on your client after you close it. This is not luup.variable_watch it is an event handler to respond to user UI events from the current page loaded in the browser.

As well, there is no such thing as a push to a client from a web server. This is a request/response pattern meaning the client requests (browser) and the server (Vera) responds. In fact the magic of real time updates from the Vera dashboard is performed using Ajax commands that periodically ask the Vera what has changed. When a change occurs the panel is redrawn to reflect the change.

On the other hand there are ways around the space limitations on the dashboard by exploiting the absolute positioning of the controls within the panel. Vera tried to make a flow layout panel which has never been done well. This requires that the outer boundary dimensions be declared and the contents be dynamically positioned in such a way to make them fit. This mythical algorithm is the UI designer’s unicorn. Every time it’s tried the rules of the layout get in the way of the desired look and feel. You can either have a good looking UI or you can have one that flows to meet one of the dimensions of the display. Amazingly, developers try this over and over again and the result is always a javascript spaghetti dinner that leaves a mess in the kitchen.

This also accounts for the weirdness in the static .json’s SceneGroup and various display properties. The inner scenegroup div is absolutely positioned within a relatively positioned device details div. The top, left of the device details div is flow based and appears after the vertical space above it is consumed. It has an area of 350x100 pixels. This area is then divided up into rows and columns using the max x and y values for all scenegroups defined in the json in an attempt to get the scenegroups to flow around each other. It works to create a flow but the rules for it are painful and rigid.

What would really be awesome is if they gave us a small array of layout templates with a predefined width/height canvas and allowed developers to position the controls inside using css positioning. This would eliminate all the exceptions and let the developer define the ugliness of their panel. Right now this ugliness is created by the flow mechanism.

All controls with the exception of two can be broken out of the flow because controls are positioned relative to the scenegroup. slider_vertical and button cannot because the top/left attributes are ignored. I suspect this was to satisfy some of the dynamic button, and multiple thermostat plugins. These controls can only be positioned on the horizontal using the scenegroup top, left. See attached.

#4

Thanks for your response.

I was about to ask you how you’d done your plugin panel in the screenshot… when I’ve seen your new plugin “Virtual Panel”.
:smiley:

ha ha ha ha
I can’t stop laughing (probably too many luup.reload that have burned my brain)

#5

[quote=“vosmont, post:2, topic:186302”]ok :slight_smile:

I’ve looked into the javascript code of the UI… The wiki was not very clear.

In fact, when you use api.registerEventHandler, it’s implicitly for the device of the current panel.

The registers are destroyed at the panel closure.

I will try and report.[/quote]

In fact the registration is not just for the device linked to the plugin.
You receive the changes of all the devices.
As the documentation is not really clear, here is an example of implementation :

var MyPlugin = (function (api, $) {

	var myModule = {
		uuid: "ToBeDefined",
	};
	var _deviceId = null;

	function onDeviceStatusChanged (deviceObjectFromLuStatus) {
		if (deviceObjectFromLuStatus.id == _deviceId) {
			for (i = 0; i < deviceObjectFromLuStatus.states.length; i++) { 
				if (deviceObjectFromLuStatus.states[i].variable == "MyVariable") {
					var value = deviceObjectFromLuStatus.states[i].value
					// ***
					// Do something with your value
					// ***
					return;
				}
			}
		}
	}

	function start (deviceId) {
		_deviceId = deviceId;
		// Register
		api.registerEventHandler("on_ui_deviceStatusChanged", myModule, "onDeviceStatusChanged");
	}

	myModule.onDeviceStatusChanged = onDeviceStatusChanged;
	myModule.start = start;

	return myModule;

})(api, jQuery);