Login at Kodi Home

~~BritneysPAIRS~~ · (This post was last modified: 2008-08-08, 07:47 by BritneysPAIRS.)

If you want help to do this project I would help out this looks really good and like it simple.

To stop the image rotating in multimage just set time to 0 millisec id say. Or else increase it to 10000000000 millisecs

Also you might be surprised at how much work ive done on this type or interface..... simplifing things as much as poss

**Hitcher** · 2008-08-08, 07:44

Reggienz Wrote:Duncan, there is definitely a demand for an aesthetically pleasing and simple interface. There is little to choose from in terms of skins that anyone who is unfamiliar with XBMC can just use without at least spending some time familiarizing themselves with it beforehand. (Wives, Girlfriends, etc). My idea of a simple interface is no alternate view options (What you have mocked up here is impressive) and no icons on the home page other than Movies, Music, Tv Shows, Games and Pictures. Keep it easy to use and I think you'll find a lot of users will thank you. Of course these are all ideas I'm throwing out there and what you decide to run with will be as always appreciated by all. Good luck!

This.

watzen · 2008-08-12, 10:33

Here's a fairly accurate positioning if you want:

Code:
<control type="image">

      <posx>1122</posx>

      <posy>319</posy>

      <width>430</width>

      <height>322.5</height>

      <texture>test.png</texture>

      <animation effect="zoom" end="39" time="0" condition="true">Conditional</animation>

    </control>

    <control type="image">

      <posx>956</posx>

      <posy>313</posy>

      <width>430</width>

      <height>322.5</height>

      <texture>test.png</texture>

      <animation effect="zoom" end="47" time="0" condition="true">Conditional</animation>

    </control>

    <control type="image">

      <posx>762</posx>

      <posy>302</posy>

      <width>430</width>

      <height>322.5</height>

      <texture>test.png</texture>

      <animation effect="zoom" end="55" time="0" condition="true">Conditional</animation>

    </control>

    <control type="image">

      <posx>484.95</posx>

      <posy>285.1</posy>

      <width>430</width>

      <height>322.5</height>

      <texture>test.png</texture>

      <animation effect="zoom" end="70" time="0" condition="true">Conditional</animation>

    </control>

    <control type="image">

      <posx>70</posx>

      <posy>255</posy>

      <width>430</width>

      <height>322.5</height>

      <texture>test.png</texture>

    </control>

/regards Tomas Watz

watzen · 2008-08-12, 20:26

Here's a full demo Home.xml. Scrolling right works with animation
This one is nearly perfect.

Here's a screenshot with the original screenshot superimposed:

/regards Tomas

