Kodi Community Forum
Syntax Help - Printable Version

+- Kodi Community Forum (https://forum.kodi.tv)
+-- Forum: Development (https://forum.kodi.tv/forumdisplay.php?fid=32)
+--- Forum: Skinning (https://forum.kodi.tv/forumdisplay.php?fid=12)
+--- Thread: Syntax Help (/showthread.php?tid=130359)

Pages: 1 2


Syntax Help - Avatarass - 2012-04-30

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>



RE: Syntax Help - Hitcher - 2012-04-30

<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


RE: Syntax Help - Avatarass - 2012-04-30

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


RE: Syntax Help - Hitcher - 2012-04-30

<label><string>Programs</string></label> should be <label>Programs</label>.


RE: Syntax Help - Avatarass - 2012-04-30

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



RE: Syntax Help - Hitcher - 2012-04-30

Fixed code is working for me -

Image

What does your XBMC log say?


RE: Syntax Help - Avatarass - 2012-04-30

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?



RE: Syntax Help - Hitcher - 2012-05-01

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


RE: Syntax Help - Avatarass - 2012-05-01

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


RE: Syntax Help - Avatarass - 2012-05-01

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>



RE: Syntax Help - Hitcher - 2012-05-01

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>



RE: Syntax Help - Avatarass - 2012-05-01

Yep, that seemed to solve the problem. What exactly does "condition="true"" check to activate the animation?


RE: Syntax Help - Hitcher - 2012-05-01

Just means it's always on. Probably easier to just change the colour and make it 50% transparent.


RE: Syntax Help - Avatarass - 2012-05-01

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.


RE: Syntax Help - Avatarass - 2012-05-01

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.