mirror/esphome
1
0
Fork 0
mirror of https://github.com/esphome/esphome.git synced 2026-02-18 15:35:59 -07:00
Code Issues Packages Projects Releases Wiki Activity

[lvgl] Add Home Assistant style card widgets

Browse Source 
Add HA-style card widgets for LVGL that provide simplified configuration
compared to building complex UIs from individual LVGL widgets:

- gauge_card: Circular arc gauge with value display
- button_card: Button with icon and label
- tile_card: Modern tile-style widget
- entity_card: Simple entity state display
- thermostat_card: Climate control interface

Each card is a compound widget that creates and manages internal LVGL
objects (arcs, labels, buttons) with sensible defaults and consistent
styling, reducing YAML complexity for common UI patterns.

Implements feature request from discussion #3404
This commit is contained in:
Claude
2025-11-19 22:07:01 +00:00
parent 4cdab4e2d8
commit f8e0ce7c6c
8 changed files with 1126 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
esphome/components/lvgl/ha_cards.h Normal file
View File

@@ -0,0 +1,279 @@
#pragma once
#include "esphome/core/defines.h"
#ifdef USE_LVGL
#include "lvgl_esphome.h"
namespace esphome {
namespace lvgl {
/**
* Gauge Card - A circular arc gauge with optional value/name labels
*/
class LvGaugeCardType : public LvCompound {
public:
void set_obj(lv_obj_t *obj) {
LvCompound::set_obj(obj);
}
void create_arc() {
this->arc_ = lv_arc_create(this->obj);
lv_obj_set_size(this->arc_, LV_PCT(100), LV_PCT(100));
lv_obj_center(this->arc_);
}
lv_obj_t *get_arc() { return this->arc_; }
void create_value_label() {
this->value_label_ = lv_label_create(this->obj);
lv_obj_center(this->value_label_);
}
lv_obj_t *get_value_label() { return this->value_label_; }
void create_name_label() {
this->name_label_ = lv_label_create(this->obj);
lv_obj_align(this->name_label_, LV_ALIGN_BOTTOM_MID, 0, -10);
}
lv_obj_t *get_name_label() { return this->name_label_; }
void set_value(float value) {
this->value_ = value;
if (this->arc_ != nullptr) {
lv_arc_set_value(this->arc_, static_cast<int32_t>(value));
}
}
float get_value() { return this->value_; }
void update_value_label(float value, const char *format) {
if (this->value_label_ != nullptr) {
lv_label_set_text_fmt(this->value_label_, format, value);
}
}
protected:
lv_obj_t *arc_{nullptr};
lv_obj_t *value_label_{nullptr};
lv_obj_t *name_label_{nullptr};
float value_{0};
};
/**
* Button Card - A button with icon and label
*/
class LvButtonCardType : public LvCompound {
public:
void set_obj(lv_obj_t *obj) {
LvCompound::set_obj(obj);
}
void create_icon() {
this->icon_ = lv_img_create(this->obj);
}
lv_obj_t *get_icon() { return this->icon_; }
void create_label() {
this->label_ = lv_label_create(this->obj);
}
lv_obj_t *get_label() { return this->label_; }
void create_state_label() {
this->state_label_ = lv_label_create(this->obj);
}
lv_obj_t *get_state_label() { return this->state_label_; }
bool is_on() { return this->state_; }
void set_state(bool state) {
this->state_ = state;
if (state) {
lv_obj_add_state(this->obj, LV_STATE_CHECKED);
} else {
lv_obj_clear_state(this->obj, LV_STATE_CHECKED);
}
}
protected:
lv_obj_t *icon_{nullptr};
lv_obj_t *label_{nullptr};
lv_obj_t *state_label_{nullptr};
bool state_{false};
};
/**
* Tile Card - A modern tile-style widget
*/
class LvTileCardType : public LvCompound {
public:
void set_obj(lv_obj_t *obj) {
LvCompound::set_obj(obj);
}
void create_icon() {
this->icon_ = lv_img_create(this->obj);
}
lv_obj_t *get_icon() { return this->icon_; }
void create_name_label() {
this->name_label_ = lv_label_create(this->obj);
}
lv_obj_t *get_name_label() { return this->name_label_; }
void create_state_label() {
this->state_label_ = lv_label_create(this->obj);
}
lv_obj_t *get_state_label() { return this->state_label_; }
void set_state(bool state) {
this->state_ = state;
if (state) {
lv_obj_add_state(this->obj, LV_STATE_CHECKED);
} else {
lv_obj_clear_state(this->obj, LV_STATE_CHECKED);
}
}
bool is_on() { return this->state_; }
protected:
lv_obj_t *icon_{nullptr};
lv_obj_t *name_label_{nullptr};
lv_obj_t *state_label_{nullptr};
bool state_{false};
};
/**
* Entity Card - Simple entity state display
*/
class LvEntityCardType : public LvCompound {
public:
void set_obj(lv_obj_t *obj) {
LvCompound::set_obj(obj);
}
void create_icon() {
this->icon_ = lv_img_create(this->obj);
}
lv_obj_t *get_icon() { return this->icon_; }
void create_name_label() {
this->name_label_ = lv_label_create(this->obj);
}
lv_obj_t *get_name_label() { return this->name_label_; }
void create_value_label() {
this->value_label_ = lv_label_create(this->obj);
}
lv_obj_t *get_value_label() { return this->value_label_; }
void set_value(const char *value) {
if (this->value_label_ != nullptr) {
lv_label_set_text(this->value_label_, value);
}
}
protected:
lv_obj_t *icon_{nullptr};
lv_obj_t *name_label_{nullptr};
lv_obj_t *value_label_{nullptr};
};
/**
* Thermostat Card - Climate control interface
*/
class LvThermostatCardType : public LvCompound {
public:
void set_obj(lv_obj_t *obj) {
LvCompound::set_obj(obj);
}
void create_temperature_arc() {
this->temp_arc_ = lv_arc_create(this->obj);
}
lv_obj_t *get_temperature_arc() { return this->temp_arc_; }
void create_temperature_label() {
this->temp_label_ = lv_label_create(this->obj);
}
lv_obj_t *get_temperature_label() { return this->temp_label_; }
void create_setpoint_label() {
this->setpoint_label_ = lv_label_create(this->obj);
}
lv_obj_t *get_setpoint_label() { return this->setpoint_label_; }
void create_mode_buttons() {
this->mode_container_ = lv_obj_create(this->obj);
}
lv_obj_t *get_mode_container() { return this->mode_container_; }
void create_up_button() {
this->up_btn_ = lv_btn_create(this->obj);
lv_obj_t *label = lv_label_create(this->up_btn_);
lv_label_set_text(label, LV_SYMBOL_UP);
lv_obj_center(label);
}
lv_obj_t *get_up_button() { return this->up_btn_; }
void create_down_button() {
this->down_btn_ = lv_btn_create(this->obj);
lv_obj_t *label = lv_label_create(this->down_btn_);
lv_label_set_text(label, LV_SYMBOL_DOWN);
lv_obj_center(label);
}
lv_obj_t *get_down_button() { return this->down_btn_; }
void set_current_temperature(float temp) {
this->current_temp_ = temp;
if (this->temp_label_ != nullptr) {
lv_label_set_text_fmt(this->temp_label_, "%.1f°", temp);
}
}
float get_current_temperature() { return this->current_temp_; }
void set_target_temperature(float temp) {
this->target_temp_ = temp;
if (this->temp_arc_ != nullptr) {
lv_arc_set_value(this->temp_arc_, static_cast<int32_t>(temp * 10));
}
if (this->setpoint_label_ != nullptr) {
lv_label_set_text_fmt(this->setpoint_label_, "%.1f°", temp);
}
}
float get_target_temperature() { return this->target_temp_; }
protected:
lv_obj_t *temp_arc_{nullptr};
lv_obj_t *temp_label_{nullptr};
lv_obj_t *setpoint_label_{nullptr};
lv_obj_t *mode_container_{nullptr};
lv_obj_t *up_btn_{nullptr};
lv_obj_t *down_btn_{nullptr};
float current_temp_{0};
float target_temp_{20};
};
} // namespace lvgl
} // namespace esphome
#endif // USE_LVGL

