Use Immich server as source with API (feature request)

[agdamsbo]

Hi! I am a really happy user of this extension.

Would it be realistic/feasible to include an Immich server as possible source for your Wallpanel?

I am migrating to Immich (selfhosted photo and video server), as it is nearing a stable release expected this year and really have gained some momentum I believe.

There are a few options already to use Immich pictures directly as frame/wallpanel/screensaver outside HA (https://github.com/3rob3/ImmichFrame or https://github.com/damongolding/immich-kiosk), and I was able to find one HACS rep, that integrates Immich pictures as a camera element (https://github.com/aleksej-kuznecow/ha-immich-photos). None of these have the same extensive features as your Wallpanel.

Thank you in advance!

[agdamsbo]

Wanted to have added this repositry also as reference, as I believe this is the best integration in HA: https://github.com/outadoc/immich-home-assistant

[agdamsbo]

Just to clarify. Adding the HACS integration mentioned above from outadoc will create an image entity, that can be used as the image_url, which allows for the functionality I described. Maybe this is enough, and could just be added to your documentation as a possible alternative source to Google Photos which is already mentioned.

[steveredden]

This config works great with a working immich-kiosk instance:

wallpanel:
  enabled: true
  image_fit: contain
  idle_time: 60
  screensaver_entity: input_boolean.screensaver_status
  screensaver_stop_navigation_path: '#someplace'
  fullscreen: false
  image_list_update_interval: 9
  display_time: 10
  image_order: random
  image_background: image
  image_url: https://immich-kiosk.domain.com/image?raw&entropy=${timestamp}

Note: some sort of change in URL is required, thus added the bogus entropy querystring param above.

[j-a-n]

I have just added experimental support for the immich API in version 4.27.0. I'm looking forward to your feedback!

[agdamsbo]

Wow! Great of you to go this direction. I have tried to set it up, but just get a black screen when the wallpanel starts. I believe these are relevant logs:

Logger: frontend.js.modern.202408090
Source: components/system_log/__init__.py:333
First occurred: 30 August 2024 at 19:00:00 (25 occurrences)
Last logged: 19:07:05

Uncaught error from Chrome WebView 123.0.6312.122 on Android 10 TypeError: Cannot read properties of undefined (reading 'get') _handleMessage (src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts:354:44) callbackFunction (src/data/zha.ts:200:44) callback (node_modules/home-assistant-js-websocket/dist/connection.js:23:33) forEach (node_modules/home-assistant-js-websocket/dist/connection.js:15:25)
Uncaught error from Chrome WebView 123.0.6312.122 on Android 10 TypeError: Cannot read properties of undefined (reading 'replace') /hacsfiles/lovelace-wallpanel/wallpanel.js:1589:41 WallpanelView.setImageDataInfo (/hacsfiles/lovelace-wallpanel/wallpanel.js:1581:15) WallpanelView.switchActiveImage (/hacsfiles/lovelace-wallpanel/wallpanel.js:2153:8) preloadCallback (/hacsfiles/lovelace-wallpanel/wallpanel.js:1456:9) /hacsfiles/lovelace-wallpanel/wallpanel.js:2087:7 /hacsfiles/lovelace-wallpanel/wallpanel.js:2075:6 _checkLoading (/hacsfiles/lovelace-wallpanel/wallpanel.js:2053:6)
Uncaught error from Chrome WebView 123.0.6312.122 on Android 10 TypeError: Cannot read properties of undefined (reading 'replace') /hacsfiles/lovelace-wallpanel/wallpanel.js:1589:41 WallpanelView.setImageDataInfo (/hacsfiles/lovelace-wallpanel/wallpanel.js:1581:15) WallpanelView.switchActiveImage (/hacsfiles/lovelace-wallpanel/wallpanel.js:2153:8) WallpanelView.handleInteractionEvent (/hacsfiles/lovelace-wallpanel/wallpanel.js:2484:12) window.addEventListener.capture (/hacsfiles/lovelace-wallpanel/wallpanel.js:1389:8)
Uncaught error from Chrome WebView 123.0.6312.122 on Android 10 TypeError: Cannot read properties of null (reading 'replace') /hacsfiles/lovelace-wallpanel/wallpanel.js:1589:41 WallpanelView.setImageDataInfo (/hacsfiles/lovelace-wallpanel/wallpanel.js:1581:15) WallpanelView.switchActiveImage (/hacsfiles/lovelace-wallpanel/wallpanel.js:2153:8) /hacsfiles/lovelace-wallpanel/wallpanel.js:2397:8 _checkLoading (/hacsfiles/lovelace-wallpanel/wallpanel.js:2053:6)
Uncaught error from Firefox 129.0 on Android 10 TypeError: img.imageUrl is undefined setImageDataInfo/html< (/hacsfiles/lovelace-wallpanel/wallpanel.js:1589:5) setImageDataInfo (/hacsfiles/lovelace-wallpanel/wallpanel.js:1581:15) switchActiveImage (/hacsfiles/lovelace-wallpanel/wallpanel.js:2153:8) handleInteractionEvent (/hacsfiles/lovelace-wallpanel/wallpanel.js:2484:12) connectedCallback/</< (/hacsfiles/lovelace-wallpanel/wallpanel.js:1389:8)

What kind of debugging would you need?

[j-a-n]

Please upgrade to version 4.27.1.

Can you please take a look at the browser console (F12). Are there any log messages regarding the wallpanel?

What does your image_url look like? Have you set immich_api_key? Have you set immich_album_names? Have you configured CORS on your immich server?

[carlosjfcasero]

Hi. I am experiencing the same issue as @agdamsbo . Black screen in wall panel with Immich source. Here is my config:

wallpanel:
  enabled: true
  image_fit: contain
  idle_time: 5
  screensaver_entity: input_boolean.wallpanel
  screensaver_stop_navigation_path: /wallpanel
  fullscreen: false
  display_time: 5
  image_url: immich+https://immich.tld
  immich_api_key: {API_KEY}
  immich_album_names:
    - Test
  cards: []

CORS is configured in Traefik and no logs in browser console regarding wallpanel

[j-a-n]

Hi @carlosjfcasero , could you please try changing immich+https://immich.tld to immich+https://immich.tld/api?

[carlosjfcasero]

Hi @j-a-n it works! I missed that part. Thanks for your support!

[agdamsbo]

Please upgrade to version 4.27.1.

Can you please take a look at the browser console (F12). Are there any log messages regarding the wallpanel?

What does your image_url look like? Have you set immich_api_key? Have you set immich_album_names? Have you configured CORS on your immich server?

Had another look.

All parameters are set in lovelace yaml. I had not added CORS to nginx, as I assumed it was not necessary, as I do have access using ImmichFrame. The console says something along "The CORS-header 'Access-Control-Allow-Origin' does not exist". I use non-english Firefox 129.

May I ask why this special nginx setup is necessary here and not with say ImmichFrame?

[j-a-n]

CORS is required if you access the API via a browser. ImmichFrame is probably not a web app.

[kwetiaw-goreng]

I wonder if anyone can help, i have pfsense with HAProxy, how can i enable CORS? I dont use NGINX or traefik. Immich is running on docker. Thanks

[xabileiro]

I am trying to configure nginx proxy manager by adding to custom locations the code below but I get this error:

Access to XMLHttpRequest at 'https://immich.xxx/api/albums' from origin 'https://xxxxx.xxx.xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Can anyone who has managed to configure it help me?