How to make an image into a button - button appears but onclick doesnt run
#1
Probably a pretty basic query but for the life of me I cant figure it out.
Im trying to modify the "Similar" window in Titan Bingie so that you can click on the posters. I've managed to add buttons to the posters but I cant figure out how to get the "onclick" command to fire.

Code:
    <!--Similar List-->
                <control type="panel" id="352">
                    <posx>600</posx>
                    <posy>250</posy>
                    <width>800</width>
                    <height>714</height>
                    <onleft>ClearProperty(AdditionalInfo)</onleft>
                    <onback>ClearProperty(AdditionalInfo)</onback>
                    <onback>8000</onback>
                    <onleft>SetFocus(8000)</onleft>
                    <scrolltime>200</scrolltime>
                    <orientation>vertical</orientation>
                    <focusposition>0</focusposition>
                    <viewtype label="actor list">list</viewtype>
                    <visible allowhiddenfocus="false">String.IsEqual(Window.Property(AdditionalInfo),similar)</visible>
                    <animation effect="fade" start="100" end="25" time="0" condition="Container(352).IsUpdating">Conditional</animation>
                    <animation effect="slide" start="0,0" end="0,1000" time="0" delay="0" condition="!String.IsEqual(Window.Property(AdditionalInfo),similar)">Conditional</animation>
                    <!-- itemlayout movies -->
                    <itemlayout height="357" width="240">
                        <control type="group">
<!-- ===BUTTON===-->
<defaultcontrol always="false">3521</defaultcontrol> 
<!-- ===BUTTON===-->
                            <width>233</width>
                            <height>342</height>
                            <include>PosterPanelLayout</include>

<!-- ===BUTTON===-->
                    <control type="button" id="3521" >
                        <right>0</right>
                        <description>Close</description>
                        <label>$LOCALIZE[222]</label>
                        <width>100%</width>
                        <include>DialogButtonOther</include>
                        <texturefocus colordiffuse="FFFFAAFF">$INFO[Container(352).ListItem.Art(poster)]</texturefocus>
                        <texturenofocus colordiffuse="FFFFAAFF">$INFO[Container(352).ListItem.Art(poster)]</texturenofocus>
                        <height>100%</height>
                        <visible>true</visible>
                        <onclick>ActivateWindow(Settings)</onclick>
                    </control>
<!-- ===BUTTON===-->

                        </control>
                    </itemlayout>
                    <focusedlayout height="357" width="240">
                        <control type="group">
<!-- ===BUTTON===-->
<defaultcontrol always="false">3521</defaultcontrol> 
<!-- ===BUTTON===-->
                            <width>233</width>
                            <height>342</height>
                            <include>PosterPanelLayoutFocus</include>
<!-- ===BUTTON===-->                            
                    <control type="button" id="3521" >
                        <right>0</right>
                        <description>Close</description>
                        <label>$LOCALIZE[222]</label>
                        <width>100%</width>
                        <include>DialogButtonOther</include>
                        <texturefocus colordiffuse="FFFFAAFF">$INFO[Container(352).ListItem.Art(poster)]</texturefocus>
                        <texturenofocus colordiffuse="FFFFAAFF">$INFO[Container(352).ListItem.Art(poster)]</texturenofocus>
                        <height>100%</height>
                        <visible>true</visible>
                        <pulseonselect>true</pulseonselect>
                        <onclick>ActivateWindow(Settings)</onclick>
                    </control>
