Adding image/icon to text home item?

Adding image/icon to text home item? - Printable Version

+- Kodi Community Forum (https://forum.kodi.tv)
+-- Forum: Development (https://forum.kodi.tv/forumdisplay.php?fid=32)
+--- Forum: Skinning (https://forum.kodi.tv/forumdisplay.php?fid=12)
+--- Thread: Adding image/icon to text home item? (/showthread.php?tid=158669)

Pages: 1 2

RE: Adding image/icon to text home item? - Piers - 2013-03-09

Update 3: Nope, that didn't work, hmm. It displays the current background as the icon which I assume is because the <icon> part is already being used, reading the wiki trying to find out if there any further options I could use. Sorry for the rambling, blame in newbie work or Asperger's Tongue

RE: Adding image/icon to text home item? - nessus - 2013-03-09

Judging from your screenshot you want to do something similar with this.
Why don't have a look to the code for that ?

Cheers
Nessus

RE: Adding image/icon to text home item? - User 34959 - 2013-03-09

Piers, use this as a starting point. I've added an icon property for the videos item.

I have to warn you if you are going to use my mod as a base, i don't know how to skin, i haven't even read the skinning manual, so expect to find problems.

RE: Adding image/icon to text home item? - Piers - 2013-03-09

(2013-03-09, 16:16)toiva Wrote: Piers, use this as a starting point. I've added an icon property for the videos item.

I have to warn you if you are going to use my mod as a base, i don't know how to skin, i haven't even read the skinning manual, so expect to find problems.

That's great, thank you. I did create a new property but it didn't seem to work, however I realised I missed the ) from the end of it Tongue

Got the normal icon and focused working now, thanks again.

RE: Adding image/icon to text home item? - MassIV - 2013-03-09

You need property + an image control for every property (or thumb or icon).
Normally XBMC provides the posters and property ect when you see a list in the library.
But this is a menu where you have to do both.

If you want to display the following 4 images (that you added for possible use)

Code:
<item id="7">

    <icon>icon1.png</icon>

    <thumb>thumb1.png</thumb>

    <property name="name1">image1.png</property>

    <property name="name2">image2.png</property>

</item>

You will need 4 image controls (like the following example).
(Note: NOT 4 for each item, but for the total of all items. Assuming you use the same kind of images in every item.)

Code:
<control type="image">

    <posx>5</posx>

    <posy>0</posy>

    <width>158</width>

    <height>157</height>

    <aspectratio>stretch</aspectratio>

    <texture>$INFO[ListItem.Property(name1)]</texture>

</control>

These decide the size, transparency, aspect ratio of the item you made available to the list in your items.
Here is an example image control: http://wiki.xbmc.org/index.php?title=Image_Control

If we wanted the above example to use the <thumb> instead:

Code:
<texture>$INFO[ListItem.Art(thumb)]</texture>

These image controls are placed between the

Code:
<itemlayout height="235" width="175">

    ...

</itemlayout>

If you want it to show when it has no focus.

And between the

Code:
<focusedlayout height="235" width="175">

    ...

</focusedlayout>

If you want it to show when the item is in focus.

You can find an example FixedList container here: http://wiki.xbmc.org/index.php?title=Fixed_List_Container
The one in the example does not have it's own (self made) content.

RE: Adding image/icon to text home item? - pan2 - 2013-03-22

This is how I have placed this control in the home xml:

Code:
<control type="label">

                        <posx>150</posx>

                        <posy>5</posy>

                        <width>290</width>

                        <height>60</height>

                        <font>loved</font>

                        <angle>10</angle>

                        <textcolor>maroon</textcolor>

                        <align>center</align>

                        <aligny>center</aligny>

                        <label>[UPPERCASE]$INFO[ListItem.Label][/UPPERCASE]</label>

                    </control>

                    <control type="image">

                        <posx>5</posx>

                        <posy>5</posy>

                        <width>50</width>

                        <height>50</height>

                        <fadetime>400</fadetime>

                        <aspectratio>stretch</aspectratio>

                        <texture>$INFO[ListItem.Property(focused)]</texture>

                        <colordiffuse>FFFFFFFF</colordiffuse>

                        </control>

                </itemlayout>

and in the 'focused xml:

Code:
<control type="label">

                        <posx>150</posx>

                        <posy>5</posy>

                        <width>290</width>

                        <height>60</height>

                        <font>loved</font>

                        <angle>10</angle>

                        <textcolor>maroon</textcolor>

                        <align>center</align>

                        <aligny>center</aligny>

                        <label>[UPPERCASE]$INFO[ListItem.Label][/UPPERCASE]</label>

                    </control>

                    <control type="image">

                        <posx>5</posx>

                        <posy>5</posy>

                        <width>50</width>

                        <height>50</height>

                        <fadetime>400</fadetime>

                        <aspectratio>stretch</aspectratio>

                        <texture>$INFO[ListItem.Property(focused)]</texture>

                        <colordiffuse>FFFFFFFF</colordiffuse>

                        </control>

                </itemlayout>

                </focusedlayout>

                <content>

The item in my version of home for movies doesn't exactly look like the one in the post. It looks like this:

Code:
<item id="2">

                        <label>Movies</label>

                         <onclick>ActivateWindow(Videos,Files)</onclick>                        

                        <thumb>$INFO[Skin.String(Home_Custom_Back_Video_Folder)]</thumb>

                        <visible>!Skin.GetBool(HomeMenuNoVideosButton)</visible>

                    </item>

So I modified it to :

Code:
<item id="2">

                        <label>Movies</label>

                         <onclick>ActivateWindow(Videos,Files)</onclick>

                        <icon>icons/moviesnf.png</icon>

                        <property name="focused">icons/moviesf.png</property>

                        <thumb>$INFO[Skin.String(Home_Custom_Back_Video_Folder)]</thumb>

                        <visible>!Skin.GetBool(HomeMenuNoVideosButton)</visible>

                    </item>

where moviesnf.png and moviesf.png reside in a icons folder inside the media folder.. Having done all this, nothing happened so I changed the last line to :

Code:
<visible>!Skin.HasSetting(HomeMenuNoMovieButton) + Library.HasContent(Movies)</visible>

The Movies button then completely disappeared from the menu bar. Actually I have little idea what I'm doing here, mostly blindly
following the instructions in the post.
I'm not sure what size the png's should be or in fact if it makes a difference. In any event nothing worked. If anyone has the patience
to tell me what I'm doing wrong it would be appreciated. Huh

RE: Adding image/icon to text home item? - MassIV - 2013-03-22

This thread was about what to do when you run out of your normal icon and thumb tags.
So it is not really a fitting tutorial for first changes to the home menu. Because of info you don't need, causing you to mix some stuff up.

If this is really how it looks right now:

Code:
</itemlayout>

</focusedlayout>

<content>

Then i suggest you undo all changes and start from new.

Then add your icon to the movies item:

Code:
<icon>icons/moviesnf.png</icon>

Place your image control:

Code:
<control type="image">

    <posx>5</posx>

    <posy>5</posy>

    <width>50</width>

    <height>50</height>

    <fadetime>400</fadetime>

    <aspectratio>stretch</aspectratio>

    <texture>$INFO[ListItem.icon]</texture>

    <colordiffuse>FFFFFFFF</colordiffuse>

</control>

In your item layout (inbetween these two lines)

Code:
<itemlayout height="235" width="175">

    ...

</itemlayout>

You should now see the icon when movies is not in focus.
If you understand this concept you can try to bring the <thumb> item into the focused layout.

Now the thumb you can call with:

Code:
$INFO[ListItem.Art(thumb)]

And btw Confluence has a whole sub section in the forum http://forum.xbmc.org/forumdisplay.php?fid=125
For changes specific to Confluence.

RE: Adding image/icon to text home item? - pan2 - 2013-03-22

Thanks mate. It works now and I think I'm getting the hang of it. For me it's just a lack of confidence with changing codes when I don't really have any experience

RE: Adding image/icon to text home item? - pan2 - 2013-03-23

Just one rather odd thing. When I put the image in the menu bar it all works well as long as I don't make it too large or try to center it vertically. It seems that there is only a narrow band before it gets cropped either at the top or bottom.
Here is the focused code (identical to non-focused code except for texture line)

<control type="image">
<posx>50</posx> 
<posy>15</posy> 
<width>50</width>
<height>50</height>
<fadetime>400</fadetime>
<aspectratio>stretch</aspectratio>
<texture>$INFO[ListItem.Property(focused)]</texture>
<colordiffuse>FFFFFFFF</colordiffuse>
</control>
I have fiddled with size, position, position of the menu bar; but the image will get cropped at either the top or bottom if I go outside certain areas. Looking at the images in this post the images can get much closer to the top and bottom of the menu bar that I have been able to achieve. Is there some hidden parameter that I can alter?

RE: Adding image/icon to text home item? - Hitcher - 2013-03-23

Check the parent group/control sizes.

RE: Adding image/icon to text home item? - pan2 - 2013-03-23

Thanks Hitcher, it was actually controlled by the height of the text on the home page. What I'm endeavoring to do is replace the text labels on the home menu with both focused and unfocused images. This means that there won't be a text label at all. I've just started to create the focused/unfocused pairs. Here is an example of what I mean: