Kodi Community Forum
[WIP] The Carmichael - a new skin for XBMC - Printable Version

+- Kodi Community Forum (https://forum.kodi.tv)
+-- Forum: Support (https://forum.kodi.tv/forumdisplay.php?fid=33)
+--- Forum: Skins Support (https://forum.kodi.tv/forumdisplay.php?fid=67)
+---- Forum: Skin Archive (https://forum.kodi.tv/forumdisplay.php?fid=179)
+----- Forum: Carmichael (https://forum.kodi.tv/forumdisplay.php?fid=187)
+----- Thread: [WIP] The Carmichael - a new skin for XBMC (/showthread.php?tid=84970)

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30


- supertom44 - 2011-01-06

Pressing I might not be available but Aeon MQ2 provides plot on the home screen for items in the recently added box.


- DJXFMA - 2011-01-06

supertom44 Wrote:Pressing I might not be available but Aeon MQ2 provides plot on the home screen for items in the recently added box.

The best thing to do here is or use <ondown></ondown> with focusses on a own build dialog witch holds the movie/episode/album information. Or build in a delay witch foccusses after 2 seconds so the information will just popup. Should be possible.

I am working on a theme myself now and I will try some different way's to display it. I will post the information right here so it can help for this theme.

Getting better and better Smile, only missing the Season number in the episode screen..


Get info/fanart/icon on home screen - DJXFMA - 2011-01-06

Ok here it is hope it is some use to U if you want to use it.

First make an include wich holds the information and fanart and icon. Like my code here, not finished yet just to prove it can without much effort, it did cost me one hour to find it out but anyway...
  • <visible>Control.HasFocus(8010)</visible> use this that it will only be visible when the container for latest movies is viewed. the id must me on the list control
  • fanart $INFO[Container(8010).ListItem.Property(FanartImage)] as you can see this will load the propery of the container from latest added movies(8010) and gets the FanartImage wich holds obviously the Fanart image Smile
  • plot $INFO[Container(8010).ListItem.Property(Plot)] same way
  • icon ...
  • label ...

PHP Code:
    <!-- HomeRecentAddedMovieInfo -->
    <include 
name="HomeRecentAddedMovieInfo">
        <
control type="group">
            <
visible>Control.HasFocus(8010)</visible>
            <!-- 
fanart -->
            <
control type="image">
                <
posx>519r</posx>
                <
posy>155</posy>
                <
width>500</width>
                <
height>300</height>
                <
texture background="true">$INFO[Container(8010).ListItem.Property(FanartImage)]</texture>
                <
aspectratio>scale</aspectratio>
                <
fadetime>200</fadetime>
                <include>
VisibleFadeEffect</include>
            </
control>
            <!-- 
icon -->
            <
control type="image">
                <
posx>663r</posx>
                <
posy>151</posy>
                <
width>170</width>
                <
height>224</height>
                <
texture>home/poster_shadow.png</texture>
                <
aspectratio scalediffuse="false">stretch</aspectratio>
            </
control>
            <
control type="image">
                <
posx>665r</posx>
                <
posy>155</posy>
                <
width>146</width>
                <
height>219</height>
                <
texture background="true">default_cover.png</texture>
                <
aspectratio scalediffuse="false">stretch</aspectratio>
            </
control>
            <
control type="image">
                <
posx>665r</posx>
                <
posy>155</posy>
                <
width>146</width>
                <
height>219</height>
                <
texture background="true">$INFO[ListItem.ActualIcon]</texture>
                <
aspectratio scalediffuse="false">stretch</aspectratio>
            </
control>
            <
control type="image">
                <
posx>665r</posx>
                <
posy>155</posy>
                <
width>146</width>
                <
height>219</height>
                <
texture background="true">$INFO[Container(8010).ListItem.Property(Icon)]</texture>
                <
aspectratio>scale</aspectratio>
                <
fadetime>200</fadetime>
                <include>
VisibleFadeEffect</include>
            </
control>
            <!-- 
label -->
            <
control type="label">
                <
posx>505r</posx>
                <
posy>160</posy>
                <
height>20</height>
                <
width>300</width>
                <
label>$INFO[Container(8010).ListItem.Property(Label)]</label>
                <
align>left</align>
                <
aligny>center</aligny>
                <
font>font24_title</font>
                <
textcolor>white</textcolor>
                <
shadowcolor>black</shadowcolor>
            </
control>
            <!-- 
plot -->
            <
control type="textbox">
                <
posx>505r</posx>
                <
posy>180</posy>
                <
height>200</height>
                <
width>400</width>
                <
label>$INFO[Container(8010).ListItem.Property(Plot)]</label>
                <
align>justify</align>
                <
font>font12</font>
                <
textcolor>white</textcolor>
                <
autoscroll time="2000" delay="8000" repeat="5000">Skin.HasSetting(AutoScroll)</autoscroll>
            </
control>
        </
control>
    </include> 


Then in Home.xml load the include in the top of youre theme about like this, could be different to yours because of the other layers of controls..

PHP Code:
<window id="0">
    <
defaultcontrol always="true">8999</defaultcontrol>
    <
allowoverlay>no</allowoverlay>    
    <
controls>
        
        
        <!-- 
main_background -->
        <
control type="image">
            <
posx>0</posx>
            <
posy>0</posy>
            <
width>1280</width>
            <
height>720</height>
            <
texture>home/background.jpg</texture>
            <
aspectratio scalediffuse="false">stretch</aspectratio>
        </
control>
        
        
[
b]        <!-- HomeRecentAddedMovieFanart -->
        <include>
HomeRecentAddedMovieInfo</include>[/b]
        
        <!-- 
CommonMediaPlayingBackground -->
        <include>
CommonMediaPlayingBackground</include>
        
        
        
        <!-- 
main_container -->
        <
control type="group">
............................................ 


Now you need to added youre recently/latest movie control list.
The list must have the same ID number like stated above for this example it is 8010. Then in this control list add the following to youre already existing items.

PHP Code:
                <control type="list" id="8010">
                    <
posx>10</posx>
                    <
posy>475</posy>
                    <
width>1280</width>
                    <
height>400</height>
                    <
onup>9000</onup>
                    <
ondown>9000</ondown>
                    <
orientation>horizontal</orientation>
                    <
pagecontrol>-</pagecontrol>
                    <
scrolltime>0</scrolltime>
                    <
itemlayout width="164" height="300">
                        <
control type="group">
                            <
posx>0</posx>
                            <
posy>10</posy>
                                <
control type="image">
                                    <
posx>-2</posx>
                                    <
posy>-4</posy>
                                    <
width>170</width>
                                    <
height>224</height>
                                    <
texture>home/poster_shadow.png</texture>
                                    <
aspectratio scalediffuse="false">stretch</aspectratio>
                                </
control>
                                <
control type="image">
                                    <
posx>10</posx>
                                    <
posy>0</posy>
                                    <
width>146</width>
                                    <
height>219</height>
                                    <
texture background="true">default_cover.png</texture>
                                    <
aspectratio scalediffuse="false">stretch</aspectratio>
                                </
control>
                                <
control type="image">
                                    <
posx>10</posx>
                                    <
posy>0</posy>
                                    <
width>146</width>
                                    <
height>219</height>
                                    <
texture background="true">$INFO[ListItem.ActualIcon]</texture>
                                    <
aspectratio scalediffuse="false">stretch</aspectratio>
                                </
control>
                        </
control>
                    </
itemlayout>
                    <
focusedlayout width="164" height="300">
                        <
control type="group">
                            <
posx>0</posx>
                            <
posy>10</posy>
                            <
animation type="Focus" reversible="false">
                                <
effect type="zoom" center="auto" start="60" end="104" time="600" tween="back" easing="out" />
                            </
animation>
                            <
control type="image">
                                <
posx>-2</posx>
                                <
posy>-4</posy>
                                <
width>170</width>
                                <
height>224</height>
                                <
texture>home/poster_shadow.png</texture>
                                <
aspectratio scalediffuse="false">stretch</aspectratio>
                            </
control>
                            <
control type="image">
                                <
posx>10</posx>
                                <
posy>0</posy>
                                <
width>146</width>
                                <
height>219</height>
                                <
texture background="true">default_cover.png</texture>
                                <
aspectratio scalediffuse="false">stretch</aspectratio>
                            </
control>
                            <
control type="image">
                                <
posx>10</posx>
                                <
posy>0</posy>
                                <
width>146</width>
                                <
height>219</height>
                                <
texture background="true">$INFO[ListItem.ActualIcon]</texture>
                                <
aspectratio scalediffuse="false">stretch</aspectratio>
                            </
control>
                        </
control>
                    </
focusedlayout>
                    <
content>
                        <
item id="1">
                            <
onclick>PlayMedia($INFO[Window.Property(LatestMovie.1.Path)])</onclick>
                            <
icon>$INFO[Window.Property(LatestMovie.1.Thumb)]</icon>
                            <
property name="Icon">$INFO[Window.Property(LatestMovie.1.Thumb)]</property>
                            <
property name="FanartImage">$INFO[Window.Property(LatestMovie.1.Fanart)]</property>
                            <
property name="Label">$INFO[Window.Property(LatestMovie.1.Title)]</property>
                            <
property name="Plot">$INFO[Window.Property(LatestMovie.1.Plot)]</property>
                        </
item>
                        <
item id="2">
                            <
onclick>PlayMedia($INFO[Window.Property(LatestMovie.2.Path)])</onclick>
                            <
icon>$INFO[Window.Property(LatestMovie.2.Thumb)]</icon>
                            <
property name="Icon">$INFO[Window.Property(LatestMovie.2.Thumb)]</property>
                            <
property name="FanartImage">$INFO[Window.Property(LatestMovie.2.Fanart)]</property>
                            <
property name="Label">$INFO[Window.Property(LatestMovie.2.Title)]</property>
                            <
property name="Plot">$INFO[Window.Property(LatestMovie.2.Plot)]</property>
                        </
item

Fast example of above property list:
PHP Code:
                    <content>
                        <
item id="1">
                            <
onclick>PlayMedia($INFO[Window.Property(LatestMovie.1.Path)])</onclick>
                            <
icon>$INFO[Window.Property(LatestMovie.1.Thumb)]</icon>
                            <
property name="Icon">$INFO[Window.Property(LatestMovie.1.Thumb)]</property>
                            <
property name="FanartImage">$INFO[Window.Property(LatestMovie.1.Fanart)]</property>
                            <
property name="Label">$INFO[Window.Property(LatestMovie.1.Title)]</property>
                            <
property name="Plot">$INFO[Window.Property(LatestMovie.1.Plot)]</property>
                        </
item>
                        <
item id="2">
                            <
onclick>PlayMedia($INFO[Window.Property(LatestMovie.2.Path)])</onclick>
                            <
icon>$INFO[Window.Property(LatestMovie.2.Thumb)]</icon>
                            <
property name="Icon">$INFO[Window.Property(LatestMovie.2.Thumb)]</property>
                            <
property name="FanartImage">$INFO[Window.Property(LatestMovie.2.Fanart)]</property>
                            <
property name="Label">$INFO[Window.Property(LatestMovie.2.Title)]</property>
                            <
property name="Plot">$INFO[Window.Property(LatestMovie.2.Plot)]</property>
                        </
item


Just an example image from the theme I am currently working on..

Home screen with info from Latest selected movie
Image

Home screen normal
Image


- Rastan - 2011-01-07

@DJXFMA Nice work as proof of concept, hopefully Mcborzu will take your idea onboard and work some of his magic to intergrate it or something similar into this skin. Also your skin looks like its coming on well! Big Grin

Mcborzu I just noticed a little glitch when playing music with the visualisation. If you play a track the text "Now Playing: Album name Track Name" appears at the top centre of screen but it doesnt have the solid grey text background behind it. When you move the mouse the grey text background appears but the text thats supposed to be on top of it then dissapears. I hope I am correct in the assumption that the now playing text is supposed to have that grey solid background behind it to make the text stand out over any background. (I hope that made sense)


- mcborzu - 2011-01-07

Update 1-6
-New Cast Display


Image


- Rastan - 2011-01-07

Excellent work! It fits the skin well Nod


- oblonhor - 2011-01-07

Nice update mcborzu, fits the skin better than I expected!

Didn't know "I" was not available on home screen, but something like DJXFMA did would be useful just to remember what the movie was about if it has no trailer.


- ppic - 2011-01-07

good good good !!!


Teaser - DJXFMA - 2011-01-08

Rastan Wrote:@DJXFMA Nice work as proof of concept, hopefully Mcborzu will take your idea onboard and work some of his magic to intergrate it or something similar into this skin. Also your skin looks like its coming on well! Big Grin

Mcborzu I just noticed a little glitch when playing music with the visualisation. If you play a track the text "Now Playing: Album name Track Name" appears at the top centre of screen but it doesnt have the solid grey text background behind it. When you move the mouse the grey text background appears but the text thats supposed to be on top of it then dissapears. I hope I am correct in the assumption that the now playing text is supposed to have that grey solid background behind it to make the text stand out over any background. (I hope that made sense)

Bin a couple of hours now and I am getting the hang of it now Smile, I now for sure mcborzu will work it out. The views are looking great! If any help is needed don't be affraid to ask.

What about this Wink ?

Image


- mcborzu - 2011-01-08

DJXFMA Wrote:What about this Wink ?

Image

Looks very nice, seems like you're getting the hang of it but doesn't seem to fit The Carmichael's look...


- Rastan - 2011-01-08

DJXFMA Wrote:Bin a couple of hours now and I am getting the hang of it now Smile, I now for sure mcborzu will work it out. The views are looking great! If any help is needed don't be affraid to ask.

What about this Wink ?

Image

WOW very impressive work there! Although I agree with Mcborzu it doesnt fit his current skin. But I hope you do develop it more and make a mod for this or better yet your own skin. I do realise these things take a lot of time and dedication to see through from the start to end and have nothing but the up-most respect for the skinners and Developers that put their heart and soul into all of these wonderful skins, addons and XBMC itself and sharing it for all. I can use Illustrator, Photoshop and 3DS Max amongst others but I wish I had the time to learn to code. I have a 22 month old and a 3 month old and have my hands more than full with them...lol.

Let me stop rambling

...anyway back to The Carmichael! Big Grin


- Rastan - 2011-01-08

I have just noticed a few things:

The new TV episode view is missing the tick for watched episodes.

In big Grid view for movies there is no indicator on the left margin for how high or low you are in the list

Will you be adding an indicator for movie sets on the poster (e.g. 2 small discs superimposed over the poster). Right now you cant tell from a distance if its a movie set without selecting the item in question.

How do you get to movie sets? Is it something you have yet to add? on the movies homepage is a good spot under random movies.

Keep up the good work, its well appreciated! Nod

I have a request too if you dont mind. One thing that bothers me is the lack of seeing the flags. My library like I suppose most people has a mixture of SD and HD quality content. In this skin there is no way of knowing whats what without making the extra keypress and pressing info to see. I think its more convenient for the user to be able to see such information at a glance whilst browsing. Maybe something like this? Its a little rough but you get the idea...lol

Image

Maybe you could toggle it on and off?


- supertom44 - 2011-01-08

There are two places in the carmichael skin I see that could be good areas to display info.

I'm just thinking about the tv menu at the moment.

The first being the main image for the menu you are on, in between the other menus.

Seconds is down bottom right where random items is currently located. You could hide random items when you have highlighted one of the recently added items, and vice versa and use that area for the info.

Or you could possibly remove random items from the right, limit new items to one row on the leftand put random episodes below that, then on the right when no item is selected have Tv airing next/today as makes more sense than having it on the video page. Then when a random or recent item is highlighted swap tv next airing for info about episode.

Means its no longer consistent with the movies but if info was to be added for movies they too would need to change.

Like I mentioned the only alternate location I can think of is where the background is located for the menu.


- DJXFMA - 2011-01-08

Quote:http://img152.imageshack.us/img152/2286/snowleopardhomeinfo.png

mcborzu Wrote:Looks very nice, seems like you're getting the hang of it but doesn't seem to fit The Carmichael's look...

Thanks took some time, going to build in my own theme with the new ideas I have. It was more for an example what you can do on the home screen for the recenlty added movies and so on. But I know its true, this isn't for youre theme it just doesn't fit in, I know. But you could also make the information available in the Recenlty added movies box it self Smile.. An overlay wich is only present when the listitem is on focus with an delay, so when you are on a poster it will load after 2 seconds or so and show you the title and other information you would like to show, and then when pressing next or left the control will disapear and you got the list again with the posters, just an idea maybe it's nothing.

Rastan Wrote:WOW very impressive work there! Although I agree with Mcborzu it doesnt fit his current skin. But I hope you do develop it more and make a mod for this or better yet your own skin. I do realise these things take a lot of time and dedication to see through from the start to end and have nothing but the up-most respect for the skinners and Developers that put their heart and soul into all of these wonderful skins, addons and XBMC itself and sharing it for all. I can use Illustrator, Photoshop and 3DS Max amongst others but I wish I had the time to learn to code. I have a 22 month old and a 3 month old and have my hands more than full with them...lol.

Let me stop rambling

...anyway back to The Carmichael! Big Grin
Thanks! I agree but this wasn't meant to be for this theme Smile, but more an advanced example what it can do for the home screen. I am going to try making my own theme so I won't spam any other images of it from now :p..

Took about 3 hours or so to get only this homeinfo done like this, so yes! It takes a lot of time, but I like the challenge. I am an website designer and programmer in different languages of coding (Powershell, PHP, HTML, XML, Javascript/Ajax, VisualBasic, VisualStudio, PointUI). Well if you feel like creating something witch would fit my theme or what so ever then feel free to do so. I always can use some inspiration by mockups.

Thats costs even more time! Kids lol ^^, kids are awesome!! I will be there not for any time soon so I got at least enough time to make the theme I am working on now to the finish.


- mcborzu - 2011-01-09

Rastan Wrote:I have just noticed a few things:

The new TV episode view is missing the tick for watched episodes.

In big Grid view for movies there is no indicator on the left margin for how high or low you are in the list

Will you be adding an indicator for movie sets on the poster (e.g. 2 small discs superimposed over the poster). Right now you cant tell from a distance if its a movie set without selecting the item in question.

How do you get to movie sets? Is it something you have yet to add? on the movies homepage is a good spot under random movies.

Keep up the good work, its well appreciated! Nod

I have a request too if you dont mind. One thing that bothers me is the lack of seeing the flags. My library like I suppose most people has a mixture of SD and HD quality content. In this skin there is no way of knowing whats what without making the extra keypress and pressing info to see. I think its more convenient for the user to be able to see such information at a glance whilst browsing. Maybe something like this? Its a little rough but you get the idea...lol

Maybe you could toggle it on and off?

Actually I have code in place, commented out at the moment, for HD indicators but I'm not sure:

Image

The "mission statement" of the skin is: simple, clean, and unified look. So I'd rather leave things out then try and cater everything. I do want to have some HD indicator though and same with MovieSets but flags in views are a definite no from me...