Using media_player entity_picture

Hi,
I am working on a dashboard for controlling Sonos in my house.

I am wondering if there is a way of getting the media_player entity_picture and display as image?

Something like this

media_player_picture:
  widget_type: iframe
  refresh: 1
  frame_style: ""
  img_list: 
    - http://HA/api/media_player_proxy/media_player.living_room?token=56f317f98d7adb97a6ee72042a00d71d9cda0b209b2c108d2f0f3835b7a078eb&cache=b3fb6

Which displays the image, problem is that the token changes and wont work for long.

3 Likes

Also, there seems to be a bug that the iframe do not update the picture if the img_list only contains 1 link

not only with 1 picture.
there is a known issue with cashing. if a pic is cashed it wont get updated.

(when i write this i wonder if we cant set cashing to not cashing on our own devices, and if it would help)

1 Like

I can use a script downloading the entity_picture to a webserver for this. Kind of ugly but works. However still an issue with the cache. Not sure how to proceed with that.

#!/usr/bin/env python3
import homeassistant.remote as remote
import urllib.request
import time

def main():
    while True:
      media_picture_address = None
      api = remote.API('127.0.0.1', 'password')
      living_room = remote.get_state(api, 'media_player.living_room')
      kitchen = remote.get_state(api, 'media_player.kitchen')

      if living_room.state == 'playing':
        media_picture_address = 'http://domain.se' + str(living_room.attributes['entity_picture'])
      elif kitchen.state == 'playing':
        media_picture_address = 'http://domain.se' + str(kitchen.attributes['entity_picture'])

      if media_picture_address:
        urllib.request.urlretrieve(media_picture_address, "/home/homeassistant/.homeassistant/www/media_picture")
        
      time.sleep(1)
        
if __name__ == "__main__":
    main()

i think we have to wait untill andrew comes up with a solution for the cashing problem.

i have a workaround for that but its dirty.

create a dashboard with only an image
then in the original dashboard create an iframe widget that loads that dashboard as url.
it forces a recompile and a reload.

1 Like

Dirty but working. Thanks =)

1 Like

remember that it will generate lots of entries in your log :wink:
and on my tablet i use it to change between 3 cameras, but it gets a bit slow sometimes. (i think my tablet is having trouble with it :wink: )

1 Like

I can’t seem to get it working. It displays the image but it won’t update… Looks like a cache issue?


appdaemon.cfg:

...
dash_force_compile = 1

media_entity_picture.dash:

#
# Main arguments, all optional
#
title: Höstanemonvägen 8
widget_dimensions: [123, 123]
widget_margins: [0, 0]
widget_size: [1, 1]
columns: 3
global_parameters:
    use_comma: 0
    precision: 1
    
layout:
  - media_player_picture(3x3)
  

media_player_picture:
  widget_type: iframe
  refresh: 1
  frame_style: ""
  img_list: 
    - https://domain/local/media_picture.jpg

music.dash:

media_player_picture:
  widget_type: iframe
  refresh: 1
  url_list: 
    - http://10.0.0.X:5050/media_entity_picture?skin=hygge

the music dash must be a working dash.

so like:

#
# Main arguments, all optional
#
title: Höstanemonvägen 8
widget_dimensions: [123, 123]
widget_margins: [0, 0]
widget_size: [1, 1]
columns: 3
global_parameters:
    use_comma: 0
    precision: 1
    
layout:
  - media_player_picture(3x3)
media_player_picture:
  widget_type: iframe
  refresh: 10
  url_list: 
    - http://10.0.0.X:5050/media_entity_picture?skin=hygge

Sorry I was unclear, I just copied the part with the widget from music.dash since it was so big.
music.dash

#
# Main arguments, all optional
#
title: Höstanemonvägen 8
widget_dimensions: [120, 120]
widget_margins: [5, 5]
widget_size: [1, 1]
columns: 8
global_parameters:
    use_comma: 0
    precision: 1
    
layout:
  - current_media_title(6x1), next_media_title(2x1)
  - media_player_picture(3x3), living_room_group(1x1), kitchen_group(1x1), dashboard_play_music(3x1)
  - living_room_volume(2x1), spacer(3x1)
  - kitchen_volume(2x1), spacer(3x1)
  - previous_button, pause_play_button(2x1), next_button, shuffle_button, repeat_button, crossfade_button, spacer(1x1)
  - include: bottom_panel

