Luup plugins: Static JSON file - Revision history

Gengen at 17:05, 12 June 2016

2016-06-12T17:05:58Z

Gengen at 16:35, 10 March 2016

2016-03-10T16:35:54Z

Gengen at 16:33, 10 March 2016

2016-03-10T16:33:06Z

Gengen: Added AfterInit documentation

2016-03-10T16:17:47Z

Added AfterInit documentation

Andreimios at 10:30, 10 March 2015

2015-03-10T10:30:20Z

Show changes

A-lurker: /* Root keys */

2015-02-11T04:38:37Z

‎Root keys

Andreimios at 15:53, 30 September 2014

2014-09-30T15:53:47Z

Gengen: Delete extra whitespace

2013-06-09T16:58:08Z

Delete extra whitespace

Gengen: Formatting edit.

2013-06-09T16:57:04Z

Formatting edit.

Show changes

Gengen: Corrections for UI5

2013-06-09T16:41:34Z

Corrections for UI5

Show changes

@@ Line 142: / Line 142: @@
            "Position": "0",
            "TabType": "flash",
            "AfterInit": {
                      "ScriptName": "J_PhilipsHueLamp2.js",
@@ Line 150: / Line 151: @@
 </source>
 * '''AfterInit'''
 : object which contains two properties:

@@ Line 131: / Line 131: @@
 [[File:AfterInit.png|image|center|AfterInit]]
-This image is taken from MiOS implementation of PhilipsHue plugin . As you can see the part
+This image is taken from the MiOS implementation of the PhilipsHue plugin . As you can see the part
 which is situated below the dashed line is inserted via Javascript code. In order to achieve this,
 the following json was used for the ‘Control’ tab:

@@ Line 129: / Line 129: @@
 content directly in a cpanel in the Control tab.
-[[File:AfterInt.png|image|center|caption]]
+[[File:AfterInit.png|image|center|AfterInit]]
 This image is taken from MiOS implementation of PhilipsHue plugin . As you can see the part

← Older revision		Revision as of 16:17, 10 March 2016
Line 123:		Line 123:
	[[File:TopNavigationTab.jpg\|image\|center\|caption]]		[[File:TopNavigationTab.jpg\|image\|center\|caption]]

		+	== Adding Javascript code to Flash tabs ==
		+
		+	In UI7, Each tab of type flash in a device json can have a property called ‘AfterInit’ which can be
		+	used to execute some Javascript code. This way a developer can “insert” custom defined
		+	content directly in a cpanel in the Control tab.
		+
		+	[[File:AfterInt.png\|image\|center\|caption]]
		+
		+	This image is taken from MiOS implementation of PhilipsHue plugin . As you can see the part
		+	which is situated below the dashed line is inserted via Javascript code. In order to achieve this,
		+	the following json was used for the ‘Control’ tab:
		+	<source lang="javascript">
		+	{
		+	"Label": {
		+	"lang_tag": "control",
		+	"text": "Control"
		+	},
		+	"Position": "0",
		+	"TabType": "flash",
		+	"AfterInit": {
		+	"ScriptName": "J_PhilipsHueLamp2.js",
		+	"Function": "PhilipsHueLamp2.color_picker"
		+	} ,
		+	...
		+	}
		+	</source>
		+
		+	* '''AfterInit'''
		+	: object which contains two properties:
		+	* '''ScriptName'''
		+	: specifies the .js file where the function resides; the .js file is loaded when the user enters the cpanel
		+	* '''Function'''
		+	: specifies the name of the function to execute

	== Position device controls for generic devices ==		== Position device controls for generic devices ==

@@ Line 62: / Line 62: @@
 ; Tabs
 : A JSON array.  Describes the tabs in the detail dialog, and what subset of the first tab appears in the dashboard.  See [[Luup plugin tabs]].
 ; DeviceType
 : A JSON string.  Must match the '''deviceType''' element in the corresponding device XML ('''D_PluginName.xml''') file.
@@ Line 70: / Line 72: @@
 ; sceneList
 : A JSON object (associative array).  Describes the actions that this plugin can perform (for instance, as the action in a scene). This key is not required and is ignored in UI5, however it is needed for UI4 compatibility. See [[UI4 UI5 Migration]] for more information about its format.
 = UI7 Updates =

← Older revision		Revision as of 15:53, 30 September 2014
Line 70:		Line 70:
	; sceneList		; sceneList
	: A JSON object (associative array). Describes the actions that this plugin can perform (for instance, as the action in a scene). This key is not required and is ignored in UI5, however it is needed for UI4 compatibility. See [[UI4 UI5 Migration]] for more information about its format.		: A JSON object (associative array). Describes the actions that this plugin can perform (for instance, as the action in a scene). This key is not required and is ignored in UI5, however it is needed for UI4 compatibility. See [[UI4 UI5 Migration]] for more information about its format.
		+	= UI7 Updates =
		+
		+	* '''default_icon'''
		+	: replace the old "flashicon" from UI5. See [[Luup plugin icons]]
		+	* '''state_icons'''
		+	: state_icons mechanism has changed in UI7. Please see [[Luup plugin icons]]
		+	* '''TopNavigationTab''' = '''top_navigation_tab'''
		+
		+	In device cpanel, tabs can be placed either in the top part or in the bottom. By default they are put in the bottom part. You can mark your tabs with a special flag so that they can be placed in top navigation bar of the cpanel.
		+	If two or more tabs are marked with ‘'''TabType=”flash”'''’, only the first one found will be placed in top navigation bar. If you want all of them to be placed there, you have to add ‘'''top_navigation_tab'''’ to each one.
		+	Let’s assume you have a plugin named ‘MyPlugin’ and you want to put a button in the top navigation bar, which, when clicked, will display a message in the cpanel.
		+
		+	* Add the following lines to the .json device file (D_MyPlugin.json), in the Tabs section:
		+	<source lang="javascript">
		+	{
		+	"Label": {
		+	"lang_tag": "About",
		+	"text": "About"
		+	},
		+	"TopNavigationTab": "1",
		+	"Position": "4",
		+	"TabType": "javascript",
		+	"ScriptName": "J_MyPlugin.js",
		+	"Function": "MyPlugin.about"
		+	}
		+	</source>
		+
		+	Notice the property ‘'''TopNavigationTab'''’ set to the value of ‘1’. This is the line that specifies where to place the tab in cpanel. If you set a value different than 1, the tab will be placed in the bottom part of the cpanel, so always use ‘1’ if you want the tab in the top bar. You can also use ‘'''top_navigation_tab'''’.
		+
		+	* Add the following lines of code to your .js file (J_MyPlugin.js):
		+
		+	<source lang="javascript">
		+	var MyPlugin = (function(api){
		+	return {
		+	about: function() {
		+	try {
		+	var html = '<div>This is all about me !</div>';
		+	api.setCpanelContent(html);
		+	} catch (e) {
		+	Utils.logError('Error in MyPlugin.about(): ' + e);
		+	}
		+	}
		+	};
		+	})(api);
		+	</source>
		+
		+	* Perform a lu reload, enter device cpanel and click on ‘About’ button (which is in the top navigation bar of the cpanel) and the result will be something like this:
		+
		+	[[File:TopNavigationTab.jpg\|image\|left]]

@@ Line 1: / Line 1: @@
 [[Category:Development]]
-−
-−
-										[[Category:Development]]
 Starting in UI4, Luup plugins can specify a ''static JSON'' file.  This file describes how the plugin appears in the web interface.