From 93369d62ec4017eaa605a365982d078ec9bb4e05 Mon Sep 17 00:00:00 2001 From: Edward Firmo <94725493+edwardtfn@users.noreply.github.com> Date: Sat, 24 Feb 2024 00:01:30 +0100 Subject: [PATCH] `component_visibility` replaces `component_hide` and `component_show` services Optimization --- docs/api.md | 82 ++++++++------------ esphome/nspanel_esphome_core.yaml | 119 +++++++++--------------------- nspanel_blueprint.yaml | 30 +++++--- 3 files changed, 86 insertions(+), 145 deletions(-) diff --git a/docs/api.md b/docs/api.md index be3023e2d..7f0af8f3a 100644 --- a/docs/api.md +++ b/docs/api.md @@ -6,10 +6,9 @@ This document provides details on custom services designed for integration with - [Button Service (`button`)](#button-service-button): Configures properties and state of buttons on a specified button page. - [Command Service (`command`)](#command-service-command): Sends a custom command directly to the display. - [Component Color Service (`component_color`)](#component-color-service-component_color): Changes the foreground color of a specified component on the display. - - [Component Hide Service (`component_hide`)](#component-hide-service-component_hide): Hides a specified component on the display. - - [Component Show Service (`component_show`)](#component-show-service-component_show): Shows a previously hidden component on the display. - [Component Text Service (`component_text`)](#component-text-service-component_text): Updates the text of a specified component on the display. - [Component Value Service (`component_val`)](#component-value-service-component_val): Updates the value of a specified component on the display. + - [Component Visibility Service (`component_visibility`)](#component-hide-service-component_visibility): Hides or shows a specified component on the display. - [Entity Details Show Service (`entity_details_show`)](#entity-details-show-service-entity_details_show): Displays detailed information for a specific entity. - [Icon Service (`icon`)](#icon-service-icon): Updates a chip or custom button's icon, color, and visibility. - [Initialization Service: Global (`init_global`)](#initialization-service-init_global): Transfers global settings on initialization. @@ -51,10 +50,10 @@ If you send anything different, the conversion to the RGB565 used by Nextion wil | [`button`](#button-service-button) | [Button Service](#button-service-button) | Configures properties and state of buttons on a specified button page. | | [`command`](#command-service-command) | [Command Service](#command-service-command) | Sends a custom command directly to the display. | | [`component_color`](#component-color-service-component_color) | [Component Color Service](#component-color-service-component_color) | Changes the foreground color of a specified component on the display. | -| [`component_hide`](#component-hide-service-component_hide) | [Component Hide Service](#component-hide-service-component_hide) | Hides a specified component on the display. | | [`component_show`](#component-show-service-component_show) | [Component Show Service](#component-show-service-component_show) | Shows a previously hidden component on the display. | | [`component_text`](#component-text-service-component_text) | [Component Text Service](#component-text-service-component_text) | Updates the text of a specified component on the display. | | [`component_val`](#component-value-service-component_val) | [Component Value Service](#component-value-service-component_val) | Updates the value of a specified component on the display. | +| [`component_visibility`](#component-hide-service-component_visibility) | [Component Visibility Service](#component-hide-service-component_isibility) | Hides or shows a specified component on the display. | | [`entity_details_show`](#entity-details-show-service-entity_details_show) | [Entity Details Show Service](#entity-details-show-service-entity_details_show) | Displays detailed information for a specific entity. | | [`icon`](#icon-service-icon) | [Icon Service](#icon-service-icon) | Updates a chip or custom button's icon, color, and visibility. | | [`init_global`](#initialization-service-init_global) | [Initialization Service](#initialization-service-init_global) | Transfers global settings on initialization. | @@ -152,54 +151,6 @@ data: > > Ensure the `id` and color parameters accurately target and define the new color for the component. -### Component Hide Service: `component_hide` -Hides a specified component on the display, allowing for dynamic interface changes. - -**Usage:** -This service is ideal for creating interactive user interfaces that adapt by hiding certain elements based on user actions, conditions, or events. - -**Parameters:** -- `id` (string): Identifier of the component to be hidden. It is crucial that this matches the component's ID in your display layout to ensure the correct element is hidden. - -**Home Assistant Example:** -```yaml -service: esphome._component_hide -data: - id: "date" # Hides the date display on Home page -``` - -> [!NOTE] -> Replace with your specific panel name as configured in Home Assistant to ensure correct service execution. -> -> Ensure the id matches the component on your display you wish to hide. - -> [!IMPORTANT] -> This command only works when the page is visible and cannot contain the page id in the component id. -> -> If the component being hidden is not part of the current page, the command will fail and an error message will be logged. - - -### Component Show Service: `component_show` -Makes a specified component visible on the display again, allowing for dynamic interface reversals. - -**Usage:** -This service is essential for creating interactive user interfaces that can show elements previously hidden, -based on user actions, conditions, or events, thereby restoring elements to the user interface as needed. - -**Parameters:** -- `id` (string): Identifier of the component to be shown. It's crucial that this matches the component's ID in your display layout to ensure the correct element is made visible. - -**Home Assistant Example:** -```yaml -service: esphome._component_show -data: - id: "date" # Shows the date display on the Home page if it was previously hidden -``` -> [!NOTE] -> Replace `` with your specific panel name as configured in Home Assistant to ensure correct service execution. -> -> Ensure the `id` precisely matches the component on your display you wish to make visible again. - ### Component Text Service: `component_text` Updates the text of a specified component on the display, enabling dynamic text content updates. @@ -244,6 +195,35 @@ data: > > Ensure the `id` accurately matches the component on your display to successfully update its value. +### Component Visibility Service: `component_visibility` +Hides or shows a specified component on the display, allowing for dynamic interface changes. + +**Usage:** +This service is ideal for creating interactive user interfaces that adapt by hiding or showing certain elements based on user actions, conditions, or events. + +**Parameters:** +- `id` (string): Identifier of the component to be hidden/shown. It is crucial that this matches the component's ID in your display layout to ensure the correct element is hidden/shown. +- `visible` (bool): Set to true to show the component, or false to hide it. + +**Home Assistant Example:** +```yaml +service: esphome._component_hide +data: + id: "date" # Hides the date display on Home page + visible: false +``` + +> [!NOTE] +> Replace with your specific panel name as configured in Home Assistant to ensure correct service execution. +> +> Ensure the id matches the component on your display you wish to hide or show. + +> [!IMPORTANT] +> This command only works when the page is visible. +> +> If the component being hidden/shown is not part of the current page, the command will fail and an error message will be logged. + + ### Entity Details Show Service: `entity_details_show` This service is designed to display detailed information about a specific entity within the panel's interface. It enables users to navigate to a dedicated page showing extensive details about an entity, such as a light or a climate, diff --git a/esphome/nspanel_esphome_core.yaml b/esphome/nspanel_esphome_core.yaml index 4c56ad4ef..93a87b358 100644 --- a/esphome/nspanel_esphome_core.yaml +++ b/esphome/nspanel_esphome_core.yaml @@ -307,56 +307,6 @@ api: if (!id(is_uploading_tft)) disp1->set_component_font_color(id.c_str(), esphome::display::ColorUtil::color_to_565(esphome::Color(color[0], color[1], color[2]))); - - # Component Hide Service - # Allows for dynamic interface changes by hiding specified components on the display. - # - # Usage: Ideal for interactive user interfaces that need to adapt by hiding elements based on user actions, conditions, or events. - # - # Parameters: - # - id (string): Identifier of the component to be hidden. Ensure this matches the component's ID in your display layout. - # - # Example service call: - # service: esphome._component_hide - # data: - # id: "date" # Example: Hides the date display on the Home page. - # - # NOTE: Replace with the specific panel name in your Home Assistant setup to ensure correct service execution. - # Ensure the 'id' matches the component on your display you wish to hide. - # - # IMPORTANT: This service functions only when the target page is visible. The component id should not include the page id. - # If the component being hidden is not on the current page, the command will fail, and an error message will be logged. - - service: component_hide - variables: - id: string - then: - - lambda: |- - if (!id(is_uploading_tft)) - set_component_visibility->execute(id.c_str(), false); - - # Component Show Service - # Enables dynamic interface changes by making specified components visible on the display again. - # - # Usage: Perfect for interactive user interfaces that adapt by showing elements based on user actions, conditions, or events. - # - # Parameters: - # - id (string): The component's identifier to be made visible. This must match your display's component ID accurately. - # - # Example service call: - # service: esphome._component_show - # data: - # id: "date" # Example: Makes the date display visible on the Home page if previously hidden. - # - # NOTE: Replace with the specific panel name in your Home Assistant setup to ensure correct service execution. - # Confirm the 'id' correctly targets the component you wish to show for effective interface adaptation. - - service: component_show - variables: - id: string - then: - - lambda: |- - if (!id(is_uploading_tft)) - set_component_visibility->execute(id.c_str(), true); - # Component Text Service # Updates text content for a specified component on the display, ideal for dynamic updates. # @@ -410,7 +360,36 @@ api: if (!id(is_uploading_tft)) disp1->set_component_value(id.c_str(), val); - # entity_details_show Service - PENDING FULL IMPLEMENTATION + # Component Visibility Service + # Allows for dynamic interface changes by hiding or showing specified components on the display. + # + # Usage: Ideal for interactive user interfaces that need to adapt by hiding or showing elements based on user actions, conditions, or events. + # + # Parameters: + # - id (string): Identifier of the component to be hidden/shown. Ensure this matches the component's ID in your display layout. + # - visible (boolean): Set to true to show the component, or false to hide it. + # + # Example service call: + # service: esphome._component_hide + # data: + # id: "date" # Example: Hides the date display on the Home page. + # visible: false # Set to true to show the component, or false to hide it. + # + # NOTE: Replace with the specific panel name in your Home Assistant setup to ensure correct service execution. + # Ensure the 'id' matches the component on your display you wish to hide/show. + # + # IMPORTANT: This service functions only when the target page is visible. + # If the component being hidden/shown is not on the current page, the command will fail, and an error message will be logged. + - service: component_visibility + variables: + id: string + visible: bool + then: + - lambda: |- + if (!id(is_uploading_tft)) + set_component_visibility->execute(id.c_str(), visible); + + # entity_details_show Service # Enables navigation to a page displaying detailed information about a specific entity and defines a clear path for returning to a previous page, # enhancing user interaction within the interface. # @@ -634,13 +613,13 @@ api: // Chips icon size ESP_LOGV(TAG, "Chips size"); - disp1->send_command_printf("home.chip_relay1.font=%" PRIu8, chip_font); - disp1->send_command_printf("home.chip_relay2.font=%" PRIu8, chip_font); - disp1->send_command_printf("home.chip_climate.font=%" PRIu8, chip_font); + disp1->send_command_printf("home.chip_relay1.font=%" PRIi32, chip_font); + disp1->send_command_printf("home.chip_relay2.font=%" PRIi32, chip_font); + disp1->send_command_printf("home.chip_climate.font=%" PRIi32, chip_font); for (int i = 1; i <= 7; ++i) { - disp1->send_command_printf("home.chip%02d.font=%" PRIu8, i, chip_font); + disp1->send_command_printf("home.chip%02d.font=%" PRIi32, i, chip_font); } - disp1->send_command_printf("home.wifi_icon.font=%" PRIu8, chip_font); + disp1->send_command_printf("home.wifi_icon.font=%" PRIi32, chip_font); id(home_chip_font_id) = chip_font; // Custom buttons icon size @@ -1257,7 +1236,7 @@ api: - rtttl.play: rtttl: !lambda 'return tone;' - # Value Service ## PENDING FULL IMPLEMENTATION + # Value Service # Updates an entity to display specific values with dynamic icons, names, and color codes. # # Usage: Perfect for entities requiring dynamic information display like sensor readings or state values. @@ -1340,30 +1319,8 @@ api: } } - #### DEPRECATED Service to set the entities #### USE SERVICE VALUE INSTEAD - MUST FIND A WAY TO HANDLE ALIGNMENT ON INIT - - service: set_entity - variables: - ent_id: string - ent_icon: string - ent_label: string - ent_value: string - ent_value_xcen: string - then: - - lambda: |- - if (not id(is_uploading_tft)) { - std::string enticon = ent_id.c_str() + std::string("_pic"); - std::string entlabel = ent_id.c_str() + std::string("_label"); - std::string entxcen = ent_id.c_str() + std::string(".xcen=") + ent_value_xcen.c_str(); - disp1->set_component_text_printf(enticon.c_str(), "%s", ent_icon.c_str()); - if (strcmp(ent_icon.c_str(), "0") != 0) disp1->set_component_text_printf(enticon.c_str(), "%s", ent_icon.c_str()); - disp1->set_component_text_printf(entlabel.c_str(), "%s", ent_label.c_str()); - disp1->set_component_text_printf(ent_id.c_str(), "%s", ent_value.c_str()); - if (strcmp(ent_value_xcen.c_str(), "0") != 0) disp1->send_command_printf("%s", entxcen.c_str()); - } # yamllint enable rule:comments-indentation -debug: - ##### START - DISPLAY START CONFIGURATION ##### display: - id: disp1 @@ -1891,10 +1848,6 @@ select: ##### START - SENSOR CONFIGURATION ##### sensor: - - platform: debug - free: - name: "Heap Free" - ##### Blueprint status ##### # Bit # Settings step # # 0 # reserved # diff --git a/nspanel_blueprint.yaml b/nspanel_blueprint.yaml index e9f466293..69d3992b5 100644 --- a/nspanel_blueprint.yaml +++ b/nspanel_blueprint.yaml @@ -3427,10 +3427,9 @@ variables: command: 'esphome.{{ nspanel_name }}_command' component: color: 'esphome.{{ nspanel_name }}_component_color' - hide: 'esphome.{{ nspanel_name }}_component_hide' - show: 'esphome.{{ nspanel_name }}_component_show' text: 'esphome.{{ nspanel_name }}_component_text' value: 'esphome.{{ nspanel_name }}_component_val' + visibility: 'esphome.{{ nspanel_name }}_component_visibility' detailed_entity: 'esphome.{{ nspanel_name }}_entity_details_show' icon: 'esphome.{{ nspanel_name }}_icon' init: @@ -7508,9 +7507,10 @@ action: else: - if: '{{ page.current == page.home }}' then: - - service: '{{ nspanel.service.component.hide }}' + - service: '{{ nspanel.service.component.visibility }}' data: id: '{{ repeat.item.component }}' + visible: false continue_on_error: true ###### Climate chip ###### @@ -7616,9 +7616,10 @@ action: continue_on_error: true else: - &hide-home_page-status_bar_chip - service: '{{ nspanel.service.component.hide }}' + service: '{{ nspanel.service.component.visibility }}' data: id: 'home.{{ repeat.item.component }}' + visible: false continue_on_error: true else: - *hide-home_page-status_bar_chip @@ -8118,30 +8119,35 @@ action: data: cmd: tempslider.maxval={{ max_mireds }} continue_on_error: true - - service: '{{ nspanel.service.component.show }}' + - service: '{{ nspanel.service.component.visibility }}' data: id: temp_button + visible: true continue_on_error: true - - service: '{{ nspanel.service.component.show }}' + - service: '{{ nspanel.service.component.visibility }}' data: id: temp_value_2 + visible: true continue_on_error: true - - service: '{{ nspanel.service.component.show }}' + - service: '{{ nspanel.service.component.visibility }}' data: id: temp_touch + visible: true continue_on_error: true ##### Hide color button when not supported ##### - if: '{{ color_mode_color }}' then: - - service: '{{ nspanel.service.component.show }}' + - service: '{{ nspanel.service.component.visibility }}' data: id: color_button continue_on_error: true - - service: '{{ nspanel.service.component.show }}' + visible: true + - service: '{{ nspanel.service.component.visibility }}' data: id: color_touch continue_on_error: true + visible: true ## PAGE COVER ## - alias: Cover settings page @@ -8601,9 +8607,10 @@ action: txt: '{{ all_icons[repeat.item.icon] }}' continue_on_error: true ### Enable button click ### - - service: '{{ nspanel.service.component.show }}' + - service: '{{ nspanel.service.component.visibility }}' data: id: '{{ repeat.item.component }}' + visible: true continue_on_error: true ##### Climate custom buttons ##### @@ -8645,9 +8652,10 @@ action: txt: '{{ entity.icon }}' continue_on_error: true ### Enable button click ### - - service: '{{ nspanel.service.component.show }}' + - service: '{{ nspanel.service.component.visibility }}' data: id: '{{ repeat.item.component }}' + visible: true continue_on_error: true ## ENTITY PAGES 01 - 04 ##