Archive:Skinning for Drag n Drop - Revision history

Karellen: Karellen moved page Skinning for Drag n Drop to Archive:Skinning for Drag n Drop without leaving a redirect: Obsolete

2020-07-20T07:08:27Z

Karellen moved page Skinning for Drag n Drop to Archive:Skinning for Drag n Drop without leaving a redirect: Obsolete

← Older revision	Revision as of 07:08, 20 July 2020
(No difference)

Karellen at 04:49, 20 July 2020

2020-07-20T04:49:44Z

← Older revision		Revision as of 04:49, 20 July 2020
Line 6:		Line 6:
	You can allow a user to drag a list item onto any GUI element by specifying an ondrop action like:		You can allow a user to drag a list item onto any GUI element by specifying an ondrop action like:
	<ondrop>ACTION</ondrop>		<ondrop>ACTION</ondrop>
	[[Built-~~in functions available to FTP, Webserver, skins, keymap and to python~~\|See here for a list of available Actions]]		[[Built-in_scripting\|See here for a list of available Actions]]
	If you want to allow specific items to be dropable on that GUI Element, you can use the 'condition' Attribute		If you want to allow specific items to be dropable on that GUI Element, you can use the 'condition' Attribute
	<ondrop condition='dragndrop.item.isVideo'>ACTION</ondrop>		<ondrop condition='dragndrop.item.isVideo'>ACTION</ondrop>
Line 102:		Line 102:
	</control>		</control>
	I'm pretty sure any skinner could improve on that example, so feel free to do so ;)		I'm pretty sure any skinner could improve on that example, so feel free to do so ;)

	~~[[Category:Miscellaneous notes]]~~

Ronie at 12:22, 9 April 2016

2016-04-09T12:22:25Z

← Older revision		Revision as of 12:22, 9 April 2016
Line 30:		Line 30:
	<draghint> <!-- a draghint is basically a groupcontrol -->		<draghint> <!-- a draghint is basically a groupcontrol -->
	<control type="image">		<control type="image">
	<~~posx~~>0</~~posx~~>		<left>0</left>
	<~~posy~~>-8</~~posy~~> <!-- the draghint is positioned exactly between the list elements, so wee need to offset the image a little bit to overlap both items -->		<top>-8</top> <!-- the draghint is positioned exactly between the list elements, so wee need to offset the image a little bit to overlap both items -->
	<width>640</width>		<width>640</width>
	<height>16</height>		<height>16</height>
Line 65:		Line 65:
	<control type="image">		<control type="image">
	<description>Pointer Drag Image</description>		<description>Pointer Drag Image</description>
	<~~posx~~>0</~~posx~~>		<left>0</left>
	<~~posy~~>0</~~posy~~>		<top>0</top>
	<width>32</width>		<width>32</width>
	<height>32</height>		<height>32</height>
Line 73:		Line 73:
	<control type="image">		<control type="image">
	<visible>!isempty(dragndrop.item.icon)</visible>		<visible>!isempty(dragndrop.item.icon)</visible>
	<~~posx~~>20</~~posx~~>		<left>20</left>
	<~~posy~~>20</~~posy~~>		<top>20</top>
	<width>64</width>		<width>64</width>
	<height>64</height>		<height>64</height>
Line 85:		Line 85:
	<control type="label">		<control type="label">
	<visible>isempty(dragndrop.item.icon)</visible>		<visible>isempty(dragndrop.item.icon)</visible>
	<~~posx~~>20</~~posx~~>		<left>20</left>
	<~~posy~~>20</~~posy~~>		<top>20</top>
	<fadetime>IconCrossfadeTime</fadetime>		<fadetime>IconCrossfadeTime</fadetime>
	<label>$INFO[dragndrop.item.label]</label>		<label>$INFO[dragndrop.item.label]</label>
