Some tips on theming

First, let me just start out by saying that, I don’t know how many people were in charge of making the themes work on the HUB, but apparently they never talked to each other.  Because that would be the only thing that I can think of as to why some of the theme xml’s are the way they are.

Anyway, for some tips.  This is not supposed to be a guide, but are just some tips that I have had to learn the hard way, so I hope that they are helpful to others.


COMMON XML’s

FIrst, in each “views” xml, such as “rv_gallery_browse_page.xml” you will see a “include” line that says:

     or

 

These include lines control what you see at the top of each view (except the weather & time).  They control the position & size of  “Filter, Dashboard, etc. icons”  as well as the “Video, Music, etc” icon in the top left corner and the text next to it and the “page counter”.

However, if you are working with mulitple views, you may not want those things to show up in the same place for every view.  So what you will want to do is to copy those xml’s and then rename the copies.  Such as, if you want them different for the gallery view, you would name the include xml to something like “rv_browse_common_widgets_gallery.xml”  and then rename it in the Gallery xml also.  Now you can control how those things look in that view, but it not affect how they look in another view.

Also, if you don’t want the “Filter, Dashboard, etc.” icons to show up,  (I think that they are kind of useless myself since there are shortcut buttons on the remote), you can open the “Common_Widgets” xml and just delete the lines that start with: “<imgbtn”.  If you do this though, you will also want to delete the line in the “View” xml which says:

   

This will keep the HUB from trying to go to those buttons when you push the up arrow on the remote.

PREVIEW VIEW   (rv_browse_preview.xml)

There a something I found while doing my mod that I have posted on my Mini-Theming thread.  One thing that I found is that there doesn’t seem to be a rhym or reason for how the description lines are written.   In the xml you will find lines that start:

<table…>

     <text text=“@@description_0”… />

      etc.

AND

<wrapper…>

   <text text=“@@description_0” … />

    etc.

I don’t really know what these lines are suppose to do, considering their compexity, but I did find that you can delete these lines and replace them with something simpler like this:

     

      etc.

And you will get the same outcome.  Or at least that is what I have seen doing my mods. Now if I could just figure out how to disable the text when it’s not focused.

Another thing is, that if you try to do a mod similar to my Preview Mod, where it shows the thumbnails and you don’t want the scolling to be sloooow, you will want to delete the folder/video icons (the little icons that show up to the left of the text in the original view).  If you don’t, these icons slow down the scrolling.  To delete these icons, find the lines that say:

 
  <wrapper w=“114” h=“22” scale_type=“fixratio” scale=“100” align=“hcenter”>
   

     etc.

  

And delete these lines.  Now scrolling  should be about as fast as it was with just the text.

ICON ASPECT RATIO

Here’s a little tip on the icon ratios.  For most icons you will see a line something like this:

    <wrapper y=“475” w=“114” h=“161” align=“hcenter” scale=“100” scale_type=“fixratio” selected_scale=“100”>
      <image name=“th0”…>

       etc.

   

If you look at the first line, it says “scale_type”, this is how it tells how to scale the icon.  For “fixratio”, this will scale the icon to either the width or the height (which ever is larger on the actual icon) but keep the aspect ratio.

So if the line says w=“300” h=“300”, but your icon is 200 X 178, it will scale the width of the icon to 300, but only scale the height to 278.

But if you change “fixratio” to “pan”, this will cause it to stretch the icon to fit what ever the line says the width & height should be.  So if the line says w=“300” h=“300”, and you icon is 200 X 178, now it will make the icon 300 X 300 on the screen.

Just remember, this can’t be used for every view, becuase certain views like List View are the same for Movie, Music & Photos, so trying to do this for say movies in this view will distort music cover art and photos.

LAYERS

For most of you that have worked with either Photoshop or GIMP understand what layers are.   For those that are not fimiliar with what layers are, they are stacked images (one image stacked on top of another).  So say you have a background & you another image on top of it, well that would be another layer.

The xml’s work in much the same way.  Each set of lines is a layer, and what ever is first will be at the bottom.  So if you have lines like this:

   
   
     

       etc.

   

   
    <wrapper w=“176” h=“176” scale=“100” scale_type=“pan” align=“hcenter,top”>
      <image name=“th0” image=“@@browse_0_thumbnail” default_image=“@@default_thumbnail_0” x=“60” y=“176” scale=“100” />

       etc.

    

Then the “Description” will appear underneath the “Thumbnail” (or a layer below).  If you were to change the lines to:

   
    <wrapper w=“176” h=“176” scale=“100” scale_type=“pan” align=“hcenter,top”>
      <image name=“th0” image=“@@browse_0_thumbnail” default_image=“@@default_thumbnail_0” x=“60” y=“176” scale=“100” />

       etc.

    

   
   
     

       etc.

   

Now the “Description” will appear on top of the “Thumbnail”.

I have more tips, and will post them later when I get a chance.  I hope that these tips will be helpful.

4 Likes

Excellent stuff and perfect timing as i have just started playing with Themes.

Some good info here, many thanks

great info, many thanks

There has been a lot of requests wanting to know how to use the coordiantes, so heres the down and dirty.

The coordinantes read just like a book, from top to bottom and left to right.  So that x=0, y=0 starts in the the upper left hand corner and x=1280, y=720 will be the lower right corner.

By finding the x, y coordinant of your first postion you can determine the postion of the next postion to the right by adding the width of the the first icon then adding any space that you want between them.  Then do the same for any icon below using the height.