current_media_title:
  widget_type: sensor
  title: "Spelas nu"
  entity: sensor.sonos_playing

next_media_title:
  widget_type: sensor
  title: "Nästa låt"
  entity: sensor.sonos_playing_next
  
media_player_picture:
  widget_type: iframe
  refresh: 10
  url_list: 
    - http://10.0.0.90:5050/media_entity_picture?skin=hygge
   
kitchen_volume:
  widget_type: input_slider
  entity: input_slider.kitchen
  title: Volym Kök
  step: 0.1
  
living_room_volume:
  widget_type: input_slider
  entity: input_slider.living_room
  title: Volym Vardagsrum
  step: 0.1

next_button:
  widget_type: script
  entity: script.sonos_control_next
  icon_on: fa-step-forward
  icon_off: fa-step-forward

previous_button:
  widget_type: script
  entity: script.sonos_control_previous
  icon_on: fa-step-backward
  icon_off: fa-step-backward
  
pause_play_button:
  widget_type: switch
  entity: switch.sonos_play
  icon_on: fa-pause
  icon_off: fa-play
  
shuffle_button:
  widget_type: switch
  title: Blanda
  entity: switch.sonos_shuffle
  icon_on: fa-random
  icon_off: fa-random
  
repeat_button:
  widget_type: switch
  title: Upprepa
  entity: switch.sonos_repeat
  icon_on: fa-repeat
  icon_off: fa-repeat
  
crossfade_button:
  widget_type: switch
  title: Crossfading
  entity: switch.sonos_crossfade
  icon_on: fa-sliders
  icon_off: fa-sliders
  
kitchen_group:
  widget_type: switch
  title: Köket
  entity: switch.sonos_kitchen_group
  icon_on: fa-toggle-on
  icon_off: fa-toggle-off
  
living_room_group:
  widget_type: switch
  title: Vardagsrummet
  entity: switch.sonos_living_room_group
  icon_on: fa-toggle-on
  icon_off: fa-toggle-off
  
dashboard_play_music:
  title: "Välj musik"
  widget_type: navigate
  icon_active: fa-music
  icon_inactive: fa-music
  dashboard: play_music

is the media_entity_picture dash working?
and probably you should lose the refreh there completely.

with these settings you try to download the pic every second and the dash every 10 seconds.
dont set them in the pic dash and set it to 15 or higher in the music dash.

Okay I removed the refresh in media_entity_picture.

It displays the image but only the cached one, if i clear browser cache it displays the correct image.

also in the music dash?

i havent tested it with just 1 url. i have it working with 2 or 3 camera images.

I found a way around it.
You can force the browser to not use the cached image by adding “?random text/numbers” after the image url.
like so…

<img src="picture.jpg?1222259157.415" alt="">

So I edited the widget.
“appdaemon/widgets/baseiframe/baseiframe.js”
To …

else if ("img_list" in self.parameters)
        {
            var random = "?"+Math.random()
            self.set_field(self, "img_src", "".concat(self.parameters.img_list[self.index],random));
            size = self.parameters.img_list.length
        }

Then rebuilt the docker image…
Now I don’t need to use another dashboard.
Instead this works now… I get a new image every time.

media_player_picture:
  widget_type: iframe
  refresh: 5
  img_list: 
    - http://10.0.0.80:8123/local/media_picture.jpg
2 Likes

Okay now I started using acockburn/appdaemon from dockerhub and need to do the same change in here. Not sure how I do because if i change the baseiframe.js file the change wont bite. Any thoughts? @ReneTode @aimc

sorry i have no experience with docker.

could my hack be a possible sollution for pull request @aimc ?
or have you found anything else?

I’m happy to accept a PR for this change as long as it is optional by an added parameter for the widget.

1 Like

I can’t figure out how to test my code.

If I copy my changes into the baseiframe.js inside my docker container and restart the container its still like the dashboard is using an unchanged js file.

You ever get anywhere here?

Ive been trying for hours to get the media picture from sonos to update on my dashboard but just shows the cached first song played artwork.