Kaleidescape Skin Replica in progress - Skinning help is wanted!

  Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Post Reply
MacGyver Offline
Fan
Posts: 454
Joined: Jan 2007
Reputation: 1
Location: Weilerbach Germany
Question  Last post, I promise.
Post: #31
I posted the images (all 4 of them) their size really should not matter all that much, but I wanted to let someone who is artistic be able to fix it up.
Things I can't do (but wish I could):
Make the transparency of the mirror reflection fade off on the bottom (like microsofts does)
Give all the surfaces proper depth and shadow.
Create a pretty top menu.


Just a note. The damn aspect was wrong on my win32 xbmc, so thats why all the icons are fatter then they looked as I was coding them.

Question, can you colordiffuse a ListItem.Icon over a black square, or colordiffuse a png over a ListItem.Icon. I've tried them before and after each other, moving the colordiffuse to the second one each time, and it doesn't work in win32 at least. (to darken the no focused icons)
find quote
jmarshall Offline
Team-XBMC Developer
Posts: 25,689
Joined: Oct 2003
Reputation: 169
Post: #32
Looks cool Smile I'll start thinking about how to do the animation.

Oh, and I might look at extending either <colordiffuse> to separately define the diffuse color at each vertex. That should give you your fading stuff.

For the reflection, it's easy to define the end state of the reflection animation (which is all you need in this case) but I'm not sure how to define it in a meaningful sense for an actual animation (ie from normal to reflected state). I think the best idea is to just move points on a straight line from there starting point to the end (reflected) point, and define the reflection by the line in which you reflect.

Cheers,
Jonathan

Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.


[Image: badge.gif]
find quote
MacGyver Offline
Fan
Posts: 454
Joined: Jan 2007
Reputation: 1
Location: Weilerbach Germany
Post: #33
All the icons scroll left and right, where as the 3rd icon from the right is fixed in place.

Also, why did -height let me flip it, but -width didn't?

Sorry if I'm not coherent .
My job sucks, I've been awake for 42 hours straight.
I'm starting to hallucinate.
I'm going to bed.

[Image: l_70612581327b400bb877c56a91e192fc.jpg]

See I can't make graphics to save my life.
find quote
Jezz_X Offline
Team-XBMC Skinner
Posts: 5,284
Joined: Jun 2006
Reputation: 57
Location: Earth
Post: #34
To be honest I couldn't even figure out how you did the reflection then I noticed you used negative numbers for the width and height, How did you even discover that that works ? seems like a huge guess even jmarshall who did the skin engine thought you id it a different way
find quote
jmarshall Offline
Team-XBMC Developer
Posts: 25,689
Joined: Oct 2003
Reputation: 169
Post: #35
Never thought that -height would work, but it does just fine Smile An unintended consequence of going to unsigned floats for storage of all coordinates Smile

If you just use a negative height instead of negative width it flips it correctly, so no need for the reflection animation as you point out.

I'll add support I think for the multiple colordiffuse/vertex so you can fade better.

Cheers,
Jonathan

Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.


[Image: badge.gif]
find quote
kraqh3d Offline
Retired Developer
Posts: 7,172
Joined: Dec 2003
Reputation: 4
Location: New York City, USA
Post: #36
couldnt an image with a gradient alpha channel be placed on top of the icon image to give it the appearence that the reflection is fading away?

Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.
find quote
jmarshall Offline
Team-XBMC Developer
Posts: 25,689
Joined: Oct 2003
Reputation: 169
Post: #37
Yes, but then it's fading the foreground instead of the background. Would be fine for the case above, but not so good if you were fading to a non-constant background.

Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.


[Image: badge.gif]
find quote
SleepyP Offline
Posting Freak
Posts: 2,274
Joined: Nov 2005
Reputation: 4
Location: Portland, Oregon
Post: #38
thats sweet!!!

Catchy Signature Here
find quote
jarod71 Offline
Fan
Posts: 497
Joined: Apr 2006
Reputation: 9
Location: Chitown
Post: #39
genuis!
looks great, but one think i would recommend that varies from the ms version is to put a snyopsis of the movie from the database info on the main screen, so u can scroll through the covers and see what the movie is about as well. maybe it could be put in the same brown overlay that contains the movie title? i think we can stray from the ms skin and make it more functional.

