Discovered "Reflections" Code for Thumbnails

[JoeySmyth]

@DeVicious

<!--thumbnail -->
    <wrapper y="455" w="134" h="201" align="hcenter" scale_type="" scale="100" selected_scale="100">

<!--mirror thumbnail -->
    <wrapper y="657" w="134" h="100" align="hcenter" scale_type="" scale="100" mirror="1" selected_scale="100">

455 + 201 = 656    ∴  You are 1 pixel down to far with y="657"  ?

Also, with the Mirror code in general ive noticed a funny line at the top of the reflected poster.. to hide it, i reverse the XML order of the Code ie.  Draw the Mirror 1st , 1 pixel up '655'... and Overlay the Thumbnails on top.

<!--mirror thumbnail -->
    <wrapper y="655" w="134" h="100" align="hcenter" scale_type="" scale="100" mirror="1" selected_scale="100">

<!--thumbnail -->
    <wrapper y="455" w="134" h="201" align="hcenter" scale_type="" scale="100" selected_scale="100">

[DeVicious]

Brilliant Joey, the sorting order fixed it,

i meant to go one pixel down further in order to have a 1 pixel line in between the original and the mirrored cover since I am using this effect on my logo and other areas of the theme. Anyways i find it very awesome that you catched it.

[JoeySmyth]

No Probs, glad it fixed it

[DeVicious]

Joey, based on your experience, does this effect compromise the performance a few percentage points or is it my vivid imagination?

[JoeySmyth]

@DeVicious

Joey, based on your experience, does this effect compromise the performance a few percentage points or is it my vivid imagination?

I haven't noticed any significant decrease in speed, to the contrary ive noticed an Increase in speed due to the fact of using jpgs instead of pngs in the demo on page(1)

But a couple of tips regarding the code below...

<!--Mirror Diffusor -->
    <wrapper y="656" w="138" h="125" align="hcenter" scale_type="" scale="100" selected_scale="100">
      <image image="image/mirrordifusion.png" x="147" />
      <image image="image/mirrordifusion.png" x="293" />
      <image image="image/mirrordifusion.png" x="439" />
      <image image="image/mirrordifusion.png" x="585" />
      <image image="image/mirrordifusion.png" x="731" />
      <image image="image/mirrordifusion.png" x="877" />
      <image image="image/mirrordifusion.png" x="1023" />
    </wrapper>

* if your  mirrordifusion.png  is exactly 138 x125 ..... then you can delete scale_type="" scale="100" selected_scale="100"  as it's not necessary.

* Since you have specified exact x co-ordinates for the mirrordifusion.png's then align="hcenter" is not necessary either.

* rename  mirrordifusion.png  to a name of a graphic element that the Firmware natively recognizes.

eg. since Mediafly is discontinuing their service as of 31 March 2012 ... Rename your mirrordifusion.png to a name of one the Mediafly pngs.   eg.  mf_player_frame_bg.png

* Personally i try to remove 'comments' and 'indentation' ... to reduce XML filesize and for efficiency.

So the result would look like this.....

<wrapper y="656" w="138" h="125" ><image image="image/mf_player_frame_bg.png" x="147"/><image image="image/mf_player_frame_bg.png" x="293"/><image image="image/mf_player_frame_bg.png" x="439"/><image image="image/mf_player_frame_bg.png" x="585"/><image image="image/mf_player_frame_bg.png" x="731"/><image image="image/mf_player_frame_bg.png" x="877"/><image image="image/mf_player_frame_bg.png" x="1023"/></wrapper>

OR .... you could just design 1 image that creates the diffusion for all the thumbs  eg.

<image image="image/mf_player_frame_bg.png" x="0" y="656" w="1280" h="125" />

[DeVicious]

Thanx a lot Joey, I will optimize the code according to your first example and I will adjust the image to the size specified in the code (was more like a try and rush kind of test thingie)

The comments are meant for modders they probably don't slow down the system but the resizing certainly does, i shall fix that :-)

thanx again, this thing really gives the whole thing the last touch. I love it :-)

[DeVicious]

Hello again Joey, i think i found an ideal solution which can be optimized by using image already existing image names

The following code is from my Large Video xml but it is the same system.

In order to save code and graphics power I was creating 1 diffusion image instead of 7.

Not only that the performance has increased again (for me) it also allows you to make it seamless with your design.

The way I see it people are using 2 types of designs,

1) they are fading out to black (or other color) on bottom of the page with the standard gallery overlay image

2) they have an elaborate glass table design (like you) simply copy the part of the glass table design and put it in one image and fade it out to the top and you have a seamless glass table effect with your design.

You might argue that 1x 1280x 200 pixel image is reducing the performance compared to 7 times reloading the same image, well i tried and it is faster with one image, probably due to processing the code.

so here is what I used for my large video page

        <!--Mirror Diffusor -->
    <wrapper y="490" w="1280" h="235" align="hcenter"><image image="image/mirrordifusionVL.png" x="1" /></wrapper>

this is cropped from the middle but you can see the backdrop isn't easy to match but it works great :-)

 

[JoeySmyth]

@DeVicous

In order to save code and graphics power I was creating 1 diffusion image instead of 7.

Looks Good,  and that is what i suggested in my previous post ...

<wrapper y="656" w="138" h="125" ><image image="image/mf_player_frame_bg.png" x="147"/><image image="image/mf_player_frame_bg.png" x="293"/><image image="image/mf_player_frame_bg.png" x="439"/><image image="image/mf_player_frame_bg.png" x="585"/><image image="image/mf_player_frame_bg.png" x="731"/><image image="image/mf_player_frame_bg.png" x="877"/><image image="image/mf_player_frame_bg.png" x="1023"/></wrapper>

OR .... you could just design 1 image that creates the diffusion for all the thumbs  eg.

<image image="image/mf_player_frame_bg.png" x="0" y="656" w="1280" h="125" />

[DeVicious]

you DID say that.. sorry for being a sloppy reader

Spoiler

I AM STUPID

.. well... great suggestion though it totally worked

[JoeySmyth]

Had a bit a code tinkering session....

Two Results:

1.  Managed to Stop the 'Flickering' of the Backdrops when you press and hold the left or right arrow button when navigating.

ie. You're on a Movie ... the Backdrop loads and Displays ... When you Start Navigating by pressing and holding the Arrow Buttons... the Backdrop does Not Change until you Stop on a New Movie ... then the Backdrop displays for the new Movie.

2. Did a Bit of Optimizing ... Navigation is Very Fast (Quick Test: 28 Movies / thumbs in 4 Seconds Flat)  Will post a Youtube Speed Demo Tomorrow.

(also gonna see if it helps with png navigation speed in my Aeonish Theme)