3
esphome/components/lvgl/lvgl_esphome.h
View File

@@ -407,3 +407,6 @@ class LvKeyboardType : public key_provider::KeyProvider, public LvCompound {
#endif // USE_LVGL_KEYBOARD
} // namespace lvgl
} // namespace esphome
// Include HA card widget types - must be after LvCompound is defined
#include "ha_cards.h"

137
esphome/components/lvgl/widgets/button_card.py Normal file
View File

@@ -0,0 +1,137 @@
"""
Button Card Widget - A Home Assistant style button card for LVGL.
Displays a button with an icon and label, with optional state indicator.
"""
import esphome.codegen as cg
import esphome.config_validation as cv
from esphome.const import (
CONF_ICON,
CONF_ID,
CONF_NAME,
CONF_STATE,
)
from ..defines import (
CONF_MAIN,
CONF_SRC,
literal,
lvgl_ns,
)
from ..helpers import add_lv_use, lvgl_components_required
from ..lv_validation import lv_bool, lv_color, lv_image, lv_text
from ..lvcode import lv, lv_add, lv_obj
from ..types import LvBoolean, LvCompound, WidgetType
from . import Widget
CONF_BUTTON_CARD = "button_card"
CONF_ICON_COLOR = "icon_color"
CONF_ICON_ON_COLOR = "icon_on_color"
CONF_SHOW_STATE = "show_state"
CONF_STATE_TEXT_ON = "state_text_on"
CONF_STATE_TEXT_OFF = "state_text_off"
# Reference to C++ class
LvButtonCardType = lvgl_ns.class_("LvButtonCardType", LvCompound)
BUTTON_CARD_SCHEMA = cv.Schema(
{
cv.Optional(CONF_ICON): lv_image,
cv.Optional(CONF_NAME): lv_text,
cv.Optional(CONF_STATE, default=False): lv_bool,
cv.Optional(CONF_ICON_COLOR, default=0xFFFFFF): lv_color,
cv.Optional(CONF_ICON_ON_COLOR, default=0xFFD700): lv_color,
cv.Optional(CONF_SHOW_STATE, default=False): cv.boolean,
cv.Optional(CONF_STATE_TEXT_ON, default="On"): cv.string,
cv.Optional(CONF_STATE_TEXT_OFF, default="Off"): cv.string,
}
)
BUTTON_CARD_MODIFY_SCHEMA = cv.Schema(
{
cv.Optional(CONF_STATE): lv_bool,
cv.Optional(CONF_NAME): lv_text,
}
)
# LvType wrapper for the button card
lv_button_card_t = LvBoolean("LvButtonCardType", parents=(LvCompound,))
class ButtonCardType(WidgetType):
def __init__(self):
super().__init__(
CONF_BUTTON_CARD,
lv_button_card_t,
(CONF_MAIN,),
BUTTON_CARD_SCHEMA,
BUTTON_CARD_MODIFY_SCHEMA,
)
def get_uses(self):
return ("btn", "label", "img")
async def to_code(self, w: Widget, config):
"""Generate code for the button card widget."""
add_lv_use("btn", "label", "img")
var = w.var
obj = w.obj
# Only set up structure on initial creation
if CONF_ICON in config or CONF_NAME in config:
# Set up the container as a button with flex layout
lv_obj.add_flag(obj, literal("LV_OBJ_FLAG_CLICKABLE"))
lv_obj.set_flex_flow(obj, literal("LV_FLEX_FLOW_COLUMN"))
lv_obj.set_flex_align(
obj,
literal("LV_FLEX_ALIGN_CENTER"),
literal("LV_FLEX_ALIGN_CENTER"),
literal("LV_FLEX_ALIGN_CENTER"),
)
# Create icon if provided
if icon := config.get(CONF_ICON):
lv_add(var.create_icon())
icon_obj = var.get_icon()
icon_src = await lv_image.process(icon)
lv.img_set_src(icon_obj, icon_src)
# Set icon color
if icon_color := config.get(CONF_ICON_COLOR):
color = await lv_color.process(icon_color)
lv.obj_set_style_img_recolor(icon_obj, color, literal("LV_PART_MAIN"))
lv.obj_set_style_img_recolor_opa(
icon_obj, literal("LV_OPA_COVER"), literal("LV_PART_MAIN")
)
# Create label if name is provided
if name := config.get(CONF_NAME):
lv_add(var.create_label())
label_obj = var.get_label()
name_text = await lv_text.process(name)
lv.label_set_text(label_obj, name_text)
# Create state label if show_state is enabled
if config.get(CONF_SHOW_STATE, False):
lv_add(var.create_state_label())
state_label = var.get_state_label()
# Set initial state text
state_text = (
config.get(CONF_STATE_TEXT_OFF, "Off")
)
lv.label_set_text(state_label, literal(f'"{state_text}"'))
# Set the state
if (state := config.get(CONF_STATE)) is not None:
state_val = await lv_bool.process(state)
lv_add(var.set_state(state_val))
# Update state label if shown
if config.get(CONF_SHOW_STATE, False):
state_label = var.get_state_label()
# This would need to be conditional at runtime
# For now, just set the text based on config
button_card_spec = ButtonCardType()