<!-- ===BUTTON===-->

                        </control>

                    </focusedlayout>
                    <content>$VAR[similarInfo]</content>

                </control>

                <!-- similar info details -->
                <control type="group">
                    <include>animation_window_open_close</include>
                    <visible>String.IsEqual(Window.Property(AdditionalInfo),similar)</visible>
                    <control type="group">
                        <right>50</right>
                        <posy>250</posy>
                        <width>530</width>
                        <height>67%</height>
                        <control type="image">
                            <aspectratio align="center" aligny="top" scalediffuse="true">scale</aspectratio>
                            <texture background="true" diffuse="diffuse/poster.png">$INFO[Container(352).ListItem.Art(poster)]</texture>
                            <fadetime>300</fadetime>
                        </control>
                        <!--Panel-->
                        <control type="image">
                            <bottom>-1</bottom>
                            <height>120</height>
                            <bordersize>0</bordersize>
                            <visible>false</visible>
                            <texture background="true" diffuse="diffuse/poster.png">colors/color_white.png</texture>
                            <colordiffuse>$INFO[Skin.String(TagOverlaysPanelColor)]</colordiffuse>
                        </control>
                        <control type="label">
                            <left>10</left>
                            <bottom>0</bottom>
                            <width>93%</width>
                            <height>120</height>
                            <align>left</align>
                            <visible>false</visible>
                            <label>$INFO[Container(352).ListItem.Label2,,[CR]]$INFO[Container(352).ListItem.Label]</label>
                            <font>Reg32</font>
                            <textcolor>$INFO[Skin.String(TagOverlaysTextColor)]</textcolor>
                        </control>


                    </control>
                </control>
            </control>


And this is loading from the DialogVideoInfo.xml

Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- BINGIE -->
<window>
    <defaultcontrol always="true">8000</defaultcontrol>
    <onload>ClearProperty(ListItem.Property(IMDBNumber))</onload>
    <onload>ClearProperty(ListItem.Property(TvShowTitle))</onload>
    <onload condition="!String.IsEmpty(Window(Home).Property(ListItem.TVShowID))">ClearProperty(ListItem.TVShowID,Home)</onload>
    <onload condition="Skin.HasSetting(UseBingieInfoDialog) + !String.IsEmpty(ListItem.DBID) + [String.IsEqual(ListItem.DBTYPE,episode) | String.IsEqual(ListItem.Property(DBTYPE),episode)]">RunScript(script.bingie.helper,action=gettvshowid,dbid=$INFO[ListItem.DBID])</onload>
    <onload condition="!String.IsEmpty(Window(Home).Property(BaseWindow))">ClearProperty(BaseWindow,Home)</onload>
    <onload condition="!String.IsEmpty(Window.Property(AdditionalInfo))">ClearProperty(AdditionalInfo,Home)</onload>
    <onload condition="System.HasAlarm(preview_delay)">CancelAlarm(preview_delay,silent)</onload>
    <!-- set trailerplaying property if started directly from PlayMedia command in previous window -->
    <onload condition="$EXP[IsPlayingUnrecognizedContent]">SetProperty(TrailerOnLoad,windowed,Home)</onload>
    <onload condition="$EXP[IsPlayingUnrecognizedContent]">SetProperty(TrailerPlaying,windowed,Home)</onload>
    <!-- checks if TVShow is tagged 'mylist' (workaround for ListItem.Tag working inconsistently with tvshows) -->
    <onload condition="Skin.HasSetting(UseBingieInfoDialog) + !String.IsEmpty(ListItem.DBID) + [String.IsEqual(ListItem.DBTYPE,tvshow) | String.IsEqual(ListItem.DBTYPE,movie) | String.IsEqual(ListItem.DBTYPE,episode)]">RunScript(script.bingie.helper,action=ismylist)</onload>
    <include condition="Skin.HasSetting(UseExtendedInfoDialog)">ExtendedInfo_OnLoad_Action</include>
    <include condition="!Skin.HasSetting(UseExtendedInfoDialog)">NoExtendedInfo_OnLoad_Action</include>

    <onunload condition="!String.IsEmpty(Window(Home).Property(ListItem.TVShowID)) + String.IsEmpty(Window(Home).Property(KeepTVShowID))">ClearProperty(ListItem.TVShowID,Home)</onunload>
    <onunload condition="!String.IsEmpty(Window(Home).Property(IsInMyList))">ClearProperty(IsInMyList,Home)</onunload>
    <onunload condition="!String.IsEmpty(Window(Home).Property(RateTitle))">ClearProperty(RateTitle,Home)</onunload>
    <onunload condition="!String.IsEmpty(Window(Home).Property(RateTitle.Action))">ClearProperty(RateTitle.Action,Home)</onunload>
    <onunload condition="!String.IsEmpty(Window(Home).Property(TrailerPlaying)) + !String.IsEqual(Window(Home).Property(TrailerPlaying),fullscreen) + String.IsEmpty(Window(Home).Property(TrailerOnLoad))">PlayerControl(Stop)</onunload>
    <onunload condition="!String.IsEmpty(Window(Home).Property(TrailerOnLoad))">ClearProperty(TrailerOnLoad,Home)</onunload>

    <controls>

        <include condition="Skin.HasSetting(UseBingieInfoDialog) + !Skin.HasSetting(UseExtendedInfoDialog)">BingieInfo</include>
        <include condition="!Skin.HasSetting(UseBingieInfoDialog) + !Skin.HasSetting(UseExtendedInfoDialog)">TitanInfo</include>
    
        <include condition="Skin.HasSetting(DebugGrid) | Skin.HasSetting(DebugInfo)">DebugInfo</include>
    </controls>
