_color_button_control.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.9.1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Kodi Development: Color button control</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
  $(document).ready(function() { init_search(); });
/* @license-end */
</script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td id="projectlogo"><img alt="Logo" src="kodi-dev.png"/></td>
  <td id="projectalign" style="padding-left: 0.5em;">
   <div id="projectname">Kodi Development
   &#160;<span id="projectnumber">20.0</span>
   </div>
   <div id="projectbrief">for Binary and Script based Add-Ons</div>
  </td>
   <td>        <div id="MSearchBox" class="MSearchBoxInactive">
        <span class="left">
          <img id="MSearchSelect" src="search/mag_sel.svg"
               onmouseover="return searchBox.OnSearchSelectShow()"
               onmouseout="return searchBox.OnSearchSelectHide()"
               alt=""/>
          <input type="text" id="MSearchField" value="Search" accesskey="S"
               onfocus="searchBox.OnSearchFieldFocus(true)" 
               onblur="searchBox.OnSearchFieldFocus(false)" 
               onkeyup="searchBox.OnSearchFieldChange(event)"/>
          </span><span class="right">
            <a id="MSearchClose" href="javascript:searchBox.CloseResultsWindow()"><img id="MSearchCloseImg" border="0" src="search/close.svg" alt=""/></a>
          </span>
        </div>
</td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.9.1 -->
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
var searchBox = new SearchBox("searchBox", "search",false,'Search','.html');
/* @license-end */
</script>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
  <div id="nav-tree">
    <div id="nav-tree-contents">
      <div id="nav-sync" class="sync"></div>
    </div>
  </div>
  <div id="splitbar" style="-moz-user-select:none;" 
       class="ui-resizable-handle">
  </div>
</div>
<script type="text/javascript">
/* @license magnet:?xt=urn:btih:cf05388f2679ee054f2beb29a391d25f4e673ac3&amp;dn=gpl-2.0.txt GPL-v2 */
$(document).ready(function(){initNavTree('_color_button_control.html',''); initResizable(); });
/* @license-end */
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div class="PageDoc"><div class="header">
  <div class="headertitle">
<div class="title">Color button control </div>  </div>
</div><!--header-->
<div class="contents">
<div class="toc"><h3>Table of Contents</h3>
<ul><li class="level1"><a href="#Color_button_control_sect1">Example</a></li>
<li class="level1"><a href="#Color_button_control_sect2">Available tags</a></li>
<li class="level1"><a href="#Color_button_control_sect3">See also</a></li>
</ul>
</div>
<div class="textblock"><p><b>A color button control (as used for color settings).</b></p>
<p>The color button control is used for creating push buttons in Kodi with a box for color preview. You can choose the position, size, and look of the button, as well as choosing what action(s) should be performed when pushed.</p>
<hr  />
 <h1><a class="anchor" id="Color_button_control_sect1"></a>
Example</h1>
<div class="fragment"><div class="line">&lt;control type=<span class="stringliteral">&quot;colorbutton&quot;</span> <span class="keywordtype">id</span>=<span class="stringliteral">&quot;2&quot;</span>&gt;</div>
<div class="line">      &lt;description&gt;My first colorbutton control&lt;/description&gt;</div>
<div class="line">      &lt;posx&gt;80&lt;/posx&gt;</div>
<div class="line">      &lt;posy&gt;60&lt;/posy&gt;</div>
<div class="line">      &lt;width&gt;250&lt;/width&gt;</div>
<div class="line">      &lt;height&gt;200&lt;/height&gt;</div>
<div class="line">      &lt;visible&gt;<span class="keyword">true</span>&lt;/visible&gt;</div>
<div class="line">      &lt;colordiffuse&gt;FFFFFFFF&lt;/colordiffuse&gt;</div>
<div class="line">      &lt;texturecolormask&gt;mycolormask.png&lt;/texturecolormask&gt;</div>
<div class="line">      &lt;texturecolordisabledmask&gt;mycolormask.png&lt;/texturecolordisabledmask&gt;</div>
<div class="line">      &lt;colorbox&gt;FF0533ff&lt;/colorbox&gt;</div>
<div class="line">      &lt;onclick&gt;ActivateWindow(MyVideos)&lt;/onclick&gt;</div>
<div class="line">      &lt;label&gt;29&lt;/label&gt;</div>
<div class="line">      &lt;font&gt;font12&lt;/font&gt;</div>
<div class="line">      &lt;textcolor&gt;FFFFFFFF&lt;/textcolor&gt;</div>
<div class="line">      &lt;focusedcolor&gt;FFFFFFFF&lt;/focusedcolor&gt;</div>
<div class="line">      &lt;disabledcolor&gt;80FFFFFF&lt;/disabledcolor&gt;</div>
<div class="line">      &lt;align&gt;left&lt;/align&gt;</div>
<div class="line">      &lt;aligny&gt;center&lt;/aligny&gt;</div>
<div class="line">      &lt;pulseonselect&gt;<span class="keyword">false</span>&lt;/pulseonselect&gt;</div>
<div class="line">      &lt;onfocus&gt;-&lt;/onfocus&gt;</div>
<div class="line">      &lt;onunfocus&gt;-&lt;/onunfocus&gt;</div>
<div class="line">      &lt;onup&gt;2&lt;/onup&gt;</div>
<div class="line">      &lt;ondown&gt;3&lt;/ondown&gt;</div>
<div class="line">      &lt;onleft&gt;1&lt;/onleft&gt;</div>
<div class="line">      &lt;onright&gt;1&lt;/onright&gt;</div>
<div class="line">&lt;/control&gt;</div>
</div><!-- fragment --><hr  />
 <h1><a class="anchor" id="Color_button_control_sect2"></a>
