Discovered "Reflections" Code for Thumbnails

Yep, same with 2.07.  I think it requires adding the thumbnail again for the invert, then cropping.  I haven’t had the chance to play with it much yet and Joey might be able to fill in more blanks, but I thing the mirror just inverts the image it doens’t seem to actually mirror the image.

Also, I’m not sure if these lines have anything to do with it either.

   
     
     
     
     
     
   

And @ Joey,

Yeah, I do have blockbuster here (or did), but I never messed around with it because I didn’t have any interest in it.  Wish I did now.:smileyvery-happy:

@ firetix

mirror=“1”  is Additional Code

ie.  Leave your Thumbnail code alone…  copy and paste it to the next line … then add the   mirror=“1” code

and change the “Y” vertical positioning of  the inverted  ( mirror=“1” ) code

and for the ‘Faded’ effect … you need to create and implement a ‘Diffuse’ Layer in your Theme.

1 Like

@ Tinwarble

The code below doesent work in Gallery or List View.

I will post the Code and Demo Folder in a few Hours so everyone can see how it was done in the Screenshots.

                                 
1 Like

Thanks, I figured it out already that it hadn’t, but I do see what you’ve done, just took me a few minutes to figure it out once I inverted one of the thumbs.  But posting a demo would be a good thing.

Like I said, it’s a really good find, but I’m not sure that I want to go away from .pngs/.jpgs personally.  But it might be worth implementing into a version my themes so SMP users and HUB users with more current firmware can see the thumbs as they are intended.

Demo Download Link on Page (1)

“Biggest Benefit of JPG Over  PNG”  … JPG due to smaller filesize  =  Faster Interface Navigation

2 Likes

Man, all I can say is HOT DA#$!!! this is big (I think). I see some changes comming to a lot of themes!

Great find!

 This is BIG!

yep cant wait for it to be implemented into current themes where needed and hopefully we can enjoy the new upgrades finally… great find Joey

Nice find, Joey. :slight_smile:

Hey joey… 

Truely a great find. why the credit to WD ? seems to me they have been most unhelpful in this area.  The advances in the theming and moviesheet on the hub, all credit goes to you guys. , I mean the previous G1, G2, and live were not designed to be themed or have moviesheets, so would understand them ignoring any requests or help in this area. 

As the hub is deisgned for Themes, and also there basic poor attempt at a moviesheet, i would have thought they would have laid out guides, dimensions etc, so that themers etc could have rules to work buy. 

ok my question…, I have walked away from WD, myself. sick and tired of half attempts at making things work. but still tinker with one we have at work. we have the  Aeonish Theme  / sheet installed and its still on firmware 2.07.17., can this reflections code you have found, improve the appearance of the folder thumbs, without affecting the rest of the Aeonish Theme. or does the latest firmware have to be installed, and all the sheets done again ?

Awesome discovery, you are amazing, good to have your smarts at work on the Hub.  What WD refuses to share JS will discover and release.  Great work

You’re the Harry Hinsley of the Hub!!  

Harry was also given a knighthood for his achievements in code breaking! :wink: 

Great find Joey, especially if we can create the illusion of a .png without any misgivings. Also like you said jpgs= speed. 

Haven’t tried your demo out yet but look forward to doing so, whilst waiting for further development news.

Good find! However need of diffusion layer sometimes can be really inconvenient!

Great find & thanks for sharing Joey.  Will have to figure out a way to utlize this in a theme with all credit to your find.

@Joey

Bulleye!!! I’m Looking this in 3.03.13 firmware.

@Tinwarble

but what is prefetch=“1” parameter??

P.S. news version of VideoLoader tools for wdtv live hub comming soon.

but what is prefetch=“1” parameter??

I Know the answer to what it does …  you could asked me in my thread.

p.s. it’s got nothing to do with Thumbnail Caching.

this is the single coolest find in the universe, well next to unicorns :smileyvery-happy:

i basically got it where I want it to be but there happens to be some minor hickup, the mirrored image seems to create a 1 pixel border from other thumbnails or the same one. Here is a screenshot… Check the Firefly cover where the mirror effect begins… (click to enlarge)

I have listed the code below, if anyone sees what I did wrong please pull my hair :slight_smile:
To me it looks like some cache thing, it is better now because i created a 1 pixel overlay in the diffusion overlay, however sometimes it looks really weird and all 7 covers have this 1 pixel phenomenon.