</window>

The buttons appear and I can click them and it makes the GUI sound for clicking but the onclick command doesnt run. Ive tried telling it to focus on the buttons but I cant get it to work (ill worry about making the buttons work but have no visible button later once i get the click function to work).

Can anyone help me out?
I suspect its just something very simple but the documentation is pretty poor if you don't already have a good idea how skin xmls are supposed to work.
Reply
#2
You don't need a button; just find the contents of <content>$VAR[similarInfo]</content> and add the onclick action you want to the items.
Reply
#3
(2020-07-09, 20:45)Hitcher Wrote: You don't need a button; just find the contents of <content>$VAR[similarInfo]</content> and add the onclick action you want to
the items.
I tried adding an onclick action to the variable "similarInfo"

Code:
     <variable name="similarInfo">
        <value condition="!String.IsEmpty(ListItem.IMDBNumber) + !String.IsEmpty(ListItem.TvShowTitle)">plugin://script.skin.helper.widgets/?action=similar&amp;mediatype=tvshows&amp;imdbid=$INFO[ListItem.IMDBNumber]&amp;limit=10</value>
        <value condition="!String.IsEmpty(ListItem.IMDBNumber)">plugin://script.skin.helper.widgets/?action=similar&amp;mediatype=movies&amp;imdbid=$INFO[ListItem.IMDBNumber]&amp;limit=10</value>
        <value condition="!String.IsEmpty(ListItem.Property(IMDBNumber)) + !String.IsEmpty(ListItem.TvShowTitle)">plugin://script.skin.helper.widgets/?action=similar&amp;mediatype=tvshows&amp;imdbid=$INFO[ListItem.Property(IMDBNumber)]&amp;limit=10</value>
        <value condition="!String.IsEmpty(ListItem.Property(IMDBNumber))">plugin://script.skin.helper.widgets/?action=similar&amp;mediatype=movies&amp;imdbid=$INFO[ListItem.Property(IMDBNumber)]&amp;limit=10</value>
        <onclick>ActivateWindow(Settings)</onclick>
     </variable>

And it didnt make any difference, no action runs when i click on one of the poster items returned by skin helper widgets.
Reply
#4
Ah right, it's getting the info from a plugin. In that case an onclick control to the list itself.
Reply
#5
(2020-07-09, 23:48)Hitcher Wrote: Ah right, it's getting the info from a plugin. In that case an onclick control to the list itself.

Do you mean add an onclick property to the list item within the add-on?

Like this?

listitem.setProperty('action', 'RunScript(script.mytestscript)')

How would I do that for multiple items in a list?

Or can the onclick be added to the list in the skin?

Skin helper adds multiple items to a list like this.
Code:



"label": item[0],
"file": filepath,
"icon": item[2],
"art": {"fanart": "special://home/addons/script.skin.helper.widgets/fanart.jpg"},
"isFolder": True,
"type": "file",
"IsPlayable": "false"
}


Reply
#6
(2020-07-09, 23:48)Hitcher Wrote: Ah right, it's getting the info from a plugin. In that case an onclick control to the list itself.

So I added

<Content target=$var[similar info]...