Line 94:		Line 94:
	<control type="image">		<control type="image">
	<visible>dragndrop.hovered.id(3003)</visible>		<visible>dragndrop.hovered.id(3003)</visible>
	<~~posx~~>60</~~posx~~>		<left>60</left>
	<~~posy~~>60</~~posy~~>		<top>60</top>
	<width>16</width>		<width>16</width>
	<height>16</height>		<height>16</height>

NedBot: Bot: Automated text replacement (- XBMC + Kodi ); cosmetic changes

2015-05-04T08:52:05Z

Bot: Automated text replacement (- XBMC + Kodi ); cosmetic changes

← Older revision		Revision as of 08:52, 4 May 2015
Line 1:		Line 1:
	{{notice\|This page describes an experimental feature that is not currently included in normal ~~XBMC~~ builds or the master code branch.}}		{{notice\|This page describes an experimental feature that is not currently included in normal Kodi builds or the master code branch.}}

	== Allow File items to be dragged on any GUI Element ==		== Allow File items to be dragged on any GUI Element ==
Line 6:		Line 6:
	You can allow a user to drag a list item onto any GUI element by specifying an ondrop action like:		You can allow a user to drag a list item onto any GUI element by specifying an ondrop action like:
	<ondrop>ACTION</ondrop>		<ondrop>ACTION</ondrop>
	[[Built-~~in_functions_available_to_FTP~~,~~_Webserver~~,~~_skins~~,~~_keymap_and_to_python~~\|See here for a list of available Actions]]		[[Built-in functions available to FTP, Webserver, skins, keymap and to python\|See here for a list of available Actions]]
	If you want to allow specific items to be dropable on that GUI Element, you can use the 'condition' Attribute		If you want to allow specific items to be dropable on that GUI Element, you can use the 'condition' Attribute
	<ondrop condition='dragndrop.item.isVideo'>ACTION</ondrop>		<ondrop condition='dragndrop.item.isVideo'>ACTION</ondrop>

NedBot: Robot: Substituting template: Name

2014-06-05T20:36:02Z

Robot: Substituting template: Name

← Older revision		Revision as of 20:36, 5 June 2014
Line 1:		Line 1:
	{{notice\|This page describes an experimental feature that is not currently included in normal ~~{{name}}~~ builds or the master code branch.}}		{{notice\|This page describes an experimental feature that is not currently included in normal XBMC builds or the master code branch.}}

	== Allow File items to be dragged on any GUI Element ==		== Allow File items to be dragged on any GUI Element ==

NedBot: Bot: Automated text replacement (- XBMC + {{name}} )

2014-06-05T01:16:46Z

Bot: Automated text replacement (- XBMC + {{name}} )

← Older revision		Revision as of 01:16, 5 June 2014
Line 1:		Line 1:
	{{notice\|This page describes an experimental feature that is not currently included in normal ~~XBMC~~ builds or the master code branch.}}		{{notice\|This page describes an experimental feature that is not currently included in normal {{name}} builds or the master code branch.}}

	== Allow File items to be dragged on any GUI Element ==		== Allow File items to be dragged on any GUI Element ==

Ned Scott at 00:12, 26 April 2014

2014-04-26T00:12:50Z

← Older revision		Revision as of 00:12, 26 April 2014
Line 1:		Line 1:
			{{notice\|This page describes an experimental feature that is not currently included in normal XBMC builds or the master code branch.}}

	== Allow File items to be dragged on any GUI Element ==		== Allow File items to be dragged on any GUI Element ==
	NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]		NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]
Line 100:		Line 102:
	</control>		</control>
	I'm pretty sure any skinner could improve on that example, so feel free to do so ;)		I'm pretty sure any skinner could improve on that example, so feel free to do so ;)

			[[Category:Miscellaneous notes]]

NedBot: prettytable

2014-03-14T05:41:56Z

prettytable

