Kaleidescape Skin Replica in progress - Skinning help is wanted!

MacGyver · 2007-01-11 13:47

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?

**Gamester17** · 2007-01-11 17:46

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]

http://images.appleinsider.com/events/mw...-mw-14.jpg
[Image: appletv-mw-19.jpg]

**Gamester17** · 2007-01-11 17:51

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

**Gamester17** · 2007-01-11 20:23

@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.

MacGyver · 2007-01-11 21:17

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

MacGyver · 2007-01-11 21:41

Is there a way you can pull my kalidescape stuff from the features forum to here, and stick the microsoft screen stuff in a new thread. I hope it wasn't totally my fault, but the subjects are all over the place, it's hard to keep track.

PS Can you please edit (or tell me how to edit) the title of this thread, I was up for a long time when I typed it, so some of the words got left in my head. It should have read "I have been working on a Kaleidescape Skin, I need some help thou.
Sorry.

w84no1 · 2007-01-11 22:55

MacGyver Wrote:I like a challenge (coding not people)
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)
.

I have started a skin as mentioned, but I like you, am a coder. My graphics skills suck!!! I wanted to create a Kaleidescape skin because it was clean with minimal eye candy, since I can't create eye candy:confused2:

I like your work and you have gotten alot farther than I have. I see that there is more skin engine development talk here than on x-b scene and I like that. jmarshall does a great job to post on both forums Big Grin

I like the microsoft view that you created it looks awesome. Maybe we can throw some ideas together and create a skin that is clean, yet looks awesome.

watzen · 2007-01-12 17:52

Just wanted to say that I liked the effect an put it together with Clearity:

[Image: image01.JPG]

Code:

<include name="Common_WrapList">

    <!--<control type="image">

        <posx>63</posx>

        <posy>106</posy>

        <width>595</width>

        <height>80</height>

        <texture>Panel_Top.png</texture>

        <include>common-fade</include>

        <visible>Control.IsVisible(54)</visible>

    </control>-->

    <!--<control type="image">

        <posx>63</posx>

        <posy>414</posy>

        <width>595</width>

        <height>80</height>

        <texture>Panel_Bottom.png</texture>

        <include>common-fade</include>

        <visible>Control.IsVisible(54)</visible>

    </control>-->

    <control type="image">

        <description>Black Panel</description>

        <posx>63</posx>

        <posy>110</posy>

        <width>595</width>

        <height>380</height>

        <texture>Black.png</texture>

        <include>common-fade</include>

        <visible>Control.IsVisible(54)</visible>

    </control>

    <control type="wraplist" id="54">

        <viewtype label="WrapList">wrap</viewtype>

        <posx>65</posx>

        <posy>130</posy>

        <width>595</width>

        <height>355</height>

        <onleft>54</onleft>

        <onright>54</onright>

        <onup>2</onup>

        <ondown>2</ondown>

        <focusposition>2</focusposition>

        <orientation>horizontal</orientation>

        <include>common-fade</include>

        <itemlayout height="355" width="102">

            <control type="image">

                <posx>0</posx>

                <posy>100</posy>

                <width>95</width>

                <height>120</height>

                <info>ListItem.Icon</info>

                <aspectratio>keep</aspectratio>

            </control>

            <control type="image">

                <posx>0</posx>

                <posy>339</posy>

                <width>95</width>

                <height>-120</height>

                <info>ListItem.Icon</info>

                <aspectratio>keep</aspectratio>

                <colordiffuse topleft="007f7f7f" topright="007f7f7f">7f7f7f7f</colordiffuse>

            </control>

        </itemlayout>

        <focusedlayout height="140" width="190">

            <control type="image">

                <posx>0</posx>

                <posy>0</posy>

                <width>179</width>

                <height>230</height>

                <aspectratio>keep</aspectratio>

                <info>ListItem.Icon</info>

                <animation effect="zoom" start="60,100,85,120" end="0,0,179,230" time="100">Focus</animation>

            </control>

            <control type="image">

                <posx>0</posx>

                <posy>460</posy>

                <width>179</width>

                <height>-230</height>

                <aspectratio>keep</aspectratio>

                <info>ListItem.Icon</info>

                <animation effect="zoom" start="60,339,85,-120" end="0,460,179,-230" time="100">Focus</animation>

                <colordiffuse topleft="007f7f7f" topright="007f7f7f">7f7f7f7f</colordiffuse>

            </control>

            <!--<control type="image">

                <posx>0</posx>

                <posy>0</posy>

                <width>195</width>

                <height>250</height>

                <texture>Folder-Focus.png</texture>

                <animation effect="zoom" end="0,0,195,250" time="500">Focus</animation>

            </control>-->

         </focusedlayout>

    </control>

    <!--<control type="image">

        <posx>0</posx>

        <posy>100</posy>

        <width>720</width>

        <height>101</height>

        <texture>Background-Overlay-TopLine2.png</texture>

        <colordiffuse>FFffffff</colordiffuse>

        <include>common-fade</include>

        <visible>Control.IsVisible(54)</visible>

    </control>

    <control type="image">

        <posx>0</posx>

        <posy>400</posy>

        <width>720</width>

        <height>101</height>

        <texture>Background-Overlay-BottomLine2.png</texture>

        <colordiffuse>FFffffff</colordiffuse>

        <include>common-fade</include>

        <visible>Control.IsVisible(54)</visible>

    </control> -->

    <control type="label">

        <posx>60</posx>

        <posy>440</posy>

        <width>600</width>

        <height>16</height>

        <font>special18</font>

        <textcolor>FFffffff</textcolor>

        <align>center</align>

        <info>ListItem.Label</info>

        <include>selectedcolor</include>

        <include>common-fade</include>

        <visible>Control.IsVisible(54)</visible>

    </control>

    <control type="label">

        <posx>90</posx>

        <posy>135</posy>

        <width>400</width>

        <height>400</height>

        <font>fontW</font>

        <align>left</align>

        <textcolor>90cbcbcb</textcolor>

        <include>selectedcolor</include>

        <info>ListItem.Label2</info>

        <visible>Control.HasFocus(54)</visible>

        <animation effect="fade" time="400" delay="2000">VisibleChange</animation>

    </control>

        <control type="label">

        <posx>450</posx>

        <posy>135</posy>

        <width>400</width>

        <height>16</height>

        <font>font13</font>

        <textcolor>FFffffff</textcolor>

        <include>selectedcolor2</include>

        <info>ListItem.Year</info>

        <visible>Control.HasFocus(54)</visible>

        <animation effect="fade" time="400" delay="2000">VisibleChange</animation>

    </control>

    <control type="label">

        <posx>450</posx>

        <posy>155</posy>

        <width>200</width>

        <height>16</height>

        <font>font13</font>

        <textcolor>FFffffff</textcolor>

        <include>selectedcolor2</include>

        <info>ListItem.Genre</info>

        <scroll>true</scroll>

        <visible>Control.HasFocus(54)</visible>

        <animation effect="fade" time="400" delay="2000">VisibleChange</animation>

    </control>

</include>

/mvh Tomas

**jmarshall** · 2007-01-12 21:27

That won't work any longer. See the Clearity SVN for how it should be done now.

watzen · 2007-01-12 23:47

Alrighty then, things move fast, which is great work by you guys.
feel more than free to remove my previous post.

/mvh Tomas

jmarshall Team-XBMC Developer Posts: 24,564 Joined: Oct 2003 Reputation: 138	2007-01-12 21:27 Post: #49 That won't work any longer. See the Clearity SVN for how it should be done now. 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

watzen Fan Posts: 460 Joined: Jan 2007 Reputation: 10 Location: Sweden	2007-01-12 23:47 Post: #50 Alrighty then, things move fast, which is great work by you guys. feel more than free to remove my previous post. /mvh Tomas
	find quote