Which had the effect that error messages are now showing up in the log about not being able to activate the window:
(Something about the window translator)

So I think it should probably be referencing an item in a window? Rather than runplugin or some other built-in?

So if I added one of the buttons with a specific ID and referenced that item number is that likely to work?

Otherwise I'd have to start figuring out how to add the appropriate action to the item list and potentially how to capture the onclick too. Which seems like more effort than I'm willing to expend to not have to use the context menu.
Reply
#7
(2020-07-10, 00:27)henryjfry Wrote:
(2020-07-09, 23:48)Hitcher Wrote: Ah right, it's getting the info from a plugin. In that case an onclick control to the list itself.

Do you mean add an onclick property to the list item within the add-on?

Like this?

listitem.setProperty('action', 'RunScript(script.mytestscript)')

How would I do that for multiple items in a list?

Or can the onclick be added to the list in the skin?

No, onclick is added to the control itself.

xml:

<control type="list">
<onclick condition="BOOLEANCONDITION">ACTION-OR-BUILTIN</onclick>
<itemlayout>...</itemlayout>
<focusedlayout>...</focusedlayout>
<content>...</content>
</control>

Skinning Manual Reference:
https://kodi.wiki/view/Skinning_Manual#O...ick_action

Boolean Conditions:
https://kodi.wiki/view/List_of_boolean_conditions

Built-in Functions:
https://kodi.wiki/view/List_of_built-in_functions

Action IDs:
https://kodi.wiki/view/Action_IDs

However, if these are just normal video plugin lists and you just want the default onclick behaviour specified by the plugin then you should remove all onclick/buttons from the list and specify a target value in your content tag like so:

xml:
<content target="videos">$var[similarInfo]</content>

Target specifies which media window the content should open in when clicked if the listitem is a folder (i.e. target can be videos, music, pictures, or programs - which correlate to MyVideosNav.xml, MyMusicNav.xml, MyPics.xml, and MyPrograms.xml respectively). Since you're using a video plugin, you want it to open in the video media window.

Skinning Manual Reference:
https://kodi.wiki/view/Skinning_Manual#F...ic_content

More info about activating windows:
https://kodi.wiki/view/Opening_Windows_and_Dialogs
Arctic Fuse - Alpha now available. Support me on Ko-fi.
Reply
#8
(2020-07-11, 05:51)jurialmunkey Wrote:
(2020-07-10, 00:27)henryjfry Wrote:
(2020-07-09, 23:48)Hitcher Wrote: Ah right, it's getting the info from a plugin. In that case an onclick control to the list itself.

Do you mean add an onclick property to the list item within the add-on?

Like this?

listitem.setProperty('action', 'RunScript(script.mytestscript)')

How would I do that for multiple items in a list?

Or can the onclick be added to the list in the skin?

No, onclick is added to the control itself.

xml:

<control type="list">
<onclick condition="BOOLEANCONDITION">ACTION-OR-BUILTIN</onclick>
<itemlayout>...</itemlayout>
<focusedlayout>...</focusedlayout>
<content>...</content>
</control>

Skinning Manual Reference:
https://kodi.wiki/view/Skinning_Manual#O...ick_action

Boolean Conditions:
https://kodi.wiki/view/List_of_boolean_conditions

Built-in Functions:
https://kodi.wiki/view/List_of_built-in_functions

Action IDs:
https://kodi.wiki/view/Action_IDs

However, if these are just normal video plugin lists and you just want the default onclick behaviour specified by the plugin then you should remove all onclick/buttons from the list and specify a target value in your content tag like so:

xml:
<content target="videos">$var[similarInfo]</content>

Target specifies which media window the content should open in when clicked if the listitem is a folder (i.e. target can be videos, music, pictures, or programs - which correlate to MyVideosNav.xml, MyMusicNav.xml, MyPics.xml, and MyPrograms.xml respectively). Since you're using a video plugin, you want it to open in the video media window.

Skinning Manual Reference:
https://kodi.wiki/view/Skinning_Manual#F...ic_content

