Discovered "Reflections" Code for Thumbnails

Discovered Yesterday the Code for Creating ‘Reflections’ on Thumbnails…

Could be a solution to the PNG issue.  (I use PNG for Reflections and Round Corners)

Worked today on modding 2 Views in Aeonish Theme using Reflections and Round Corners with … JPEG ONLY

(All other Views can be moddified using this procedure)

Yes, this works for FOLDERS as well .

NOTE: These are actual Dvd Recoder Captured Screenshots of POSTER JPEG IMAGES.

In this TEST…
NO MOVIESHEETS WERE USED
NO THUMBGEN GENERATION WAS USED
NO PNG GRAPHICS WERE USED

The code will work with ‘Moviesheets’ but i just wanted to try Posters first.

What’s the Code/Trick ?

mirror=“1”

(Vertically Inverts an Image … then a Diffuse Layer in the Theme creates the Fading Effect)

(A Small Overlay for Thumbnails in the Theme creates the illusion of Rounded Corners)

Code was discovered in the “Blockbuster” XMLs … credits to Western Digital

HERE IS A ROUGH (WIP) POSTER BETA DEMO:

http://www.mediafire.com/download.php?7z2w3e5th9imqz8

AE REFLECTION Theme Demo.rar       is the modified theme files for JPEG ‘Reflections’ in Gallery and List Views

Movie Poster Demo.rar      are sample Movie Posters and Movie XML Files

Here’s a Quick Video of Local Backdrops using Modified Gallery View XML Code.

Once the Backdrop is Displayed if you Quickly Tap and Hold Down the Navigation Arrow Buttons the Backdrop will not change.

If you however, slow down your button presses or stop on a movie, then the New Backdrop will load.

Video Demo use’s Brightly Dark by bg1 Movie Sheets. (Not my creation, credits to the Original Author)

http://www.wdtvlive.net/showthread.php?385-Brightly-Dark-by-bg1-%28Brightly-720p-Standard-Sheet-amp-Wall-mod%29

(I did however, fix a Runtime error in the Template… Variable was %DURATION% it should be %RUNTIME% also moved the Media Flags Verticaly by 10 pixels)

Gallery Demo Package 

  http://www.mediafire.com/download.php?zl8q523n91bhwww

( Gallery Black Outline - Theme for Hub/SMP   1st Pic)

( Gallery Clear Case - Theme for Hub/SMP   2nd Pic)

( Demo Movie Folder - with Sheets and Thumbnails)

(Brightly Dark Template by bg1 - Thumbgen Template with Minor Corrections and Alterations)

21 Likes

Good catch Joey, so much for WD stating that this can’t be done on the fly as they told me before.

Well, at least the Blockbuster app was good for something before it went away.

What firmware are you trying this on?  If you’re still on 2.07 I might upgrade to the lastest to see if it works on it there also.

Thanks

I Got this working on Firmware 2.07.17

It should work on Firmware 3.03.13 assuming the  mirror=“1” code still works on that Firmware.

(P.S. Blockbuster is not available on my  Hub in my Country … i went onto Youtube to see video of what of i was missing … and noticed “Reflections” in the Blockbuster Demonstration … which lead me on the XML Code hunt for how it was done)

2 Likes

Nice finding joey.

I’ve tried adding the mirror=“1” in latest firmware but

the thumbnails appears  inverted

 i’m using latest firmware

 <image name=“th6_f” image=“@@browse_6_thumbnail” default_image=“@@default_thumbnail_6” x=“1041” mirror=“1” active=“@@act-browselist-6” disable=“@@thumbnail_f_disable_6”/>

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>