← Older revision		Revision as of 05:41, 14 March 2014
Line 40:		Line 40:
	== Skin Labels available during drag & drop ==		== Skin Labels available during drag & drop ==
	NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]		NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]
	{\| class="~~wikitable~~" border="1"		{\| class="prettytable" border="1"
	\|-		\|-
	\| dragging		\| dragging

>Fice: Created page with "== Allow File items to be dragged on any GUI Element == NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]..."

2013-07-04T17:13:01Z

Created page with "== Allow File items to be dragged on any GUI Element == NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]..."

New page

== Allow File items to be dragged on any GUI Element ==
NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]

You can allow a user to drag a list item onto any GUI element by specifying an ondrop action like:
<ondrop>ACTION</ondrop>
[[Built-in_functions_available_to_FTP,_Webserver,_skins,_keymap_and_to_python|See here for a list of available Actions]]
If you want to allow specific items to be dropable on that GUI Element, you can use the 'condition' Attribute
<ondrop condition='dragndrop.item.isVideo'>ACTION</ondrop>

NOTE: with any GUI Element, I mean any, except Containers (Lists, Panels et. al.).

== Auto Execute an Action while hovering ==
NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]

Still thinking about all the implications, so this isn't set in stone. Will add it later.

== Prepare Containers to be dropable or reorderable ==
NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]

First, off, you don't have to do anything. In that case, when the user drags an item, it will be automatically added/moved and gives the user direct feedback.

=== Using a DragHint ===
NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]

If that's not the behavior you want, you can use a Drag Hint. That DragHint will be a dummy GUI Element shown, where the dragged item will finally placed.
<control type="panel" id="451">
<!- - YOUR USUAL LIST STUFF - ->
<draghint> 
<control type="image">
<posx>0</posx>
<posy>-8</posy> 
<width>640</width>
<height>16</height>
<texture>CalibrateSubtitles.png</texture> 
<aspectratio>stretch</aspectratio>
</control>
</draghint>
</control>

== Skin Labels available during drag & drop ==
NOTE: This is experimental and only available in [https://github.com/Fice/xbmc/branches/dragndrop my Drag and Drop Branch]
{| class="wikitable" border="1"
|-
| dragging
| True when the user is currently dragging sth.
|-
| listitem.isDragged
| True when the user is currently dragging this item
|-
| listitem.isDropped
| True when the user is currently dropping this item. The difference to isDragged is, that isDragged is true in the list where the dragging began, and isDropped is true on the item where it will be placed. For in-list-reordering both will be true
|-
| dragndrop.hovered.id
| The id of the GUI element that is currently hovered and has a valid ''<ondrop>'' action for the dragged item. Might be 0 if the element has no ID, or the user doesn't hover a dropable element.
|-
| dragndrop.item.{FOO}
| Gives you access to the dragged item, where {FOO} is the same as in ''listitem.{FOO}''.
|}

== EXAMPLE: Show the dragged Item under the Mouse ==
Add the following to your ''Pointer.xml'' and you skin will now show the dragged items icon (or label as a fallback), as well as a little icon when hovering the button with the id 3003
<control type="group" id="3">
<control type="image">
<description>Pointer Drag Image</description>
<posx>0</posx>
<posy>0</posy>
<width>32</width>
<height>32</height>
<texture>pointer-focus-drag.png</texture>
</control>
<control type="image">
<visible>!isempty(dragndrop.item.icon)</visible>
<posx>20</posx>
<posy>20</posy>
<width>64</width>
<height>64</height>
<aspectratio align="center">keep</aspectratio>
<fadetime>IconCrossfadeTime</fadetime>
<texture>$INFO[dragndrop.item.icon]</texture>
<bordertexture border="8">ThumbShadow.png</bordertexture>
<bordersize>8</bordersize>
</control>
<control type="label">
<visible>isempty(dragndrop.item.icon)</visible>
<posx>20</posx>
<posy>20</posy>
<fadetime>IconCrossfadeTime</fadetime>
<label>$INFO[dragndrop.item.label]</label>
</control>

<control type="image">
<visible>dragndrop.hovered.id(3003)</visible>
<posx>60</posx>
<posy>60</posy>
<width>16</width>
<height>16</height>
<texture>add-icon.png</texture>
</control>
</control>
I'm pretty sure any skinner could improve on that example, so feel free to do so ;)