14 replies to this topic

[Huevos]

As Littlesat said in this thread:

 

When you do it really right you need to make a listbox horizontal type with size scrollbar number of items etc [...] it is really a feature that universally could be used.

 

So here is a PR for elistbox horizontal.

 

It can be used for horizontal menus, lists, tabs, etc.

 

Possible skin for horizontal menu:

	<screen name="MenuHorizontal" position="fill" backgroundColor="transparent" flags="wfNoBorder">
		<ePixmap alphatest="blend" pixmap="infobar/hd.png" position="0,e-180" size="e,180" zPosition="-1" scale="1"/>
		<widget source="Title" conditional="Title" render="Label" position="0,e-170" size="e,80" font="Regular;64" halign="center" valign="center" transparent="1" backgroundColor="transpBlack"/>
		<widget source="menu" render="Listbox" enableWrapAround="off" position="60,e-85" size="1800,80" foregroundColorSelected="selectedFG" foregroundColor="foreground" backgroundColorSelected="transpBlack" backgroundColor="transpBlack" scrollbarMode="showNever" selectionFrame="none" >
			<convert type="TemplatedMultiContent">
				{"template": [ MultiContentEntryText(pos = (10,0), size = (340,80), flags = RT_HALIGN_CENTER|RT_VALIGN_CENTER,text = 0) ],
					"fonts": [gFont("Regular",34)],
					"itemHeight": 80,
					"itemWidth": 360,
					"orientation" : "orHorizontal",
				}
			</convert>
		</widget>
		<widget addon="Pager" connection="menu" itemHeight="75" showIcons="onlyFirst" picPage="icons/chevronleft.png" picPageCurrent="icons/chevronlefttrans.png" position="0,e-85" size="50,75" transparent="0" backgroundColor="transpBlack"/>
		<widget addon="Pager" connection="menu" itemHeight="75" showIcons="onlyLast" picPage="icons/chevronright.png" picPageCurrent="icons/chevronrighttrans.png" position="e-50,e-85" size="50,75" transparent="0" backgroundColor="transpBlack"/>
	</screen>

 

 

Attached Files

•  1.jpg   100.6KB   1 downloads

[Huevos]

The PR is here: https://github.com/O...igma2/pull/3661

[littlesat]

What added value does it really has? That way the menu options string length should be short. Personally I think it is not really practical. It is something that adds code just to add code because it can be done for fun.
This at least for the menu’s… but there might be other places where it can be helpfull…

Edited by littlesat, 19 March 2023 - 05:49.

[Dimitrij]

Can this function be made automatic (on / off)?

[DimitarCC]

Define automatic? For what purpose?

[Dimitrij]

any skin --> on/off horizontal mode

[DimitarCC]

The mode is defined in the skin for every instance of the listbox. If you define orientation attribute to orHorizontal it will became horizontal. By default is vertical.
If you mean some general setting for all listboxes.. There is not such.

[Huevos]

any skin --> on/off horizontal mode

Maybe I don't understand exactly what you are asking, but, look at these.

 

https://github.com/O...ns/Menu.py#L218

https://github.com/O...nu.py#L227-L233

[Huevos]

What added value does it really has? That way the menu options string length should be short. Personally I think it is not really practical. It is something that adds code just to add code because it can be done for fun.
This at least for the menu’s… but there might be other places where it can be helpfull…

Please don't concentrate on strings, or menus. e.g this could be used to display a list of icons horizontally.

[littlesat]

Maybe only show the option in config when the selected skin does support it

[DimitarCC]

Ummm the setting that make the listbox horizontal is in the skin. If you dont add it in the skin (including the horizontal template) then horizontal listbox will not be shown and everything will work like it was before. Maybe skin makers can add a mark that in skin there is horizontal listbox support, but i am not sure what will be the benefit.
Mainly because only one listbox somewhere can be horizontal and all the rest vertical.
The horizontal listbox support is for general use where the skinner want it.

Edited by DimitarCC, 19 March 2023 - 11:44.

[MCelliotG]

 

As Littlesat said in this thread:

 

When you do it really right you need to make a listbox horizontal type with size scrollbar number of items etc [...] it is really a feature that universally could be used.

 

So here is a PR for elistbox horizontal.

 

It can be used for horizontal menus, lists, tabs, etc.

 

