Add a color picker UI element

framework/gui.cpp

@@ -1245,4 +1245,28 @@ void Drawer::text(const char *formatstr, ...)
 	va_end(args);
 }
 
+template <>
+bool Drawer::color_op_impl<Drawer::ColorOp::Edit, 3>(const char *caption, float *colors, ImGuiColorEditFlags flags)
+{
+	return ImGui::ColorEdit3(caption, colors, flags);
+}
+
+template <>
+bool Drawer::color_op_impl<Drawer::ColorOp::Edit, 4>(const char *caption, float *colors, ImGuiColorEditFlags flags)
+{
+	return ImGui::ColorEdit4(caption, colors, flags);
+}
+
+template <>
+bool Drawer::color_op_impl<Drawer::ColorOp::Pick, 3>(const char *caption, float *colors, ImGuiColorEditFlags flags)
+{
+	return ImGui::ColorPicker3(caption, colors, flags);
+}
+
+template <>
+bool Drawer::color_op_impl<Drawer::ColorOp::Pick, 4>(const char *caption, float *colors, ImGuiColorEditFlags flags)
+{
+	return ImGui::ColorPicker4(caption, colors, flags);
+}
+
 }        // namespace vkb

framework/gui.h

@@ -81,6 +81,12 @@ struct Font
 class Drawer
 {
   public:
+	enum class ColorOp
+	{
+		Edit,
+		Pick
+	};
+
 	Drawer() = default;
 
 	/**
@@ -173,10 +179,78 @@ class Drawer
 	 */
 	void text(const char *formatstr, ...);
 
+	/**
+	 * @brief Adds a color picker to the gui
+	 * @param caption The text to display
+	 * @param color Color channel array on which the picker works. It contains values ranging from 0 to 1.
+	 * @param width Element width. Zero is a special value for the default element width.
+	 * @param flags Flags to modify the appearance and behavior of the element.
+	 */
+	bool color_picker(const char *caption, std::array<float, 3> &color, float width = 0.0f, ImGuiColorEditFlags flags = 0);
+
+	/**
+	 * @brief Adds a color picker to the gui
+	 * @param caption The text to display
+	 * @param color Color channel array on which the picker works. It contains values ranging from 0 to 1.
+	 * @param width Element width. Zero is a special value for the default element width.
+	 * @param flags Flags to modify the appearance and behavior of the element.
+	 */
+	bool color_picker(const char *caption, std::array<float, 4> &color, float width = 0.0f, ImGuiColorEditFlags flags = 0);
+
+	/**
+	 * @brief Adds a color edit to the gui
+	 * @param caption The text to display
+	 * @param color Color channel array on which the picker works. It contains values ranging from 0 to 1.
+	 * @param width Element width. Zero is a special value for the default element width.
+	 * @param flags Flags to modify the appearance and behavior of the element.
+	 */
+	bool color_edit(const char *caption, std::array<float, 3> &color, float width = 0.0f, ImGuiColorEditFlags flags = 0);
+
+	/**
+	 * @brief Adds a color edit to the gui
+	 * @tparam OP Mode of the color element.
+	 * @tparam N Color channel count. Must be 3 or 4.
+	 * @param caption The text to display
+	 * @param color Color channel array on which the picker works. It contains values ranging from 0 to 1.
+	 * @param width Element width. Zero is a special value for the default element width.
+	 * @param flags Flags to modify the appearance and behavior of the element.
+	 */
+	template <ColorOp OP, size_t N>
+	bool color_op(const std::string &caption, std::array<float, N> &color, float width = 0.0f, ImGuiColorEditFlags flags = 0)
+	{
+		static_assert((N == 3) || (N == 4), "The channel count must be 3 or 4.");
+
+		ImGui::PushItemWidth(width);
+		bool res = color_op_impl<OP, N>(caption.c_str(), color.data(), flags);
+		ImGui::PopItemWidth();
+		if (res)
+			dirty = true;
+		return res;
+	}
+
   private:
+	template <ColorOp OP, size_t N>
+	inline bool color_op_impl(const char *caption, float *colors, ImGuiColorEditFlags flags)
+	{
+		assert(false);
+		return false;
+	}
+
 	bool dirty{false};
 };
 
+template <>
+bool Drawer::color_op_impl<Drawer::ColorOp::Edit, 3>(const char *caption, float *colors, ImGuiColorEditFlags flags);
+
+template <>
+bool Drawer::color_op_impl<Drawer::ColorOp::Edit, 4>(const char *caption, float *colors, ImGuiColorEditFlags flags);
+
+template <>
+bool Drawer::color_op_impl<Drawer::ColorOp::Pick, 3>(const char *caption, float *colors, ImGuiColorEditFlags flags);
+
+template <>
+bool Drawer::color_op_impl<Drawer::ColorOp::Pick, 4>(const char *caption, float *colors, ImGuiColorEditFlags flags);
+
 class VulkanSample;
 
 /**

framework/hpp_gui.cpp

@@ -1173,4 +1173,28 @@ void HPPDrawer::text(const char *formatstr, ...)
 	va_end(args);
 }
 
+template <>
+bool HPPDrawer::color_op_impl<HPPDrawer::ColorOp::Edit, 3>(const char *caption, float *colors, ImGuiColorEditFlags flags)
+{
+	return ImGui::ColorEdit3(caption, colors, flags);
+}
+
+template <>
+bool HPPDrawer::color_op_impl<HPPDrawer::ColorOp::Edit, 4>(const char *caption, float *colors, ImGuiColorEditFlags flags)
+{
+	return ImGui::ColorEdit4(caption, colors, flags);
+}
+
+template <>
+bool HPPDrawer::color_op_impl<HPPDrawer::ColorOp::Pick, 3>(const char *caption, float *colors, ImGuiColorEditFlags flags)
+{
+	return ImGui::ColorPicker3(caption, colors, flags);
+}
+
+template <>
+bool HPPDrawer::color_op_impl<HPPDrawer::ColorOp::Pick, 4>(const char *caption, float *colors, ImGuiColorEditFlags flags)
+{
+	return ImGui::ColorPicker4(caption, colors, flags);
+}
+
 }        // namespace vkb

framework/hpp_gui.h

@@ -69,6 +69,12 @@ struct HPPFont
 class HPPDrawer
 {
   public:
+	enum class ColorOp
+	{
+		Edit,
+		Pick
+	};
+
 	HPPDrawer() = default;
 
 	/**
@@ -161,10 +167,51 @@ class HPPDrawer
 	 */
 	void text(const char *formatstr, ...);
 