131
esphome/components/lvgl/widgets/entity_card.py Normal file
View File

@@ -0,0 +1,131 @@
"""
Entity Card Widget - A Home Assistant style entity card for LVGL.
Displays an entity with icon, name, and value in a simple horizontal layout.
"""
import esphome.codegen as cg
import esphome.config_validation as cv
from esphome.const import (
CONF_ICON,
CONF_ID,
CONF_NAME,
CONF_VALUE,
)
from ..defines import (
CONF_MAIN,
literal,
lvgl_ns,
)
from ..helpers import add_lv_use
from ..lv_validation import lv_color, lv_image, lv_text
from ..lvcode import lv, lv_add, lv_obj
from ..types import LvCompound, LvText, WidgetType
from . import Widget
CONF_ENTITY_CARD = "entity_card"
CONF_ICON_COLOR = "icon_color"
# Reference to C++ class
LvEntityCardType = lvgl_ns.class_("LvEntityCardType", LvCompound)
ENTITY_CARD_SCHEMA = cv.Schema(
{
cv.Optional(CONF_ICON): lv_image,
cv.Optional(CONF_NAME): lv_text,
cv.Optional(CONF_VALUE): lv_text,
cv.Optional(CONF_ICON_COLOR, default=0x3498DB): lv_color,
}
)
ENTITY_CARD_MODIFY_SCHEMA = cv.Schema(
{
cv.Optional(CONF_VALUE): lv_text,
cv.Optional(CONF_NAME): lv_text,
}
)
# LvType wrapper for the entity card
lv_entity_card_t = LvText("LvEntityCardType", parents=(LvCompound,))
class EntityCardType(WidgetType):
def __init__(self):
super().__init__(
CONF_ENTITY_CARD,
lv_entity_card_t,
(CONF_MAIN,),
ENTITY_CARD_SCHEMA,
ENTITY_CARD_MODIFY_SCHEMA,
)
def get_uses(self):
return ("obj", "label", "img")
async def to_code(self, w: Widget, config):
"""Generate code for the entity card widget."""
add_lv_use("obj", "label", "img")
var = w.var
obj = w.obj
# Only set up structure on initial creation
if CONF_ICON in config or CONF_NAME in config or CONF_VALUE in config:
# Set up horizontal flex layout
lv_obj.set_flex_flow(obj, literal("LV_FLEX_FLOW_ROW"))
lv_obj.set_flex_align(
obj,
literal("LV_FLEX_ALIGN_SPACE_BETWEEN"),
literal("LV_FLEX_ALIGN_CENTER"),
literal("LV_FLEX_ALIGN_CENTER"),
)
# Set some padding
lv.obj_set_style_pad_all(obj, 10, literal("LV_PART_MAIN"))
lv.obj_set_style_pad_gap(obj, 10, literal("LV_PART_MAIN"))
# Create icon if provided
if icon := config.get(CONF_ICON):
lv_add(var.create_icon())
icon_obj = var.get_icon()
icon_src = await lv_image.process(icon)
lv.img_set_src(icon_obj, icon_src)
# Set icon color
if icon_color := config.get(CONF_ICON_COLOR):
color = await lv_color.process(icon_color)
lv.obj_set_style_img_recolor(icon_obj, color, literal("LV_PART_MAIN"))
lv.obj_set_style_img_recolor_opa(
icon_obj, literal("LV_OPA_COVER"), literal("LV_PART_MAIN")
)
# Create name label
if name := config.get(CONF_NAME):
lv_add(var.create_name_label())
name_label = var.get_name_label()
name_text = await lv_text.process(name)
lv.label_set_text(name_label, name_text)
# Make label take available space
lv_obj.set_flex_grow(name_label, 1)
# Create value label
if value := config.get(CONF_VALUE):
lv_add(var.create_value_label())
value_label = var.get_value_label()
value_text = await lv_text.process(value)
lv.label_set_text(value_label, value_text)
# Update value during modify
if CONF_VALUE in config and CONF_ICON not in config:
value_text = await lv_text.process(config[CONF_VALUE])
value_label = var.get_value_label()
lv.label_set_text(value_label, value_text)
# Update name during modify
if CONF_NAME in config and CONF_ICON not in config:
name_text = await lv_text.process(config[CONF_NAME])
name_label = var.get_name_label()
lv.label_set_text(name_label, name_text)
entity_card_spec = EntityCardType()