Available tags</h1>
<p>In addition to the <a href="http://kodi.wiki/view/Default_Control_Tags">Default Control Tags</a> the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.</p>
<table class="markdownTable">
<tr class="markdownTableHead">
<th class="markdownTableHeadRight">Tag   </th><th class="markdownTableHeadLeft">Description    </th></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">texturefocus   </td><td class="markdownTableBodyLeft">Specifies the image file which should be displayed when the button has focus. <a href="http://kodi.wiki/view/Texture_Attributes">See here for additional information about textures</a>.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">texturenofocus   </td><td class="markdownTableBodyLeft">Specifies the image file which should be displayed when the button does not have focus.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">label   </td><td class="markdownTableBodyLeft">The label used on the button. It can be a link into <b><code>strings.po</code></b>, or an actual text label.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">font   </td><td class="markdownTableBodyLeft">Font used for the button label. From fonts.xml.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">textcolor   </td><td class="markdownTableBodyLeft">Color used for displaying the button label. In <b>AARRGGBB</b> hex format, or a name from the <a href="http://kodi.wiki/view/Colour_Themes">colour theme</a>.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">focusedcolor   </td><td class="markdownTableBodyLeft">Color used for the button label when the button has in focus. In <b>AARRGGBB</b> hex format or a name from the <a href="http://kodi.wiki/view/Colour_Themes">colour theme</a>.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">disabledcolor   </td><td class="markdownTableBodyLeft">Color used for the button label if the button is disabled. In <b>AARRGGBB</b> hex format or a name from the <a href="http://kodi.wiki/view/Colour_Themes">colour theme</a>.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">invalidcolor   </td><td class="markdownTableBodyLeft">Color used for the button if the user entered some invalid value. In <b>AARRGGBB</b> hex format or a name from the <a href="http://kodi.wiki/view/Colour_Themes">colour theme</a>.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">shadowcolor   </td><td class="markdownTableBodyLeft">Specifies the color of the drop shadow on the text, in <b>AARRGGBB</b> format, or a name from the <a href="http://kodi.wiki/view/Colour_Themes">colour theme</a>.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">angle   </td><td class="markdownTableBodyLeft">The angle the text should be rendered at, in degrees. A value of 0 is horizontal.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">align   </td><td class="markdownTableBodyLeft">Label horizontal alignment on the button. Defaults to left, can also be center or right.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">aligny   </td><td class="markdownTableBodyLeft">Label vertical alignment on the button. Defaults to top, can also be center.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">textoffsetx   </td><td class="markdownTableBodyLeft">Amount to offset the label from the left (or right) edge of the button when using left or right alignment.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">textoffsety   </td><td class="markdownTableBodyLeft">Amount to offset the label from the top edge of the button when using top alignment.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">textwidth   </td><td class="markdownTableBodyLeft">Will truncate any text that's too long.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">onclick   </td><td class="markdownTableBodyLeft">Specifies the action to perform when the button is pressed. Should be a built in function. <a href="http://kodi.wiki/view/Built-in_functions_available_to_FTP,_Webserver,_skins,_keymap_and_to_python">See here for more information</a>. You may have more than one <b><code>&lt;onclick&gt;</code></b> tag, and they'll be executed in sequence.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">onfocus   </td><td class="markdownTableBodyLeft">Specifies the action to perform when the button is focused. Should be a built in function. The action is performed after any focus animations have completed. <a href="http://kodi.wiki/view/Built-in_functions_available_to_FTP,_Webserver,_skins,_keymap_and_to_python">See here for more information</a>.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">onunfocus   </td><td class="markdownTableBodyLeft">Specifies the action to perform when the button loses focus. Should be a built in function.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">wrapmultiline   </td><td class="markdownTableBodyLeft">Will wrap the label across multiple lines if the label exceeds the control width.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">colorbox   </td><td class="markdownTableBodyLeft">Specifies the color of the preview color box, in <b>AARRGGBB</b> format, or a name from the <a href="http://kodi.wiki/view/Colour_Themes">colour theme</a>.    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">colorposx   </td><td class="markdownTableBodyLeft">X offset of the preview color box    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">colorposy   </td><td class="markdownTableBodyLeft">Y offset of the preview color box    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">colorwidth   </td><td class="markdownTableBodyLeft">Width in Pixels of the preview color box    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">colorheight   </td><td class="markdownTableBodyLeft">Height in Pixels of the preview color box    </td></tr>
<tr class="markdownTableRowOdd">
<td class="markdownTableBodyRight">texturecolormask   </td><td class="markdownTableBodyLeft">Specifies the image mask which should be displayed to see the color preview. <a href="http://kodi.wiki/view/Texture_Attributes">See here for additional information about textures</a>.    </td></tr>
<tr class="markdownTableRowEven">
<td class="markdownTableBodyRight">texturecolordisabledmask   </td><td class="markdownTableBodyLeft">Specifies the image mask which should be displayed when the control is disabled. <a href="http://kodi.wiki/view/Texture_Attributes">See here for additional information about textures</a>.   </td></tr>
</table>
<hr  />
 <h1><a class="anchor" id="Color_button_control_sect3"></a>
See also</h1>
<h4>Development:</h4>
<ul>
<li><a href="http://kodi.wiki/view/Add-on_development">Add-on development</a></li>
<li><a href="http://kodi.wiki/view/Skinning">Skinning</a> </li>
</ul>
</div></div><!-- contents -->
</div><!-- PageDoc -->
</div><!-- doc-content -->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
  <ul>
    <li class="footer">Generated by <a href="https://www.doxygen.org/index.html"><img class="footer" src="doxygen.svg" width="104" height="31" alt="doxygen"/></a> 1.9.1 </li>
  </ul>
</div>
</body>
</html>