Syntax Help

  Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Post Reply
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #1
Hello, I just tried doing some coding. After looking at some skins' syntax I've come up with this thing for my Home page. Of course it doesn't work, and the skin I started off with is now not usable. So before I continue calibrating it, I need someone to tell me what I did wrong.

The piece of code is this:

Code:
<window id="0">
    <defaultcontrol always="true">300</defaultcontrol>
    <allowoverlay>yes</allowoverlay>

    <controls>
                 <control type="image" id="301">
            <posx>0</posx>
            <posy>0</posy>
            <width>1920</width>
            <height>1080</height>
            <imagepath background="true">ListItem.Icon</imagepath>
        </control>
    
        <control type="wraplist" id="300">
            <description>Home Wraplist</description>
            <posx>0</posx>
            <posy>500</posy>
            <width>1920</width>
            <height>580</height>
            <onup>300</onup>
            <ondown>300</ondown>
            <onleft>300</onleft>
            <onright>300</onright>
            <focusposition>4</focusposition>
            <scrolltime>200</scrolltime>

            <itemlayout width="540" height="96">

                <control type="label">
                    <posx>0</posx>
                    <height>96</heigh
                    <width>375</width>
                    <font>Medium</font>
                    <info>ListItem.Label</info>
                    <align>left</align>
                </control>

            </itemlayout>

            <focusedlayout width="1920" height="96">

                <control type="label">
                    <posx>0</posx>
                    <width>270</width>
                    <height>96</height>
                    <info>ListItem.Label</info>
                    <font>Medium</font>
                    <textcolor>Blue</textcolor>
                    <align>left</align>
                </control>

            </focusedlayout>

            <content>

                <item id="1">
                    <description>Programs</description>
                    <label><string>Programs</string></label>
                                        <icon>special://skin/background/Programs.jpg</icon>
                    <onclick>ActivateWindow(Programs,Addons)</onclick>
                </item>

            </content>

        </control>

    </controls>

</window>
(This post was last modified: 2012-05-02 00:25 by Avatarass.)
find quote
Hitcher Offline
Skilled Skinner
Posts: 10,283
Joined: Aug 2007
Reputation: 80
Location: Eastleigh, UK
Post: #2
<height>96</heigh cut short.

If you use Notepad++ get the XML plugin for instant syntax error checking.

Or this site -

http://www.w3schools.com/Dom/dom_validate.asp
find quote
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #3
(2012-04-30 19:05)Hitcher Wrote:  <height>96</heigh cut short.

If you use Notepad++ get the XML plugin for instant syntax error checking.

Or this site -

http://www.w3schools.com/Dom/dom_validate.asp

Thanks. I fixed that but the skin is still dead. By the way im using PSPad.
find quote
Hitcher Offline
Skilled Skinner
Posts: 10,283
Joined: Aug 2007
Reputation: 80
Location: Eastleigh, UK
Post: #4
<label><string>Programs</string></label> should be <label>Programs</label>.
find quote
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #5
(2012-04-30 19:12)Hitcher Wrote:  <label><string>Programs</string></label> should be <label>Programs</label>.

Fixed that. Didnt solve the problem.

The reason I did that is because in the original skin (Foundation), the label would be accessed via an ID, that was defined as a string. So I figured If I cut the string definitions then I should at least define them here. I guess was wrong.
find quote
Hitcher Offline
Skilled Skinner
Posts: 10,283
Joined: Aug 2007
Reputation: 80
Location: Eastleigh, UK
Post: #6
Fixed code is working for me -

[Image: screenshot001hg.jpg]

What does your XBMC log say?
find quote
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #7
Its OK, I rewritten the whole thing and it works now.

Now, I'm not sure why but the background picture does not get my pictures. When I define an normal image - it works, but when I try doing it using ListItem, it doesnt. Could you explain what a ListItem is and whether or not it comes with the program or is something I have to create.

I got a log? How do I access it?

By the way, apparently the imagepath part is not needed because I was able to connect a picture by simply placing the picture into the media folder and then just calling it from there. Which brings me to my next question. What is the purpose of the imagepath if it doesn't work?
(This post was last modified: 2012-04-30 22:58 by Avatarass.)
find quote
Hitcher Offline
Skilled Skinner
Posts: 10,283
Joined: Aug 2007
Reputation: 80
Location: Eastleigh, UK
Post: #8
Because you're using it outside of the the actual list you'll need to use the container string instead.

ie Container(300).ListItem.Icon
find quote
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #9
(2012-05-01 00:01)Hitcher Wrote:  Because you're using it outside of the the actual list you'll need to use the container string instead.

ie Container(300).ListItem.Icon

Yep, already figure that. But I get black screen. Dont think it has something to do with background="true" or allowoverlay... since I already tried different combinations. Any ideas on that?