177
esphome/components/lvgl/widgets/gauge_card.py Normal file
View File

@@ -0,0 +1,177 @@
"""
Gauge Card Widget - A Home Assistant style gauge card for LVGL.
Displays a value in a circular arc gauge with optional value label in the center.
"""
import esphome.codegen as cg
import esphome.config_validation as cv
from esphome.const import (
CONF_FORMAT,
CONF_ID,
CONF_MAX_VALUE,
CONF_MIN_VALUE,
CONF_NAME,
CONF_UNIT_OF_MEASUREMENT,
CONF_VALUE,
)
from ..defines import (
CONF_END_ANGLE,
CONF_INDICATOR,
CONF_KNOB,
CONF_MAIN,
CONF_START_ANGLE,
CONF_WIDGETS,
literal,
lvgl_ns,
)
from ..helpers import add_lv_use, lvgl_components_required
from ..lv_validation import lv_color, lv_float, lv_int, lv_text, size
from ..lvcode import LocalVariable, lv, lv_add, lv_assign, lv_expr, lv_obj
from ..types import LvCompound, LvNumber, LvType, WidgetType, lv_obj_t_ptr
from . import Widget, add_widgets, set_obj_properties, widget_to_code
from .label import CONF_LABEL
CONF_GAUGE_CARD = "gauge_card"
# Reference to C++ class
LvGaugeCardType = lvgl_ns.class_("LvGaugeCardType", LvCompound)
CONF_ARC_COLOR = "arc_color"
CONF_BACKGROUND_ARC_COLOR = "background_arc_color"
CONF_SHOW_VALUE = "show_value"
CONF_SHOW_NAME = "show_name"
CONF_NEEDLE_COLOR = "needle_color"
CONF_VALUE_FONT = "value_font"
CONF_NAME_FONT = "name_font"
CONF_SEVERITY = "severity"
# Severity levels for color changes
SEVERITY_SCHEMA = cv.Schema(
{
cv.Optional("green"): cv.float_,
cv.Optional("yellow"): cv.float_,
cv.Optional("red"): cv.float_,
}
)
GAUGE_CARD_SCHEMA = cv.Schema(
{
cv.Optional(CONF_VALUE): lv_float,
cv.Optional(CONF_MIN_VALUE, default=0): lv_int,
cv.Optional(CONF_MAX_VALUE, default=100): lv_int,
cv.Optional(CONF_START_ANGLE, default=135): cv.int_range(0, 360),
cv.Optional(CONF_END_ANGLE, default=45): cv.int_range(0, 360),
cv.Optional(CONF_NAME): lv_text,
cv.Optional(CONF_UNIT_OF_MEASUREMENT, default=""): cv.string,
cv.Optional(CONF_FORMAT, default="%.0f"): cv.string,
cv.Optional(CONF_ARC_COLOR, default=0x3498DB): lv_color,
cv.Optional(CONF_BACKGROUND_ARC_COLOR, default=0x404040): lv_color,
cv.Optional(CONF_SHOW_VALUE, default=True): cv.boolean,
cv.Optional(CONF_SHOW_NAME, default=True): cv.boolean,
cv.Optional(CONF_SEVERITY): SEVERITY_SCHEMA,
}
)
GAUGE_CARD_MODIFY_SCHEMA = cv.Schema(
{
cv.Optional(CONF_VALUE): lv_float,
}
)
# LvType wrapper for the gauge card - uses LvNumber for value handling
lv_gauge_card_t = LvNumber("LvGaugeCardType", parents=(LvCompound,))
class GaugeCardType(WidgetType):
def __init__(self):
super().__init__(
CONF_GAUGE_CARD,
lv_gauge_card_t,
(CONF_MAIN, CONF_INDICATOR),
GAUGE_CARD_SCHEMA,
GAUGE_CARD_MODIFY_SCHEMA,
)
def get_uses(self):
return ("arc", "label", "obj")
async def to_code(self, w: Widget, config):
"""Generate code for the gauge card widget."""
lvgl_components_required.add("arc")
add_lv_use("arc", "label")
var = w.var
obj = w.obj
# Get configuration values
min_val = config.get(CONF_MIN_VALUE, 0)
max_val = config.get(CONF_MAX_VALUE, 100)
start_angle = config.get(CONF_START_ANGLE, 135)
end_angle = config.get(CONF_END_ANGLE, 45)
# Only set up the arc structure on initial creation
if CONF_MIN_VALUE in config:
# Set up the container styling for the card
lv_obj.set_flex_flow(obj, literal("LV_FLEX_FLOW_COLUMN"))
lv_obj.set_flex_align(
obj,
literal("LV_FLEX_ALIGN_CENTER"),
literal("LV_FLEX_ALIGN_CENTER"),
literal("LV_FLEX_ALIGN_CENTER"),
)
# Create the main arc gauge
arc_id = f"{config[CONF_ID]}_arc"
lv_add(var.create_arc())
arc_obj = var.get_arc()
# Configure arc
lv.arc_set_range(arc_obj, min_val, max_val)
lv.arc_set_bg_angles(arc_obj, start_angle, end_angle)
lv.arc_set_rotation(arc_obj, 0)
lv.arc_set_mode(arc_obj, literal("LV_ARC_MODE_NORMAL"))
# Remove the knob for display-only gauge
lv_obj.remove_style(arc_obj, literal("NULL"), literal("LV_PART_KNOB"))
lv_obj.clear_flag(arc_obj, literal("LV_OBJ_FLAG_CLICKABLE"))
# Set arc colors
if arc_color := config.get(CONF_ARC_COLOR):
color = await lv_color.process(arc_color)
lv.obj_set_style_arc_color(arc_obj, color, literal("LV_PART_INDICATOR"))
if bg_arc_color := config.get(CONF_BACKGROUND_ARC_COLOR):
bg_color = await lv_color.process(bg_arc_color)
lv.obj_set_style_arc_color(arc_obj, bg_color, literal("LV_PART_MAIN"))
# Create value label in center if enabled
if config.get(CONF_SHOW_VALUE, True):
lv_add(var.create_value_label())
value_label = var.get_value_label()
lv_obj.set_align(value_label, literal("LV_ALIGN_CENTER"))
lv.label_set_text(value_label, literal('"--"'))
# Create name label below if enabled and name is provided
if config.get(CONF_SHOW_NAME, True) and config.get(CONF_NAME):
lv_add(var.create_name_label())
name_label = var.get_name_label()
name_text = await lv_text.process(config[CONF_NAME])
lv.label_set_text(name_label, name_text)
# Set the value
if (value := config.get(CONF_VALUE)) is not None:
value_processed = await lv_float.process(value)
lv_add(var.set_value(value_processed))
# Update the value label text
if config.get(CONF_SHOW_VALUE, True):
fmt = config.get(CONF_FORMAT, "%.0f")
unit = config.get(CONF_UNIT_OF_MEASUREMENT, "")
# Format string for the value display
format_str = f'"{fmt}{unit}"'
lv_add(var.update_value_label(value_processed, literal(format_str)))
gauge_card_spec = GaugeCardType()