Code:
<window id="0">

    <defaultcontrol>20</defaultcontrol>

    <allowoverlay>yes</allowoverlay>

    <controls>

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

      <posx>10</posx>

      <posy>10</posy>

      <width>1280</width>

      <height>250</height>

      <visible>true</visible>

      <onup>20</onup>

      <ondown>20</ondown>

      <onleft>20</onleft>

      <onright>20</onright>

      <orientation>horizontal</orientation>

      <focusposition>2</focusposition>

      <scrolltime>200</scrolltime>

      <itemlayout width="200">

        <control type="label">

          <posx>0</posx>

          <posy>0</posy>

          <width>200</width>

          <height>22</height>

          <info>ListItem.Label</info>

        </control>

      </itemlayout>

      <focusedlayout width="200">

        <control type="label">

          <posx>0</posx>

          <posy>0</posy>

          <width>200</width>

          <height>22</height>

          <info>ListItem.Label</info>

        </control>

      </focusedlayout>

      <content>

        <item id="1">

          <label>My First Item</label>

          <onclick>ActivateWindow(Home)</onclick>

          <visible>true</visible>

        </item>

        <item id="2">

          <label>My Second Item</label>

          <onclick>ActivateWindow(MyMusicLibrary)</onclick>

        </item>

      </content>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>1286</posx>

      <posy>444</posy>

      <width>164</width>

      <height>125</height>

      <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      <animation type="Hidden">

        <effect type="slide" end="-164,0" time="200" reversible="false"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>1286</posx>

      <posy>319</posy>

      <width>164</width>

      <height>125</height>

      <texture>test.png</texture>

      <animation type="Hidden">

        <effect type="slide" end="-164,0" time="200" reversible="false"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>1122</posx>

      <posy>444</posy>

      <width>164</width>

      <height>125</height>

      <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="117.95" time="200"/>

        <effect type="slide" end="-132.26,13.57" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>1122</posx>

      <posy>319</posy>

      <width>164</width>

      <height>125</height>

      <texture>test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="117.95" time="200"/>

        <effect type="slide" end="-132.26,-5.09" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>966</posx>

      <posy>460</posy>

      <width>193</width>

      <height>147</height>

      <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="121.74" time="200"/>

        <effect type="slide" end="-165.93,17.25" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>966</posx>

      <posy>313</posy>

      <width>193</width>

      <height>147</height>

      <texture>test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="121.74" time="200"/>

        <effect type="slide" end="-165.93,-9.04" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>764</posx>

      <posy>481</posy>

      <width>235</width>

      <height>179</height>

      <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="127.68" time="200"/>

        <effect type="slide" end="-216.95,27.41" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>764</posx>

      <posy>302</posy>

      <width>235</width>

      <height>179</height>

      <texture>test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="127.68" time="200"/>

        <effect type="slide" end="-216.95,-13.2" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>487</posx>

      <posy>516</posy>

      <width>300</width>

      <height>229</height>

      <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="139.86" time="200"/>

        <effect type="slide" end="-291,42.19" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>487</posx>

      <posy>285.1</posy>

      <width>300</width>

      <height>229</height>

      <texture>test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="139.86" time="200"/>

        <effect type="slide" end="-291,-21.5" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>Container(20).OnNext</visible>

      <posx>80</posx>

      <posy>575</posy>

      <width>420</width>

      <height>320</height>

      <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="130" time="200"/>

        <effect type="slide" end="-407,26" time="200"/>

        <effect type="fade" start="100" end="0" time="200"/>

      </animation>

    </control>

    <control type="image" id="3001">

      <visible>Container(20).OnNext</visible>

      <posx>80</posx>

      <posy>255</posy>

      <width>420</width>

      <height>320</height>

      <texture>test.png</texture>

      <animation type="Hidden">

        <effect type="zoom" end="130" time="200"/>

        <effect type="slide" end="-407,-50" time="200"/>

        <effect type="fade" start="100" end="0" time="200"/>

      </animation>

    </control>

    <control type="image">

      <visible>!Control.IsVisible(3001)</visible>

        <posx>1122</posx>

        <posy>444</posy>

        <width>164</width>

        <height>125</height>

        <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>1122</posx>

        <posy>319</posy>

        <width>164</width>

        <height>125</height>

        <texture>test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>966</posx>

        <posy>460</posy>

        <width>193</width>

        <height>147</height>

        <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>966</posx>

        <posy>313</posy>

        <width>193</width>

        <height>147</height>

        <texture>test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>764</posx>

        <posy>481</posy>

        <width>235</width>

        <height>179</height>

        <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>764</posx>

        <posy>302</posy>

        <width>235</width>

        <height>179</height>

        <texture>test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>487</posx>

        <posy>516</posy>

        <width>300</width>

        <height>229</height>

        <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>487</posx>

        <posy>285.1</posy>

        <width>300</width>

        <height>229</height>

        <texture>test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>80</posx>

        <posy>575</posy>

        <width>420</width>

        <height>320</height>

        <texture flipy="true" diffuse="testdiff.png">test.png</texture>

      </control>

      <control type="image">

        <visible>!Control.IsVisible(3001)</visible>

        <posx>80</posx>

        <posy>255</posy>

        <width>420</width>

        <height>320</height>

        <texture>test.png</texture>

      </control>

  </controls>

</window>

watzen · 2008-08-13, 01:45

I've completed the base icon scroller.

download and unrar to your skindir if you want to try it out.
I've used aeon as a base so if you want to switch back to another skin select Appearance and choose your skin instead.

New60.rar

watzen · 2008-08-15, 23:16

It's now updated with a slide-in animation on windowopen and a fade out on windowclose.
same link as post above.

Rocky5 · 2008-08-17, 15:42

That looks damn nice cant wait for this to be complete love the fade animations.

UND3R ACHI3V3R · 2008-09-20, 22:59

Will this be a skin or is it just a concept?

UND3R ACHI3V3R · 2008-10-04, 06:04

UND3R ACHI3V3R Wrote:Will this be a skin or is it just a concept?

Maybe no-one saw this question?

djh_ · 2008-10-12, 11:36

Just a concept until someone else takes it on. I'm sure there are plenty of folks out there with a mind to reproducing the NX360E, and it'll have changed quite a bit by the time it launches.