Possible skin for horizontal menu:

	<screen name="MenuHorizontal" position="fill" backgroundColor="transparent" flags="wfNoBorder">
		<ePixmap alphatest="blend" pixmap="infobar/hd.png" position="0,e-180" size="e,180" zPosition="-1" scale="1"/>
		<widget source="Title" conditional="Title" render="Label" position="0,e-170" size="e,80" font="Regular;64" halign="center" valign="center" transparent="1" backgroundColor="transpBlack"/>
		<widget source="menu" render="Listbox" enableWrapAround="off" position="60,e-85" size="1800,80" foregroundColorSelected="selectedFG" foregroundColor="foreground" backgroundColorSelected="transpBlack" backgroundColor="transpBlack" scrollbarMode="showNever" selectionFrame="none" >
			<convert type="TemplatedMultiContent">
				{"template": [ MultiContentEntryText(pos = (10,0), size = (340,80), flags = RT_HALIGN_CENTER|RT_VALIGN_CENTER,text = 0) ],
					"fonts": [gFont("Regular",34)],
					"itemHeight": 80,
					"itemWidth": 360,
					"orientation" : "orHorizontal",
				}
			</convert>
		</widget>
		<widget addon="Pager" connection="menu" itemHeight="75" showIcons="onlyFirst" picPage="icons/chevronleft.png" picPageCurrent="icons/chevronlefttrans.png" position="0,e-85" size="50,75" transparent="0" backgroundColor="transpBlack"/>
		<widget addon="Pager" connection="menu" itemHeight="75" showIcons="onlyLast" picPage="icons/chevronright.png" picPageCurrent="icons/chevronrighttrans.png" position="e-50,e-85" size="50,75" transparent="0" backgroundColor="transpBlack"/>
	</screen>

This is very very interesting, as a skinner I'm so intrigued by that.

BTW, I want to make sure what the "e" parameter does exactly, does it dynamically place objects? Where is this located position="e-50,e-85" compared to this position="0,e-85".

[DimitarCC]

This is example from OpenViX. I am not sure that e parameter is available on PLi. Have to be checked out.

[Huevos]

 

 

As Littlesat said in this thread:

 

When you do it really right you need to make a listbox horizontal type with size scrollbar number of items etc [...] it is really a feature that universally could be used.

 

So here is a PR for elistbox horizontal.

 

It can be used for horizontal menus, lists, tabs, etc.

 

Possible skin for horizontal menu:

	<screen name="MenuHorizontal" position="fill" backgroundColor="transparent" flags="wfNoBorder">
		<ePixmap alphatest="blend" pixmap="infobar/hd.png" position="0,e-180" size="e,180" zPosition="-1" scale="1"/>
		<widget source="Title" conditional="Title" render="Label" position="0,e-170" size="e,80" font="Regular;64" halign="center" valign="center" transparent="1" backgroundColor="transpBlack"/>
		<widget source="menu" render="Listbox" enableWrapAround="off" position="60,e-85" size="1800,80" foregroundColorSelected="selectedFG" foregroundColor="foreground" backgroundColorSelected="transpBlack" backgroundColor="transpBlack" scrollbarMode="showNever" selectionFrame="none" >
			<convert type="TemplatedMultiContent">
				{"template": [ MultiContentEntryText(pos = (10,0), size = (340,80), flags = RT_HALIGN_CENTER|RT_VALIGN_CENTER,text = 0) ],
					"fonts": [gFont("Regular",34)],
					"itemHeight": 80,
					"itemWidth": 360,
					"orientation" : "orHorizontal",
				}
			</convert>
		</widget>
		<widget addon="Pager" connection="menu" itemHeight="75" showIcons="onlyFirst" picPage="icons/chevronleft.png" picPageCurrent="icons/chevronlefttrans.png" position="0,e-85" size="50,75" transparent="0" backgroundColor="transpBlack"/>
		<widget addon="Pager" connection="menu" itemHeight="75" showIcons="onlyLast" picPage="icons/chevronright.png" picPageCurrent="icons/chevronrighttrans.png" position="e-50,e-85" size="50,75" transparent="0" backgroundColor="transpBlack"/>
	</screen>

This is very very interesting, as a skinner I'm so intrigued by that.

BTW, I want to make sure what the "e" parameter does exactly, does it dynamically place objects? Where is this located position="e-50,e-85" compared to this position="0,e-85".

 

"e" is the width/height of the parent element.

[Huevos]

Maybe only show the option in config when the selected skin does support it

Yes, that is how we do it.

<item level="0" text="Menu style" conditional="findSkinScreen('MenuHorizontal')" description="Select 'Standard' to display the standard vertical menu layout, or 'Horizontal' to display the menu items in a row.">config.usage.menu_style</item>

Look in PLi:

https://github.com/O....py#L1356-L1369

 

But you need this import:

https://github.com/O...ens/Setup.py#L5