172
esphome/components/lvgl/widgets/thermostat_card.py Normal file
View File

@@ -0,0 +1,172 @@
"""
Thermostat Card Widget - A Home Assistant style thermostat card for LVGL.
Displays a climate control interface with temperature display, setpoint control,
and mode buttons.
"""
import esphome.codegen as cg
import esphome.config_validation as cv
from esphome.const import (
CONF_ID,
CONF_MAX_VALUE,
CONF_MIN_VALUE,
CONF_MODE,
CONF_NAME,
CONF_STEP,
)
from ..defines import (
CONF_INDICATOR,
CONF_KNOB,
CONF_MAIN,
literal,
lvgl_ns,
)
from ..helpers import add_lv_use, lvgl_components_required
from ..lv_validation import lv_color, lv_float, lv_text
from ..lvcode import lv, lv_add, lv_obj
from ..types import LvCompound, LvNumber, WidgetType
from . import Widget
CONF_THERMOSTAT_CARD = "thermostat_card"
CONF_CURRENT_TEMPERATURE = "current_temperature"
CONF_TARGET_TEMPERATURE = "target_temperature"
CONF_SHOW_CURRENT = "show_current"
CONF_SHOW_SETPOINT = "show_setpoint"
CONF_SHOW_BUTTONS = "show_buttons"
CONF_ARC_COLOR = "arc_color"
CONF_HEATING_COLOR = "heating_color"
CONF_COOLING_COLOR = "cooling_color"
CONF_UNIT = "unit"
# Reference to C++ class
LvThermostatCardType = lvgl_ns.class_("LvThermostatCardType", LvCompound)
THERMOSTAT_CARD_SCHEMA = cv.Schema(
{
cv.Optional(CONF_NAME): lv_text,
cv.Optional(CONF_CURRENT_TEMPERATURE): lv_float,
cv.Optional(CONF_TARGET_TEMPERATURE): lv_float,
cv.Optional(CONF_MIN_VALUE, default=5.0): cv.float_,
cv.Optional(CONF_MAX_VALUE, default=35.0): cv.float_,
cv.Optional(CONF_STEP, default=0.5): cv.float_,
cv.Optional(CONF_SHOW_CURRENT, default=True): cv.boolean,
cv.Optional(CONF_SHOW_SETPOINT, default=True): cv.boolean,
cv.Optional(CONF_SHOW_BUTTONS, default=True): cv.boolean,
cv.Optional(CONF_ARC_COLOR, default=0x3498DB): lv_color,
cv.Optional(CONF_HEATING_COLOR, default=0xE74C3C): lv_color,
cv.Optional(CONF_COOLING_COLOR, default=0x3498DB): lv_color,
cv.Optional(CONF_UNIT, default="°"): cv.string,
}
)
THERMOSTAT_CARD_MODIFY_SCHEMA = cv.Schema(
{
cv.Optional(CONF_CURRENT_TEMPERATURE): lv_float,
cv.Optional(CONF_TARGET_TEMPERATURE): lv_float,
}
)
# LvType wrapper for the thermostat card
lv_thermostat_card_t = LvNumber("LvThermostatCardType", parents=(LvCompound,))
class ThermostatCardType(WidgetType):
def __init__(self):
super().__init__(
CONF_THERMOSTAT_CARD,
lv_thermostat_card_t,
(CONF_MAIN, CONF_INDICATOR, CONF_KNOB),
THERMOSTAT_CARD_SCHEMA,
THERMOSTAT_CARD_MODIFY_SCHEMA,
)
def get_uses(self):
return ("arc", "label", "btn", "obj")
def get_min(self, config: dict):
return int(config.get(CONF_MIN_VALUE, 5) * 10)
def get_max(self, config: dict):
return int(config.get(CONF_MAX_VALUE, 35) * 10)
async def to_code(self, w: Widget, config):
"""Generate code for the thermostat card widget."""
lvgl_components_required.add("arc")
add_lv_use("arc", "label", "btn")
var = w.var
obj = w.obj
# Get configuration values
min_val = config.get(CONF_MIN_VALUE, 5.0)
max_val = config.get(CONF_MAX_VALUE, 35.0)
unit = config.get(CONF_UNIT, "°")
# Only set up structure on initial creation
if CONF_MIN_VALUE in config:
# Set up the container with flex layout
lv_obj.set_flex_flow(obj, literal("LV_FLEX_FLOW_COLUMN"))
lv_obj.set_flex_align(
obj,
literal("LV_FLEX_ALIGN_CENTER"),
literal("LV_FLEX_ALIGN_CENTER"),
literal("LV_FLEX_ALIGN_CENTER"),
)
# Create the temperature arc
lv_add(var.create_temperature_arc())
temp_arc = var.get_temperature_arc()
# Configure arc - use 10x values for precision
lv.arc_set_range(temp_arc, int(min_val * 10), int(max_val * 10))
lv.arc_set_bg_angles(temp_arc, 135, 45)
lv.arc_set_rotation(temp_arc, 0)
lv.arc_set_mode(temp_arc, literal("LV_ARC_MODE_NORMAL"))
# Set arc color
if arc_color := config.get(CONF_ARC_COLOR):
color = await lv_color.process(arc_color)
lv.obj_set_style_arc_color(temp_arc, color, literal("LV_PART_INDICATOR"))
# Make arc interactive
lv_obj.add_flag(temp_arc, literal("LV_OBJ_FLAG_CLICKABLE"))
# Create current temperature label
if config.get(CONF_SHOW_CURRENT, True):
lv_add(var.create_temperature_label())
temp_label = var.get_temperature_label()
lv_obj.align(temp_label, literal("LV_ALIGN_CENTER"), 0, -20)
lv.label_set_text(temp_label, literal(f'"--{unit}"'))
# Create setpoint label
if config.get(CONF_SHOW_SETPOINT, True):
lv_add(var.create_setpoint_label())
setpoint_label = var.get_setpoint_label()
lv_obj.align(setpoint_label, literal("LV_ALIGN_CENTER"), 0, 20)
lv.label_set_text(setpoint_label, literal(f'"--{unit}"'))
# Create up/down buttons
if config.get(CONF_SHOW_BUTTONS, True):
lv_add(var.create_up_button())
up_btn = var.get_up_button()
lv_obj.align(up_btn, literal("LV_ALIGN_RIGHT_MID"), -10, -30)
lv_obj.set_size(up_btn, 40, 40)
lv_add(var.create_down_button())
down_btn = var.get_down_button()
lv_obj.align(down_btn, literal("LV_ALIGN_RIGHT_MID"), -10, 30)
lv_obj.set_size(down_btn, 40, 40)
# Set current temperature
if (current_temp := config.get(CONF_CURRENT_TEMPERATURE)) is not None:
temp_val = await lv_float.process(current_temp)
lv_add(var.set_current_temperature(temp_val))
# Set target temperature
if (target_temp := config.get(CONF_TARGET_TEMPERATURE)) is not None:
target_val = await lv_float.process(target_temp)
lv_add(var.set_target_temperature(target_val))
thermostat_card_spec = ThermostatCardType()