i love that we can duplicate other gui's from other projects, it shows the power of the new skin engine. I think xbmc is best served with original interfaces though. or mix and match to create something unique and different from others. I love the kaleidescape idea of having the movie info on the main screen show up when that movie is highlighted. I hope we will see a fantastic skin emerge from this... xbmc just keeps getting better and better!
find quote
jmarshall Offline
Team-XBMC Developer
Posts: 25,689
Joined: Oct 2003
Reputation: 169
Post: #40
Ok, I've fixed the flipping vertically in SVN, and I've added the new <colordiffuse> stuff and enabled them for lists. eg:

Code:
                <control type="image">
                    <posx>4</posx>
                    <posy>-30</posy>
                    <width>66</width>
                    <height>65</height>
                    <info>ListItem.Icon</info>
                </control>
                <control type="image">
                    <posx>4</posx>
                    <posy>100</posy>
                    <width>66</width>
                    <height>-65</height>
                    <info>ListItem.Icon</info>
                    <colordiffuse topleft="007f7f7f" topright="007f7f7f">7f7f7f7f</colordiffuse>
                </control>

Will give the shadow effect you are after (near enough). Note we fade to top as the image is reversed.

Cheers,
Jonathan

Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.


[Image: badge.gif]
find quote
MacGyver Offline
Fan
Posts: 454
Joined: Jan 2007
Reputation: 1
Location: Weilerbach Germany
Question  jarod71 I would love to, but can't.
Post: #41
It's like jmarshall said, it's not possible in any window other then library and VideoInfo.
I tried, for a long time, but I guess I can try to find a way to trick it, but it's like he said, I doubt it.

Jmarshall, I'm new to all this SVN stuff, do you mean it's in the XBMC source now, meaning I'd have to compile it to use those functions?

Also I was wondering about whether you could just implement four point image handeling such as" posTL=0,0 posTR=150,0 posLL=0,150 posLR=150,150, it would let people put any corner of an image anywhere, it would let us skew it forward, backwards,for relflections, or rotation to any degree, and as well as any size.

Is that possible, using either the standard pos,posy,height,width or choose to use the 4-point, either or but not both?
find quote
Gamester17 Offline
Team-XBMC Forum Moderator
Posts: 10,523
Joined: Sep 2003
Reputation: 9
Location: Sweden
Thumbs Up   
Post: #42
MacGyver Wrote:is there a way to "Lock" the focused icon to one place, ie. the yellow box stays put, but the list "moves" up/dn lft/rgt?
no I think that would be a skin-engine feature request, or?

MacGyver Wrote:I can't lock the selection to the center, so the blue bar would disapear if moved to the right to far, also there is no up/dn lft/rgt exit stratagy if the center focus is locked, other then remapping a key and button for "View mode"
another skin-engine feature request, I think(?)

MacGyver Wrote:I can see now I should have diffused the icon over a blackout square behind the non focused ones.
another skin-engine feature request Rolleyes

MacGyver Wrote:I can't get ANY database info to display in any window other then Library mode, or VideoInfo. Do you know how to do this?
don't think you can get database info to display in any window other then Library mode,
...but shouldn't you be able to make the skin display VideoInfo (IMDb data) in all views? Confused

jmarshall Wrote:Adding reflection is easy to the skin engine.

If someone mocks up an xml that does exactly what you want with a 180degree rotation instead of the reflection, I'll implement reflection in the engine.
jmarshall Wrote:If you just use a negative height instead of negative width it flips it correctly, so no need for the reflection animation as you point out.

