How to show your current picture frame photo in Home Assistant (2024 Edition)

Last updated December 16, 2024 / By

Helge did an excellent job integrating the Pi3D PictureFrame controls into Home Assistant a few years ago.

However, as Home Assistant evolves, it frequently introduces new commands and integrations, which often result in breaking changes. At the same time, many of these updates bring features that simplify tasks that were previously more complex.

At some point, the current photo stopped displaying properly in my Chrome browser. Strangely, it still worked in Safari, but I was never able to pinpoint the exact cause. Eventually, it stopped showing in Safari as well, along with every other browser I tried.

Recently, I decided it was time to refresh my Home Assistant cards and find a way to get the image display working again.

It turned out to be surprisingly easy.

Home Assistant Integration

As long as the HTTP integration is activated in your configuration.yaml, you can view the current image directly in your browser by accessing:

http://192.168.178.58:9000/current_image

Insert the IP address of your PictureFrame Raspberry Pi in the URL, of course.

If this works, displaying the image in Home Assistant is a piece of cake.

Go to Settings > Devices & Services in the Home Assistant interface.

Click the + Add Integration button in the bottom-right corner.

  • Search for and select Generic Camera.

Configure the Generic Camera:

  • Enter the following details:
    • Still Image URL: http://192.168.178.58:9000/current_image
    • Stream Source URL: (leave empty)
    • RTSP transport protocol: HTTP
    • Authentication: Basic

Don’t check anything else. Click “Submit”.

Create a new Picture Entity Card in your Dashboard and select the newly added camera entity.

The current image should now appear in your dashboard.

And if you use the Nabu Casa service, you can see the current image even from outside of your home network. Pretty cool!

Note: The image updates slightly late, a few seconds. This is a function of the network speed of your picture frame.

For the design shown above, I am using the Bubble Card.

If you are interested, here is the full code

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: separator
    name: PictureFrame
    icon: ""
    columns: 2
    sub_button:
      - entity: sensor.image_count_rahmen
        show_attribute: false
        show_last_changed: false
        show_state: true
        show_background: false
        show_icon: true
        icon: mdi:ticket-confirmation-outline
      - entity: sensor.image_count_deleted
        icon: mdi:trash-can-outline
        show_attribute: false
        show_icon: true
        show_state: true
        show_background: false
        show_name: false
        tap_action:
          action: none
      - entity: sensor.cpu_temp_rahmen
        icon: mdi:thermometer-low
        show_state: true
        show_background: false
        tap_action:
          action: none
  - type: custom:bubble-card
    card_type: button
    entity: sensor.picframe_image
    show_attribute: true
    show_state: false
    show_last_changed: false
    force_icon: false
    sub_button: []
    attribute: location
    show_name: false
    show_icon: true
    icon: mdi:map-marker-radius-outline
  - type: custom:bubble-card
    card_type: button
    entity: sensor.picframe_image_date
    show_attribute: false
    show_state: true
    show_last_changed: false
    force_icon: false
    sub_button:
      - entity: button.picframe_back
        show_name: false
        show_state: false
        show_attribute: false
        name: Back
        tap_action:
          action: toggle
        double_tap_action:
          action: toggle
        hold_action:
          action: toggle
      - entity: switch.picframe_paused
        show_background: true
        name: Pause
        tap_action:
          action: toggle
        double_tap_action:
          action: toggle
        hold_action:
          action: toggle
      - entity: button.picframe_next
        name: Next
        tap_action:
          action: toggle
        double_tap_action:
          action: toggle
        hold_action:
          action: toggle
      - entity: button.picframe_delete
        show_state: false
        show_attribute: false
        show_background: false
        tap_action:
          action: toggle
        double_tap_action:
          action: toggle
        hold_action:
          action: toggle
    attribute: location
    show_name: false
    show_icon: true
    icon: mdi:calendar-clock-outline
  - show_state: false
    show_name: false
    camera_view: auto
    type: picture-entity
    entity: camera.192_168_178_58
    image: https://demo.home-assistant.io/stub_config/bedroom.png
    camera_image: camera.192_168_178_58

Make sure you install Bubble Card via HACS first.

Enjoy!

Was this article helpful?

Thank you for your support and motivation.

Shop on Amazon

using my affiliate link

Buy me a coffee

via CoinDrop with zero fees

Email me

and show me your project

Related Articles

Scroll to Top