<?xml version="1.0" encoding="utf-8"?>
<!-- This document was created with Syntext Serna Free. -->
<page background="./image/RV-BG-GALLERY.jpg">
  <image image="image/keyboard_mask_bg.png" x="0" y="0" w="1280" h="720" bg="1" disable="@@disable-thumbnail-bg" />
  <image image="@@preview_rect_image" x="0" y="0" w="1280" h="720" bg="1" default_image="@@default_preview_rect_image" textcolor="@@preview_rect_color" keycolor="1" ignore_keycolor="1" />
  <image image="image/Gallery/video_browse_gallery_overlay.png" x="0" y="0" w="1280" h="720" bg="1" />
  <ctrlgrp>
    <include filename="./rv_multi_edit_ctrls.xml" />
    <include filename="./rv_browse_common_ctrls.xml" />
    <linebreak />
    <listbox valkey="browselist" move="row" cols="7" rows="1" lbmask="ud" loop_scroll="1" turbo_trigger="35" turbo_multi="35" autoenter="1" fixed_scrolling_col="3" hormove="1" />
  </ctrlgrp>
  <!--arrows -->
  <image image="@@metadata_left_arrow" x="10" y="650" w="39" h="53" align="hcenter" scale_type="fixratio" scale="75" />
  <image image="@@metadata_right_arrow" x="1200" y="650" w="39" h="53" align="hcenter" scale_type="fixratio" scale="75" />
  <!--favorite and ratings deleted-->
  <widgetghost valkey="marquee" x="29" y="448" w="1226" h="186" ctrlname="browselist" step="10">
    <!--thumbnail bg -->

    <!--selected item-->
    <wrapper y="455" w="134" h="201" align="hcenter" scale_type="" scale="100" selected_scale="100">
      <image image="@@checked_0" x="147" active="@@act-browselist-0" />
      <image image="@@checked_1" x="293" active="@@act-browselist-1" />
      <image image="@@checked_2" x="439" active="@@act-browselist-2" />
      <image image="@@checked_3" x="585" active="@@act-browselist-3" />
      <image image="@@checked_4" x="731" active="@@act-browselist-4" />
      <image image="@@checked_5" x="877" active="@@act-browselist-5" />
      <image image="@@checked_6" x="1023" active="@@act-browselist-6" />
    </wrapper>

   <!--thumbnail -->
    <wrapper y="455" w="134" h="201" align="hcenter" scale_type="" scale="100" selected_scale="100">
      <image image="@@browse_0_thumbnail" x="147" disable="@@thumbnail_disable_0" default_image="@@default_thumbnail_0" active="@@act-browselist-0" name="th0" />
      <image image="@@browse_1_thumbnail" x="293" disable="@@thumbnail_disable_1" default_image="@@default_thumbnail_1" active="@@act-browselist-1" name="th1" />
      <image image="@@browse_2_thumbnail" x="439" disable="@@thumbnail_disable_2" default_image="@@default_thumbnail_2" active="@@act-browselist-2" name="th2" />
      <image image="@@browse_3_thumbnail" x="585" disable="@@thumbnail_disable_3" default_image="@@default_thumbnail_3" active="@@act-browselist-3" name="th3" />
      <image image="@@browse_4_thumbnail" x="731" disable="@@thumbnail_disable_4" default_image="@@default_thumbnail_4" active="@@act-browselist-4" name="th4" />
      <image image="@@browse_5_thumbnail" x="877" disable="@@thumbnail_disable_5" default_image="@@default_thumbnail_5" active="@@act-browselist-5" name="th5" />
      <image image="@@browse_6_thumbnail" x="1023" disable="@@thumbnail_disable_6" default_image="@@default_thumbnail_6" active="@@act-browselist-6" name="th6" />
    </wrapper>
    
   <!--mirror thumbnail -->
    <wrapper y="657" w="134" h="100" align="hcenter" scale_type="" scale="100" mirror="1" selected_scale="100">
      <image image="@@browse_0_thumbnail" x="147" disable="@@thumbnail_disable_0" default_image="@@default_thumbnail_0" active="@@act-browselist-0" name="th0" />
      <image image="@@browse_1_thumbnail" x="293" disable="@@thumbnail_disable_1" default_image="@@default_thumbnail_1" active="@@act-browselist-1" name="th1" />
      <image image="@@browse_2_thumbnail" x="439" disable="@@thumbnail_disable_2" default_image="@@default_thumbnail_2" active="@@act-browselist-2" name="th2" />
      <image image="@@browse_3_thumbnail" x="585" disable="@@thumbnail_disable_3" default_image="@@default_thumbnail_3" active="@@act-browselist-3" name="th3" />
      <image image="@@browse_4_thumbnail" x="731" disable="@@thumbnail_disable_4" default_image="@@default_thumbnail_4" active="@@act-browselist-4" name="th4" />
      <image image="@@browse_5_thumbnail" x="877" disable="@@thumbnail_disable_5" default_image="@@default_thumbnail_5" active="@@act-browselist-5" name="th5" />
      <image image="@@browse_6_thumbnail" x="1023" disable="@@thumbnail_disable_6" default_image="@@default_thumbnail_6" active="@@act-browselist-6" name="th6" />
    </wrapper>


    <!--thumbnaili_f -->
    <wrapper y="455" w="134" h="201" align="hcenter" scale_type="" scale="100" selected_scale="100">
      <image image="@@browse_0_thumbnail" x="147" disable="@@thumbnail_f_disable_0" default_image="@@default_thumbnail_0" active="@@act-browselist-0" name="th0_f" />
      <image image="@@browse_1_thumbnail" x="293" disable="@@thumbnail_f_disable_1" default_image="@@default_thumbnail_1" active="@@act-browselist-1" name="th1_f" />
      <image image="@@browse_2_thumbnail" x="439" disable="@@thumbnail_f_disable_2" default_image="@@default_thumbnail_2" active="@@act-browselist-2" name="th2_f" />
      <image image="@@browse_3_thumbnail" x="585" disable="@@thumbnail_f_disable_3" default_image="@@default_thumbnail_3" active="@@act-browselist-3" name="th3_f" />
      <image image="@@browse_4_thumbnail" x="731" disable="@@thumbnail_f_disable_4" default_image="@@default_thumbnail_4" active="@@act-browselist-4" name="th4_f" />
      <image image="@@browse_5_thumbnail" x="877" disable="@@thumbnail_f_disable_5" default_image="@@default_thumbnail_5" active="@@act-browselist-5" name="th5_f" />
      <image image="@@browse_6_thumbnail" x="1023" disable="@@thumbnail_f_disable_6" default_image="@@default_thumbnail_6" active="@@act-browselist-6" name="th6_f" />
    </wrapper>

    <!--Mirror thumbnaili_f -->
    <wrapper y="657" w="134" h="100" align="hcenter" scale_type="" scale="100" mirror="1" selected_scale="100">
      <image image="@@browse_0_thumbnail" x="147" disable="@@thumbnail_f_disable_0" default_image="@@default_thumbnail_0" active="@@act-browselist-0" name="th0_f" />
      <image image="@@browse_1_thumbnail" x="293" disable="@@thumbnail_f_disable_1" default_image="@@default_thumbnail_1" active="@@act-browselist-1" name="th1_f" />
      <image image="@@browse_2_thumbnail" x="439" disable="@@thumbnail_f_disable_2" default_image="@@default_thumbnail_2" active="@@act-browselist-2" name="th2_f" />
      <image image="@@browse_3_thumbnail" x="585" disable="@@thumbnail_f_disable_3" default_image="@@default_thumbnail_3" active="@@act-browselist-3" name="th3_f" />
      <image image="@@browse_4_thumbnail" x="731" disable="@@thumbnail_f_disable_4" default_image="@@default_thumbnail_4" active="@@act-browselist-4" name="th4_f" />
      <image image="@@browse_5_thumbnail" x="877" disable="@@thumbnail_f_disable_5" default_image="@@default_thumbnail_5" active="@@act-browselist-5" name="th5_f" />
      <image image="@@browse_6_thumbnail" x="1023" disable="@@thumbnail_f_disable_6" default_image="@@default_thumbnail_6" active="@@act-browselist-6" name="th6_f" />
    </wrapper>

    <!--focus -->
    <wrapper y="455" w="138" h="204" align="hcenter" scale_type="" scale="100" selected_scale="100">
      <image image="@@frame_0" x="147" />
      <image image="@@frame_1" x="293" />
      <image image="@@frame_2" x="439" />
      <image image="@@frame_3" x="585" />
      <image image="@@frame_4" x="731" />
      <image image="@@frame_5" x="877" />
      <image image="@@frame_6" x="1023" />
    </wrapper>
    <!--focus Mirror -->
    <wrapper y="657" w="138" h="160" align="hcenter" scale_type="" scale="100" mirror="1" selected_scale="100">
      <image image="@@frame_0" x="147" />
      <image image="@@frame_1" x="293" />
      <image image="@@frame_2" x="439" />
      <image image="@@frame_3" x="585" />
      <image image="@@frame_4" x="731" />
      <image image="@@frame_5" x="877" />
      <image image="@@frame_6" x="1023" />
    </wrapper>

    <!--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>

  </widgetghost>
  <image image="@@bg-PIP_ZOOM" x="620" y="250" w="49" h="42" disable="@@disable-PIP_ZOOM" active="@@act-PIP_ZOOM" />
  <image image="@@play_stat" x="787" y="406" w="35" h="40" />
  <image image="@@speed_stat" x="823" y="414" w="39" h="21" />
  <text x="450" y="160" w="372" h="26" text="@@text-options" fontsize="24" textcolor="0x07b5ff" align="hcenter" disable="@@disable-text-options" />
  <include filename="./rv_multi_edit_widgets_for_gallery.xml" />
  <include filename="./rv_browse_common_widgets_new.xml" />
  <include filename="./inc_loading.xml" />
  <include filename="./decoration.xml" />
</page>

@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”>

1 Like

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.

No Probs, glad it fixed it :smiley:

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