Extended Visualisation of a Media Player on a Divoom Pixoo 64 Display

[AutoLotion]

This yaml configuration for the Divoom Pixoo 64 Integration provides an extended visualisation of a Home Assistant media player on a Divoom Pixoo 64 Display.
Visualised from the media player are:

• Song Info like Title and Artist (Text will be scrolled, if longer than the display width)
• Song/Album Cover Image
• Elapsed Time of the playing song as a progress bar
• Elapsed and Remaining Time of the playing song as text
• Player State (Playing / Paused)
• Player Shuffle State (On/Off)
• Volume Mute state (On/Off)
• Volume as a progress bar

With the standard cover image option (cover option = 1), no external parts (no helper entities, no automation) are required.
The yaml configuration is tested with Music Assistant radio and local playlists.

Calculating Elapsed and Remaining Time

Unfortunately, the media player does not provide an attribute for the elapsed and remaining time of the playing song and the attribute media_position is not continuously updated by the player. Only when the player is started, paused, stopped or seeked. The elapsed and remaining time must be calculated out of the attributes media_duration, media_position, media_position_updated_at and the current system time. Also, the player state must be taken into account for calculating elapsed and remaining time.

The player’s attribute duration is provided for single songs and playlists, but not for internet radio. The remaining time (text and progress bar) can only be properly shown, when the attribute is provided.
If the player’s attribute duration is not provided, the remaining time shows the current system time with the prefix “!”and the progress bar shows its full length.

Cover Image

There are two options available for loading the song/ album cover image:

With the standard cover image option, cover option = 1, the cover image of the playing song is downloaded from the internet by the Pixoo image component. The media player provides the attribute entity_picture. If the attribute is provided and the image format can be displayed by the Pixoo 64 Display the provides URL is used.
If the attribute entity_picture ist not provided or the image format cannot be displayed by the Pixoo 64 Display, the URL from the global none_image_url variable is used.

With cover image option, cover option = 2, the cover image of the playing song is loaded from a file on the local disk. For that a separate automation to download and buffer the cover image to local file is used.

The automation YAML for downloading cover image is documented at the end of this documentation.

Note: Divoom Pixoo 64 is currently unable to process .svg images.

Scrolling Text

Scrolling Text requires a short duration / period of the displayed page of Pixoo 64. To let the text scroll every second and also to see every second of the elapsed and remaining time, duration should be set to 1 second.

- page_type: components
  duration: 1   

But be aware, the shorter the duration the more often the cover image is downloaded from internet if cover_option = 1 is active.

Playing_Playlist_Animation_IMG_7717_modified_3.mov

Configuration YAML

