From 2f888ff7c5737246bf277b5b71406cfe72804914 Mon Sep 17 00:00:00 2001
From: Edward Firmo <94725493+edwardtfn@users.noreply.github.com>
Date: Tue, 28 Nov 2023 05:50:14 +0100
Subject: [PATCH] Nextion colors parameters (#5699)

* Add `foreground` color

- Adds `set_component_foreground_color` and `set_component_pressed_foreground_color` which does the same as `set_component_font_color` and `set_component_pressed_font_color` but with a more intuitive name, as this can be used for any component and not only the ones with a text (font).
- I've also reviewed some docstring when related to colors.

* Add numeric color to drawing methods

Should I've used uint32_t instead? In order to keep consistency?

* component color support to uint6_t

This is the right format and is now consistent with colors on drawings.
I'm keeping uint32_t also to avoid breaking changes.

* Enforces uint16_t for colors

uint32_t is incorrect for Nextion display colors.

* Fix clang-format
---
 esphome/components/nextion/nextion.h          | 305 ++++++++++++++----
 esphome/components/nextion/nextion_base.h     |   2 +
 .../components/nextion/nextion_commands.cpp   |  80 ++++-
 .../components/nextion/nextion_component.cpp  |   4 +-
 4 files changed, 307 insertions(+), 84 deletions(-)

diff --git a/esphome/components/nextion/nextion.h b/esphome/components/nextion/nextion.h
index a90c91db8a..f188708f35 100644
--- a/esphome/components/nextion/nextion.h
+++ b/esphome/components/nextion/nextion.h
@@ -95,16 +95,18 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
   /**
    * Set the background color of a component.
    * @param component The component name.
-   * @param color The color (as a uint32_t).
+   * @param color The color (as a uint16_t).
    *
    * Example:
    * ```cpp
-   * it.set_component_background_color("button", 0xFF0000);
+   * it.set_component_background_color("button", 63488);
    * ```
    *
    * This will change the background color of the component `button` to red.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
    */
-  void set_component_background_color(const char *component, uint32_t color);
+  void set_component_background_color(const char *component, uint16_t color);
   /**
    * Set the background color of a component.
    * @param component The component name.
@@ -115,9 +117,8 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    * it.set_component_background_color("button", "RED");
    * ```
    *
-   * This will change the background color of the component `button` to blue.
-   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
-   * Nextion HMI colors.
+   * This will change the background color of the component `button` to red.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void set_component_background_color(const char *component, const char *color);
   /**
@@ -127,26 +128,29 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.set_component_background_color("button", color);
+   * auto blue = Color(0, 0, 255);
+   * it.set_component_background_color("button", blue);
    * ```
    *
-   * This will change the background color of the component `button` to what color contains.
+   * This will change the background color of the component `button` to blue.
    */
   void set_component_background_color(const char *component, Color color) override;
   /**
    * Set the pressed background color of a component.
    * @param component The component name.
-   * @param color The color (as a int).
+   * @param color The color (as a uint16_t).
    *
    * Example:
    * ```cpp
-   * it.set_component_pressed_background_color("button", 0xFF0000 );
+   * it.set_component_pressed_background_color("button", 63488);
    * ```
    *
    * This will change the pressed background color of the component `button` to red. This is the background color that
    * is shown when the component is pressed.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
    */
-  void set_component_pressed_background_color(const char *component, uint32_t color);
+  void set_component_pressed_background_color(const char *component, uint16_t color);
   /**
    * Set the pressed background color of a component.
    * @param component The component name.
@@ -157,10 +161,9 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    * it.set_component_pressed_background_color("button", "RED");
    * ```
    *
-   * This will change the pressed background color of the component `button` to blue. This is the background color that
-   * is shown when the component is pressed. Use this [color
-   * picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to Nextion HMI
-   * colors.
+   * This will change the pressed background color of the component `button` to red. This is the background color that
+   * is shown when the component is pressed.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void set_component_pressed_background_color(const char *component, const char *color);
   /**
@@ -170,15 +173,102 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.set_component_pressed_background_color("button", color);
+   * auto red = Color(255, 0, 0);
+   * it.set_component_pressed_background_color("button", red);
    * ```
    *
-   * This will change the pressed background color of the component `button` to blue. This is the background color that
-   * is shown when the component is pressed. Use this [color
-   * picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to Nextion HMI
-   * colors.
+   * This will change the pressed background color of the component `button` to red. This is the background color that
+   * is shown when the component is pressed.
    */
   void set_component_pressed_background_color(const char *component, Color color) override;
+  /**
+   * Set the foreground color of a component.
+   * @param component The component name.
+   * @param color The color (as a uint16_t).
+   *
+   * Example:
+   * ```cpp
+   * it.set_component_foreground_color("button", 63488);
+   * ```
+   *
+   * This will change the foreground color of the component `button` to red.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
+   */
+  void set_component_foreground_color(const char *component, uint16_t color);
+  /**
+   * Set the foreground color of a component.
+   * @param component The component name.
+   * @param color The color (as a string).
+   *
+   * Example:
+   * ```cpp
+   * it.set_component_foreground_color("button", "RED");
+   * ```
+   *
+   * This will change the foreground color of the component `button` to red.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
+   */
+  void set_component_foreground_color(const char *component, const char *color);
+  /**
+   * Set the foreground color of a component.
+   * @param component The component name.
+   * @param color The color (as Color).
+   *
+   * Example:
+   * ```cpp
+   * it.set_component_foreground_color("button", Color::BLACK);
+   * ```
+   *
+   * This will change the foreground color of the component `button` to black.
+   */
+  void set_component_foreground_color(const char *component, Color color) override;
+  /**
+   * Set the pressed foreground color of a component.
+   * @param component The component name.
+   * @param color The color (as a uint16_t).
+   *
+   * Example:
+   * ```cpp
+   * it.set_component_pressed_foreground_color("button", 63488 );
+   * ```
+   *
+   * This will change the pressed foreground color of the component `button` to red. This is the foreground color that
+   * is shown when the component is pressed.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
+   */
+  void set_component_pressed_foreground_color(const char *component, uint16_t color);
+  /**
+   * Set the pressed foreground color of a component.
+   * @param component The component name.
+   * @param color The color (as a string).
+   *
+   * Example:
+   * ```cpp
+   * it.set_component_pressed_foreground_color("button", "RED");
+   * ```
+   *
+   * This will change the pressed foreground color of the component `button` to red. This is the foreground color that
+   * is shown when the component is pressed.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
+   */
+  void set_component_pressed_foreground_color(const char *component, const char *color);
+  /**
+   * Set the pressed foreground color of a component.
+   * @param component The component name.
+   * @param color The color (as Color).
+   *
+   * Example:
+   * ```cpp
+   * auto blue = Color(0, 0, 255);
+   * it.set_component_pressed_foreground_color("button", blue);
+   * ```
+   *
+   * This will change the pressed foreground color of the component `button` to blue. This is the foreground color that
+   * is shown when the component is pressed.
+   */
+  void set_component_pressed_foreground_color(const char *component, Color color) override;
 
   /**
    * Set the picture id of a component.
@@ -210,16 +300,18 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
   /**
    * Set the font color of a component.
    * @param component The component name.
-   * @param color The color (as a uint32_t ).
+   * @param color The color (as a uint16_t).
    *
    * Example:
    * ```cpp
-   * it.set_component_font_color("textview", 0xFF0000);
+   * it.set_component_font_color("textview", 63488);
    * ```
    *
    * This will change the font color of the component `textview` to a red color.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
    */
-  void set_component_font_color(const char *component, uint32_t color);
+  void set_component_font_color(const char *component, uint16_t color);
   /**
    * Set the font color of a component.
    * @param component The component name.
@@ -230,9 +322,8 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    * it.set_component_font_color("textview", "RED");
    * ```
    *
-   * This will change the font color of the component `textview` to a blue color.
-   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
-   * Nextion HMI colors.
+   * This will change the font color of the component `textview` to a red color.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void set_component_font_color(const char *component, const char *color);
   /**
@@ -242,27 +333,27 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.set_component_font_color("textview", color);
+   * it.set_component_font_color("textview", Color::BLACK);
    * ```
    *
-   * This will change the font color of the component `textview` to a blue color.
-   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
-   * Nextion HMI colors.
+   * This will change the font color of the component `textview` to black.
    */
   void set_component_font_color(const char *component, Color color) override;
   /**
    * Set the pressed font color of a component.
    * @param component The component name.
-   * @param color The color (as a uint32_t).
+   * @param color The color (as a uint16_t).
    *
    * Example:
    * ```cpp
-   * it.set_component_pressed_font_color("button", 0xFF0000);
+   * it.set_component_pressed_font_color("button", 63488);
    * ```
    *
    * This will change the pressed font color of the component `button` to a red.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
    */
-  void set_component_pressed_font_color(const char *component, uint32_t color);
+  void set_component_pressed_font_color(const char *component, uint16_t color);
   /**
    * Set the pressed font color of a component.
    * @param component The component name.
@@ -273,9 +364,8 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    * it.set_component_pressed_font_color("button", "RED");
    * ```
    *
-   * This will change the pressed font color of the component `button` to a blue color.
-   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
-   * Nextion HMI colors.
+   * This will change the pressed font color of the component `button` to a red color.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void set_component_pressed_font_color(const char *component, const char *color);
   /**
@@ -285,12 +375,10 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.set_component_pressed_font_color("button", color);
+   * it.set_component_pressed_font_color("button", Color::BLACK);
    * ```
    *
-   * This will change the pressed font color of the component `button` to a blue color.
-   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
-   * Nextion HMI colors.
+   * This will change the pressed font color of the component `button` to black.
    */
   void set_component_pressed_font_color(const char *component, Color color) override;
   /**
@@ -420,6 +508,25 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    * Displays the picture who has the id `2` at the x coordinates `15` and y coordinates `25`.
    */
   void display_picture(int picture_id, int x_start, int y_start);
+  /**
+   * Fill a rectangle with a color.
+   * @param x1 The starting x coordinate.
+   * @param y1 The starting y coordinate.
+   * @param width The width to draw.
+   * @param height The height to draw.
+   * @param color The color to draw with (number).
+   *
+   * Example:
+   * ```cpp
+   * fill_area(50, 50, 100, 100, 63488);
+   * ```
+   *
+   * Fills an area that starts at x coordinate `50` and y coordinate `50` with a height of `100` and width of `100` with
+   * the red color.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
+   */
+  void fill_area(int x1, int y1, int width, int height, uint16_t color);
   /**
    * Fill a rectangle with a color.
    * @param x1 The starting x coordinate.
@@ -434,8 +541,8 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    * ```
    *
    * Fills an area that starts at x coordinate `50` and y coordinate `50` with a height of `100` and width of `100` with
-   * the color of blue. Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to
-   * convert color codes to Nextion HMI colors
+   * the red color.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void fill_area(int x1, int y1, int width, int height, const char *color);
   /**
@@ -448,14 +555,33 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * fill_area(50, 50, 100, 100, color);
+   * auto blue = Color(0, 0, 255);
+   * fill_area(50, 50, 100, 100, blue);
    * ```
    *
    * Fills an area that starts at x coordinate `50` and y coordinate `50` with a height of `100` and width of `100` with
-   * the color of blue. Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to
-   * convert color codes to Nextion HMI colors
+   * blue color.
    */
   void fill_area(int x1, int y1, int width, int height, Color color);
+  /**
+   * Draw a line on the screen.
+   * @param x1 The starting x coordinate.
+   * @param y1 The starting y coordinate.
+   * @param x2 The ending x coordinate.
+   * @param y2 The ending y coordinate.
+   * @param color The color to draw with (number).
+   *
+   * Example:
+   * ```cpp
+   * it.line(50, 50, 75, 75, 63488);
+   * ```
+   *
+   * Makes a line that starts at x coordinate `50` and y coordinate `50` and ends at x coordinate `75` and y coordinate
+   * `75` with the red color.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
+   */
+  void line(int x1, int y1, int x2, int y2, uint16_t color);
   /**
    * Draw a line on the screen.
    * @param x1 The starting x coordinate.
@@ -466,13 +592,12 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.line(50, 50, 75, 75, "17013");
+   * it.line(50, 50, 75, 75, "BLUE");
    * ```
    *
    * Makes a line that starts at x coordinate `50` and y coordinate `50` and ends at x coordinate `75` and y coordinate
-   * `75` with the color of blue. Use this [color
-   * picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to Nextion HMI
-   * colors.
+   * `75` with the blue color.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void line(int x1, int y1, int x2, int y2, const char *color);
   /**
@@ -485,15 +610,33 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.line(50, 50, 75, 75, "17013");
+   * auto blue = Color(0, 0, 255);
+   * it.line(50, 50, 75, 75, blue);
    * ```
    *
    * Makes a line that starts at x coordinate `50` and y coordinate `50` and ends at x coordinate `75` and y coordinate
-   * `75` with the color of blue. Use this [color
-   * picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to Nextion HMI
-   * colors.
+   * `75` with blue color.
    */
   void line(int x1, int y1, int x2, int y2, Color color);
+  /**
+   * Draw a rectangle outline.
+   * @param x1 The starting x coordinate.
+   * @param y1 The starting y coordinate.
+   * @param width The width of the rectangle.
+   * @param height The height of the rectangle.
+   * @param color The color to draw with (number).
+   *
+   * Example:
+   * ```cpp
+   * it.rectangle(25, 35, 40, 50, 63488);
+   * ```
+   *
+   * Makes a outline of a rectangle that starts at x coordinate `25` and y coordinate `35` and has a width of `40` and a
+   * length of `50` with the red color.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
+   */
+  void rectangle(int x1, int y1, int width, int height, uint16_t color);
   /**
    * Draw a rectangle outline.
    * @param x1 The starting x coordinate.
@@ -504,13 +647,12 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.rectangle(25, 35, 40, 50, "17013");
+   * it.rectangle(25, 35, 40, 50, "BLUE");
    * ```
    *
    * Makes a outline of a rectangle that starts at x coordinate `25` and y coordinate `35` and has a width of `40` and a
-   * length of `50` with color of blue. Use this [color
-   * picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to Nextion HMI
-   * colors.
+   * length of `50` with the blue color.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void rectangle(int x1, int y1, int width, int height, const char *color);
   /**
@@ -523,21 +665,31 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.rectangle(25, 35, 40, 50, "17013");
+   * auto blue = Color(0, 0, 255);
+   * it.rectangle(25, 35, 40, 50, blue);
    * ```
    *
    * Makes a outline of a rectangle that starts at x coordinate `25` and y coordinate `35` and has a width of `40` and a
-   * length of `50` with color of blue. Use this [color
-   * picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to Nextion HMI
-   * colors.
+   * length of `50` with blue color.
    */
   void rectangle(int x1, int y1, int width, int height, Color color);
+  /**
+   * Draw a circle outline
+   * @param center_x The center x coordinate.
+   * @param center_y The center y coordinate.
+   * @param radius The circle radius.
+   * @param color The color to draw with (number).
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
+   */
+  void circle(int center_x, int center_y, int radius, uint16_t color);
   /**
    * Draw a circle outline
    * @param center_x The center x coordinate.
    * @param center_y The center y coordinate.
    * @param radius The circle radius.
    * @param color The color to draw with (as a string).
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void circle(int center_x, int center_y, int radius, const char *color);
   /**
@@ -548,6 +700,23 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    * @param color The color to draw with (as Color).
    */
   void circle(int center_x, int center_y, int radius, Color color);
+  /**
+   * Draw a filled circled.
+   * @param center_x The center x coordinate.
+   * @param center_y The center y coordinate.
+   * @param radius The circle radius.
+   * @param color The color to draw with (number).
+   *
+   * Example:
+   * ```cpp
+   * it.filled_cricle(25, 25, 10, 63488);
+   * ```
+   *
+   * Makes a filled circle at the x coordinate `25` and y coordinate `25` with a radius of `10` with the red color.
+   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
+   * Nextion HMI colors.
+   */
+  void filled_circle(int center_x, int center_y, int radius, uint16_t color);
   /**
    * Draw a filled circled.
    * @param center_x The center x coordinate.
@@ -557,12 +726,11 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.filled_cricle(25, 25, 10, "17013");
+   * it.filled_cricle(25, 25, 10, "BLUE");
    * ```
    *
-   * Makes a filled circle at the x coordinate `25` and y coordinate `25` with a radius of `10` with a color of blue.
-   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
-   * Nextion HMI colors.
+   * Makes a filled circle at the x coordinate `25` and y coordinate `25` with a radius of `10` with the blue color.
+   * Use [Nextion Instruction Set](https://nextion.tech/instruction-set/#s5) for a list of Nextion HMI colors constants.
    */
   void filled_circle(int center_x, int center_y, int radius, const char *color);
   /**
@@ -574,12 +742,11 @@ class Nextion : public NextionBase, public PollingComponent, public uart::UARTDe
    *
    * Example:
    * ```cpp
-   * it.filled_cricle(25, 25, 10, color);
+   * auto blue = Color(0, 0, 255);
+   * it.filled_cricle(25, 25, 10, blue);
    * ```
    *
-   * Makes a filled circle at the x coordinate `25` and y coordinate `25` with a radius of `10` with a color of blue.
-   * Use this [color picker](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to convert color codes to
-   * Nextion HMI colors.
+   * Makes a filled circle at the x coordinate `25` and y coordinate `25` with a radius of `10` with blue color.
    */
   void filled_circle(int center_x, int center_y, int radius, Color color);
 
diff --git a/esphome/components/nextion/nextion_base.h b/esphome/components/nextion/nextion_base.h
index ffc431ed13..b5729a1df1 100644
--- a/esphome/components/nextion/nextion_base.h
+++ b/esphome/components/nextion/nextion_base.h
@@ -39,6 +39,8 @@ class NextionBase {
 
   virtual void set_component_background_color(const char *component, Color color) = 0;
   virtual void set_component_pressed_background_color(const char *component, Color color) = 0;
+  virtual void set_component_foreground_color(const char *component, Color color) = 0;
+  virtual void set_component_pressed_foreground_color(const char *component, Color color) = 0;
   virtual void set_component_font_color(const char *component, Color color) = 0;
   virtual void set_component_pressed_font_color(const char *component, Color color) = 0;
   virtual void set_component_font(const char *component, uint8_t font_id) = 0;
diff --git a/esphome/components/nextion/nextion_commands.cpp b/esphome/components/nextion/nextion_commands.cpp
index 35530d1a7f..0722ed6f4e 100644
--- a/esphome/components/nextion/nextion_commands.cpp
+++ b/esphome/components/nextion/nextion_commands.cpp
@@ -53,9 +53,9 @@ void Nextion::set_protocol_reparse_mode(bool active_mode) {
   this->write_array(to_send, sizeof(to_send));
 }
 
-// Set Colors
-void Nextion::set_component_background_color(const char *component, uint32_t color) {
-  this->add_no_result_to_queue_with_printf_("set_component_background_color", "%s.bco=%" PRIu32, component, color);
+// Set Colors - Background
+void Nextion::set_component_background_color(const char *component, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("set_component_background_color", "%s.bco=%" PRIu16, component, color);
 }
 
 void Nextion::set_component_background_color(const char *component, const char *color) {
@@ -67,8 +67,9 @@ void Nextion::set_component_background_color(const char *component, Color color)
                                             display::ColorUtil::color_to_565(color));
 }
 
-void Nextion::set_component_pressed_background_color(const char *component, uint32_t color) {
-  this->add_no_result_to_queue_with_printf_("set_component_pressed_background_color", "%s.bco2=%" PRIu32, component,
+// Set Colors - Background (pressed)
+void Nextion::set_component_pressed_background_color(const char *component, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("set_component_pressed_background_color", "%s.bco2=%" PRIu16, component,
                                             color);
 }
 
@@ -81,16 +82,38 @@ void Nextion::set_component_pressed_background_color(const char *component, Colo
                                             display::ColorUtil::color_to_565(color));
 }
 
-void Nextion::set_component_pic(const char *component, uint8_t pic_id) {
-  this->add_no_result_to_queue_with_printf_("set_component_pic", "%s.pic=%d", component, pic_id);
+// Set Colors - Foreground
+void Nextion::set_component_foreground_color(const char *component, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("set_component_foreground_color", "%s.pco=%" PRIu16, component, color);
 }
 
-void Nextion::set_component_picc(const char *component, uint8_t pic_id) {
-  this->add_no_result_to_queue_with_printf_("set_component_pic", "%s.picc=%d", component, pic_id);
+void Nextion::set_component_foreground_color(const char *component, const char *color) {
+  this->add_no_result_to_queue_with_printf_("set_component_foreground_color", "%s.pco=%s", component, color);
 }
 
-void Nextion::set_component_font_color(const char *component, uint32_t color) {
-  this->add_no_result_to_queue_with_printf_("set_component_font_color", "%s.pco=%" PRIu32, component, color);
+void Nextion::set_component_foreground_color(const char *component, Color color) {
+  this->add_no_result_to_queue_with_printf_("set_component_foreground_color", "%s.pco=%d", component,
+                                            display::ColorUtil::color_to_565(color));
+}
+
+// Set Colors - Foreground (pressed)
+void Nextion::set_component_pressed_foreground_color(const char *component, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("set_component_pressed_foreground_color", "%s.pco2=%" PRIu16, component,
+                                            color);
+}
+
+void Nextion::set_component_pressed_foreground_color(const char *component, const char *color) {
+  this->add_no_result_to_queue_with_printf_("set_component_pressed_foreground_color", " %s.pco2=%s", component, color);
+}
+
+void Nextion::set_component_pressed_foreground_color(const char *component, Color color) {
+  this->add_no_result_to_queue_with_printf_("set_component_pressed_foreground_color", "%s.pco2=%d", component,
+                                            display::ColorUtil::color_to_565(color));
+}
+
+// Set Colors - Font
+void Nextion::set_component_font_color(const char *component, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("set_component_font_color", "%s.pco=%" PRIu16, component, color);
 }
 
 void Nextion::set_component_font_color(const char *component, const char *color) {
@@ -102,8 +125,9 @@ void Nextion::set_component_font_color(const char *component, Color color) {
                                             display::ColorUtil::color_to_565(color));
 }
 
-void Nextion::set_component_pressed_font_color(const char *component, uint32_t color) {
-  this->add_no_result_to_queue_with_printf_("set_component_pressed_font_color", "%s.pco2=%" PRIu32, component, color);
+// Set Colors - Font (pressed)
+void Nextion::set_component_pressed_font_color(const char *component, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("set_component_pressed_font_color", "%s.pco2=%" PRIu16, component, color);
 }
 
 void Nextion::set_component_pressed_font_color(const char *component, const char *color) {
@@ -115,6 +139,15 @@ void Nextion::set_component_pressed_font_color(const char *component, Color colo
                                             display::ColorUtil::color_to_565(color));
 }
 
+// Set picture
+void Nextion::set_component_pic(const char *component, uint8_t pic_id) {
+  this->add_no_result_to_queue_with_printf_("set_component_pic", "%s.pic=%d", component, pic_id);
+}
+
+void Nextion::set_component_picc(const char *component, uint8_t pic_id) {
+  this->add_no_result_to_queue_with_printf_("set_component_pic", "%s.picc=%d", component, pic_id);
+}
+
 void Nextion::set_component_text_printf(const char *component, const char *format, ...) {
   va_list arg;
   va_start(arg, format);
@@ -193,6 +226,10 @@ void Nextion::display_picture(int picture_id, int x_start, int y_start) {
   this->add_no_result_to_queue_with_printf_("display_picture", "pic %d, %d, %d", x_start, y_start, picture_id);
 }
 
+void Nextion::fill_area(int x1, int y1, int width, int height, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("fill_area", "fill %d,%d,%d,%d,%" PRIu16, x1, y1, width, height, color);
+}
+
 void Nextion::fill_area(int x1, int y1, int width, int height, const char *color) {
   this->add_no_result_to_queue_with_printf_("fill_area", "fill %d,%d,%d,%d,%s", x1, y1, width, height, color);
 }
@@ -202,6 +239,10 @@ void Nextion::fill_area(int x1, int y1, int width, int height, Color color) {
                                             display::ColorUtil::color_to_565(color));
 }
 
+void Nextion::line(int x1, int y1, int x2, int y2, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("line", "line %d,%d,%d,%d,%" PRIu16, x1, y1, x2, y2, color);
+}
+
 void Nextion::line(int x1, int y1, int x2, int y2, const char *color) {
   this->add_no_result_to_queue_with_printf_("line", "line %d,%d,%d,%d,%s", x1, y1, x2, y2, color);
 }
@@ -211,6 +252,11 @@ void Nextion::line(int x1, int y1, int x2, int y2, Color color) {
                                             display::ColorUtil::color_to_565(color));
 }
 
+void Nextion::rectangle(int x1, int y1, int width, int height, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("draw", "draw %d,%d,%d,%d,%" PRIu16, x1, y1, x1 + width, y1 + height,
+                                            color);
+}
+
 void Nextion::rectangle(int x1, int y1, int width, int height, const char *color) {
   this->add_no_result_to_queue_with_printf_("draw", "draw %d,%d,%d,%d,%s", x1, y1, x1 + width, y1 + height, color);
 }
@@ -220,6 +266,10 @@ void Nextion::rectangle(int x1, int y1, int width, int height, Color color) {
                                             display::ColorUtil::color_to_565(color));
 }
 
+void Nextion::circle(int center_x, int center_y, int radius, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("cir", "cir %d,%d,%d,%" PRIu16, center_x, center_y, radius, color);
+}
+
 void Nextion::circle(int center_x, int center_y, int radius, const char *color) {
   this->add_no_result_to_queue_with_printf_("cir", "cir %d,%d,%d,%s", center_x, center_y, radius, color);
 }
@@ -229,6 +279,10 @@ void Nextion::circle(int center_x, int center_y, int radius, Color color) {
                                             display::ColorUtil::color_to_565(color));
 }
 
+void Nextion::filled_circle(int center_x, int center_y, int radius, uint16_t color) {
+  this->add_no_result_to_queue_with_printf_("cirs", "cirs %d,%d,%d,%" PRIu16, center_x, center_y, radius, color);
+}
+
 void Nextion::filled_circle(int center_x, int center_y, int radius, const char *color) {
   this->add_no_result_to_queue_with_printf_("cirs", "cirs %d,%d,%d,%s", center_x, center_y, radius, color);
 }
diff --git a/esphome/components/nextion/nextion_component.cpp b/esphome/components/nextion/nextion_component.cpp
index bbb2cf6cb2..cfb4e3600c 100644
--- a/esphome/components/nextion/nextion_component.cpp
+++ b/esphome/components/nextion/nextion_component.cpp
@@ -99,11 +99,11 @@ void NextionComponent::update_component_settings(bool force_update) {
     this->bco2_needs_update_ = false;
   }
   if (this->pco_needs_update_ || (force_update && this->pco_is_set_)) {
-    this->nextion_->set_component_font_color(this->variable_name_.c_str(), this->pco_);
+    this->nextion_->set_component_foreground_color(this->variable_name_.c_str(), this->pco_);
     this->pco_needs_update_ = false;
   }
   if (this->pco2_needs_update_ || (force_update && this->pco2_is_set_)) {
-    this->nextion_->set_component_pressed_font_color(this->variable_name_.c_str(), this->pco2_);
+    this->nextion_->set_component_pressed_foreground_color(this->variable_name_.c_str(), this->pco2_);
     this->pco2_needs_update_ = false;
   }