Thats what the code looks like for that part:

Code:
<controls>
  <control type="image" id="1">
    <description>BackgroundImage</description>
    <posx>0</posx>
    <posy>0</posy>
    <width>1920</width>
    <height>1080</height>
    <visible>true</visible>
    <texture>Container(300).ListItem.Icon</texture>
  </control>

OK. Woah I got it. I was supposed to use $INFO to access the icon in the container. My only wish is that so if would have been explained in wikia, at all. Going over other more complicated skins is no exactly fun.
(This post was last modified: 2012-05-02 00:27 by Avatarass.)
find quote
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #10
Hey, thanks again for the help. At least one screen of my skin is almost done in the first day of work.

However. I have gotten another problem. I tried to make the focused object unfade and then fade when I scroll back. However now I noticed a glitch. The animation of the scrolling down label, that goes after the focused one is delayed. Also, for some reason the focused one doesnt want to get fully visible. It gets stuck halfway through. I figured that in order to avoid the delay I would have to change the fading time to zero. But I would like to know if theres a way to bypass the glitch and get smooth movement and fading at the same time...


My code is:

Code:
<window id="0">
<defaultcontrol always="true">300</defaultcontrol>
<allowoverlay>yes</allowoverlay>

<controls>
  <control type="largeimage">
    <description>BackgroundImage</description>
    <posx>0</posx>
    <posy>0</posy>
    <width>1920</width>
    <height>1080</height>
    <visible>true</visible>
    <texture background="true">$INFO[Container(300).ListItem.Icon]</texture>
    <fadetime>150</fadetime>
    <animation effect="fade" time="200">WindowOpen</animation>
    <aspectratio>keep</aspectratio>
  </control>
  
  <control type="wraplist" id="300">
    <description>HomeMenu</description>
    <posx>0</posx>
    <posy>730</posy>
    <width>1920</width>
    <height>350</height>
    <onup>300</onup>
    <ondown>300</ondown>
    <onleft>300</onleft>
    <onright>300</onright>
    <focusposition>3</focusposition>
    <scrolltime>150</scrolltime>
    <animation effect="fade" start="0" end="50" time="300">WindowOpen</animation>
  
    <itemlayout width="1920" height="65">
      <control type="label">
      <posx>10</posx>
      <height>65</height>
      <width>1920</width>
      <font>MenuSmall</font>
      <info>ListItem.Label</info>
      <align>left</align>
      </control>
    </itemlayout>
    
    <focusedlayout width="1920" height="96">
      <control type="label">
      <posx>20</posx>
      <width>1920</width>
      <height>96</height>
      <info>ListItem.Label</info>
      <font>MenuBig</font>
      <align>left</align>
      <animation effect="fade" start="50" end="100" time="0">Focus</animation>
      <animation effect="fade" start="100" end="50" time="0">Unfocus</animation>
      </control>
    </focusedlayout>
    
    <content>
      <item id="1">
      <description>Movies</description>
      <label>Movies</label>
      <icon>Movies.jpg</icon>
      <onclick>ActivateWindow(Video,movietitles)</onclick>
            <visible>Library.HasContent(Movies)</visible>
      </item>
      <item id="2">
      <description>TV Shows</description>
      <label>TV Shows</label>
      <icon>TV Shows.png</icon>
      <onclick>ActivateWindow(Video,tvshowtitles)</onclick>
      </item>
      <item id="3">
      <description>Music</description>
      <label>Music</label>
      <icon>Music.jpg</icon>
      <onclick>ActivateWindow(Music)</onclick>
      </item>
      <item id="4">
      <description>Pictures</description>
      <label>Pictures</label>
      <icon>Pictures.png</icon>
      <onclick>ActivateWindow(Pictures)</onclick>
      </item>
      <item id="5">
      <description>Games</description>
      <label>Games</label>
      <icon>Games.png</icon>
      <onclick>ActivateWindow(Programs,Addons)</onclick>
      </item>
    </content>
  </control>  
</controls>
</window>
(This post was last modified: 2012-05-02 00:26 by Avatarass.)
find quote
Hitcher Offline
Skilled Skinner
Posts: 10,283
Joined: Aug 2007
Reputation: 80
Location: Eastleigh, UK
Post: #11
Is this what you're after?

Code:
<window id="0">
<defaultcontrol always="true">300</defaultcontrol>
<allowoverlay>yes</allowoverlay>

<controls>
<control type="largeimage">
<description>BackgroundImage</description>
<posx>0</posx>
<posy>0</posy>
<width>1920</width>
<height>1080</height>
<visible>true</visible>
<texture background="true">$INFO[Container(300).ListItem.Icon]</texture>
<fadetime>150</fadetime>
<animation effect="fade" time="200">WindowOpen</animation>
<aspectratio>keep</aspectratio>
</control>