There are other determining factors that can the postion of you icon.  The width & height can be a factor, as well as the scaletype (if any) and alignment.

2 Likes

Yet again TW that screen grab looks perfect !!!

How do you do it ???

i know you mentioned cgi but i am still clueless :mansurprised:

also that icon for the favorite drawer at the bottom looks interesting

extreme,

I don’t know what you are using to make your icons, but it you use Photoshop or GIMP (if you don’t have Photoshop or Gimp, get Gimp for Windows since it’s free).  Then download THIS, and you’ll see how I create my theme screenshots.

Also, if you like the dashboard icon, I am going to include it when I get ready to release the Trickle with reflections view.

1 Like

DIFFERENT BACKDROPS FOR DIFFERENT VIEWS.

Ok, this is a fairly simple tip, but I thought that it was worth mentioning.

To get different backdrops to show up for different view, say that you want a different backdrop for List View and Music playing view, the first thing you have to do is to make the image you want for each view (has to be 1280 X 720).   Then name each backdrop differently, for you main backdrop, it is named “RV-BG.jpg”, so if you have a different backdrop for the List View, you would want to name it “RV-BG1.jpg” and then for Music playing you would name it “RV-BG2.png”.  Now save those images to your Theme / image folder.

Then in the xml for your View you will see the line:

Just change “RV-BG.jpg” to your corrosponding image name.  That’s it, now you can have different backgrounds for each view you use.

EDIT:  After foolling around with this some, I have found that with some views using a different RV-BG.jpg can actually slow down the HUB.  However, there is an alternate method to having multiple backgrounds for each view.  That is using the overlay method.  The overlay is what is on top of the background, and is used to darken the background.  You will find it in the .xml as something like this:

 

Although it may be named differently, you will find “overlay” in the name of the png.  By changing this image, you can have a different background with usually little to no slow down in the HUB’s performance.

2 Likes

Hey guys,

So, I don’t know why after all the modifications that I have done, that this didn’t occur to me.  But for some reason it didn’t until just a little while ago.

Anyway, this is a little tip on the view animations.  What that means is that when you are scrolling and go to the next page, or when you use Prev & Next Page to jump pages, you will notice that it looks like the page is sliding from one page to another.  I believe that all the views do this except for the Preview View, and what controls this is one little line in the xml, which is:

   

I think that the reason that I hadn’t thought of this before is because when I saw “marquee”, I just automatically thought of  it as being a text control.  Well, it’s not.

What this does is control how much of an area it will animate when it goes from page to page.  So say you have thumbnails that take up a space that is “600” high and “1140” (this would be all your thumbnails), you would want to make w=“1160” and h=“620”.  Think of it as making an imaginary rectangle around you thumbnails, then you’ll the x & y postions to place that rectangle around your thumbnails. 

If your “imanginary rectangle” is in the wrong place or isn’t big enough, then only part of your thumbnails will actually look as if it’s moving and you’ll get what I like to call the “thumbnail lag”.  Were a part of your thumbnail will move and the rest of it will look like it’s trying to catch up.

Also, you don’t want to go overboard and just use x=“0”, y=“0” and then just use w=“1280”, h=“720”.  For one thing, it will make things that you may not want to look like it’s animated and another thing is, depending on how many images it has to move, it can really slow down things when going from page to page.

Another thing, is the “STEP”.  If you look at the line above, it says "step=“10"”, this tells it how much to animate.  So what the “10” means, is that it will actually move it 10 postions from the start of one page to the end of the next page.  Changning this number can give you more or less animation, if you change the number to a lower number, then  it will go from page to page faster (“0” would be no animation) and if you change it to a higher number, this will make it go from page to page slower, but with more effect.

So I hope this will help with theming.  This has been your leason of the day.:wink:

Now, go theme.

TW

EDIT:  In list view it is actually called “ghost” rather that “marquee”, so the line in “rv_list_browse_page.xml” is:

 

2 Likes

kewl find, so this would eliminate the slicing affect right?

Yep, have already fixed it in MOJO for next release.

1 Like

THIS POST OF TINWARBLES DESERVES  

 

ANOTHER GREAT BIG BUMP!!!

HOPE ALL NEW HUB OWNERS AND INQUISITIVE THEMER’S FIND THE INFO ON TW’S POST USEFUL?

1 Like

Hey guys & gals,

I haven’t had much time to update the tips thread, it seems that every time I have a little free time something new happens and so I get preoccupied with that.

But since I ran into this just recently so I thought I would post about something I found.

When you are adding images to a view you may want to do something like this:

    <image image=“image/Gallery/Gallery_overlay.png” x=“0” y=“0” w=“1280” h=“720” align=“top,left” scale=“100” bg=“1” />

If you notice the "bg=“1” " in green, this is to push the image to the background (“1” being on “0” being off).  This will push it behind any image that doesn’t have the same "bg=“1” in it’s line that’s before it in the xml no matter were it is in xml.  In other words it overrides the normal layering.  Also, “bg” keeps an image from become apart of any animation like the marquee, which is the animation that happens when you go “Page Next” or “Page Prev”.

You may want to use this to make sure an image stays behind the other images or to keep it from being apart of the page animation.  However, doing this can slow down scrolling, especially if you set this on images that change when you scroll.  So if you scolling slows down, look at the lines that have “bg” and remove it or set it to “0” if you can.

Also, if you have images that you can combine, do so, this will keep the HUB from have to draw so many images which will also slow down the scrolling.

2 Likes