#============================================================================= 
# Purpose     : Visualisation of a Media Player on a Divoom Pixoo 64 Display
#               Visualised are:
#                 - Song Info like Title and Artist
#                 - Song/Album Cover Image
#                 - Elapsed Time in a Progress Bar
#                 - Elapsed and Remaining Time
#                 - Player State (Playing / Paused)
#                 - Player Shuffle State
#                 - Volume Mute state
#                 - Volume Progress Bar
#               
#               Layout:
#                  ___________________________________________
#                 |Titel                                      |
#                 |Artist                                     |
#                 | |       OO  OOO    OOO     OOOO           |
#                 | |       OO  OOOO  OOOO   OO               |
#                 | |       OO  OO OOOO OO  OO                |
#                 | |       OO  OO  OO  OO  OO OOOOO          |
#                 | |       OO  OO      OO  OO    OO          |
#                 || |      OO  OO      OO   OO   OO          |
#       Volume ----| |      OO  OO      OO     OOO            |
#    Progress Bar || |                                        |
#                 |================----- Progress Bar --------|
#                 |01:21               >     => <x         04:33|
#                 |__|_________________|_____|__|___________|__|
#                    |                 |     |  |           |   
#               Elapsed Time   Player State  |  |       Remaining Time
#                              playing = >   |  Mute State, muted = <x              
#                              paused  = II  Shuffle State, On = =>, Off = :.>
#                                            
#               
#               Unfortunately, the media player does not provide an attribute for the elapsed and remaining time of the playing song
#               and the attribute media_position is not continuously updated by the player. Only when the player is started, 
#               paused, stopped or seeked. The elapsed and remaining time must be calculated out of the attributes
#               media_duration, media_position, media_position_updated_at and the current time.
#               Note 1: attribute media_duration is not available for radio stations.
#               Note 2: Divoom Pixoo 64 is not able to process .svg images.
#               So far no helper entities are required.
#               Tested with Music Assistant Radio and local Playlists.
#               
#               More usefull information about Divoom Pixoo 64 Display and Media Player Integration:
#               https://github.com/gickowtf/pixoo-homeassistant
#               https://github.com/gickowtf/pixoo-homeassistant/discussions/72
#               https://www.home-assistant.io/integrations/media_player/
#               https://developers.home-assistant.io/docs/core/entity/media-player/
#               https://community.home-assistant.io/t/calculating-current-media-position-for-use-in-automation/240087
#               
# Requirements: Divoom Pixoo 64 Display
# Uses        : Divoom Pixoo 64 Integration
# Author      : AutoLotion
#-----------------------------------------------------------------------------
# Version History
#-----------------------------------------------------------------------------
#         |   |
# 05.10.26|1.0|- First version for running under the configuration of the Divoom Pixoo 64 integration
#         |   |- Cleaned up older, unused code
#         |   |- Realised remaining blocks also as templatable component
#         |   |- changed image_path: from "/config/www/media_player" to "/config/www/" for cover option: 2
#         |   |- Added the display of the Player Shuffle State
#         |   |- Updated Divoom Pixoo 64 Integration from 1.23.0 to 1.24.0
# 22.09.26|0.2|- Added functionality for scrolling text for title and artist
#         |   |- Player state changed from text to Base64 images 3x5 pixel and then in version 3 back to overlapping characters, so color can be set in configuraton
#         |   |- Player Mute State changed from ! to icon <x and added separate color definition with variable player_mute_color
#         |   |- Changed display of elapsed and remaining time to condenced character spacing for separator
#         |   |- Player state != "playing" is now taken into account for calculating elapsed and remaining time
#         |   |- Added cover_option to allow to choose between 
#         |   |   1: load cover image directly from internet in every page loop or
#         |   |   2: load cover image from file. Uses separate automation to download first the cover image to local file and then load from there in this page configuration
# 17.09.26|0.1|- First beta version for running under the configuration of the Divoom Pixoo 64 integration
#         |   |- 
#         |   |
#-----------------------------------------------------------------------------
# HA Core                : 2026.9.2
# HA Supervisor          : 2026.09.0
# HA Operating System    : 18.2
# HA Frontend            : 20260826.7
# Music Assistant        : 2.10.5
# Divoom Pixoo 64 Int.   : 1.24.0
#============================================================================= 

- page_type: components
  enabled: true
  duration: 10   #-- a short duration (<= 10 seconds) is recommended for the animation of progress bars and times. But be aware the shorter the duration the more often the cover image is downloaded if cover_option = 1 is active

  variables:
    #-- the variables section in the Pixoo Integration has some limitations:
    #--   - a defined variable can not be used in the definition of a folowing variable in the variables list
    #--   - escaping single quote for example in a filter like replace('\'', ' ') or replace("'", " ") or replace(''''', ' ') can not be used.

    #--- Name of the player/group to be visualised. This variable is used to get all states and attributes of the visualied player in the following yaml code
    #--- To adapt this yaml to your local player entity, change this name
    master_player: "media_player.hifi_esparagus"

    cover_option: 1     #--- cover option: 1 = load directly from internet by url, 2 = load from file. Uses separate automation to download and buffer the cover image to local file
#    none_image_url: "https://r2.theaudiodb.com/images/media/album/thumb/aqgil91641089435.jpg"   #-- in case there is no valid image_url provided by the player, this image is diplayed
#    none_image_url: "https://r2.theaudiodb.com/images/media/album/thumb/dyezf41640085315.jpg"   #-- in case there is no valid image_url provided by the player, this image is diplayed
    none_image_url: "https://assets.fanart.tv/fanart/red-lips-6160ac5444959.jpg"   #-- in case there is no valid image_url provided by the player, this image is diplayed
    image_path: "/config/www/"     #-- path where the cover imges are downloaded to by separate automation (option 2 in display cover image block)
    filename_postfix: "_cover_image"   #-- postfix that is added to the filename. Example: "media_player.hifi_esparagus_cover_image.jpg"

    info_text_color: gold
    info_background_color: black
    time_bar_color: yellow
    time_bar_background_color: gray
    play_time_text_color: gold
    play_time_background_color: black
    current_time_text_color: gray
    volume_bar_color: firebrick
    volume_background_color: gray
    player_state_color: green
    player_shuffle_state_color: darkgray
    player_mute_color: red
    
    #-- Set demension of the used font. In this case the default font pico_8 is used, bacause it can display max number of characters in one line
    font_size_x: 4
    font_size_y: 5

    max_pix_x: 64
    
