[Track11]

Hello, my Name is Track11 and I'm a semi graphic designer from germany. I study industrial design in germany @ Folkwang University.

My Projekt for next semesters is to concept a skin for Xbmc. Last week I decided to do this in two years. That project will be rated by professor. The endresult has to be very good for receive my scholarship furthermore .

The project must have these things:
- it has to be clean ( not overloaded)
- it has to be the most intuitive method for navigation
- it must have more options and has to be multifunctionality in the maximum ways
- it should be safe for lowlevel skilled users like children

and the biggest point is: When it's done I'm gonna take these impressions of the "new" skin for my final exam. My real project is to create a totaly new remote.

So my question is: Is there a way to find a paasionated scripter for my project? I can't pay anything but the result will can be usefull for everybody. The remote wich I'm gonna make will be unique. I'm afraid but today there is no way to produce more of them, because it will be all handcrafted.

My faculty ist design, so I'm unfortunately not so into coding like others on this planet. The most time I work with these programms: cinema4d, 3Dmax, adobe after effects, photoshop,autodesk sketchbook

Pleas do not be angry about my crappy english. I learn this language since 2010 and going to get some english lessons in the evening school.

Thank you for reading

Track11

[MassIV]

Welcome to the forum.

What do you mean by this:
- it must have more options and has to be multifunctionality in the maximum ways?

Did you mean that you have 2 years to build this skin OR 1 semester?

Once you know what you want to make. A skin is 80% code and 20% photoshop. That is, if you don't have to learn photoshop first.

Depending on what ideas you have for redesigning a skin. Remember that you have to stay within the possibilities of the code.

[Track11]

Welcome to the forum
What do you mean by this:
- it must have more options and has to be multifunctionality in the maximum ways?
Did you mean that you have 2 years to build this skin OR 1 semester?
Once you know what you want to make. A skin is 80% code and 20% photoshop. That is, if you don't have to learn photoshop first.
Depending on what ideas you have for redesigning a skin. Remember that you have to stay within the possibilities of the code.

Thank you.
This project is about two years or 4 semesters.

The multifunctionality aspect is slightly different as you think. It's more like " you got all informations and functions on one screen and you can interact with 4 things at the same time"
I've got some ideas on my sketchbook. One example is a windmill wheel witch popup in every situation by pressing the wheel button on the remote. Every wing of the windmill wheel stands for another topic like "Music, Movies..." If you trigger one wing you like, the wing becomes the center of the windmill and other category showing up on the wings around like "Database, TV Show, Settings"

Thats one idea of many I've allready got.

A skin is 80% code and 20% photoshop

I need to learn how to script. Some suggestions an sources anywhere?

I know that the code is the limit for my ideas and hope that I can max out to the limit.

[Martijn]

This is how to get started:
http://forum.xbmc.org/showthread.php?tid=94438

and this can be a useful tool:
http://forum.xbmc.org/showthread.php?tid=137855

[MassIV]

Ok, well good that you have 2 years because 1 semester would have been a bit short...

And your windmill is something that does not exist yet. There is no existing code to borrow from as far as i know (for the rotation). I could only find a concept skin that even suggested a round menu: http://forum.xbmc.org/showthread.php?tid=116658

So you might end up having to use python as well.

But is the menu / way to control the skin, the main goal OR the entire skin? Because if this is more about how you control it than you would lose loads of time on the rest of the skin. And it might be best to start with an existing skin, and first try to build your menu.

Where to start? In the Wiki:
http://wiki.xbmc.org/index.php?title=Skinning
http://wiki.xbmc.org/index.php?title=XBM...ing_Manual
http://wiki.xbmc.org/index.php?title=XBM..._Tutorials

[Track11]

Thanks. I'm allready reading. First of all I gonna take a already existing skin and try to change some elements. I think thats good to learn.

After this I have to find a way to impliment a simple flash application into the menu. I think the weather application looks like it is in flash.
The code may be small but the will is heavy.

That controll windmill is just an example. There can be a slidebar or a 3D ball, a timeline or a simple triangle. I thought about a rotating tube, a clock or something what looks like a cogwheel with different things on it.

I know that it will be very hard to realizable but I'm on the ball.

[Martijn]

Nothing in XBMC is flash. all is XML based
For editing an existing skin take an easier one to understand like Confluence

[MassIV]

You got me thinking... On, if a circular menu would be possible with just xml so i made a test.


Pick a test skin. Best to find a version that uses images in the media folder ipv a textures file.
Make a backup copy of home.xml from the skins 720 folder and move it somewhere safe.

Put the following 2 images in your skin's media folder:
http://dl.dropbox.com/u/86022650/bluebar.png
http://dl.dropbox.com/u/86022650/circlecd.png

Go back to the 720 folder and open home.xml with Notepad++.
Replace all the text with this:

Code:

<window id="0">
<defaultcontrol always="true">17</defaultcontrol>
<onload>SetFocus(3)</onload>

<allowoverlay>no</allowoverlay>
    <coordinates>
        <system>1</system>
        <posx>0</posx>
        <posy>0</posy>
    </coordinates>