142
esphome/components/lvgl/widgets/tile_card.py Normal file
View File

@@ -0,0 +1,142 @@
"""
Tile Card Widget - A Home Assistant style tile card for LVGL.
Displays a modern tile-style widget with icon, name, and state.
"""
import esphome.codegen as cg
import esphome.config_validation as cv
from esphome.const import (
CONF_ICON,
CONF_ID,
CONF_NAME,
CONF_STATE,
)
from ..defines import (
CONF_MAIN,
literal,
lvgl_ns,
)
from ..helpers import add_lv_use
from ..lv_validation import lv_bool, lv_color, lv_image, lv_text
from ..lvcode import lv, lv_add, lv_obj
from ..types import LvBoolean, LvCompound, WidgetType
from . import Widget
CONF_TILE_CARD = "tile_card"
CONF_ICON_COLOR = "icon_color"
CONF_ICON_ON_COLOR = "icon_on_color"
CONF_STATE_TEXT = "state_text"
CONF_VERTICAL = "vertical"
# Reference to C++ class
LvTileCardType = lvgl_ns.class_("LvTileCardType", LvCompound)
TILE_CARD_SCHEMA = cv.Schema(
{
cv.Optional(CONF_ICON): lv_image,
cv.Optional(CONF_NAME): lv_text,
cv.Optional(CONF_STATE, default=False): lv_bool,
cv.Optional(CONF_STATE_TEXT): lv_text,
cv.Optional(CONF_ICON_COLOR, default=0xFFFFFF): lv_color,
cv.Optional(CONF_ICON_ON_COLOR, default=0xFFD700): lv_color,
cv.Optional(CONF_VERTICAL, default=False): cv.boolean,
}
)
TILE_CARD_MODIFY_SCHEMA = cv.Schema(
{
cv.Optional(CONF_STATE): lv_bool,
cv.Optional(CONF_STATE_TEXT): lv_text,
cv.Optional(CONF_NAME): lv_text,
}
)
# LvType wrapper for the tile card
lv_tile_card_t = LvBoolean("LvTileCardType", parents=(LvCompound,))
class TileCardType(WidgetType):
def __init__(self):
super().__init__(
CONF_TILE_CARD,
lv_tile_card_t,
(CONF_MAIN,),
TILE_CARD_SCHEMA,
TILE_CARD_MODIFY_SCHEMA,
)
def get_uses(self):
return ("obj", "label", "img")
async def to_code(self, w: Widget, config):
"""Generate code for the tile card widget."""
add_lv_use("obj", "label", "img")
var = w.var
obj = w.obj
# Only set up structure on initial creation
if CONF_ICON in config or CONF_NAME in config:
# Set up the container with flex layout
lv_obj.add_flag(obj, literal("LV_OBJ_FLAG_CLICKABLE"))
# Choose layout direction based on vertical setting
if config.get(CONF_VERTICAL, False):
lv_obj.set_flex_flow(obj, literal("LV_FLEX_FLOW_COLUMN"))
else:
lv_obj.set_flex_flow(obj, literal("LV_FLEX_FLOW_ROW"))
lv_obj.set_flex_align(
obj,
literal("LV_FLEX_ALIGN_START"),
literal("LV_FLEX_ALIGN_CENTER"),
literal("LV_FLEX_ALIGN_CENTER"),
)
# Set some padding
lv.obj_set_style_pad_all(obj, 10, literal("LV_PART_MAIN"))
lv.obj_set_style_pad_gap(obj, 10, literal("LV_PART_MAIN"))
# Create icon if provided
if icon := config.get(CONF_ICON):
lv_add(var.create_icon())
icon_obj = var.get_icon()
icon_src = await lv_image.process(icon)
lv.img_set_src(icon_obj, icon_src)
# Set icon color
if icon_color := config.get(CONF_ICON_COLOR):
color = await lv_color.process(icon_color)
lv.obj_set_style_img_recolor(icon_obj, color, literal("LV_PART_MAIN"))
lv.obj_set_style_img_recolor_opa(
icon_obj, literal("LV_OPA_COVER"), literal("LV_PART_MAIN")
)
# Create name label
if name := config.get(CONF_NAME):
lv_add(var.create_name_label())
name_label = var.get_name_label()
name_text = await lv_text.process(name)
lv.label_set_text(name_label, name_text)
# Create state label if state_text is provided
if state_text := config.get(CONF_STATE_TEXT):
lv_add(var.create_state_label())
state_label = var.get_state_label()
state_txt = await lv_text.process(state_text)
lv.label_set_text(state_label, state_txt)
# Set the state
if (state := config.get(CONF_STATE)) is not None:
state_val = await lv_bool.process(state)
lv_add(var.set_state(state_val))
# Update state text if provided during update
if CONF_STATE_TEXT in config and CONF_ICON not in config:
state_text = await lv_text.process(config[CONF_STATE_TEXT])
state_label = var.get_state_label()
lv.label_set_text(state_label, state_text)
tile_card_spec = TileCardType()

