ColorPicker closes when color is selected

Godot Version

Godot 4.3

Question

I redid this because my last topic did not make sense, So I have been working on my game and whenever I select a color in my ColorPicker it will close and I will have to reclick to use again. Video provided:

Here is important/necessary parts of my AIminiboard.gd script:

extends Control

@onready var grid_button_settings: Button = $GridButtonSettings
@onready var grid_settings_label: Label = $GridSettingsLabel
@onready var cell_settings_label: Label = $CellSettingsLabel

func _ready():
	$BackgroundColorOption.text = "Background Color Options:"
	$BackgroundColorOption.add_theme_font_size_override("font_size", 45)
	$CellButtonColor.text = "Cell Color Options:"
	$CellButtonColor.add_theme_font_size_override("font_size", 45)
	$GridColorOption.text = "Grid Color Options:"
	$GridColorOption.add_theme_font_size_override("font_size", 44)
	create_styled_panel()
	setup_grid_containers()

	var saved_color = load_grid_color("grid_color")
	$GridColor.color = saved_color
	update_grid_color(saved_color)

	$GridColorOption.visible = false
	$GridColor.visible = false
	
	if not $GridColorOption.is_connected("item_selected", Callable(self, "_on_grid_color_option_toggled")):
		$GridColorOption.connect("item_selected", Callable(self, "_on_grid_color_option_toggled"))
	if not $GridColor.is_connected("color_changed", Callable(self, "_on_grid_color_changed")):
		$GridColor.connect("color_changed", Callable(self, "_on_grid_color_changed"))
		$CellButtonColor.connect("toggled", Callable(self, "_on_cell_button_color_toggled"))
	if not $CellButtonColor.is_connected("toggled", Callable(self, "_on_cell_button_color_toggled")):
		$CellButtonColor.connect("toggled", Callable(self, "_on_cell_button_color_toggled"))
	if not $CellColor.is_connected("color_changed", Callable(self, "_on_cell_color_changed")):
		$CellColor.connect("color_changed", Callable(self, "_on_cell_color_changed"))
	$CellButtonColor.visible = false
	$CellColor.visible = false
	$BackgroundSettingsLabel.visible = false
	$BackgroundColorOption.visible = false
	$BackgroundColor.visible = false
	if not $BackgroundColorOption.is_connected("toggled", Callable(self, "_on_background_color_option_toggled")):
		$BackgroundColorOption.connect("toggled", Callable(self, "_on_background_color_option_toggled"))
	if not $BackgroundColor.is_connected("color_changed", Callable(self, "_on_background_color_changed")):
		$BackgroundColor.connect("color_changed", Callable(self, "_on_background_color_changed"))

	var saved_background_color = load_grid_color("background_color")
	update_background_color(saved_background_color)
	
	var saved_cell_color = load_grid_color("cell_color")
	update_cell_colors(saved_cell_color)

func save_grid_color(key: String, color: Color) -> void:
	var config = ConfigFile.new()
	config.load("user://GridColor.cfg")
	config.set_value("Colors", key, color)
	config.save("user://GridColor.cfg")

func load_grid_color(key: String) -> Color:
	var config = ConfigFile.new()
	var err = config.load("user://GridColor.cfg")
	if err == OK:
		return config.get_value("Colors", key, Color.BLACK)
	return Color.BLACK  # Default color if file doesn't exist or can't be loaded

func _on_gridsettings_pressed() -> void:
	cell_settings_label.visible = not cell_settings_label.visible
	grid_settings_label.visible = not grid_settings_label.visible
	$GridColorOption.visible = grid_settings_label.visible
	$CellButtonColor.visible = grid_settings_label.visible
	$BackgroundSettingsLabel.visible = grid_settings_label.visible
	$BackgroundColorOption.visible = grid_settings_label.visible
	if not grid_settings_label.visible:
		$GridColor.visible = false
		$CellColor.visible = false
		$BackgroundColor.visible = false

func _on_grid_color_option_toggled(index: int) -> void:
	$GridColor.visible = index > 0


func _on_grid_color_changed(color: Color) -> void:
	update_grid_color(color)
	save_grid_color("grid_color", color)

func update_grid_color(color: Color) -> void:
	var rectangles = [$rectangle, $rectangle2, $rectangle3, $square, $square2]
	for rect in rectangles:
		rect.color = color

func _on_cell_button_color_toggled(toggled_on: bool) -> void:
	$CellColor.visible = toggled_on

func _on_cell_color_changed(color: Color) -> void:
	update_cell_colors(color)
	save_grid_color("cell_color", color)

func update_cell_colors(color: Color) -> void:
	for column in range(1, 10):
		var grid_container = get_node("GridContainerColumn" + str(column))
		if grid_container:
			for cell_index in range(9):
				var cell = grid_container.get_child(cell_index)
				if cell:
					cell.modulate = color

func _on_background_color_option_toggled(toggled_on: bool) -> void:
	$BackgroundColor.visible = toggled_on

func _on_background_color_changed(color: Color) -> void:
	update_background_color(color)
	save_grid_color("background_color", color)

func update_background_color(color: Color) -> void:
	var backgrounds = [$Background1, $Background2, $Background3, $Background4]
	for bg in backgrounds:
		bg.color = color

Here’s important part of my AIminiboard.tscn SceneTree:

image
image

Also to help the case at all, I have nothing in my OptionButton, what I’m doing is when the OptionButton is clicked, it will open one of my ColorPicker’s but I am up for any suggestions, it would be very much appreciated, let me know if you need anything specific, thank you, have a great day! :slight_smile:

I believe in this code section below, you need to have a last_button variable that you use to check against the current color picker in use and if it is the same, not to set that colorpicker to false. So at anytime only two of the three are being set to false. The question will be how you will close the color picker when you are done.

	if not grid_settings_label.visible:
		$GridColor.visible = false
		$CellColor.visible = false
		$BackgroundColor.visible = false
1 Like

Hello, sorry I have not responded, but thank you so much for trying to help me here! :slight_smile: But the way the color picker will be closed is by clicking the same OptionButton again…But I have tried your advice by making the variable:

var last_opened_color_picker: ColorPicker = null

and i tried updating gridsettings_pressed like this:

func _on_gridsettings_pressed() -> void:
	grid_settings_label.visible = not grid_settings_label.visible
	$GridColorOption.visible = grid_settings_label.visible
	$CellButtonColor.visible = grid_settings_label.visible
	$BackgroundColorOption.visible = grid_settings_label.visible
	
	if not grid_settings_label.visible:
		if last_opened_color_picker != $GridColor:
			$GridColor.visible = false
		if last_opened_color_picker != $CellColor:
			$CellColor.visible = false
		if last_opened_color_picker != $BackgroundColor:
			$BackgroundColor.visible = false

and I updated each OptionButton’s toggled function with something familiar with this:

func _on_grid_color_option_toggled(index: int) -> void:
	$GridColor.visible = not $GridColor.visible
	if $GridColor.visible:
		last_opened_color_picker = $GridColor

Also to help the case at all, I have nothing in my OptionButton, what I’m doing is when the OptionButton is clicked, it will open one of my ColorPicker’s but I am up for any suggestions you may have, but it still does same issue…Also thank you so much again for helping me :slight_smile:

Ok after experimenting, I have solved the issue, I did not know there was a ColorPickerButton, such a simple issue :person_facepalming:, sorry guys!

1 Like