<control type="wraplist" id="300">
<description>HomeMenu</description>
<posx>0</posx>
<posy>730</posy>
<width>1920</width>
<height>350</height>
<onup>300</onup>
<ondown>300</ondown>
<onleft>300</onleft>
<onright>300</onright>
<focusposition>3</focusposition>
<scrolltime>150</scrolltime>
<animation effect="fade" start="0" end="50" time="300">WindowOpen</animation>

<itemlayout width="1920" height="65">
<control type="label">
<posx>10</posx>
<height>65</height>
<width>1920</width>
<font>MenuSmall</font>
<info>ListItem.Label</info>
<align>left</align>
<animation effect="fade" start="50" end="50" time="0" condition="true">Conditional</animation>
</control>
</itemlayout>

<focusedlayout width="1920" height="96">
<control type="label">
<posx>20</posx>
<width>1920</width>
<height>96</height>
<info>ListItem.Label</info>
<font>MenuBig</font>
<align>left</align>
<animation effect="fade" start="50" end="100" time="200">Focus</animation>
</control>
</focusedlayout>

<content>
<item id="1">
<description>Movies</description>
<label>Movies</label>
<icon>Movies.jpg</icon>
<onclick>ActivateWindow(Video,movietitles)</onclick>
<visible>Library.HasContent(Movies)</visible>
</item>
<item id="2">
<description>TV Shows</description>
<label>TV Shows</label>
<icon>TV Shows.png</icon>
<onclick>ActivateWindow(Video,tvshowtitles)</onclick>
</item>
<item id="3">
<description>Music</description>
<label>Music</label>
<icon>Music.jpg</icon>
<onclick>ActivateWindow(Music)</onclick>
</item>
<item id="4">
<description>Pictures</description>
<label>Pictures</label>
<icon>Pictures.png</icon>
<onclick>ActivateWindow(Pictures)</onclick>
</item>
<item id="5">
<description>Games</description>
<label>Games</label>
<icon>Games.png</icon>
<onclick>ActivateWindow(Programs,Addons)</onclick>
</item>
</content>
</control>
</controls>
</window>
find quote
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #12
Yep, that seemed to solve the problem. What exactly does "condition="true"" check to activate the animation?
find quote
Hitcher Offline
Skilled Skinner
Posts: 10,283
Joined: Aug 2007
Reputation: 80
Location: Eastleigh, UK
Post: #13
Just means it's always on. Probably easier to just change the colour and make it 50% transparent.
find quote
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #14
Ok, thanks dude. I will continue on with some more advanced stuff now.

I would give you +2 rep but I cant find the button.
find quote
Avatarass Offline
Junior Member
Posts: 27
Joined: Apr 2012
Reputation: 0
Post: #15
Hello again. Another day another problem.

I decided to make a new video library. So I tried to implement the usual sidebar, with choice of ordering patter, filter, view type etc..., by basically creating a rotating wheel and a button. However, when I tried to add some visibility instructions. the buttons dissapear ignoring the fact that the condition is true.

My code is:

Code:
<window id="6">
<defaultcontrol always="false">303</defaultcontrol>
<allowoverlay>yes</allowoverlay>
<controls>
    
    <control type="image">
      <description>UnderLayer</description>
      <posx>-300</posx>
      <posy>-300</posy>
      <width>600</width>
      <height>600</height>
      <visible allowhiddenfocus="true">Control.HasFocus(303)</visible>
      <fadetime>150</fadetime>
      <texture>Layer1.png</texture>
      <aspectratio>keep</aspectratio>
    </control>
    
    <control type="image" id="303">
      <description>Order</description>
      <posx>-290</posx>
      <posy>-290</posy>
      <width>580</width>
      <height>580</height>
      <visible>true</visible>
      <fadetime>150</fadetime>
      <texture>Layer2.png</texture>
      <aspectratio>keep</aspectratio>
      <onup>303</onup>
      <ondown>9000</ondown>
      <onright>303</onright>
      <onleft>302</onleft>
    </control>
    
    <control type="image" id="302">
      <description>SearchIcon</description>
      <posx>-290</posx>
      <posy>-290</posy>
      <width>580</width>
      <height>580</height>
      <visible allowhiddenfocus="true">Control.HasFocus(302)</visible>
      <texture>Layer3.png</texture>
      <aspectratio>keep</aspectratio>
    </control>
    
</controls>
</window>

Also I would like to know how to add new views used in music/picture/video libraries. The wikia has no information on that what so ever.
(This post was last modified: 2012-05-02 00:25 by Avatarass.)
find quote
Post Reply