85
tests/components/lvgl/lvgl-package.yaml
View File

@@ -1055,6 +1055,91 @@ lvgl:
hidden: true
mode: text_lower
- id: page4
layout:
type: flex
flex_flow: column
pad_row: 10
widgets:
# Test HA-style card widgets
- gauge_card:
id: test_gauge_card
width: 150
height: 150
min_value: 0
max_value: 100
value: 75
name: "Temperature"
unit_of_measurement: "°C"
format: "%.1f"
arc_color: 0x3498DB
background_arc_color: 0x404040
show_value: true
show_name: true
on_value:
logger.log:
format: "Gauge value: %.1f"
args: [x]
- button_card:
id: test_button_card
width: 100
height: 100
icon: cat_image
name: "Light"
state: false
icon_color: 0xFFFFFF
icon_on_color: 0xFFD700
show_state: true
state_text_on: "On"
state_text_off: "Off"
on_click:
- lvgl.button_card.update:
id: test_button_card
state: true
- tile_card:
id: test_tile_card
width: 200
height: 80
icon: dog_image
name: "Living Room"
state: false
state_text: "Idle"
icon_color: 0xFFFFFF
vertical: false
on_click:
logger.log: "Tile card clicked"
- entity_card:
id: test_entity_card
width: 250
height: 60
icon: cat_image
name: "Sensor"
value: "23.5°C"
icon_color: 0x3498DB
- thermostat_card:
id: test_thermostat_card
width: 200
height: 200
name: "Thermostat"
current_temperature: 21.5
target_temperature: 22.0
min_value: 10.0
max_value: 30.0
step: 0.5
show_current: true
show_setpoint: true
show_buttons: true
arc_color: 0x3498DB
unit: "°"
on_value:
logger.log:
format: "Thermostat value: %.1f"
args: [x]
font:
- file: "gfonts://Roboto"
id: space16