Page 1 of 1

Expanding slider

Posted: 30 Dec 2013 14:56
by drewkeller
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>

Re: Expanding slider

Posted: 31 Dec 2013 00:43
by erwan10
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.

Re: Expanding slider

Posted: 31 Dec 2013 06:57
by drewkeller
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.

Re: Expanding slider

Posted: 31 Dec 2013 12:03
by erwan10
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.

Re: Expanding slider

Posted: 31 Dec 2013 15:02
by drewkeller
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.

Re: Expanding slider

Posted: 01 Jan 2014 11:22
by drewkeller
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"/>

Re: Expanding slider

Posted: 02 Jan 2014 13:20
by erwan10
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.

Re: Expanding slider

Posted: 02 Jan 2014 20:10
by drewkeller
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="???" />

Re: Expanding slider

Posted: 02 Jan 2014 23:22
by erwan10
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)

Re: Expanding slider

Posted: 03 Jan 2014 06:13
by drewkeller
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.