Picture Elements Card - State Badge Title Not Updating

[Tom-Sumner]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

The title input for each element which I assume is meant to change the text displayed under the badge is not representing whatever is input, rather it remains showing the Entity display name.

Describe the behavior you expected

The text under the badge in State Badge Element represents whatever is typed into the Title field while editing.

Steps to reproduce the issue

1. Add a State Badge to a Picture Elements Card
2. Set the entity to a camera feed
3. Change the Title of the state badge

What version of Home Assistant Core has the issue?

core-2025.1.2

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Google Chrome Version 131.0.6778.265 (Official Build) (64-bit)

Which operating system are you using to run this browser?

Windows 11 Home

State of relevant entities

access_token: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
motion_detection: true
frontend_stream_type: web_rtc
id: None
integration: dahua
entity_picture: >-
  /api/camera_proxy/camera.yard_gate_display?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
friendly_name: Yard Gate Display
supported_features: 2

Problem-relevant frontend configuration

type: picture-elements
elements:
  - type: state-badge
    entity: camera.yard_gate_display
    title: Yard gate
    style:
      left: 60%
      top: 75%
      color: orange
image: /api/image/serve/xxxxxxxxxxxxxxxxxxxxxxxx

Javascript errors shown in your browser console/inspector

load_resource.ts:32 
 GET http://homeassistant.local:8123/webrtc/webrtc-camera.js?v=v3.6.0 net::ERR_ABORTED 404 (Not Found)
(anonymous)	@	load_resource.ts:32
o	@	load_resource.ts:6
n	@	load_resource.ts:37
(anonymous)	@	load-resources.ts:34
n	@	load-resources.ts:13
(anonymous)	@	ha-panel-lovelace.ts:256
Promise.then		
value	@	ha-panel-lovelace.ts:255
$e	@	browser_mod.js?2.3.3:66
await in $e		
(anonymous)	@	browser_mod.js?2.3.3:231
(anonymous)	@	browser_mod.js?2.3.3:66
Ke	@	browser_mod.js?2.3.3:385
(anonymous)	@	browser_mod.js?2.3.3:385



load_resource.ts:13 Uncaught (in promise) http://homeassistant.local:8123/webrtc/webrtc-camera.js?v=v3.6.0
r.onerror	@	load_resource.ts:13
error		
(anonymous)	@	load_resource.ts:13
o	@	load_resource.ts:6
n	@	load_resource.ts:37
(anonymous)	@	load-resources.ts:34
n	@	load-resources.ts:13
(anonymous)	@	ha-panel-lovelace.ts:256
Promise.then		
value	@	ha-panel-lovelace.ts:255
$e	@	browser_mod.js?2.3.3:66
await in $e		
(anonymous)	@	browser_mod.js?2.3.3:231
(anonymous)	@	browser_mod.js?2.3.3:66
Ke	@	browser_mod.js?2.3.3:385
(anonymous)	@	browser_mod.js?2.3.3:385


Unchecked runtime.lastError: The message port closed before a response was received.

security:1 Unchecked runtime.lastError: The message port closed before a response was received.

Additional information

[ildar170975]

It is clearly said in Docs that this title option is for a tooltip:
https://www.home-assistant.io/dashboards/picture-elements/#state-badge

[Tom-Sumner]

My mistake. I had not come across that before. Thanks

[ildar170975]

Currently the only way to replace a displayed name is with card-mod.
There was a FR about adding a possibility to customize a name - but it was not implemented.