Expanding slider

About usage, announcement and development of skins for VLC
drewkeller
Blank Cone
Blank Cone
Posts: 25
Joined: 17 Sep 2013 14:59

Expanding slider

Postby drewkeller » 30 Dec 2013 14:56

I'm having trouble figuring out how to get the video slider to expand to fill the screen for the full screen mode of a skin. According to the docs (http://www.videolan.org/vlc/skins2-create.html), I am thinking lefttop and rightbottom as below should cause it to expand horizontally. What am I missing?

Code: Select all

<Window id="fullscreenController" position="South" ymargin="3%"> <Layout id="fsc_normal" width="622" height="63" minwidth="622" maxwidth="99999" minheight="63" maxheight="63"> <Slider id="slider_video" x="17" y="383" points="(0,1),(589,1)" value="time" tooltiptext="$T" up="video_slider_normal" down="video_slider_click" over="video_slider_over" lefttop="lefttop" rightbottom="righttop" visible="vlc.isSeekable"> <SliderBackground id="background_video" image="video_slider_back" nbvert="590"/> </Slider> <!-- ....etc.... --> </Layout> </Window>

erwan10
Developer
Developer
Posts: 415
Joined: 02 Nov 2008 23:16

Re: Expanding slider

Postby erwan10 » 31 Dec 2013 00:43

First, layout has to fill up the screen. For instance, <Layout id=... width="100%" ...> means to fill up the screen horizontally.
Second, the slider has to be resizeable. Yours is ok in that matter with lefttop="lefttop" rightbottom="righttop".
Third, the slider has to fill up the layout. <Slider id=.... width="100%" .....> means to resize the slider to fill up the layout horizontally.
Same thing with height="100%" if direction is vertical instead if horizontal.

drewkeller
Blank Cone
Blank Cone
Posts: 25
Joined: 17 Sep 2013 14:59

Re: Expanding slider

Postby drewkeller » 31 Dec 2013 06:57

Ok, that's awesome.
Now the trouble is the background isn't stretching to fill the slider width. I tried the same technique, and putting in some padding values... to no avail.

erwan10
Developer
Developer
Posts: 415
Joined: 02 Nov 2008 23:16

Re: Expanding slider

Postby erwan10 » 31 Dec 2013 12:03

Well, the best way to debug it is to ensure the slider is rendered fine in its basic description (forget about width="100%"). Then, when the slider is ok, add this width="100%" to make everything expand horizontally.
Also, beware of x in the Slider description. If you want to fully expand horizontally, it should be x=0 so that the slider exactly sits within the layout without any offset.

drewkeller
Blank Cone
Blank Cone
Posts: 25
Joined: 17 Sep 2013 14:59

Re: Expanding slider

Postby drewkeller » 31 Dec 2013 15:02

I see now the slider background is not actually a visible image, but defines the relation of each stop of the slider position to a value of its output variable. The problem is the visible image. So I need to figure out how to split and stretch the image behind the slider.

I also need to figure out how to do the center and stretch some other elements. I don't have time at the moment so I'll have to try some more things tonight. What I've tried so far hasn't worked. I found this: http://www.videolan.org/vlc/skinedhlp/resizable.html which might be helpful.

drewkeller
Blank Cone
Blank Cone
Posts: 25
Joined: 17 Sep 2013 14:59

Re: Expanding slider

Postby drewkeller » 01 Jan 2014 11:22

After much trial and error,I am still not able to get this completely working. This is pretty close, but the East side always appears at the left side instead of the right side (also tried NorthEast and SouthEast with same result):

Code: Select all

<Window id="fullscreenController" position="South" ymargin="3%"> <Layout id="fsc_normal" width="100%" height="63" minwidth="622" minheight="63" maxheight="63"> <Panel id="fsc.slider.panel" x="0" width="97%" height="10" position="North" ymargin="0" > <Image id="fsc.slider.left" image="slider.left" position="West" xmargin="10%" x="0" /> <Image id="fsc.slider.stretch" image="slider.stretch" position="Center" xmargin="10%" x="4" width="90%" /> <Image id="fsc.slider.right" image="slider.right" position="East" xmargin="10%" />
VLC has this complaint for each image using a position, xmargin, etc. attribute: "No delcaration for attribute position of element Image". I'm using VLC 2.1.2.

It seems like this one should work, but it stays at the pre-defined static size at bottom left of screen instead of stretching to fill:

Code: Select all

