Skip to content

Homeassistant

Jump to bottom
helgeerbe edited this page Jun 3, 2022 · 24 revisions

Overview

The image below shows the full integration of PictureFrame into Home Assistant. A user friendly 'step-by-step' instruction will be published on Wolfgang's blog www.thedigitalpictureframe.com. If you are using - for whatever reason - a picframe version <= 2021.07.05 have a look at the retired wiki page.

Here we will only provide provide a rough 'How-To' for experienced Home Assistant users. Follow the instruction if you Upgrade from previous picframe version <= 2021.7.5.

Preconditions

  • Home Assistant (Version >= 2021.7)has to be up and running
  • Home Assistant device discovery has to be enabled (which by default is)
  • Home Assistant's mqtt interface has to be enabled and connected to your mqtt broker
  • PictureFrame's mqtt interface has to be enabled and is connected to your mqtt broker
  • If you enabled SSL to connect to your Home Assistant instance, you have to enable SSL also in PictureFrame's web server (if SSL is enabled, Home Assistant will always use SSL no matter if you call http or https to retrieve the images)
  • Home Assistant identifys PictureFrame through its configured 'device_id'. Default is 'picframe'. This id has to be unique. So for a second PictureFrame you have to change it. And accordingly all references to it in the following example scripts.

Home Assistant's Device Discovery

If the preconditions are met. PictureFrame will send on network connect auto discovery messages to Home Assistant.

So after a while you schould find PictureFrame in Home Assistants 'settings -> Integration -> MQTT -> devices'. Listed with its configured device_id which is by default 'picframe'.

In the device overview you should see all discoverd switches ans sensors.

If anything goes wrong, or you delete an entity from PictureFrame by mistake. Don't worry. You can delete the whole device and after a new connection of PictureFrame it will appear again.

Helpers

Switches and sensors could be used directly in Home Assistant cards. For free text input elements like the tags filter you have to create the elements first.

Unfortunatele Home Assistant doesn't provide a YAML import for helpers. You have to crete them over the GUI manually.

input_text

input_text support regular expressions. They are used to enter a valid date format, which can be processd.

Country Format Regex
Germany dd.mm.yyyy ^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[012])\.\d{4}$
US mm/dd/yyyy ^(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$
US yyyy-mm-dd ^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$
en dd/mm/yyyy ^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/\d{4}$

If you define other date formats please share them with us, so we can extend the list. To test the regex I find this site very helpful regex101.com

For date input you can also use the date picker helper. But this limits you to the standard unix time. So you can't pick a day before 1970.

picframe_date_from

picframe_date_to

picframe_location_filter

picframe_tags_filter

Cards

If you create a new card in Home Assistant you can switch from visual editing to yaml editor. Simply copy the given yaml-examples and paste them in to the editor.

Image Card

This is the image card example config.

cards:
  - type: markdown
    content: >-
      {% if state_attr("sensor.picframe_image", "IPTC Object Name") -%}

      ## {{ state_attr("sensor.picframe_image", "IPTC Object Name") }}
       {%- else -%}
      ## {{ states("sensor.picframe_image") }}

      {%- endif %}

      {% if state_attr("sensor.picframe_image", "IPTC Caption/Abstract") -%}
         {{ state_attr("sensor.picframe_image", "IPTC Caption/Abstract") }}
      {% endif %}

      ![Image](http://myhost:9000/{{
      states('sensor.picframe_image') | urlencode }})

      {% if state_attr("sensor.picframe_image", "location") != None %}
        {{ state_attr("sensor.picframe_image", "location") }}
      {%- else -%}
        Keine GPS Daten.
      {%- endif %}
  - type: glance
    entities:
      - entity: button.picframe_back
        tap_action:
          action: toggle
      - entity: switch.picframe_paused
        tap_action:
          action: toggle
      - entity: button.picframe_next
        tap_action:
          action: toggle
      - entity: switch.picframe_shuffle
        tap_action:
          action: toggle
      - entity: button.picframe_delete
        tap_action:
          action: toggle
    show_name: false
    show_state: false
    state_color: true
    show_icon: true
  - type: entities
    entities:
      - entity: sensor.picframe_image
        name: Datei
      - entity: sensor.picframe_image_date
        icon: mdi:calendar-clock
        name: Datum
      - type: attribute
        entity: sensor.picframe_image
        attribute: EXIF ExposureTime
        unit: sec
        icon: mdi:camera-timer
        name: Belichtungszeit
      - type: attribute
        entity: sensor.picframe_image
        attribute: EXIF FNumber
        unit: f
        icon: mdi:camera-iris
        name: Blende
      - type: attribute
        entity: sensor.picframe_image
        attribute: EXIF ISOSpeedRatings
        icon: mdi:film
        name: ISO
      - type: attribute
        entity: sensor.picframe_image
        attribute: EXIF FocalLength
        unit: iso
        icon: mdi:signal-distance-variant
        name: Brennweite
      - type: attribute
        entity: sensor.picframe_image
        attribute: Image Model
        unit: mm
        icon: mdi:camera
        name: Kamera
      - type: attribute
        entity: sensor.picframe_image
        attribute: IPTC Keywords
        icon: mdi:tag
        name: Tags
  - aspect_ratio: '3:2'
    dark_mode: false
    default_zoom: 11
    entities:
      - entity: sensor.picframe_image
    type: map
    hours_to_show: 0
