From 9c87a6ceb06a54eebe21e8aa352ea35780ae6859 Mon Sep 17 00:00:00 2001 From: shawna-p <37048629+shawna-p@users.noreply.github.com> Date: Sat, 9 Sep 2023 18:41:27 -0400 Subject: [PATCH] Updated in line with itch.io release --- README.md | 12 +- color_picker.rpy | 288 +++++++++++++------------------------- color_picker_examples.rpy | 273 ++++++++++++++++++++++++++++++++++++ selector.webp | Bin 70 -> 0 bytes 4 files changed, 374 insertions(+), 199 deletions(-) create mode 100644 color_picker_examples.rpy delete mode 100644 selector.webp diff --git a/README.md b/README.md index 4303cd7..bd6e6a8 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,22 @@ # renpy-color-picker + A simple color picker for Ren'Py. ![Preview](color_picker.gif) ## How to Use -1. Download the ZIP of this repository using the green button in the top right. The two main files you will need are `color_picker.rpy` and `selector.webp`. -2. Put `color_picker.rpy` inside your Ren'Py project folder (with your other `rpy` files). Put `selector.webp` inside the `images` folder. - 1. Note: you may replace `selector.webp` with your own image. The program requires an image named `selector`, but you can redeclare it in the script or by replacing the provided image. +1. Download the ZIP of this repository using the green button in the top right. The file `color_picker.rpy` is require; the file `color_picker_examples.rpy` is optional but will show you possible ways to use the tool. +2. Put `color_picker.rpy` inside your Ren'Py project folder (with your other `rpy` files). 3. There is a test label, `label how_to_use_color_picker`, included in `color_picker.rpy`. You can jump to it to test out the color picker (e.g. `jump how_to_use_color_picker`). -In particular, the example screen `screen color_picker` should be used as a guide for adding the picker to your own screens. The picker, hue bars, preview swatch, hex code information, etc. are all separate screen elements and can be resized and moved around the screen however you like. +In particular, the example screen `screen color_picker` should be used as a guide for adding the picker to your own screens. The picker, hue bars, preview swatch, hex code information, etc. are all separate screen elements and can be resized and moved around the screen however you like. ## Terms of Use -You are free to use this code however you wish. Credit as `Feniks` is not required but is appreciated if you found the code useful. You can also check out my website, https://feniksdev.com/ for Ren'Py coding tutorials. +You are free to use this code however you wish. Credit as `Feniks` is not required but is appreciated if you found the code useful. This tool can also be found on itch.io: https://feniksdev.itch.io/color-picker-for-renpy + +You can check out my website, https://feniksdev.com/ for Ren'Py coding tutorials. ## Like my work? diff --git a/color_picker.rpy b/color_picker.rpy index c911f64..b0b572f 100644 --- a/color_picker.rpy +++ b/color_picker.rpy @@ -1,5 +1,23 @@ ################################################################################ -## SHADERS +## +## Color Picker for Ren'Py by Feniks (feniksdev.itch.io / feniksdev.com) +## +################################################################################ +## This file contains code for a colour picker in Ren'Py. +## If you use this code in your projects, credit me as Feniks @ feniksdev.com +## +## If you'd like to see how to use this tool, check the other file, +## color_picker_examples.rpy! +## You can also see this tool in action in the image tint tool, also on itch: +## https://feniksdev.itch.io/image-tint-tool +## +## Leave a comment on the tool page on itch.io or an issue on the GitHub +## if you run into any issues. +## https://feniksdev.itch.io/color-picker-for-renpy +## https://github.com/shawna-p/renpy-color-picker +################################################################################ +################################################################################ +## SHADERS & TRANSFORMS ################################################################################ init python: ## A shader which creates a gradient for a colour picker. @@ -16,14 +34,12 @@ init python: v_gradient_x_done = a_position.x / u_model_size.x; v_gradient_y_done = a_position.y / u_model_size.y; """, fragment_300=""" - float left_gradient = v_gradient_x_done; - float top_gradient = v_gradient_y_done; - // Mix top left and the colour - gl_FragColor = mix(u_gradient_top_left, u_gradient_top_right, left_gradient); + // Mix the two top colours + vec4 top = mix(u_gradient_top_left, u_gradient_top_right, v_gradient_x_done); // Mix the two bottom colours - vec4 bottom = mix(u_gradient_bottom_left, u_gradient_bottom_right, left_gradient); - // Mix that with the top - gl_FragColor = mix(bottom, gl_FragColor, 1.0-top_gradient); + vec4 bottom = mix(u_gradient_bottom_left, u_gradient_bottom_right, v_gradient_x_done); + // Mix the top and bottom + gl_FragColor = mix(bottom, top, 1.0-v_gradient_y_done); """) ## A shader which creates a spectrum. Generally for colour pickers. @@ -39,7 +55,8 @@ init python: v_gradient_x_done = a_position.x / u_model_size.x; v_gradient_y_done = a_position.y / u_model_size.y; """, fragment_functions=""" - // HSL to RGB conversion adapted from https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion + // HSL to RGB conversion adapted from + // https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion float hue2rgb(float p, float q, float t){ if(t < 0.0) t += 1.0; if(t > 1.0) t -= 1.0; @@ -64,15 +81,19 @@ init python: ## A transform which creates a spectrum. ## If horizontal is True, the spectrum goes from left to right instead of -## top to bottom. You can also adjust the lightness and saturation (between 0 and 1). +## top to bottom. You can also adjust the lightness and saturation +## (between 0 and 1). transform spectrum(horizontal=True, light=0.5, sat=1.0): shader "feniks.spectrum" u_lightness light u_saturation sat u_horizontal float(horizontal) -## A transform which creates a square with a gradient from the top right -transform color_picker(top_right, bottom_right="#000", bottom_left="#000", top_left="#fff"): +## A transform which creates a square with a gradient. By default, only the +## top right colour is required (to make a colour picker gradient) but four +## corner colours may also be provided clockwise from the top-right. +transform color_picker(top_right, bottom_right="#000", bottom_left="#000", + top_left="#fff"): shader "feniks.color_picker" u_gradient_top_right Color(top_right).rgba u_gradient_top_left Color(top_left).rgba @@ -88,8 +109,7 @@ init python: class ColorPicker(renpy.Displayable): """ A CDD which allows the player to pick a colour between four - quadrants, with the top left being pure white, the bottom left - and right being pure black, and the top right being a pure hue. + corner colours, with the typical setup used for a colour picker. Attributes ---------- @@ -97,6 +117,14 @@ init python: The width of the colour picker. ysize : int The height of the colour picker. + top_left : Color + The colour of the top-left corner. + top_right : Color + The colour of the top-right corner. + bottom_left : Color + The colour of the bottom-left corner. + bottom_right : Color + The colour of the bottom-right corner. color : Color The current colour the colour picker is focused over. selector_xpos : float @@ -140,16 +168,13 @@ init python: self.bottom_right = None if start_color is None and four_corners is None: + ## Automatically start with red self.set_color("#f00") elif four_corners is None: self.set_color(start_color) else: - self.top_right, self.bottom_right, self.bottom_left, self.top_left = four_corners - ## Convert to Color objects - self.top_right = Color(self.top_right) - self.bottom_right = Color(self.bottom_right) - self.bottom_left = Color(self.bottom_left) - self.top_left = Color(self.top_left) + all_corners = [Color(c) if not isinstance(c, Color) else c for c in four_corners] + self.top_right, self.bottom_right, self.bottom_left, self.top_left = all_corners self.set_color(self.top_right) self.picker = Transform("#fff", xysize=(self.xsize, self.ysize)) @@ -164,7 +189,11 @@ init python: color : Color The new colour to set the colour picker to. """ - self.color = Color(color) + if not isinstance(color, Color): + self.color = Color(color) + else: + self.color = color + ## Check if this has four custom corners if self.top_left is None: ## No; set to saturation/value @@ -178,9 +207,6 @@ init python: self.selector_ypos = 0.0 self.hue_rotation = 0.0 - def visit(self): - return [Image("selector")] - def render(self, width, height, st, at): """ Render the displayable to the screen. @@ -213,7 +239,7 @@ init python: relative_x = x/float(self.xsize) relative_y = y/float(self.ysize) - in_range = ((0.0 <= relative_x <= 1.0) and (0.0 <= relative_y <= 1.0)) + in_range = (0.0 <= relative_x <= 1.0) and (0.0 <= relative_y <= 1.0) if ev.type == pygame.MOUSEBUTTONDOWN and ev.button == 1 and in_range: self.dragging = True @@ -268,180 +294,54 @@ init python: A brief DynamicDisplayable demonstration of how to display color information in real-time. """ - return Fixed(Text(picker.color.hexcode), xsize=200, yfit=True), 0.01 + return Text(picker.color.hexcode, style='picker_hexcode'), 0.01 ################################################################################ ## IMAGES ################################################################################ -## Used for both the spectrum thumb and the colour indicator. Can be changed. -image selector_bg = Frame("selector.webp", 5, 5) -## The image used for the indicator showing the current colour. -image selector = Transform("selector_bg", xysize=(15, 15), anchor=(0.5, 0.5)) - -################################################################################ -## SCREENS -################################################################################ -## A sample screen to demonstrate the colour picker. -## Simply write `call screen color_picker()` to test it. -screen color_picker(): - - ## The picker itself. Its size is 700x700 with the starting colour #8b0f55. - ## You may declare this outside of the screen to make it easier to access. - default picker = ColorPicker(700, 700, "#8b0f55") - ## The preview swatch. Needs to be provided the picker variable from above. - ## You can specify its size as well. - default picker_color = DynamicDisplayable(picker_color, picker=picker, - xsize=100, ysize=100) - ## The hexcode of the current colour. Demonstrates updating the picker - ## colour information in real-time. - default picker_hex = DynamicDisplayable(picker_hexcode, picker=picker) - - ## This is an example of how you can swap between multiple colour swatches - default color1 = "#fff" - default color2 = "#fff" - default current_color = 1 - - add "#333" - - vbox: - align (0.5, 0.5) spacing 25 - hbox: - spacing 25 - ## A vertical bar which lets you change the hue of the picker. - vbar value FieldValue(picker, "hue_rotation", 1.0): - xysize (50, 700) - base_bar At(Transform("#000", xysize=(50, 700)), spectrum(horizontal=False)) - thumb Transform("selector_bg", xysize=(50, 20)) - thumb_offset 10 - - ## The picker itself - add picker - vbox: - xsize 200 spacing 10 - ## The swatch - ## If you only need one swatch, use this: - add picker_color - ## Otherwise, the following code lets you switch between - ## two different swatches to choose more than one colour: - # if current_color == 1: - # button: - # padding (4, 4) background "#fff" - # add picker_color - # else: - # imagebutton: - # xysize (100, 100) padding (4, 4) - # idle color1 hover_foreground "#fff2" - # action [SetScreenVariable("color2", picker.color), - # Function(picker.set_color, color1), - # SetScreenVariable("current_color", 1)] - # if current_color == 2: - # button: - # padding (4, 4) background "#fff" - # add picker_color - # else: - # imagebutton: - # xysize (100, 100) padding (4, 4) - # idle color2 hover_foreground "#fff2" - # action [SetScreenVariable("color1", picker.color), - # Function(picker.set_color, color2), - # SetScreenVariable("current_color", 2)] - ## End of multiple swatch code - - ## You can display other information on the color here, as desired - ## Some examples are provided. Note that these do not update in - ## tandem with the picker, but when the mouse is released. You - ## will need to use a DynamicDisplayable for real-time updates. - ## The hex code is provided as an example. - add picker_hex ## The DynamicDisplayable from earlier - ## These update when the mouse button is released - ## since they aren't a dynamic displayable - text "R: [picker.color.rgb[0]:.2f]" - text "G: [picker.color.rgb[1]:.2f]" - text "B: [picker.color.rgb[2]:.2f]" - - ## A horizontal bar that lets you change the hue of the picker - bar value FieldValue(picker, "hue_rotation", 1.0): - xysize (700, 50) xpos 25+80 - base_bar At(Transform("#000", xysize=(700, 50)), spectrum()) - thumb Transform("selector_bg", xysize=(20, 50)) - thumb_offset 10 - - ## In this case, the screen returns the picker's colour. The colour itself - ## is always stored in the picker's `color` attribute. - textbutton "Return" action Return(picker.color) align (1.0, 1.0) - -################################################################################ -## A sample screen to demonstrate the four corner colour picker. -## Simply write `call screen four_corner_picker()` to test it. -screen four_corner_picker(): - - ## The picker itself. Its size is 700x700, and it's given a colour for - ## all four corners (top right, bottom right, bottom left, top left) - ## You may declare this outside of the screen to make it easier to access. - default picker = ColorPicker(700, 700, four_corners=("#37dddd", "#010038", "#270129", "#daf0ea")) - ## The preview swatch. Needs to be provided the picker variable from above. - ## You can specify its size as well. - default picker_color = DynamicDisplayable(picker_color, picker=picker, - xsize=100, ysize=100) - ## The hexcode of the current colour. Demonstrates updating the picker - ## colour information in real-time. - default picker_hex = DynamicDisplayable(picker_hexcode, picker=picker) - - add "#333" - - vbox: - align (0.5, 0.5) spacing 25 - hbox: - spacing 25 - - ## The picker itself - add picker - vbox: - xsize 200 spacing 10 - ## The swatch - ## If you only need one swatch, use this: - add picker_color +init offset = -1 +init python: + def construct_selector(w=2, sz=5): + """ + Constructs a white box surrounded by a black box, to use as a + selector for the colour picker. - ## You can display other information on the color here, as desired - ## Some examples are provided. Note that these do not update in - ## tandem with the picker, but when the mouse is released. You - ## will need to use a DynamicDisplayable for real-time updates. - ## The hex code is provided as an example. - add picker_hex ## The DynamicDisplayable from earlier - ## These update when the mouse button is released - ## since they aren't a dynamic displayable - text "R: [picker.color.rgb[0]:.2f]" - text "G: [picker.color.rgb[1]:.2f]" - text "B: [picker.color.rgb[2]:.2f]" + Parameters + ---------- + w : int + The width of the lines. + sz : int + The size of the inner box. + """ + ## First, the sides of the box + box_leftright = [ + Transform("#000", xysize=(w, sz+2*3*w), align=(0.5, 0.5)), + Transform("#fff", xysize=(w, sz+2*2*w), align=(0.5, 0.5)), + Transform("#000", xysize=(w, sz+2*1*w), align=(0.5, 0.5)), + ] + ## Then the top and bottom + box_topbottom = [ + Transform("#000", xysize=(sz+2*2*w, w), align=(0.5, 0.5)), + Transform("#fff", xysize=(sz+2*1*w, w), align=(0.5, 0.5)), + Transform("#000", xysize=(sz, w), align=(0.5, 0.5)), + ] + final_vbox = box_topbottom + [Null(height=sz)] + box_topbottom[::-1] + final_hbox = (box_leftright + [Null(width=-w*2)] + + [VBox(*final_vbox, style='empty', spacing=0)] + + [Null(width=-w*2)] + box_leftright[::-1]) + ## Now put it together + return HBox(*final_hbox, spacing=0, style='empty') + +## These can be changed; see color_picker_examples.rpy for more. +## Feel free to remove the constructor function above if you don't use these. +## Used for both the spectrum thumb and the colour indicator. +image selector_img = construct_selector(2, 3) +image selector_bg = Frame("selector_img", 7, 7) +## The image used for the indicator showing the current colour. +image selector = Transform("selector_bg", xysize=(15, 15)) - ## A horizontal bar that lets you change the hue of the picker - ## For a four-corner picker, you may not need this. - bar value FieldValue(picker, "hue_rotation", 1.0): - xysize (700, 50) - base_bar "#fff" - thumb Transform("selector_bg", xysize=(20, 50)) - thumb_offset 10 +style picker_hexcode: + color "#fff" + font "DejaVuSans.ttf" - ## In this case, the screen returns the picker's colour. The colour itself - ## is always stored in the picker's `color` attribute. - textbutton "Return" action Return(picker.color) align (1.0, 1.0) -################################################################################ -## TESTING -################################################################################ -default chosen_color = "#8b0f55" -label how_to_use_color_picker(): - "Soon, you will be shown a colour picker." - call screen color_picker() - ## The colour the picker returns is a Color object. It has a hexcode - ## field to easily get the hexadecimal colour code. - $ chosen_color = _return.hexcode - ## This is used to put the returned colour into a colour text tag - $ color_tag = "{color=%s}" % chosen_color - "[color_tag]You chose the colour [chosen_color].{/color}" - "Next, you will be shown a four-corner colour picker." - call screen four_corner_picker() - $ chosen_color = _return.hexcode - $ color_tag = "{color=%s}" % chosen_color - "[color_tag]You chose the colour [chosen_color].{/color}" - return diff --git a/color_picker_examples.rpy b/color_picker_examples.rpy new file mode 100644 index 0000000..aeb1e61 --- /dev/null +++ b/color_picker_examples.rpy @@ -0,0 +1,273 @@ + +################################################################################ +################################################################################ +## +## COLOR PICKER EXAMPLES +## +################################################################################ +## To quickly test these examples in your game, jump to the label +## how_to_use_color_picker i.e. +# jump how_to_use_color_picker + +################################################################################ +## IMAGES +################################################################################ +## In order to avoid including unnecessary image files, the default version of +## these images constructs an image in code. You may, however, want to change +## it. The following code is provided as an example of how to do so. + +## Used for both the spectrum thumb and the colour indicator. Can be changed. +# image selector_bg = Frame("selector.webp", 5, 5) + +## The image used for the indicator showing the current colour. +# image selector = Transform("selector_bg", xysize=(15, 15)) + +################################################################################ +## SCREENS +################################################################################ +## EXAMPLE 1 +## A sample screen to demonstrate the colour picker. +## Simply write `call screen color_picker()` to test it. +screen color_picker(): + + ## The picker itself. Its size is 700x700 with the starting colour #ff8335. + ## You may declare this outside of the screen to make it easier to access; + ## see color_picker_v2 for an example of this. + default picker = ColorPicker(700, 700, "#ff8335") + ## The preview swatch. Needs to be provided the picker variable from above. + ## You can specify its size as well. + default picker_swatch = DynamicDisplayable(picker_color, picker=picker, + xsize=100, ysize=100) + ## The hexcode of the current colour. Demonstrates updating the picker + ## colour information in real-time. + default picker_hex = DynamicDisplayable(picker_hexcode, picker=picker) + + style_prefix 'cpicker' ## Simplifies some of the style property code + + add "#21212d" ## The background + + hbox: + ## A vertical bar which lets you change the hue of the picker. + vbar value FieldValue(picker, "hue_rotation", 1.0) + + vbox: + ## The picker itself + add picker + ## A horizontal bar that lets you change the hue of the picker + bar value FieldValue(picker, "hue_rotation", 1.0) + vbox: + xsize 200 spacing 10 align (0.0, 0.0) + ## The swatch + add picker_swatch + + ## You can display other information on the color here, as desired + ## Some examples are provided. Note that these do not update in + ## tandem with the picker, but when the mouse is released. You + ## will need to use a DynamicDisplayable for real-time updates. + ## The hex code is provided as an example. + add picker_hex ## The DynamicDisplayable from earlier + ## These update when the mouse button is released + ## since they aren't a dynamic displayable + text "R: [picker.color.rgb[0]:.2f]" + text "G: [picker.color.rgb[1]:.2f]" + text "B: [picker.color.rgb[2]:.2f]" + + ## In this case, the screen returns the picker's colour. The colour itself + ## is always stored in the picker's `color` attribute. + textbutton "Return" action Return(picker.color) align (1.0, 1.0) + +################################################################################ +## Styles +style cpicker_vbox: + align (0.5, 0.5) + spacing 25 +style cpicker_hbox: + align (0.5, 0.5) + spacing 25 +style cpicker_vbar: + xysize (50, 700) + base_bar At(Transform("#000", xysize=(50, 700)), spectrum(horizontal=False)) + thumb Transform("selector_bg", xysize=(50, 20)) + thumb_offset 10 +style cpicker_bar: + xysize (700, 50) + base_bar At(Transform("#000", xysize=(700, 50)), spectrum()) + thumb Transform("selector_bg", xysize=(20, 50)) + thumb_offset 10 +style cpicker_text: + color "#fff" +style cpicker_button: + padding (4, 4) insensitive_background "#fff" +style cpicker_button_text: + color "#aaa" + hover_color "#fff" +style cpicker_image_button: + xysize (104, 104) + padding (4, 4) + hover_foreground "#fff2" + +################################################################################ +## EXAMPLE 2 +## The picker itself. This one is declared outside of the screen. +default picker2 = ColorPicker(700, 700, "#f93c3e") +## The preview swatch. Needs to be provided the picker variable from above. +## You can specify its size as well. +default picker_swatch_v2 = DynamicDisplayable(picker_color, picker=picker2, + xsize=100, ysize=100) +## The hexcode of the current colour. Demonstrates updating the picker +## colour information in real-time. +default picker_hex_v2 = DynamicDisplayable(picker_hexcode, picker=picker2) + +default color1 = Color("#fff") +default color2 = Color("#fff") + +init python: + def finalize_colors(current, picker): + """ + A helper function which ensures that the last-changed colour picker + colour is also saved. This is a function rather than a SetVariable + action because Ren'Py does not refresh the SetVariable value while + the colour picker is changing colours, thus it would use an out-of-date + value. + """ + if current == 1: + store.color1 = picker.color + else: + store.color2 = picker.color + +screen color_picker_v2(): + + ## This is an example of how you can swap between multiple colour swatches + default current_color = 1 + + style_prefix 'cpicker' + + add "#21212d" + + hbox: + ## A vertical bar which lets you change the hue of the picker. + vbar value FieldValue(picker2, "hue_rotation", 1.0) + + ## The picker itself + vbox: + add picker2 + ## A horizontal bar that lets you change the hue of the picker + bar value FieldValue(picker2, "hue_rotation", 1.0) + + vbox: + xsize 200 spacing 10 align (0.0, 0.0) + ## The following code lets you switch between + ## two different swatches to choose more than one colour: + if current_color == 1: + button: + ## An insensitive button which just shows the currently + ## selected colour. + add picker_swatch_v2 + else: + imagebutton: + idle color1 + ## Switch the picker to track the second colour, using + ## the `set_color` method. + action [SetVariable("color2", picker2.color), + Function(picker2.set_color, color1), + SetScreenVariable("current_color", 1)] + if current_color == 2: + button: + add picker_swatch_v2 + else: + imagebutton: + idle color2 + action [SetVariable("color1", picker2.color), + Function(picker2.set_color, color2), + SetScreenVariable("current_color", 2)] + + ## The hex code + add picker_hex_v2 ## The DynamicDisplayable from earlier + ## The RGB values + text "R: [picker2.color.rgb[0]:.2f]" + text "G: [picker2.color.rgb[1]:.2f]" + text "B: [picker2.color.rgb[2]:.2f]" + + ## Ensure that the last-changed colour picker colour is also saved, and + ## then just Return because this screen uses global variables. + textbutton "Return" align (1.0, 1.0): + action [Function(finalize_colors, current_color, picker2), Return()] + +################################################################################ +## EXAMPLE 3 +## A sample screen to demonstrate the four corner colour picker. +## Simply write `call screen four_corner_picker()` to test it. +screen four_corner_picker(): + + ## The picker itself. Its size is 700x700, and it's given a colour for + ## all four corners (top right, bottom right, bottom left, top left) + ## You may declare this outside of the screen to make it easier to access. + default picker = ColorPicker(700, 700, + four_corners=("#ff8335", "#f93c3e", "#292835", "#f7f7ed")) + ## The preview swatch. Needs to be provided the picker variable from above. + ## You can specify its size as well. + default picker_swatch = DynamicDisplayable(picker_color, picker=picker, + xsize=100, ysize=100) + ## The hexcode of the current colour. Demonstrates updating the picker + ## colour information in real-time. + default picker_hex = DynamicDisplayable(picker_hexcode, picker=picker) + + style_prefix 'cpicker' + + add "#21212d" + + hbox: + spacing 25 align (0.5, 0.5) + + vbox: + ## The picker itself + add picker + ## A horizontal bar that lets you change the hue of the picker + ## For a four-corner picker, you may not need this. + bar value FieldValue(picker, "hue_rotation", 1.0) base_bar "#fff" + vbox: + xsize 200 spacing 10 align (0.0, 0.0) + ## The swatch + add picker_swatch + + ## The hex code + add picker_hex ## The DynamicDisplayable from earlier + ## The RGB values + text "R: [picker.color.rgb[0]:.2f]" + text "G: [picker.color.rgb[1]:.2f]" + text "B: [picker.color.rgb[2]:.2f]" + + ## In this case, the screen returns the picker's colour. The colour itself + ## is always stored in the picker's `color` attribute. + textbutton "Return" action Return(picker.color) align (1.0, 1.0) + +################################################################################ +## TESTING LABEL +################################################################################ +default chosen_color = "#8b0f55" +label how_to_use_color_picker(): + "Soon, you will be shown a colour picker." + + ## EXAMPLE 1 + call screen color_picker() + ## The colour the picker returns is a Color object. It has a hexcode + ## field to easily get the hexadecimal colour code. + $ chosen_color = _return.hexcode + ## This is used to put the returned colour into a colour text tag + $ color_tag = "{color=%s}" % chosen_color + "[color_tag]You chose the colour [chosen_color].{/color}" + + ## EXAMPLE 2 + "The next picker will let you select two different colours." + call screen color_picker_v2() + $ color1_tag = "{color=%s}" % color1.hexcode + $ color2_tag = "{color=%s}" % color2.hexcode + "[color1_tag]The first colour was [color1.hexcode],{/color}[color2_tag] and the second was [color2.hexcode].{/color}" + + ## EXAMPLE 3 + "Next, you will be shown a four-corner colour picker." + call screen four_corner_picker() + $ chosen_color = _return.hexcode + $ color_tag = "{color=%s}" % chosen_color + "[color_tag]You chose the colour [chosen_color].{/color}" + return diff --git a/selector.webp b/selector.webp deleted file mode 100644 index 98e6ac65102149002684b50e72ee3a8b901c646c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 70 zcmWIYbaS&~U|@>zg&v1G~ws!=7Ngl3;_KX8QK5<