<Window id="fullscreenController" position="South" ymargin="3%"> <Layout id="fsc_normal" width="100%" height="63" minwidth="622" minheight="63" maxheight="63"> <Panel id="fsc.slider.panel" x="0" width="97%" height="10" lefttop="lefttop" rightbottom="rightbottom" > <Image id="fsc.slider.left" image="slider.left" x="4" lefttop="lefttop" rightbottom="lefttop" /> <Image id="fsc.slider.stretch" image="slider.stretch" x="7" lefttop="lefttop" rightbottom="righttop" /> <Image id="fsc.slider.right" image="slider.right" x="280" lefttop="righttop" rightbottom="righttop"/>

erwan10
Developer
Developer
Posts: 415
Joined: 02 Nov 2008 23:16

Re: Expanding slider

Postby erwan10 » 02 Jan 2014 13:20

position, xmargin, ymargin, xoffset and yoffset parameters are available only for a limited set of tags. The <Image> tags doesn't support them. For tags not directly supporting them, an additional <Panel> tag can be used as an enclosure.

Also, don't mix up things. Either you use (position, xmargin, ymargin) parameters or you use (x, y) parameters. The former set is a helper to avoid strenuous (x,y) calculations or to adapt to the actual screen resolution at run-time. If position is provided, then (x,y) are dynamically computed. Additional x or y are just ignored.

Also, as of the current release, everything can now be expressed with the six (x,y, width, height, xoffset, yoffset) parameters. The (position, xmargin, ymargin, xoffset, yoffset) parameters are just additional helpers that now are a bit redundant. In particular, all (x,y, width, height) parameters accept values relative to their upper container. x and y can also be expressed absolutely or with percentage. xoffset and yoffset accept absolute values or percentage values relative to the current tag. They can be positive or negative values.

To help clarify things, here is an example:
<Panel width="80%" x="50%" xoffset="-50%" ...> describes a panel with a width worth 80% of the upper container (a layout or another panel), with the origin placed in the middle of the upper container and then translated to the left worth 50% of this panel size.
This is slightly different from <Panel width="80%" position= "Center" .... > because position is a two-dimensional parameter that always works with both x and y.
The above syntax with x and xoffset is a bit more difficult to apprehend, but it is a lot more powerful, because you can work on x and on y independently.

drewkeller
Blank Cone
Blank Cone
Posts: 25
Joined: 17 Sep 2013 14:59

Re: Expanding slider

Postby drewkeller » 02 Jan 2014 20:10

I managed to get centering working yesterday by enclosing image tags in panels, which is a bit cumbersome. I didn't have time to post it.

So if I understand correctly, the second method in my most recent previous post (which uses x,y attributes only) doesn't work because x,y attributes they don't adapt to the actual screen resolution at run-time ... ?

I'm still not sure what should go in place of the "???" places?

Code: Select all

<Window id="fullscreenController" position="South" ymargin="3%"> <Layout id="fsc_normal" width="100%" height="63" minwidth="622" minheight="63" maxheight="63"> <Panel id="fsc.slider.panel" x="0" width="97%" height="10" position="North" > <!-- left side --> <Image id="fsc.slider.left" image="slider.left" width="4" x="4" xoffset="???" /> <!-- stretched to fill --> <Image id="fsc.slider.stretch" image="slider.stretch" width="100%" x="4" xoffset="???" /> <!-- right side --> <Image id="fsc.slider.right" image="slider.right" width="4" x="???" xoffset="???" />

erwan10
Developer
Developer
Posts: 415
Joined: 02 Nov 2008 23:16

Re: Expanding slider

Postby erwan10 » 02 Jan 2014 23:22

xoffset is not an element of the <Image> tag. It can only be passed via a <Panel> tag.

Anyway, here is an example of a slider that spans the whole screen dynamically (whatever the screen resolution). It was extracted from a skin that was posted a while ago on this forum. http://www.mirari.fr/1qq5. It is a .vlt file that you can try as an example. (format .tar.gz)

drewkeller
Blank Cone
Blank Cone
Posts: 25
Joined: 17 Sep 2013 14:59

Re: Expanding slider

Postby drewkeller » 03 Jan 2014 06:13

xoffset is not an element of the <Image> tag. It can only be passed via a <Panel> tag.
:bonks head:
Anyway, here is an example of a slider that spans the whole screen dynamically (whatever the screen resolution). It was extracted from a skin that was posted a while ago on this forum. http://www.mirari.fr/1qq5. It is a .vlt file that you can try as an example. (format .tar.gz)
I went through the last couple year's worth of posts in the skin forum. Apparently I missed clicking into a few topic that would have been helpful.

I guess I'll have to stick with the nested panels, but maybe I can clean them up a little now that I have a clearer picture of what's valid where.

Thanks for your help and patience.


Return to “Skins”

Who is online

Users browsing this forum: No registered users and 5 guests