type: vertical-stack

Search for

...
      ![Image](http://myhost:9000/{{
      states('sensor.picframe_image') | urlencode }})
...

and replace myhost:9000 with the correct 'hostname' and 'port number'. If you enabled SSL in PictureFrame's webserver change httpto https.

Filter Card

This is the filter card example config.

entities:
  - entity: sensor.picframe_image_counter
    name: Bilder
  - entity: select.picframe_directory
    name: Directory
  - entity: input_text.picframe_tags_filter
    name: Stichwortsuche
  - entity: input_text.picframe_location_filter
    name: Ortssuche
  - entity: input_text.picframe_date_from
    name: Bilder ab (TT.MM.JJJJ)
  - entity: input_text.picframe_date_to
    name: Bilder bis (TT.MM.JJJJ)
show_header_toggle: false
theme: Backend-selected
title: Filter
type: entities
state_color: true

Adjust date format, if needed. It has to correspondend to the regular expression in you date_from / date_to helper.

...
  - entity: input_text.picframe_date_from
    name: Bilder ab (TT.MM.JJJJ)
  - entity: input_text.picframe_date_to
    name: Bilder bis (TT.MM.JJJJ)
...

Text Overlay Card

This is the text overvlay card example config.

type: entities
entities:
  - entity: switch.picframe_clock
    name: Uhr
  - entity: switch.picframe_title_toggle
    name: Titel
  - entity: switch.picframe_caption_toggle
    name: Beschreibung
  - entity: switch.picframe_name_toggle
    name: Dateiname
  - entity: switch.picframe_location_toggle
    name: Ort
  - entity: switch.picframe_date_toggle
    name: Aufnahmedatum
  - entity: switch.picframe_directory_toggle
    name: Verzeichnis
  - entity: switch.picframe_text_refresh
    name: Text refresh
title: Text-Overlay
state_color: true

Settings Card

This is the settings card config example.

entities:
  - entity: switch.picframe_display
    name: Bilderrahmen
  - entity: number.picframe_brightness
    name: Bildschirmhelligkeit (0-1)
  - entity: number.picframe_time_delay
    name: Anzeigedauer (1-400 sec)
  - entity: number.picframe_fade_time
    name: Fade Time (1-50 sec)
show_header_toggle: false
theme: Backend-selected
title: Digitaler Bilderrahmen
type: entities
state_color: true

Automation.yaml

To avoid further manual configurations in the automations. We created a blueprint.
Open your Home Assistant instance and show the blueprint import dialog with a specific blueprint pre-filled. The gist url can also directly used in home assistant.

So most of the time. Only the date format string has to be entered to reflect the local date format. For the other settings, the default values could be used and need only to be changed, if you are using more than one picframe. They are linking picframes mqtt sensors to the input text helper ui elements.

Configuration.yaml

Edit your home assistant configuration.yaml add a value template for your exif date format. To show the image date in the correct local date format you have to format it to your needs.

sensor:
  - platform: template
    sensors:
      picframe_image_date:
        value_template: "{{ state_attr('sensor.picframe_image', 'EXIF DateTimeOriginal') | int | timestamp_custom('%d. %b. %Y %H:%M') }}"
        friendly_name: "Datum"

The time format could be found here: docs.python.org datetime

Copy the sniplet to the appropriate section in your configuration.yaml

Upgrade from previous picframe version <= 2021.7.5

You have to uninstall the old integration.

  1. Open mqtt integration and delete picframe device.
  2. Delete all picframe automations
  3. Delete all helpers except
  • input_text.picframe_tags
  • input_text.picframe_location
  • input_text.picframe_date_to
  • input_text.picframe_date_from

To setup the new integration:

  1. run picframe
  2. wait for a pic change (this will send proper values to the ui elements) or press next image
  3. Open ui cards and and replace the old (now) unreferenced elements with the newly created elements
  4. press Open your Home Assistant instance and show the blueprint import dialog with a specific blueprint pre-filled. to import new blueprint.
  5. Click on 'Create new automation' link.
  6. change date format to the format used in your date_to/date_from input_text helpers (has to be the same date format)
  7. That's it. Have fun.

Changelog

dev branch

  • Changes are not released yet.

The pi3d PictureFrame project Wiki | Slack

Clone this wiki locally