I'll add support I think for the multiple colordiffuse/vertex so you can fade better.
Those will be very cool eye candy features! They will of benifit if someone wants to make iPhone or Apple TV (iTV) skin clones as well:
[Image: 5.jpg]
[Image: appletv-mw-11.jpg]
http://images.appleinsider.com/events/mw...-mw-14.jpg
[Image: appletv-mw-19.jpg]

Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.
find quote
Gamester17 Offline
Team-XBMC Forum Moderator
Posts: 10,523
Joined: Sep 2003
Reputation: 9
Location: Sweden
Post: #43
MacGyver Wrote:Also I was wondering about whether you could just implement four point image handeling such as" posTL=0,0 posTR=150,0 posLL=0,150 posLR=150,150, it would let people put any corner of an image anywhere, it would let us skew it forward, backwards,for relflections, or rotation to any degree, and as well as any size.
Again something that would be of benifit for a iPhone or Apple TV (iTV) skin replicas, I believe developement of a such skin has started on the xbox-scene.com skinning forum => http://forums.xbox-scene.com/index.php?showtopic=547284

Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.
find quote
Gamester17 Offline
Team-XBMC Forum Moderator
Posts: 10,523
Joined: Sep 2003
Reputation: 9
Location: Sweden
Smile   
Post: #44
@MacGyver, looks like you got a rival or potential partner over at the xbox-scene.com XBMC skinning forum (link), w84no1 is also working on a Kaleidescape skin, sounds like he been wanting to do it for a long time but not got it of the ground until now, several other people has also offered to help him out with the graphics. Maybe you can work together on the project?, (the MC360 skin got loads of skinning and graphics artists colaberating on that skin and that seem to be working great for them).

w84no1 Wrote:I am now trying to make a complete skin from scratch that will have a Kaleidescape like feel to it, at least for movies and music. It will not be exactly like Kaleidescape, but I am trying to take the best parts of the Kaleidescape UI and put them in a skin. I have 4 Xboxes with xbmc as the dashboard on all of them. I use 3 out of the 4 exclusively for media centers. My new skin will be geared toward that. The Home.xml will be the hardest as I would like to have a clean interface with only icons (not sure what Kaleidescape looks like at startup?). I am not much of a graphics person so I will have to find free graphics that I like to use with the skin.

Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.
find quote
MacGyver Offline
Fan
Posts: 454
Joined: Jan 2007
Reputation: 1
Location: Weilerbach Germany
Thumbs Up  He can have all my code if he wants it.
Post: #45
I like a challenge (coding not people) Smile
I only made mine because I was reading this post, and the link to the real website, and read the whole "..have a crew member fix it without you ever knowing there was a problem.." thing and got pissed off because of the smugness of the comment, so I coded their little interface in 30 min.
I'll post all the source I wrote, I like figuring out problems, and since I SUCK at artwork, it would be a waste for me not to give it to someone with better skills then myself to finish it.
Maybe my source will give him ideas, I come up with ugly wierd code that most people would say would work, but somehow does. (selftaught,sorry)
.Cool
Here's the CommonContent.xml minus the BigList
Code:
<includes>
<include name="Common_List">
    <control type="list" id="50">
        <viewtype label="535">list</viewtype>
        <posx>40</posx>
        <posy>50</posy>
        <width>570</width>
        <height>405</height>
        <onleft>2</onleft>
        <onright>3</onright>
        <onup>50</onup>
        <ondown>50</ondown>
        <pagecontrol>90</pagecontrol>
        <include>common-fade</include>
        <itemlayout height="20">
            <control type="label">
                <posx>15</posx>
                <posy>2</posy>
                <width>345</width>
                <height>14</height>
                <font>font16</font>
                <textcolor>FFcbcbcb</textcolor>
                <include>selectedcolor</include>
                <info>ListItem.Label</info>
            </control>
        </itemlayout>
    <focusedlayout height="20">
            <control type="image">
                <posx>2</posx>
                <posy>2</posy>
                <width>355</width>
                <height>19</height>
                <texture>Button-List.png</texture>
                <visible>Control.HasFocus(50)</visible>
            </control>
            <control type="image">
                <posx>2</posx>
                <posy>2</posy>
                <width>355</width>
                <height>19</height>
                <texture>Button-List-NoFocus.png</texture>
                <visible>!Control.HasFocus(50)</visible>
            </control>
            <control type="label">
                <posx>15</posx>
                <posy>0</posy>
                <width>340</width>
                <height>16</height>
                <font>font16</font>
                <textcolor>FFffffff</textcolor>
                 <shadowcolor>ff000000</shadowcolor>
                <include>selectedcolor</include>
                <scroll>true</scroll>
                <scrolltime>300</scrolltime>
                <info>ListItem.Label</info>
            </control>
                </focusedlayout>        
    </control>

            <control type="label">
                <posx>50</posx>
                <posy>460</posy>
                <width>615</width>
                <height>40</height>
                <align>center</align>
                <font>font18</font>
                <textcolor>FFcbcbcb</textcolor>
                 <shadowcolor>ff666666</shadowcolor>
                <include>selectedcolor</include>
                <scroll>true</scroll>
                <scrolltime>300</scrolltime>
                <info>ListItem.Label</info>
                <visible>Control.HasFocus(50)</visible>
            </control>
  <control>
   <description>video rectangle</description>
   <type>image</type>
   <id>0</id>
   <posx>411</posx>
   <posy>053</posy>
   <width>254</width>
   <height>400</height>
   <texture>nodvdcase.png</texture>
   <visible>!Player.HasVideo</visible>
   <include>buttonpanelslide</include>
   <visible>Control.IsVisible(50)</visible>
  </control>

  <control>
   <description>video rectangle</description>
   <type>image</type>
   <id>0</id>
   <posx>413</posx>
   <posy>055</posy>
   <width>251</width>
   <height>397</height>
   <texture>defaultAlbumCover.png</texture>
   <info>ListItem.Icon</info>
   <visible>!Player.HasVideo</visible>
   <include>buttonpanelslide</include>
   <visible>Control.IsVisible(50)</visible>
  </control>

   <control>
   <description>number of files text label</description>
   <type>label</type>
   <id>12</id>
   <posx>650</posx>
   <posy>525</posy>