+	/**
+	 * @brief Adds a color edit to the gui
+	 * @tparam OP Mode of the color element.
+	 * @tparam N Color channel count. Must be 3 or 4.
+	 * @param caption The text to display
+	 * @param color Color channel array on which the picker works. It contains values ranging from 0 to 1.
+	 * @param width Element width. Zero is a special value for the default element width.
+	 * @param flags Flags to modify the appearance and behavior of the element.
+	 */
+	template <ColorOp OP, size_t N>
+	bool color_op(const std::string &caption, std::array<float, N> &color, float width = 0.0f, ImGuiColorEditFlags flags = 0)
+	{
+		static_assert((N == 3) || (N == 4), "The channel count must be 3 or 4.");
+
+		ImGui::PushItemWidth(width);
+		bool res = color_op_impl<OP, N>(caption.c_str(), color.data(), flags);
+		ImGui::PopItemWidth();
+		if (res)
+			dirty = true;
+		return res;
+	}
+
   private:
+	template <ColorOp OP, size_t N>
+	inline bool color_op_impl(const char *caption, float *colors, ImGuiColorEditFlags flags)
+	{
+		assert(false);
+		return false;
+	}
+
 	bool dirty = false;
 };
 
+template <>
+bool HPPDrawer::color_op_impl<HPPDrawer::ColorOp::Edit, 3>(const char *caption, float *colors, ImGuiColorEditFlags flags);
+
+template <>
+bool HPPDrawer::color_op_impl<HPPDrawer::ColorOp::Edit, 4>(const char *caption, float *colors, ImGuiColorEditFlags flags);
+
+template <>
+bool HPPDrawer::color_op_impl<HPPDrawer::ColorOp::Pick, 3>(const char *caption, float *colors, ImGuiColorEditFlags flags);
+
+template <>
+bool HPPDrawer::color_op_impl<HPPDrawer::ColorOp::Pick, 4>(const char *caption, float *colors, ImGuiColorEditFlags flags);
+
 class HPPVulkanSample;
 
 /**

samples/extensions/color_write_enable/color_write_enable.cpp

@@ -469,9 +469,9 @@ void ColorWriteEnable::build_command_buffers()
 	// Clear color values.
 	std::array<VkClearValue, 4> clear_values = {};
 	clear_values[0].color                    = {0.0f, 0.0f, 0.0f, 0.0f};
-	clear_values[1].color                    = {background_r_value, 0.0f, 0.0f, 0.0f};
-	clear_values[2].color                    = {0.0f, background_g_value, 0.0f, 0.0f};
-	clear_values[3].color                    = {0.0f, 0.0f, background_b_value, 0.0f};
+	clear_values[1].color                    = {background_color[0], 0.0f, 0.0f, 0.0f};
+	clear_values[2].color                    = {0.0f, background_color[1], 0.0f, 0.0f};
+	clear_values[3].color                    = {0.0f, 0.0f, background_color[2], 0.0f};
 
 	// Begin the render pass.
 	VkRenderPassBeginInfo render_pass_begin_info    = vkb::initializers::render_pass_begin_info();
@@ -539,15 +539,11 @@ void ColorWriteEnable::on_update_ui_overlay(vkb::Drawer &drawer)
 {
 	if (drawer.header("Background color"))
 	{
-		if (drawer.slider_float("Red", &background_r_value, 0.0f, 1.0f))
-		{
-			build_command_buffers();
-		}
-		if (drawer.slider_float("Green", &background_g_value, 0.0f, 1.0f))
-		{
-			build_command_buffers();
-		}
-		if (drawer.slider_float("Blue", &background_b_value, 0.0f, 1.0f))
+		if (drawer.color_op<vkb::Drawer::ColorOp::Pick>("", background_color, 0,
+		                                                ImGuiColorEditFlags_NoSidePreview |
+		                                                    ImGuiColorEditFlags_NoSmallPreview |
+		                                                    ImGuiColorEditFlags_Float |
+		                                                    ImGuiColorEditFlags_RGB))
 		{
 			build_command_buffers();
 		}

samples/extensions/color_write_enable/color_write_enable.h

@@ -94,12 +94,11 @@ class ColorWriteEnable : public ApiVulkanSample
 	void setup_descriptor_set_layout();
 	void setup_descriptor_set();
 
-	bool  r_bit_enabled      = true;
-	bool  g_bit_enabled      = true;
-	bool  b_bit_enabled      = true;
-	float background_r_value = 0.5f;
-	float background_g_value = 0.5f;
-	float background_b_value = 0.5f;
+	bool r_bit_enabled = true;
+	bool g_bit_enabled = true;
+	bool b_bit_enabled = true;
+
+	std::array<float, 3> background_color = {0.5f, 0.5f, 0.5f};
 };
 
 std::unique_ptr<vkb::Application> create_color_write_enable();