Using media_player entity_picture

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.

Hi
Is there away to resize the artwork displayed?

for a dashboard? I just figured this out, and the image looks good with 2x2 or 3x3 but havent tried other…

I believe these is a google proxy that can resize images on the fly tho…

2 Likes

Thanks for sharing, going to check it out.

1 Like

Can you share your code for HADashboard? I am interested in using this to display pictures inside media players just like in Home Assistant.