how to create a custom window?
#1
hi, I know there is a wiki on how to create a custom window https://kodi.wiki/view/HOW-TO:Add_a_new_...a_skinning

but I think it's missing key elements. I couldn't make it work really.

Is there another guide or can anyone share some insight how to create a custom window?

Basically what I want is to create a new window like the DialogVideoInfo.xml. 

It's all a bit confusing. 

Thanks guys!
Reply
#2
Show us your custom window.
Reply
#3
I am at the very beginning. And that's already failing.
Reply
#4
Failing to open, failing load any info? Without any more info there's not a lot we can do to help you?
Reply
#5
let's take the example from the wiki. I changed id from 1100 to 1169 and added what's in-between <controls> to it.

xml:

<window id="1169" type="dialog">
<defaultcontrol>2</defaultcontrol>
<coordinates>
<left>200</left>
<top>100</top>
</coordinates>
<controls>

<control type="group">
                <animation effect="slide" time="500" start="-1200,0" end="0,0" tween="cubic" easing="out">WindowOpen</animation>
                <animation effect="slide" time="500" start="-1200,0" end="0,0" tween="cubic" easing="out">Visible</animation>
                <animation effect="fade" time="200" start="100" end="0">Hidden</animation>
                <control type="panel" id="62">
                    <viewtype label="31818">icon</viewtype>
                    <left>1300</left>
                    <top>570</top>
                    <width>450</width>
                    <height>335</height>
                    <scrolltime>200</scrolltime>
                    <orientation>vertical</orientation>
                    <onup>9900</onup>
                    <ondown>9920</ondown>
                    <onleft>9900</onleft>
                    <onright>80</onright>
                    <pagecontrol>80</pagecontrol>
                    <preloaditems>2</preloaditems>
                    <itemlayout width="450" height="335">
                        <control type="image">
                            <left>0</left>
                            <top>0</top>
                            <width>450</width>
                            <height>300</height>
                            <orientation>vertical</orientation>
                        </control>
                    </itemlayout>
                    <focusedlayout width="450" height="335">
                        <control type="textbox">
                            <left>0</left>
                            <top>30</top>
                            <width>760</width>
                            <wrapmultiline>true</wrapmultiline>
                            <height>100</height>
                            <align>justify</align>
                            <font>font_plot</font>
                            <textcolor>white</textcolor>
                            <label>$INFO[ListItem.Title]</label>
                        </control>
                        <control type="image">
                            <left>0</left>
                            <top>50</top>
                            <width>450</width>
                            <height>300</height>
                            <orientation>vertical</orientation>
                            <fadetime>commonfadetime</fadetime>
                            <aspectratio align="center" aligny="bottom">keep</aspectratio>
                            <texture fallback="black.png" background="true">$VAR[poster]</texture>
                            <bordertexture border="-4">white.png</bordertexture>
                        </control>
                    </focusedlayout>
                </control>
            </control>

</controls>
</window>

I also mapped a key to activate the window via keymap.xml:
xml:
<keymap>
  <global>
    <keyboard>
        <a>ActivateWindow(1169)</a>
        <y>back</y>
    </keyboard>
  </global>
</keymap>

But I can't access this windows. I know there are some irregularities like  <control type="panel" id="62"> but I don't know how to solve these.

Appreciate some direction and help!
Reply
#6
1. Make sure the xml file is named correctly, it should be Custom_1169.xml
2. The code you posted will never work, dialogs are transparent by nature and the panel control has no content so nothing will display.

This is a simple dialog that will work :- Custom_1169.xml

xml:
<window id="1169" type="dialog">
    <controls>
        <control type="image">
            <colordiffuse>ff000000</colordiffuse>
            <texture>White.png</texture>
        </control>
        <control type="label">
            <align>center</align>
            <label>HELLO WORLD!</label>
        </control>
    </controls>
</window>

You'll need to supply your own texture image to fill the screen.
Reply
#7
@3000 ,

first step would be to check most of the links at the bottom of the page you posted as there are a lot of tags you are using that are not used in your controls. Some examples of things that are not required.

line 2 remove, you don’t have a control id=“2” , so you can’t make it the default control.

lines 3 to 6 remove. That sets the screen origin to 200 to left and 100 from top. The following controls will then add their left and top to their values. Ok if you have room, but pretty sure a lot of your controls are then partially offscreen.

your onup , ondown , onleft , onright and pagecontrol tags do nothing as you have not defined controls with any of those id’s

image controls do not have orientation tags (although Kodi should ignore any unsupported tag), so remove them.

your image control in your itemlayout control does not have a texture tag, so it has nothing to display.

your textbox control is wider than the focusedlayout control, so if there was anything to display it would be truncated to 450 pixels

but most importantly, in a custom window you need to specify the information to display in your panel control with a content block below the focusedlayout control. You are telling the textbox control to display Listitem.Title, but there are no Listitem’s to display.

so basically as far as Kodi is concerned, you are telling it to display nothing, and that is what it has done.

Couple of hints for you. First go read the skinning manual to learn what each control expects. Next checkout the custom skin .xml files of the skin you are trying to modify to see what is used by the skin.  Different skins define their own fonts and $VAR’s and other elements, so you can’t just drop in something from another skin without ensuring they are defined in your own skin. And finally, learn how to turn on Debug logging in Kodi, then read the log file for hints on what is causing issues with your skin. Most errors in skins are written to the log file, so is always a good place to start when trying to understand what is going wrong.

Hope this points you in the right direction. 

Wyrm
Reply
#8
(2022-09-11, 16:07)3000 Wrote: let's take the example from the wiki. I changed id from 1100 to 1169 and added what's in-between <controls> to it.
...

Appreciate some direction and help!

You miss
a) a valid content path to let the dynamic  container work...
b) an image path / listitem*Artwork in the itemlayout ..


e.g. snippet from your ex

<control type="panel" id="62">
    <itemlayout width="450" height="335">
                        <control type="image">
                            <left>0</left>
                            <top>0</top>
                            <width>450</width>
                            <height>300</height>
                            <orientation>vertical</orientation>
<texture>$INFO[Listitem.icon]</texture>
                        </control>
                    </itemlayout>
                    <focusedlayout width="450" height="335">
                      ...
                    </focusedlayout>
<content>videodb://movies/titles/</content>
                </control>
            </control>
[/syntax]
Skins |  Titan M O D   •   S W A N (WIP)
Reply

Logout Mark Read Team Forum Stats Members Help
how to create a custom window?0