#----------------------------------------------------------------------------------------------------------
# states['media_player.hifi_esparagus'].attributes     #--- get all player attributes at once
#    group_members:
#      - media_player.hifi_esparagus
#      - media_player.hifi_esp32
#      - media_player.hifi_esparagus_laud
#      - media_player.denon_avr_x3300w
#    volume_level: 0.25
#    is_volume_muted: false
#    media_content_id: library://radio/4
#    media_content_type: music
#    media_position: 2
#    media_position_updated_at: '2026-09-18T05:25:26.281922+00:00'
#    media_title: YES, AND?
#    media_artist: ARIANA GRANDE
#    media_album_name: SRF 3
#    app_id: music_assistant
#    source: Music Assistant Queue
#    shuffle: false
#    repeat: 'off'
#    entity_picture_local: >-
#      /api/media_player_proxy/media_player.hifi_esparagus?token=e389a445b99808ee43daa2dc49aac233d07125a327299400f46fffaa40597595&cache=353f102609c53811
#    mass_player_type: player
#    active_queue: upe08cfe24ec10
#    device_class: speaker
#    entity_picture: https://assets.fanart.tv/fanart/eternal-sunshine-65b4d60bb2d79.jpg
#    icon: mdi:speaker
#    friendly_name: HIFI-Esparagus
#    supported_features: 8320575


  components:
   #=========================================================================
   #== Block: Song/Album Cover Image
   #=========================================================================
      #--- The cover image is the first block to display. The following blocks can overlap (crop) the image

      #--------------------------------------------------------------------------------------------------
      #--- Option 1, using image access from internet in every period of the Pixoo 64 page configuration
      #--- With for example 1 second for page duration, every second the image will be loaded from internet
      #---
      #--- Option 2, using separate automation that downloads the cover imges to a local directory only when the attribute entity_picture changes
      #--- With for example1 second for page duration, every second the image will be loaded from the local disk instead from the internet
      #--------------------------------------------------------------------------------------------------
    - type: templatable
      template: >-
        {#--- set x and y position of the top left pixel of the block (anchor point) --#}
        {%- set pos_x = 7 %}
        {%- set pos_y = 9 %}
        {%- set image_width = 50 %}

        {%- if (cover_option == 1) %}
              {%- set url = state_attr(master_player, 'entity_picture') %}
              {%- if url != none %}
                    {#--- check if there is a valid imge format --#}
                    {%- if ('jpg' in url or 'png' in url or 'ico' in url) %}
                           {%- set image_url = url %}
                    {%- else %}
                           {#--- if there is no valid image format, show the image from none_image_url --#}
                           {%- set image_url = none_image_url %}
                    {%- endif %}
                
              {%- else %}
                    {#--- if there is no valid url, show the image from none_image_url --#}
                    {%- set image_url = none_image_url %}
              {%- endif %}
              {{[
                  {"type": "image", "position": [pos_x, pos_y], "image_url": image_url, "width": image_width}
                ] }}
        {%- else %}
              {{[
                  {"type": "image", "position": [pos_x, pos_y], "image_path": image_path + master_player + filename_postfix + ".jpg", "width": image_width}
                ] }}
        {%- endif %}


   #=========================================================================
   #== Block: Song Info (Title and Artist)
   #=========================================================================
    - type: templatable
      template: >-
        {%- macro PrepairText(source_text, max_characters, scroll_separator, seconds, returns) %}
            {#--- https://www.home-assistant.io/template-functions/as_function/ --#}
            {#--- clean up string and make sure every character can be displayed with the font --#}
            {% set source_text = source_text | replace("@", "") %}
            {#{% set source_text = source_text | replace("'", " ") %}#}
            {% set source_text = source_text | replace("&", " ") %}
            {% set source_text = source_text | replace("/", " ") %}
            {% set source_text = source_text | replace(" - ", "-") %}
            {% set source_text = source_text | replace("  ", " ") %}

            {#--- multiply the source_text at least 4 times, that scrolling can be realised over more than one source_text length on the display wihin max 60 seconds scrolling period --#}
            {% set scroll_text = source_text + scroll_separator + source_text + scroll_separator + source_text + scroll_separator + source_text + scroll_separator %}
            {% set full_length = (source_text + scroll_separator)|length %}
            {% set index = seconds % full_length %}
    
            {% if source_text|length > max_characters %}
              {#--- if length of source_text > max_characters, then source_text must be scrolled --#}
              {% set displaytext = scroll_text[index:index+max_characters] %}
            {% else %}
            {#--- length of source_text <= max_characters, just display source_text as is --#}
              {% set displaytext = source_text %}
            {% endif %}

            {{ returns(displaytext) }}
        {%- endmacro %}

        {#--- set x and y position of the top pixel of the block (anchor point) according to the following alignment --#}
        {%- set pos_x = 0 %}
        {%- set pos_y = 0 %}
        {%- set alignment = "left" %}

        {% set max_characters = (max_pix_x // font_size_x) %}
        {#--- get seconds from system time to use for scrolling text --#}
        {% set seconds = now().second %}
        {% set scroll_separator = ":" %}

        {#--- set source_text, that has to be scrolled --#}
        {#{% set source_text = "123456789012345678901234567890" %}#}
        {% set source_text = state_attr(master_player, 'media_title') %}
        {% set title_text = as_function(PrepairText)(source_text, max_characters, scroll_separator, seconds) %}

        {% set source_text = state_attr(master_player, 'media_artist') %}
        {% set artist_text = as_function(PrepairText)(source_text, max_characters, scroll_separator, seconds) %}

        {#--- 1. display background including cropping top lines of the cover image --#}
        {#--- 2. display title of song --#}
        {#--- 3. display artist of song --#}
        {{[
            {"type": "rectangle", "position": [pos_x, pos_y], "color": info_background_color, "size": [64, 12], "filled": true},
            {"type": "text", "position": [pos_x, pos_y], "color": info_text_color, "align": alignment, "content": title_text},
            {"type": "text", "position": [pos_x, pos_y + 6], "color": info_text_color, "align": alignment, "content": artist_text}
          ] }}


   #=============================================================================
   #== Block: Volume Progress Bar
   #=============================================================================

    - type: templatable
      template: >-
        {#--- set x and y position of the top center pixel of the block (anchor point) --#}
        {%- set pos_x = 0 %}
        {%- set pos_y = 12 %}
        
        {%- set bar_size_x_max = 1 %}
        {%- set bar_size_y_max = 44 %}
        {%- set bar_size_x = bar_size_x_max %}
        {%- set bar_size_y = ((state_attr(master_player, 'volume_level') * 100 * bar_size_y_max) / 100) | int %}
        {%- set bar_pos_x = pos_x %}
        {%- set bar_pos_y = pos_y + bar_size_y_max - bar_size_y %}

        {#--- 1. display background of the vertical progress bar --#}
        {#--- 2. display vertical progress bar itself --#}
        {{[
            {"type": "rectangle", "position": [bar_pos_x, pos_y], "color": volume_background_color, "size": [bar_size_x_max, bar_size_y_max], "filled": true},
            {"type": "rectangle", "position": [bar_pos_x, bar_pos_y], "color": volume_bar_color, "size": [bar_size_x, bar_size_y], "filled": true}
          ] }}

   #============================================================================================
   #== Block: Time Info (Progress Bar for Elapsed Time, Player State, Elapsed and Remaining Time
   #============================================================================================

      #--- Progress bar for elapsed time  -------------------------
      #--- When playing radio stations the attribute media_duration is not available. In this case the progress bar is not displayed

    - type: templatable
      template: >-
        {#--- set x and y position of the top pixel according to the following alignment --#}
        {%- set pos_x = 0 %}
        {%- set pos_y = 56 %}
        {%- set alignment = "left" %}

        {%- set duration = state_attr(master_player, 'media_duration') %}
        {%- set position = state_attr(master_player, 'media_position') %}
        {%- set last_updated = as_timestamp(state_attr(master_player, 'media_position_updated_at')) %}
        {%- set current_time = as_timestamp(now()) %}

        {%- set player_state = states(master_player) %}
        {%- if (player_state != "playing") %}
              {#--- if the player is not in the state playing, the attribute media_position is updated and shows the elapsed time --#}
              {%- set elapsed_seconds = position %}
        {%- else %}
              {%- set elapsed_seconds = (position + current_time - last_updated) | int %}
        {%- endif %}
        {%- set hours = (elapsed_seconds // 3600) %}
        {%- set minutes = (elapsed_seconds % 3600) // 60 %}
        {%- set seconds_remain = (elapsed_seconds % 60) %}

        {%- set bar_size_x_max = 64 %}
        {%- set bar_size_y_max = 1 %}

        {%- if duration != none %}
              {%- set bar_size_x = (bar_size_x_max / duration * elapsed_seconds) | int %}
              {%- set bar_size_y = bar_size_y_max %}
              {#--- 1. display background of the block including cropping bottom lines of the cover image --#}
              {#--- 2. display background of the horizontal progress bar --#}
              {#--- 3. display horizontal progress bar itself --#}
              {{[
                  {"type": "rectangle", "position": [pos_x, pos_y], "color": play_time_background_color, "size": [bar_size_x_max, 8], "filled": true},
                  {"type": "rectangle", "position": [pos_x, pos_y + 1], "color": time_bar_background_color, "size": [bar_size_x_max, bar_size_y_max], "filled": true},
                  {"type": "rectangle", "position": [pos_x, pos_y + 1], "color": time_bar_color, "size": [bar_size_x, bar_size_y], "filled": true}
                ]}}

        {%- else %}
              {#--- With no duration show the progress in full length #}
              {#--- 1. display background of the block including cropping bottom lines of the cover image --#}
              {#--- 2. display background of the horizontal progress bar --#}
              {#--- 3. display horizontal progress bar itself --#}
              {{[
                  {"type": "rectangle", "position": [pos_x, pos_y], "color": play_time_background_color, "size": [bar_size_x_max, 8], "filled": true},
                  {"type": "rectangle", "position": [pos_x, pos_y + 1], "color": time_bar_background_color, "size": [bar_size_x_max, bar_size_y_max], "filled": true},
                  {"type": "rectangle", "position": [pos_x, pos_y + 1], "color": time_bar_color, "size": [bar_size_x_max, bar_size_y_max], "filled": true}
                ]}}
        {%- endif %}

#              {#--- With no duration, do not show the progress bar at all. In this case the background rectangle is 2 pixel less heigh and lets show 2 more lines of the cover image #}
#              {#--- 1. display background of the block including cropping bottom lines of the cover image --#}
#              {{[
#                  {"type": "rectangle", "position": [pos_x, pos_y + 2], "color": play_time_background_color, "size": [bar_size_x_max, 6], "filled": true}
#                ] }}

      #--- Elapsed time  -----------------------------------------

      #--- Realised with condenced character spacing for separator
    - type: templatable
      template: >-
        {#-------------------------------------------------------------------------#}
        {#--- Elapsed time with condenced character spacing for separator        --#}
        {#-------------------------------------------------------------------------#}

        {#--- set x and y position of the top pixel according to the following alignment --#}
        {%- set pos_x = 0 %}
        {%- set pos_y = 59 %}
        {%- set alignment = "left" %}
        {%- set text_color = play_time_text_color %}

        {%- set position = state_attr(master_player, 'media_position') %}
        {%- set last_updated = as_timestamp(state_attr(master_player, 'media_position_updated_at')) %}
        {%- set current_time = as_timestamp(now()) %}

        {%- set player_state = states(master_player) %}
        {%- if (player_state != "playing") %}
              {#--- if the player is not in the state playing, the attribute media_position is updated and shows the elapsed time --#}
              {%- set elapsed_seconds = position %}
        {%- else %}
              {%- set elapsed_seconds = (position + current_time - last_updated) | int %}
        {%- endif %}
        {%- set hours = (elapsed_seconds // 3600) %}
        {%- set minutes = (elapsed_seconds % 3600) // 60 %}
        {%- set seconds_remain = (elapsed_seconds % 60) %}

        {#--- Elapsed time is formated like "1:02:03", 1-2 digits for hours (if included) and 2 digits for minutes and seconds --#}
 
        {%- if (hours | int > 0) %}
              {{[
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": hours},
                  {"type": "text", "position": [pos_x + (hours | string | length * font_size_x) - 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                  {"type": "text", "position": [pos_x + (hours | string | length * font_size_x) + 2, pos_y], "color": text_color, "align": alignment, "content": '%02d' | format(minutes)},
                  {"type": "text", "position": [pos_x + ((hours | string | length + 2) * font_size_x) + 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                  {"type": "text", "position": [pos_x + ((hours | string | length + 2) * font_size_x) + 4, pos_y], "color": text_color, "align": alignment, "content": '%02d' | format(seconds_remain)},
                ] }}
        {%- else %}
              {{[
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": '%02d' | format(minutes)},
                  {"type": "text", "position": [pos_x + (2 * font_size_x) - 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                  {"type": "text", "position": [pos_x + (2 * font_size_x) + 2, pos_y], "color": text_color, "align": alignment, "content": '%02d' | format(seconds_remain)},
                ] }}
        {%- endif %}


      #--- Player state -----------------------------------------
      #--- Realised with images that are formed by overlapping characters, so color can be adapted by configuration
      #--  O
      #--  OO 
      #--  OOO 
      #--  OO
      #--  O
      #--
      #--  O O
      #--  O O
      #--  O O 
      #--  O O
      #--  O O
      #--
      #--  OOO
      #--  OOO
      #--  OOO 
      #--  OOO
      #--  OOO
      #--
    - type: templatable
      template: >-
        {#-------------------------------------------------------------------------#}
        {#--- player state                                                       --#}
        {#-------------------------------------------------------------------------#}
        {#--- set x and y position of the top pixel according to the following alignment --#}
        {%- set pos_x = 26 %}
        {%- set pos_y = 59 %}
        {%- set alignment = "center" %}

        {%- set text_color = player_state_color %}
        {%- set player_state = states(master_player) %}

        {%- if (player_state == "playing") %}
              {{[
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": ">"},
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": "-"},
                  {"type": "text", "position": [pos_x - 1, pos_y], "color": text_color, "align": alignment, "content": ":"}
                ] }}
        {%- elif (player_state == "idle") or (player_state == "paused") %}
              {{[
                  {"type": "text", "position": [pos_x - 1, pos_y], "color": text_color, "align": alignment, "content": "!"},
                  {"type": "text", "position": [pos_x - 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                  {"type": "text", "position": [pos_x + 1, pos_y], "color": text_color, "align": alignment, "content": "!"},
                  {"type": "text", "position": [pos_x + 1, pos_y], "color": text_color, "align": alignment, "content": ":"}
                ] }}
        {%- else %}
              {{[
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": "8"},
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": ":"}
                ] }}
        {%- endif %}

      #--- Player Shuffle State     -----------------------------------------
      #--- Realised with images that are formed by overlapping characters, so color can be adapted by configuration
      #--    O
      #--  OOOO 
      #--    O
      #--  OOOO
      #--    O
      #--
      #--    O
      #--  O OO 
      #--   OO 
      #--  O OO
      #--    O
    - type: templatable
      template: >-
        {#-------------------------------------------------------------------------#}
        {#--- Player Shuffle State                                               --#}
        {#-------------------------------------------------------------------------#}
        {#--- set x and y position of the top pixel according to the following alignment --#}
        {%- set pos_x = 31 %}
        {%- set pos_y = 59 %}
        {%- set alignment = "center" %}

        {%- set text_color = player_shuffle_state_color %}

        {%- set shuffle_state = state_attr(master_player, 'shuffle') %}
        {#--- get duration from the media player --#}
        {%- set duration = state_attr(master_player, 'media_duration') %}

        {%- if duration != none %}
              {#--- If there is a duration provided, it is probably a playlist not a radio station --#}
              {#--- For a playlist shuffle can be activated or not. The state is displayed here  --#}
              {%- if (not shuffle_state) %}
                    {{[
                        {"type": "text", "position": [pos_x, pos_y - 1], "color": text_color, "align": alignment, "content": ":"},
                        {"type": "text", "position": [pos_x - 1, pos_y - 1], "color": text_color, "align": alignment, "content": "-"},
                        {"type": "text", "position": [pos_x, pos_y - 1], "color": text_color, "align": alignment, "content": "-"},
                        {"type": "text", "position": [pos_x, pos_y + 1], "color": text_color, "align": alignment, "content": ":"},
                        {"type": "text", "position": [pos_x - 1, pos_y + 1], "color": text_color, "align": alignment, "content": "-"},
                        {"type": "text", "position": [pos_x, pos_y + 1], "color": text_color, "align": alignment, "content": "-"}
                      ] }}
              {%- else %}
                    {{[
                        {"type": "text", "position": [pos_x - 2, pos_y], "color": text_color, "align": alignment, "content": ":"},
                        {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": ":"},
                        {"type": "text", "position": [pos_x + 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                        {"type": "text", "position": [pos_x, pos_y - 1], "color": text_color, "align": alignment, "content": ":"},
                        {"type": "text", "position": [pos_x, pos_y + 1], "color": text_color, "align": alignment, "content": ":"},
                        {"type": "text", "position": [pos_x - 1, pos_y - 2], "color": text_color, "align": alignment, "content": "."}
                      ] }}
              {%- endif %}
        {%- else %}
              {#--- If there is no duration provided, just display nothing --#}
              {{[
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": ""}
                ] }}
        {%- endif %}


      #--- Player Mute State (Volume) -----------------------------------------
      #--- Realised with images that are formed by overlapping characters, so color can be adapted by configuration
      #--     0  
      #--    00 0 
      #--   0  0
      #--    00 0
      #--     0  
    - type: templatable
      template: >-
        {#-------------------------------------------------------------------------#}
        {#--- Player Mute State                                                  --#}
        {#-------------------------------------------------------------------------#}
        {#--- set x and y position of the top pixel according to the following alignment --#}
        {%- set pos_x = 35 %}
        {%- set pos_y = 59 %}
        {%- set alignment = "center" %}

        {%- set text_color = player_mute_color %}

        {%- set mute_state = state_attr(master_player, 'is_volume_muted') %}
 
        {%- if (mute_state) %}
              {{[
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": "<"},
                  {"type": "text", "position": [pos_x + 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                  {"type": "text", "position": [pos_x + 2, pos_y - 2], "color": text_color, "align": alignment, "content": "."},
                  {"type": "text", "position": [pos_x + 3, pos_y], "color": text_color, "align": alignment, "content": ":"}
                ] }}
        {%- else %}
              {{[
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": ""}
                ] }}
        {%- endif %}



      #--- Remaining time  --------------------------------------
      #--- Realised with templatable component and condenced character spacing for separator
    - type: templatable
      template: >-
        {#-------------------------------------------------------------------------#}
        {#--- Remaining time with condenced character spacing for separator      --#}
        {#-------------------------------------------------------------------------#}

        {#--- set x and y position of the top pixel according to the following alignment --#}
        {%- set pos_x = 64 %}
        {%- set pos_y = 59 %}
        {%- set alignment = "right" %}
        {%- set text_color = play_time_text_color %}

        {%- set duration = state_attr(master_player, 'media_duration') %}
        {%- if duration != none %}
              {%- set position = state_attr(master_player, 'media_position') %}
              {%- set last_updated = as_timestamp(state_attr(master_player, 'media_position_updated_at')) %}
              {%- set current_time = as_timestamp(now()) %}
      
              {%- set player_state = states(master_player) %}
              {%- if (player_state != "playing") %}
                    {#--- if the player is not in the state playing, the attribute media_position is updated and shows the elapsed time --#}
                    {%- set remaining_seconds = duration - position %}
              {%- else %}
                    {%- set remaining_seconds = duration - (position + current_time - last_updated) %}
              {%- endif %}

              {%- set hours = (remaining_seconds // 3600) %}
              {%- set minutes = (remaining_seconds % 3600) // 60 %}
              {%- set seconds_remain = (remaining_seconds % 60) %}

              {#--- Remaining time is formated like "1:02:03", 1-2 digits for hours (if included) and 2 digits for minutes and seconds --#}
              {%- if (hours | int > 0) %}
                  {{[
                      {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": '%02d' | format(seconds_remain)},
                      {"type": "text", "position": [pos_x - (hours | string | length * font_size_x) + 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                      {"type": "text", "position": [pos_x - (hours | string | length * font_size_x) - 2, pos_y], "color": text_color, "align": alignment, "content": '%02d' | format(minutes)},
                      {"type": "text", "position": [pos_x - ((hours | string | length + 2) * font_size_x) - 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                      {"type": "text", "position": [pos_x - ((hours | string | length + 2) * font_size_x) - 4, pos_y], "color": text_color, "align": alignment, "content": hours}

                      ] }}
              {%- else %}
                  {{[
                      {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": '%02d' | format(seconds_remain)},
                      {"type": "text", "position": [pos_x - (2 * font_size_x) + 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                      {"type": "text", "position": [pos_x - (2 * font_size_x) - 2, pos_y], "color": text_color, "align": alignment, "content": '%02d' | format(minutes)}
                      ] }}
              {%- endif %}
     
        {%- else %}
              {#--- show current time ---#}
              {%- set elapsed_time = now().strftime('%H:%M') %}
              {%- set hours = now().strftime('%H') %}
              {%- set minutes = now().strftime('%M') %}
              {#{%- set seconds_remain = now().strftime('%S') %}#}
      
              {#--- 11:22 --#}
       
              {{[
                  {"type": "text", "position": [pos_x, pos_y], "color": text_color, "align": alignment, "content": minutes},
                  {"type": "text", "position": [pos_x - (hours | length * font_size_x) + 1, pos_y], "color": text_color, "align": alignment, "content": ":"},
                  {"type": "text", "position": [pos_x - (hours | length * font_size_x) - 2, pos_y], "color": text_color, "align": alignment, "content": hours},
                  {"type": "text", "position": [pos_x - ((hours | length + 2) * font_size_x) - 1, pos_y], "color": current_time_text_color, "align": alignment, "content": "!"}
                ] }}
        {%- endif %}

Automation YAML Download Cover Image for Media Player Visualisation

#============================================================================= 
# Purpose     : Downloads the cover image of a song being played on the defined media player (master_player) to the local file system.
#               From there an other application/automation can read the saved image.
#               
# Requirements: 
# Uses        : Downloader integration --> https://www.home-assistant.io/integrations/downloader
# Author      : AutoLotion
#-----------------------------------------------------------------------------
# Version History
#-----------------------------------------------------------------------------
#         |   |
# 01.10.26|1.0|- First version for use with the Visualisation of a Media Player on a Divoom Pixoo 64 Display
#         |   |- 
#         |   |
#-----------------------------------------------------------------------------
# HA Core                : 2026.9.2
# HA Supervisor          : 2026.09.0
# HA Operating System    : 18.2
# HA Frontend            : 20260826.7
# Music Assistant        : 2.10.3
# Divoom Pixoo 64 Int.   : 1.23.0
#============================================================================= 

alias: Download Cover Image for Media Player Visualisation
description: ''

mode: queued        #--- no trigger event should be missed, even when the next song is initiated by the user several times
max: 10

triggers:
  - trigger: state
    entity_id: media_player.hifi_esparagus
    attribute: entity_picture               #--- trigger for the change of the entity_picture attribute of the media player
    id: picture_changed


conditions: []

variables:
  master_player: "media_player.hifi_esparagus"
#  none_image_url: "https://r2.theaudiodb.com/images/media/album/thumb/aqgil91641089435.jpg"   #-- in case there is no valid image_url provided by the player, this image is downloaded
#  none_image_url: "https://dn711301.ca.archive.org/0/items/mbid-8ed67dcb-89fe-43b2-b0d4-3fb95fbce65f/mbid-8ed67dcb-89fe-43b2-b0d4-3fb95fbce65f-44710046609_thumb1200.jpg"    #-- in case there is no valid image_url provided by the player, this image is downloaded
  none_image_url: "https://assets.fanart.tv/fanart/red-lips-6160ac5444959.jpg"   #-- in case there is no valid image_url provided by the player, this image is downloaded
  image_path: "/config/www/"     #-- path where the cover imges are downloaded to
  filename_postfix: "_cover_image"   #-- postfix that is added to the filename. Example: "media_player.hifi_esparagus_cover_image.jpg"

actions:
  - choose:
      - conditions:
          - condition: trigger
            id:
              - picture_changed
        sequence:
          - action: downloader.download_file
            #--- Requires Downloader integration --> https://www.home-assistant.io/integrations/downloader
            #--- The download directory is set during installation of the integration and can not be changed by UI. It must exist
            #--- If a relative path is given, it is situated under /config
            #--- A subdir setting is relative to the configured download directory, <download directory>/<subdir>
            #--- If a subdir is defined, the subdir will be created under the configured download directory by the action downloader.download_file
            #--- The filename attribute of Downloader integration action downloader.download_file may not contain a path!!
            #--- Sample: <download directory>/<subdir>/<filename>
            #---   download directory: "/config/www/"
            #---   subdir: ""
            #---   master_player: "media_player.hifi_esparagus"
            #---   filename_postfix: "_cover_image"
            #---   filename: "{{master_player}}{{filename_postfix}}.jpg" = "media_player/media_player.hifi_esparagus_cover_image.jpg"
            #---   --> fullpath: "/config/www/media_player.hifi_esparagus_cover_image.jpg"
            data:
              #url: "https://www.srf.ch/build/assets/radio-srf-3-square-Ds8liY9N.svg"
              #url: "https://r2.theaudiodb.com/images/media/album/thumb/mqfkfk1640276803.jpg"
              #url: "{{ state_attr('media_player.hifi_esparagus', 'entity_picture') }}"
              url: >-
                {%- set url = state_attr(master_player, 'entity_picture') %}
                {%- if url != none %}
                      {#--- check if there is a valid imge format --#}
                      {%- if ('jpg' in url or 'png' in url or 'ico' in url) %}
                             {%- set image_url = url %}
                      {%- else %}
                             {#--- if there is no valid image format, show the image from none_image_url --#}
                             {%- set image_url = none_image_url %}
                      {%- endif %}
                  
                {%- else %}
                      {#--- if there is no valid url, show the image from none_image_url --#}
                      {%- set image_url = none_image_url %}
                {%- endif %}

                {{ image_url }}

              #subdir: "media_player"
              filename: "{{master_player}}{{filename_postfix}}.jpg"    #-- the filename attribute of Downloader integration may not contain a path!!
              overwrite: true       #-- allways overwrite an existing image

[craigbye]

I got this to work with a Spotify media player changing the URL of the downloader integration to the following:

url: >-
                http://homeassistant.local:8123{{ state_attr('media_player.spotify', 'entity_picture') }}

I had to remove the handling of the 'jpg' or 'png' if/else conditional logic and just set the URL as above. Couldn't find a state/variable with the home assistant local URL, so hardcoded it.

This automation ends up downloading the image from entity_picture through http locally and then stores it in the /config/www folder for the Pixoo setting to then pick up (as outlined in the original example above).

I tried using the Pixoo configuration above directly with the URL I provided but it didn't work. So I went with the edited URL in the downloader and cover_option = 2 in the config.

[AutoLotion]

@craigbye
It looks as if this simple url combination is working only for spotify players. A normal player with a radio station on, will end up in a url like this:

http://homeassistant.local:8123https://archive.org/download/mbid-8530af0a-246c-49c1-bca1-b2fa7ec5edab/mbid-8530af0a-246c-49c1-bca1-b2fa7ec5edab-45406674036_thumb1200.jpg