<shadowcolor>ff666666</shadowcolor>
   <align>right</align>
   <label>-</label>
   <font>font10</font>
   <include>contentpanelslide</include>
   <visible>Control.IsVisible(50)</visible>
  </control>


</include>

<include name="Common_BigIcon">
    <control type="panel" id="53">
        <viewtype label="538">bigicon</viewtype>
        <posx>45</posx>
        <posy>30</posy>
        <width>690</width>
        <height>410</height>
        <onleft>2</onleft>
        <onright>90</onright>
        <onup>53</onup>
        <ondown>53</ondown>
        <pagecontrol>90</pagecontrol>
        <include>common-fade</include>
        <itemlayout height="110" width="70">
            <control type="image">
                <posx>5</posx>
                <posy>0</posy>
                <width>60</width>
                <height>100</height>
                <info>ListItem.Icon</info>
                <aspectratio>stretch</aspectratio>
            </control>

        </itemlayout>
        <focusedlayout height="130" width="60">
            <control type="image">
                <posx>5</posx>
                <posy>0</posy>
                <width>60</width>
                <height>100</height>
                <info>ListItem.Icon</info>
                <aspectratio>stretch</aspectratio>
            </control>
            <control type="image">

<posx>-25</posx>
<posy>-30</posy>
<width>120</width>
<height>160</height>
<texture>KSFolder-Focus.png</texture>
                <colordiffuse>ffffffff</colordiffuse>
                <animation effect="fade" time="400">VisibleChange</animation>
            </control>


<control type="image">
<posx>-15</posx>
<posy>-20</posy>
<width>100</width>
<height>140</height>
<info>ListItem.Icon</info>
                <aspectratio>stretch</aspectratio>
                
                <colordiffuse>ffffffff</colordiffuse>
                <animation effect="fade" time="400">VisibleChange</animation>
            </control>

        </focusedlayout>


    </control>

            <control type="image">
                <posx>40</posx>
                <posy>445</posy>
                <width>643</width>
                <height>50</height>
                <texture>Button-List.png</texture>
                <colordiffuse>ffffffff</colordiffuse>
                <visible>Control.HasFocus(53)</visible>
            </control>
            <control type="label">
                <posx>50</posx>
                <posy>450</posy>
                <width>615</width>
                <height>40</height>
                <align>center</align>
                <font>font18</font>
                <textcolor>FFcbcbcb</textcolor>
                 <shadowcolor>ff000000</shadowcolor>
                <include>selectedcolor</include>
                <scroll>true</scroll>
                <scrolltime>300</scrolltime>
                <info>ListItem.Label</info>
                <visible>Control.HasFocus(53)</visible>
            </control>


   <control>
   <description>number of files text label</description>
   <type>label</type>
   <id>12</id>
   <posx>650</posx>
   <posy>525</posy>
   <align>right</align>
   <label>-</label>
   <font>font10</font>
   <include>contentpanelslide</include>
   <visible>Control.IsVisible(53)</visible>
  </control>
</include>

</includes>

beware I don't comment and leave wierd test crap everywhere
find quote
Post Reply