More info about activating windows:
https://kodi.wiki/view/Opening_Windows_and_Dialogs
Thanks for that info, I was able to get a working onclick action.  

Code:

                <!--Similar List-->
                <control type="panel" id="352">
                    <posx>600</posx>
                    <posy>250</posy>
                    <width>800</width>
                    <height>714</height>
                    <onleft>ClearProperty(AdditionalInfo)</onleft>
                    <onleft>Dialog.Close(352)</onleft>
                    <onleft>SetFocus(8000)</onleft>

                    <onback>ClearProperty(AdditionalInfo)</onback>
                    <onback>Dialog.Close(352)</onback>
                    <onback>8000</onback>
                    <onback>SetFocus(8000)</onback>
                    
                    <scrolltime>200</scrolltime>
                    <orientation>vertical</orientation>
                    <focusposition>0</focusposition>
            
                    <viewtype label="actor list">list</viewtype>
                    <visible allowhiddenfocus="true">String.IsEqual(Window.Property(AdditionalInfo),similar)</visible>
                    <animation effect="fade" start="100" end="25" time="0" condition="Container(352).IsUpdating">Conditional</animation>
                    <animation effect="slide" start="0,0" end="0,1000" time="0" delay="0" condition="!String.IsEqual(Window.Property(AdditionalInfo),similar)">Conditional</animation>

                <onclick condition="System.HasAddon(script.extendedinfo) + $EXP[IsMovieDBType]">RunScript(script.extendedinfo,info=extendedinfo,dbid=$INFO[ListItem.DBID],name=$INFO[ListItem.Title])</onclick>
                            <onclick condition="System.HasAddon(script.extendedinfo) + $EXP[IsTvShowDBType]">RunScript(script.extendedinfo,info=extendedtvinfo,dbid=$INFO[ListItem.DBID],name=$INFO[ListItem.TvShowTitle])</onclick>
                            <onclick condition="System.HasAddon(script.extendedinfo) + [String.IsEqual(ListItem.DBTYPE,season) | String.IsEqual(ListItem.Property(DBTYPE),season)]">RunScript(script.extendedinfo,info=seasoninfo,tvshow=$INFO[ListItem.TvShowTitle],season=$INFO[ListItem.Season],silent=True)</onclick>
                            <onclick condition="System.HasAddon(script.extendedinfo) + $EXP[IsEpisodeDBTypeNoFallback]">RunScript(script.extendedinfo,info=extendedepisodeinfo,dbid=$INFO[ListItem.DBID],tvshow=$INFO[ListItem.TvShowTitle],season=$INFO[ListItem.Season],episode=$INFO[ListItem.Episode],silent=True)</onclick>

                    <!-- itemlayout movies -->
                    <itemlayout height="357" width="240">
                        <control type="group">
                            <width>233</width>
                            <height>342</height>
                            <include>PosterPanelLayout</include>
                        </control>
                    </itemlayout>
                    <focusedlayout height="357" width="240">
                        <control type="group">
                            <width>233</width>
                            <height>342</height>
                            <include>PosterPanelLayoutFocus</include>

                        </control>

                    </focusedlayout>
                    <content>$VAR[similarInfo]</content>
                </control>

I had tried adding an onclick in different places in this section after having read some stuff in the skinning manual but I hadn't been able to get it working before so im guessing it must be setup before the layout?

But thanks for the help, like i say i've been trying to figure out stuff from the skinning manual but i find it hard to figure out how stuff actually works in practice without specific context. Like in this instance I had seen the overriding onclick reference but all the information I found seemed to be specific to a list and I couldn't figure out how to apply it to the panel i was looking at.  Your comment showing the two layout tags was all the context i needed, versus however long i spent googling or editing xml files, reloading my skin and seeing what happens.


Anyway i'm slowly getting there, although i suspect i have some basic knowledge gaps when it comes to xml and structure. I've basically never done xml before so i dont know whats a kodi thing and whats a general xml thing, which makes interpreting the stuff on the wiki difficult as it will only ever include the most basic examples.
Reply

Logout Mark Read Team Forum Stats Members Help
How to make an image into a button - button appears but onclick doesnt run0