<controls>

    <control type="image">
        <posx>0</posx>
        <posy>0</posy>
        <width>1280</width>
        <height>720</height>
        <aspectratio>stretch</aspectratio>
        <texture>black.png</texture>
        <colordiffuse>FFCCCCCF</colordiffuse>
    </control>
    <control type="image">
        <posx>660</posx>
        <posy>340</posy>
        <width>300</width>
        <height>50</height>
        <aspectratio>stretch</aspectratio>
        <texture>bluebar.png</texture>
    </control>
    <control type="image">
        <posx>660</posx>
        <posy>340</posy>
        <width>50</width>
        <height>50</height>
        <aspectratio>stretch</aspectratio>
        <texture>circlecd.png</texture>
    </control>
    
    <control type="group" id="17">
      
        <posx>640</posx>
        <posy>360</posy>
        <width>1</width>
        <height>1</height>
        <itemgap>0</itemgap>
        <pagecontrol></pagecontrol>
        <scrolltime tween="sine" easing="out">200</scrolltime>
        <orientation>vertical</orientation>
        <usecontrolcoords>false</usecontrolcoords>
        <visible>true</visible>
        <animation effect="rotate"  end="180" center="690,360" time="1000" reversible="true" condition="ControlGroup(17).HasFocus(1)">Conditional</animation>
        <animation effect="rotate"  end="270" center="690,360" time="1000" reversible="true" condition="ControlGroup(17).HasFocus(2)">Conditional</animation>
        <animation effect="rotate"  end="0" center="690,360" time="1000" reversible="true" condition="ControlGroup(17).HasFocus(3)">Conditional</animation>
        <animation effect="rotate"  end="90" center="690,360" time="1000" reversible="true" condition="ControlGroup(17).HasFocus(4)">Conditional</animation>
        <control type="button" id="1">
            <posx>-100</posx>
            <posy>0</posy>
            <width>100</width>
            <height>1</height>
            <visible>true</visible>
            <label>one</label>
            <font>main</font>
            <align>center</align>
            <aligny>center</aligny>
            <textcolor>FFFFFFFF</textcolor>
            <disabledcolor>FFFF0000</disabledcolor>
            <onclick>XBMC.ActivateWindow(MyVideos)</onclick>
            <onup>4</onup>
            <ondown>2</ondown>
            <animation effect="rotate" end="180" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(1)">Conditional</animation>
            
        </control>
        <control type="button" id="2">
            <posx>0</posx>
            <posy>-80</posy>
            <width>100</width>
            <height>1</height>
            <visible>true</visible>
            <label>two</label>
            <font>main</font>
            <align>center</align>
            <aligny>center</aligny>
            <textcolor>FFFFFFFF</textcolor>
            <disabledcolor>FFFF0000</disabledcolor>
            <onclick>XBMC.ActivateWindow(MyVideos)</onclick>
            <onup>1</onup>
            <ondown>3</ondown>
            <animation effect="rotate" end="90" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(3)">Conditional</animation>
            <animation effect="rotate" end="-90" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(4)">Conditional</animation>
            <animation effect="rotate" end="90" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(1)">Conditional</animation>
            <animation effect="rotate" end="90" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(2)">Conditional</animation>
            
        </control>
        <control type="button" id="3">
            <posx>100</posx>
            <posy>0</posy>
            <width>100</width>
            <height>1</height>
            <visible>true</visible>
            <label>three</label>
            <font>main</font>
            <align>center</align>
            <aligny>center</aligny>
            <textcolor>FFFFFFFF</textcolor>
            <disabledcolor>FFFF0000</disabledcolor>
            <onclick>XBMC.ActivateWindow(MyVideos)</onclick>
            <onup>2</onup>
            <ondown>4</ondown>
            <animation effect="rotate" end="180" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(1)">Conditional</animation>
            
        </control>
        <control type="button" id="4">
            <posx>0</posx>
            <posy>80</posy>
            <width>100</width>
            <height>1</height>
            <visible>true</visible>
            <label>four</label>
            <font>main</font>
            <align>center</align>
            <aligny>center</aligny>
            <textcolor>FFFFFFFF</textcolor>
            <disabledcolor>FFFF0000</disabledcolor>
            <onclick>XBMC.ActivateWindow(MyVideos)</onclick>
            <onup>3</onup>
            <ondown>1</ondown>
            <animation effect="rotate" end="90" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(3)">Conditional</animation>
            <animation effect="rotate" end="-90" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(4)">Conditional</animation>
            <animation effect="rotate" end="90" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(1)">Conditional</animation>
            <animation effect="rotate" end="90" center="auto" time="1" reversible="false" condition="ControlGroup(17).HasFocus(2)">Conditional</animation>
            
        </control>
</control>


</controls>

</window>

Start XBMC and use up and down arrow keys to control the menu.
Press "s" to get the exit menu. Close XBMC and use the backup of home.xml to get your skin back to normal.

[Track11]

First day? First result? Thats amazing. I really like this! Thats a push for me.

I test it right now. Thank you so much MassIV! You are amazing

//Edit: Man! Thats what I'm talking about! Exactly the first raw model of that design I imagine. I haven't read so far but can you tell me if it's possible to add more than 4 bars in this cross? I will make a impression in photoshop quickly

[MassIV]

You can add as many as you want. That is until they start touching each other / overlapping at the center, where they are closest to each other.
That would look bad... Obviously.

But i'm not convinced this is the best way to code this. I just wanted to see if it was at all possible.
As you have noticed, it doesn't wrap. Meaning, the last one jumps back to the first one without the rotation.

Maybe if there are others that would welcome a rotating menu there will come some better ideas.