ColorPicker.xml 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <class name="ColorPicker" inherits="VBoxContainer" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../class.xsd">
  3. <brief_description>
  4. A widget that provides an interface for selecting or modifying a color.
  5. </brief_description>
  6. <description>
  7. A widget that provides an interface for selecting or modifying a color. It can optionally provide functionalities like a color sampler (eyedropper), color modes, and presets.
  8. [b]Note:[/b] This control is the color picker widget itself. You can use a [ColorPickerButton] instead if you need a button that brings up a [ColorPicker] in a popup.
  9. </description>
  10. <tutorials>
  11. <link title="Tween Interpolation Demo">https://godotengine.org/asset-library/asset/2733</link>
  12. </tutorials>
  13. <methods>
  14. <method name="add_preset">
  15. <return type="void" />
  16. <param index="0" name="color" type="Color" />
  17. <description>
  18. Adds the given color to a list of color presets. The presets are displayed in the color picker and the user will be able to select them.
  19. [b]Note:[/b] The presets list is only for [i]this[/i] color picker.
  20. </description>
  21. </method>
  22. <method name="add_recent_preset">
  23. <return type="void" />
  24. <param index="0" name="color" type="Color" />
  25. <description>
  26. Adds the given color to a list of color recent presets so that it can be picked later. Recent presets are the colors that were picked recently, a new preset is automatically created and added to recent presets when you pick a new color.
  27. [b]Note:[/b] The recent presets list is only for [i]this[/i] color picker.
  28. </description>
  29. </method>
  30. <method name="erase_preset">
  31. <return type="void" />
  32. <param index="0" name="color" type="Color" />
  33. <description>
  34. Removes the given color from the list of color presets of this color picker.
  35. </description>
  36. </method>
  37. <method name="erase_recent_preset">
  38. <return type="void" />
  39. <param index="0" name="color" type="Color" />
  40. <description>
  41. Removes the given color from the list of color recent presets of this color picker.
  42. </description>
  43. </method>
  44. <method name="get_presets" qualifiers="const">
  45. <return type="PackedColorArray" />
  46. <description>
  47. Returns the list of colors in the presets of the color picker.
  48. </description>
  49. </method>
  50. <method name="get_recent_presets" qualifiers="const">
  51. <return type="PackedColorArray" />
  52. <description>
  53. Returns the list of colors in the recent presets of the color picker.
  54. </description>
  55. </method>
  56. </methods>
  57. <members>
  58. <member name="can_add_swatches" type="bool" setter="set_can_add_swatches" getter="are_swatches_enabled" default="true">
  59. If [code]true[/code], it's possible to add presets under Swatches. If [code]false[/code], the button to add presets is disabled.
  60. </member>
  61. <member name="color" type="Color" setter="set_pick_color" getter="get_pick_color" default="Color(1, 1, 1, 1)" keywords="colour">
  62. The currently selected color.
  63. </member>
  64. <member name="color_mode" type="int" setter="set_color_mode" getter="get_color_mode" enum="ColorPicker.ColorModeType" default="0">
  65. The currently selected color mode. See [enum ColorModeType].
  66. </member>
  67. <member name="color_modes_visible" type="bool" setter="set_modes_visible" getter="are_modes_visible" default="true">
  68. If [code]true[/code], the color mode buttons are visible.
  69. </member>
  70. <member name="deferred_mode" type="bool" setter="set_deferred_mode" getter="is_deferred_mode" default="false">
  71. If [code]true[/code], the color will apply only after the user releases the mouse button, otherwise it will apply immediately even in mouse motion event (which can cause performance issues).
  72. </member>
  73. <member name="edit_alpha" type="bool" setter="set_edit_alpha" getter="is_editing_alpha" default="true">
  74. If [code]true[/code], shows an alpha channel slider (opacity).
  75. </member>
  76. <member name="edit_intensity" type="bool" setter="set_edit_intensity" getter="is_editing_intensity" default="true">
  77. If [code]true[/code], shows an intensity slider. The intensity is applied as follows: multiply the color by [code]2 ** intensity[/code] in linear RGB space, and then convert it back to sRGB.
  78. </member>
  79. <member name="hex_visible" type="bool" setter="set_hex_visible" getter="is_hex_visible" default="true">
  80. If [code]true[/code], the hex color code input field is visible.
  81. </member>
  82. <member name="picker_shape" type="int" setter="set_picker_shape" getter="get_picker_shape" enum="ColorPicker.PickerShapeType" default="0">
  83. The shape of the color space view. See [enum PickerShapeType].
  84. </member>
  85. <member name="presets_visible" type="bool" setter="set_presets_visible" getter="are_presets_visible" default="true">
  86. If [code]true[/code], the Swatches and Recent Colors presets are visible.
  87. </member>
  88. <member name="sampler_visible" type="bool" setter="set_sampler_visible" getter="is_sampler_visible" default="true">
  89. If [code]true[/code], the color sampler and color preview are visible.
  90. </member>
  91. <member name="sliders_visible" type="bool" setter="set_sliders_visible" getter="are_sliders_visible" default="true">
  92. If [code]true[/code], the color sliders are visible.
  93. </member>
  94. </members>
  95. <signals>
  96. <signal name="color_changed">
  97. <param index="0" name="color" type="Color" />
  98. <description>
  99. Emitted when the color is changed.
  100. </description>
  101. </signal>
  102. <signal name="preset_added">
  103. <param index="0" name="color" type="Color" />
  104. <description>
  105. Emitted when a preset is added.
  106. </description>
  107. </signal>
  108. <signal name="preset_removed">
  109. <param index="0" name="color" type="Color" />
  110. <description>
  111. Emitted when a preset is removed.
  112. </description>
  113. </signal>
  114. </signals>
  115. <constants>
  116. <constant name="MODE_RGB" value="0" enum="ColorModeType">
  117. Allows editing the color with Red/Green/Blue sliders in sRGB color space.
  118. </constant>
  119. <constant name="MODE_HSV" value="1" enum="ColorModeType">
  120. Allows editing the color with Hue/Saturation/Value sliders.
  121. </constant>
  122. <constant name="MODE_RAW" value="2" enum="ColorModeType" deprecated="This is replaced by [constant MODE_LINEAR].">
  123. </constant>
  124. <constant name="MODE_LINEAR" value="2" enum="ColorModeType">
  125. Allows editing the color with Red/Green/Blue sliders in linear color space.
  126. </constant>
  127. <constant name="MODE_OKHSL" value="3" enum="ColorModeType">
  128. Allows editing the color with Hue/Saturation/Lightness sliders.
  129. OKHSL is a new color space similar to HSL but that better match perception by leveraging the Oklab color space which is designed to be simple to use, while doing a good job at predicting perceived lightness, chroma and hue.
  130. [url=https://bottosson.github.io/posts/colorpicker/]Okhsv and Okhsl color spaces[/url]
  131. </constant>
  132. <constant name="SHAPE_HSV_RECTANGLE" value="0" enum="PickerShapeType">
  133. HSV Color Model rectangle color space.
  134. </constant>
  135. <constant name="SHAPE_HSV_WHEEL" value="1" enum="PickerShapeType">
  136. HSV Color Model rectangle color space with a wheel.
  137. </constant>
  138. <constant name="SHAPE_VHS_CIRCLE" value="2" enum="PickerShapeType">
  139. HSV Color Model circle color space. Use Saturation as a radius.
  140. </constant>
  141. <constant name="SHAPE_OKHSL_CIRCLE" value="3" enum="PickerShapeType">
  142. HSL OK Color Model circle color space.
  143. </constant>
  144. <constant name="SHAPE_NONE" value="4" enum="PickerShapeType">
  145. The color space shape and the shape select button are hidden. Can't be selected from the shapes popup.
  146. </constant>
  147. </constants>
  148. <theme_items>
  149. <theme_item name="focused_not_editing_cursor_color" data_type="color" type="Color" default="Color(1, 1, 1, 0.275)">
  150. Color of rectangle or circle drawn when a picker shape part is focused but not editable via keyboard or joypad. Displayed [i]over[/i] the picker shape, so a partially transparent color should be used to ensure the picker shape remains visible.
  151. </theme_item>
  152. <theme_item name="center_slider_grabbers" data_type="constant" type="int" default="1">
  153. Overrides the [theme_item Slider.center_grabber] theme property of the sliders.
  154. </theme_item>
  155. <theme_item name="h_width" data_type="constant" type="int" default="30">
  156. The width of the hue selection slider.
  157. </theme_item>
  158. <theme_item name="label_width" data_type="constant" type="int" default="10">
  159. The minimum width of the color labels next to sliders.
  160. </theme_item>
  161. <theme_item name="margin" data_type="constant" type="int" default="4">
  162. The margin around the [ColorPicker].
  163. </theme_item>
  164. <theme_item name="sv_height" data_type="constant" type="int" default="256">
  165. The height of the saturation-value selection box.
  166. </theme_item>
  167. <theme_item name="sv_width" data_type="constant" type="int" default="256">
  168. The width of the saturation-value selection box.
  169. </theme_item>
  170. <theme_item name="add_preset" data_type="icon" type="Texture2D">
  171. The icon for the "Add Preset" button.
  172. </theme_item>
  173. <theme_item name="bar_arrow" data_type="icon" type="Texture2D">
  174. The texture for the arrow grabber.
  175. </theme_item>
  176. <theme_item name="color_hue" data_type="icon" type="Texture2D">
  177. Custom texture for the hue selection slider on the right.
  178. </theme_item>
  179. <theme_item name="color_script" data_type="icon" type="Texture2D">
  180. The icon for the button that switches color text to hexadecimal.
  181. </theme_item>
  182. <theme_item name="expanded_arrow" data_type="icon" type="Texture2D">
  183. The icon for color preset drop down menu when expanded.
  184. </theme_item>
  185. <theme_item name="folded_arrow" data_type="icon" type="Texture2D">
  186. The icon for color preset drop down menu when folded.
  187. </theme_item>
  188. <theme_item name="menu_option" data_type="icon" type="Texture2D">
  189. The icon for color preset option menu.
  190. </theme_item>
  191. <theme_item name="overbright_indicator" data_type="icon" type="Texture2D">
  192. The indicator used to signalize that the color value is outside the 0-1 range.
  193. </theme_item>
  194. <theme_item name="picker_cursor" data_type="icon" type="Texture2D">
  195. The image displayed over the color box/circle (depending on the [member picker_shape]), marking the currently selected color.
  196. </theme_item>
  197. <theme_item name="picker_cursor_bg" data_type="icon" type="Texture2D">
  198. The fill image displayed behind the picker cursor.
  199. </theme_item>
  200. <theme_item name="sample_bg" data_type="icon" type="Texture2D">
  201. Background panel for the color preview box (visible when the color is translucent).
  202. </theme_item>
  203. <theme_item name="sample_revert" data_type="icon" type="Texture2D">
  204. The icon for the revert button (visible on the middle of the "old" color when it differs from the currently selected color). This icon is modulated with a dark color if the "old" color is bright enough, so the icon should be bright to ensure visibility in both scenarios.
  205. </theme_item>
  206. <theme_item name="screen_picker" data_type="icon" type="Texture2D">
  207. The icon for the screen color picker button.
  208. </theme_item>
  209. <theme_item name="shape_circle" data_type="icon" type="Texture2D">
  210. The icon for circular picker shapes.
  211. </theme_item>
  212. <theme_item name="shape_rect" data_type="icon" type="Texture2D">
  213. The icon for rectangular picker shapes.
  214. </theme_item>
  215. <theme_item name="shape_rect_wheel" data_type="icon" type="Texture2D">
  216. The icon for rectangular wheel picker shapes.
  217. </theme_item>
  218. <theme_item name="picker_focus_circle" data_type="style" type="StyleBox">
  219. The [StyleBox] used when the circle-shaped part of the picker is focused. Displayed [i]over[/i] the picker shape, so a partially transparent [StyleBox] should be used to ensure the picker shape remains visible. A [StyleBox] that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a [StyleBoxEmpty] resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.
  220. </theme_item>
  221. <theme_item name="picker_focus_rectangle" data_type="style" type="StyleBox">
  222. The [StyleBox] used when the rectangle-shaped part of the picker is focused. Displayed [i]over[/i] the picker shape, so a partially transparent [StyleBox] should be used to ensure the picker shape remains visible. A [StyleBox] that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a [StyleBoxEmpty] resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.
  223. </theme_item>
  224. <theme_item name="sample_focus" data_type="style" type="StyleBox">
  225. The [StyleBox] used for the old color sample part when it is focused. Displayed [i]over[/i] the sample, so a partially transparent [StyleBox] should be used to ensure the picker shape remains visible. A [StyleBox] that represents an outline or an underline works well for this purpose. To disable the focus visual effect, assign a [StyleBoxEmpty] resource. Note that disabling the focus visual effect will harm keyboard/controller navigation usability, so this is not recommended for accessibility reasons.
  226. </theme_item>
  227. </theme_items>
  228. </class>