j-a-n / lovelace-wallpanel Goto Github PK

I would like to use the CSS "@media (prefers-color-scheme: dark)" to switch the style when in dark mode, but I don't know how to write it in Yaml. Is it possible to switch styles in dark mode?

Also, is it possible to change the folder of the screensaver background image between light and dark mode?

Example:
In light mode: /media_source/light
In dark mode: /media_source/dark

When I restrict the screensaver to specific pages (e.g. default view) and also set hide_toolbar / hide_sidebar to true the screensaver is effectively restricted to the selected tabs, however toolbar/sidebar is hidden on other tabs as well.
Only when I switch to another tab and then reload the dashboard the sidebar/toolbar on the other tab is visible.
It would be better, if the sidebar/toolbar shows up as soon as I switch to a different tab.

j-a-n

Wallpanel has changed the way I use the panels around my home. I'm so grateful for the work that you put into this.

I use photographs from my local area as the screensaver images and would like to use bright photos in the daytime and darker photos in the evening. Is there a way to dynamically change the image_url to point to different local media folders?

Thanks

First things first: this module is awesome! I am recreating my Dakboard and making great progress! :)

I have a HA dashboard on a 24 inch screen in the center of my livingroom but most of the time it shows this excellent wallpanel with pictures from Google photos. It also shows a calendar, time, weather, etc. etc.

You can imagine that I want the calendar to stay in place while other cards may animate their position.
Is this possible? I tried with css to the wp_style and with your options to the same wp_style but didn't get it to work.

TLDR; Is it possible to animate individual cards?

Keep up the good work!

When I use the iPad in landscape mode, the Infobox rotates more or less over the whole screen and always within the screens borders.
When I turn it to portrait mode, the infobox rotates only in the upper part of the display and always partly outside the display borders.
Looks for me, like the info box still uses landscape mode
Any way to change this behavior and ideally make it self-adjusting?

seems that it was a temporary issue only, as it does work as expected now. please close

Hi,
I use an automation to display the front porch camera feed on my tablets whenever motion have been detected on that area.
Tablets have fully browser and I am using browser_mod.popup to display the camera feed.
Wallpanel is awesome but I did not find a way to "wake up" these screens so the popup is displayed behind wallpanel so we cannot see it.
Would there be a service to disable/enable wallpanel that I can use in my automation? Or is there already a way to do that same thing?
Thank you!

Can we change the image url to serve over https:
https://github.com/j-a-n/lovelace-wallpanel/blob/main/wallpanel.js#L127

This line:
image_url: "http://picsum.photos/${width}/${height}?random=${timestamp}",

To avoid "mixed content" warnings in your browser.

Is there a way to stop the screensaver automatically when I edit the dashboard?
it’s pretty hard to edit while the screensaver kicks in permanently;-)
Thanks

Hi,

thanks for this nice job, have it running and looks great.
One question, I want to run this full-screen on a somewhat older Ipad whichis my wall panel in the kitchen.
It runs IOS 12 and cannot go higer.

What are my options ? I tried:

• Adding the webpage to the "home screen" , however, when I open it from there then it just goes to default interface and wallpanel never starts
• Using the home-assistant IOS app, the app works but it seems that wallpanel can only work via the browser, not via the app, is that correct ?
• Using a special "kiosk browser" but I cannot seem to find one in the app store that still works with IOS12

Any suggestions ?

I'm trying to move the info-box in random position every minute, with a simple fade-out/fade-in (like the old version of this integration) but I'm not sure how to achieve this with animation-timing-function or if it's possibile.
Do you have an example for a simple animation like that?

Hi,
I can see my other cards translate fine, like weather and time. I would love to see this happen automatically like the other cards as well with this awesome screensaver.

Hi,
i'm trying to use a NFS share with image_url but i can't get it working.
I mount /media/photo. In Home Assitant, in the media menu, i can see "local media" -> "photo", with all my photo directories.

I try many wallpanel configuration but it can't display any photo

image_url: /local/photo/

Is it possible to use with wallpanel?
Or add in the future?

I use the HomeAssistant App on the iPad / iPhone.
When I select a Dashboard and the screensaver kicks in, the screensaver remains active, even when I leave the dashboard and go into any other screen within in app (file editor, has, settings, whatever)
It’s quite annoying as it always kicks in after the wartime , even while I am editing an automation. I always have to pitch on the screen to see the normal view again and after the wait time the screensaver comes back.
To avoid this, I first have to select another dashboard without Wallpanel screensaver and then go to settings etc.
Is there any way, that the screensaver stops automatically once you leave the dashboard view?

Hi I cannot get this to work.

I tried adding a simple dashboard with this, but nothing shows after the timeout.
Here is my dashboard configuration.

wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 10
title: Wall Test
views:
  - title: Home
    cards:
      - type: weather-forecast
        entity: weather.hjem

Do I do something wrong?

I have the companion app installed on a new nsPanelPro, and I am unable to set the url to anything other than the hostname & port and are therefore unable to activate wallpanel on that device only:

http://hass:8123/lovelace/default_view?wp_enabled=true

If I set that in the companion app, the path gets removed back to:

http://hass:8123/

is there a solution ??

I use an aloe iPad as Wallpanel, in portrait mode. My images for the screensaver are mostly landscape and I do use the setting of ‚scale-down‘
That gives me a black frame below and above the image, by that the info-box does not cover the image but is above in the black area. I do like this setting, as it shows a ‚slide-show‘ with additional basic HA Info above.
However, it would be nice to make use of the space below the image as well, for that a second info box would be nice.
Furthermore, would it be possible to get more than 3 rows for the grid or to use panel instead of grid for the info box? That would give some more flexibility in arranging the cards

It is screen sever so can you add option to dim the screen?

Hello @j-a-n

I saw a new error message this morning but can't see any reference from the documentation.

Did i missed something ?
Regards

I think it’s a very good idea to enable showing EXIF data, Actually something I was already going to ask for.
However, can you provide an example how to show the location, the image was taken at? (or is that an additional request?)
I tried to find out but was unable to succeed.

I tried using "backdrop-filter: blur(16px)" to blur the background of a semi-transparent card, but it doesn't work.
How can I get this to work?

Unfortunately the location data shown on screen does not always match the actual location data from the shown image.
I use images in subfolders from /media , however although all images in that folder do have exif with location data, the location shown on screen does not always match the image shown.
Sometimes no location data is shown at all, sometimes it’s a match for one image and a match for the next but for the third image it shows the location from the first then no location for the next then again the location from the first then maybe an image with correct location. It looks like the shown location is kind of random, just as the images but in different order.
And basically it’s not only the location but the complete exif (date also) that mismatch.
I just tested, wrong exif data are also an issue when just the date is selected to be shown, an fetch address is not in the configuration.
Any idea? Anything I can check to see what the reason could be?

Hi,

At present screensaver picks pictures by name order so every time it starts we are seeing the same pictures. Could it be possible to select picture random from local folder?

add from hacs

in config >>>
weather:
platform: gismeteo

wallpanel:
enabled: true

If I wanted to disable the screensaver and all other blanking options, how can this be done. Does a value of zero effectively disable these options?

I have a LCD monitor that I keep Security Cameras and Weather Info displayed on and I need it always visible at a glance.

Thanks!

I have several messages like this:

Logger: frontend.js.latest.202208020
Source: components/system_log/init.py:227
First occurred: 11:11:13 (6349 occurrences)
Last logged: 11:12:32

https://homeassistant.x.x:8123/hacsfiles/lovelace-wallpanel/wallpanel.js?hacstag=30950641626:936:45 Uncaught TypeError: Cannot read properties of undefined (reading 'bind')

Logger: homeassistant.components.websocket_api.http.connection
Source: components/websocket_api/connection.py:102
Integration: Home Assistant WebSocket API (documentation, issues)
First occurred: 11:14:53 (3 occurrences)
Last logged: 11:15:19

[547343298480] Error handling message: Unauthorized (unauthorized)
[547376716848] Error handling message: Unauthorized (unauthorized)
[547377195152] Error handling message: Unauthorized (unauthorized)

Moreover I have several login unauthorised error when my wallpanel clients starts.

Apologies if this is in the documentation but i just can't work out how to split the cards into columns to fill my screen. I tried the markup but couldn't get it to work.

I would like it in this order

Header - Badges
Column 1/Row 1 - Clock
Column 1/Row 2 - Hourly weather
Column 1/ Row 3 - platinum-weather-card
Column 2/ Row 1 - Calendar
Column 2/ Row 2 - spare xx

Any help would be much appreciated as i have been at it for days.

wallpanel:
  enabled: true
  fullscreen: false
  hide_sidebar: false
  hide_toolbar: false
  image_url: /
  image_fit: cover
  image_list_update_interval: 3600
  image_order: sorted
  screensaver_stop_navigation_path: /lovelace-test/default_view
  idle_time: 2
  panel: true
  layout:
    width: 300
    max_cols: 10
    type: custom:horizontal-layout
  cards:
    - type: custom:clockwork-card
      entity: sensor.date_time_iso
      locale: en-GB
      other_time:
        - Asia/Kolkata
        - America/Vancouver
      style: |
        .other_clocks { display: none; }
        .time { text-align: center; }
    - type: weather-forecast
      entity: weather.gosford_hourly
    - card_config_version: 8
      daily_extended_forecast_days: 7
      daily_forecast_days: 7
      daily_forecast_layout: vertical
      entity_apparent_temp: sensor.gosford_temp_feels_like
      entity_extended: sensor.gosford_extended_text_0
      entity_fire_danger: sensor.gosford_fire_danger_0
      entity_fire_danger_1: sensor.gosford_fire_danger_1
      entity_forecast_icon: sensor.gosford_icon_descriptor_0
      entity_forecast_icon_1: sensor.gosford_icon_descriptor_1
      entity_forecast_max: sensor.gosford_temp_max_0
      entity_forecast_max_1: sensor.gosford_temp_max_1
      entity_forecast_min: sensor.gosford_temp_min_0
      entity_forecast_min_1: sensor.gosford_temp_min_1
      entity_humidity: sensor.gosford_humidity
      entity_pop: sensor.gosford_rain_chance_0
      entity_pop_1: sensor.gosford_rain_chance_1
      entity_pos: sensor.gosford_rain_amount_range_0
      entity_pos_1: sensor.gosford_rain_chance_1
      entity_pressure: sensor.openweathermap_pressure
      entity_summary: sensor.gosford_extended_text_0
      entity_summary_1: sensor.gosford_extended_text_1
      entity_sun: sun.sun
      entity_temperature: sensor.gosford_temp
      entity_todays_fire_danger: sensor.gosford_fire_danger_0
      entity_todays_uv_forecast: sensor.gosford_uv_forecast_0
      entity_uv_alert_summary: sensor.gosford_uv_category_0
      entity_wind_bearing: sensor.openweathermap_forecast_wind_bearing
      entity_wind_gust: sensor.gosford_gust_speed_kilometre
      entity_wind_speed: sensor.gosford_wind_speed_kilometre
      extended_use_attr: false
      option_color_fire_danger: false
      option_daily_color_fire_danger: false
      option_show_overview_decimals: true
      option_show_overview_separator: true
      option_today_rainfall_decimals: false
      option_today_temperature_decimals: true
      option_tooltips: true
      overview_layout: complete
      section_order:
        - overview
        - extended
        - slots
        - daily_forecast
      slot_l1: forecast_max
      slot_l2: forecast_min
      slot_l3: wind
      slot_l4: pressure
      slot_l5: sun_next
      slot_l6: empty
      slot_l7: remove
      slot_l8: remove
      slot_r1: popforecast
      slot_r2: humidity
      slot_r3: uv_summary
      slot_r4: fire_danger
      slot_r5: sun_following
      slot_r6: remove
      slot_r7: remove
      slot_r8: remove
      type: custom:platinum-weather-card
      secondary_info_attribute: wind_speed
    - initial_view: listWeek
      type: calendar
      entities:
        - calendar.mandymatt19_gmail_com
  badges:
    - entity: person.matthew_grech
      style: |
        :host {
          color: white;
          --label-badge-text-color: black;
          --label-badge-red: #9B9B9B;
          --label-badge-background-color: white;
          --ha-label-badge-label-color: white;
    - entity: person.mandy_grech
      style: |
        :host {
          color: white;
          --label-badge-text-color: black;
          --label-badge-red: #9B9B9B;
          --label-badge-background-color: white;
          --ha-label-badge-label-color: white;
    - entity: sensor.total_lights_on
      style: |
        :host {
          color: white;
          --label-badge-text-color: black;
          --label-badge-red: #9B9B9B;
          --label-badge-background-color: white;
          --ha-label-badge-label-color: white;
  style:
    wallpanel-screensaver-container:
      background-color: '#333333dd'
    wallpanel-screensaver-info-box:
      '--wp-card-width': 1000px
      background-color: '#ffffff99'
      box-shadow: >-
        0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0,
        0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
    wallpanel-screensaver-info-box-content:
      '--ha-card-background': none
      '--ha-card-box-shadow': none
      '--primary-background-color': '#fafafa'
      '--secondary-background-color': '#e5e5e5'
      '--primary-text-color': '#212121'
      '--secondary-text-color': '#727272'
    layout:
      width: 300
      max_cols: 10
      type: custom:horizontal-layout

So, I tried the short example YML config, and managed to lock myself out of my test dashboard I'd created. :)

No huge loss, but I'm curious how to get to the editor after using these settings

wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true

Hello
you gave example, so i decided to ask about something.

wallpanel:
  enabled: true
  screensaver_entity: input_boolean.screensaver_firebrowser

i can't find this input entity in homeassistant. Is it all right ?

Hello j-a-n,

Maybe it is possible to fix the following:
Wallpanel default config will be printed out in browser console every time even when debug is disabled. (v2.3)

Wallpanel config:
{
    "enabled": false,
    "debug": false,
    "hide_toolbar": false,
    "hide_sidebar": false,
    "fullscreen": false,
    "idle_time": 0,
    "fade_in_time": 3,
    "crossfade_time": 3,
    "display_time": 15,
    "keep_screen_on_time": 0,
    "black_screen_after_time": 0,
    "control_reactivation_time": 1,
    "screensaver_stop_navigation_path": "",
    "screensaver_entity": "",
    "image_url": "http://picsum.photos/${width}/${height}?random=${timestamp}",
    "image_fit": "cover",
    "image_list_update_interval": 3600,
    "image_order": "sorted",
    "image_excludes": [],
    "info_animation_duration_x": 0,
    "info_animation_duration_y": 0,
    "info_animation_timing_function_x": "ease",
    "info_animation_timing_function_y": "ease",
    "style": {},
    "badges": [],
    "cards": [
        {
            "type": "weather-forecast",
            "entity": "weather.home",
            "show_forecast": true
        }
    ]
}

It looks like that the line 1039 is the reason.

Thanks for your work!
BR

The default for the exif date shown is the full info, (year-month-day-hours-minutes-seconds, which not now takes a lot of room but is also mostly just to much info
Is there a way to limit it to year or year/month or year/month/day ?

Hi,

I have a shared link from my drive folder. Anyone with the link can see the folder. However I couldn't get the pictures.

I also tried to add this to my config.yaml

homeassistant:
  allowlist_external_urls:
    - "MY_DRIVE LINK"

Any chance to reach this folder?

There are 3 devices, call it:
Desktop - not included in brwosermod filter
Oneplus - not included in brwosermod filter
firebrowser - included in browsermod filter

My configuration is:

wallpanel:
  enabled: true
  hide_toolbar: false
  hide_sidebar: false
  fullscreen: true
  idle_time: 60
  display_time: 60
  screensaver_entity: input_boolean.screensaver_firebrowser
  profile: sunny
  profile_entity: input_text.wallpanel_profile
  cards:
  #.......

My target is to show screensaver only on firebrowser device, and it is only one registered in browser mod.
Current behavior of screensaver with Desktop is that when i use shift + R to make hard refresh it starts to force Fullscreen mode in my browser, and starting screensaver after idle_time. It won't be problem, because it is not often situation that im clearing full cache, but its kind of worst with my Oneplus.
It looks like its "hard-refreshed" everytime app starts. The result is that all Wallpanel actions are running everytime i open my application in Oneplus.

I have also tried to check if it isn't a browser-mod bug, so i opened app on all devices with cache cleared, and then ran "Popup" targeted to firebrowser. It has opened only in firebrowser device so it works good.

So, this behavior is very hard, because i can't normally use my app my mobile devices, like my fiance on iOS can't do it also.

Do you know any possibilities to fix this problem, or maybe some advices what i can try?
Thank you
Kamil.

Installed wallpanel and on my pc it starts fine from browser. My android tablet won't connect to browser only app. The screen saver never starts on the tablet it just sits there at what ever dashboard I leave it on. Suggestions?

I want to only run the fullscreen/kiosk mode on certain devices I have set up to display Dashboard Panels.

In the Dashboard config I'm using, I have set wp_enabled to false, so I can enable it on specific devices with the URL parameter wp_enabled=true

On a Raspberry Pi I have set up with Firefox, I am accessing the Dashboard via this url:
http://:8123/focus-monitor/0?wp_enabled=true&wp_fullscreen=true&wp_idle_time=0

It does in fact go fullscreen and hides the top and side toolbars, BUT after 10-15 seconds, the screensaver is still starting.

Any ideas?

can you provide an example to show date time as in the wiki picture?

I cast dashboards to various google home hubs in my house but noticed that the wallpanel screensaver kicks in on any of them. Is there a way to get it to work that im over looking?

I love the screensaver on my wallpanels, but on my phone / pc it gets quite annoying. I have tried to code a per-user profile function myself but it didn't work fully. My idea was to set profile_entity to user and this would set the profile based on the current user (I got it using elHass.__hass.user.name.toLowerCase()). so I could then do per-user profiles by just using the normal profiles config option. I tried to disable the screensaver by default and only enable it for certain profiles, which didn't work. I'm guessing if enabled is set to false it doesn't even check for profiles and is just completely disabled.

Issue: Wallpanel works as expected however there is no entity created (checked via Dev Tools -> Entities) created named "nput_boolean.wallpanel_screensaver", as a result it is not possible to control this element. I have tried reinstalling Wallpanel to no avail. Any tips on this would be appreciated.

Environment: Home Assistant 2022.9.5 (latest)
Wallpanel: 4.0
BrowserMod: Latest

Resource load:
- url: /hacsfiles/lovelace-wallpanel/wallpanel.js?v2
type: module

Config snippet:
screensaver_entity: input_boolean.wallpanel_screensaver

Hi I have installed wallpanel from HACS, shows in frontend fine.

When I add
wallpanel:
enabled: true
enabled_on_tabs:
- default_view
hide_toolbar: true
hide_sidebar: true
fullscreen: true
to configuration.yaml, the verifier says this is not installed. Also adding it to the dashboard configuration doesn't work either.

Any ideas?

Hi,

First of all, this is great work. Thank u. Can we only use real time clock and date as screensaver (digital / analog oprions maybe) ?

Is it possible to change weather temperature entity in order to use a local temperature sensor?

br
Marco

Would it be possible to make dismissing the screensaver redirect to a page?
My use would be to have it redirect me to my Lovelace "home page", as every level in our home has a different dashboard and one main page. It would be nice to be redirected to the main page when tapping.

Maybe this could be generalized by using something like Home Assistant's dashboard actions.

Thank you for making this great Screensaver!

I reealy try almost everything but couldn't manage to locate media folder correctly.

I have tried
/local
/www
/media and so on...

Can you please give an configuration.yaml and folder url example in your repo read me page.

For me the screensaver makes only sense for the start tab/page of my dashboard. On the other tabs it's rather contraproductive, as I look at those tabs for specific reason and don't want to be disturbed by the screensaver popping up.
So, is there a way to limit the screensaver so just one or a number of specified tabs?

Just switching over from wallpanel screensaver,

I've got my local media backgrounds working fine and stopped the info box movement but i was trying to get the info box transparent and to add some extra entities, but having issues as its not letting me add any cards to add some numerical entities, or time&date, anyone able to advise? its only showing the weather box and nothing else. thanks

wallpanel:
  enabled: true
  debug: false
  hide_toolbar: false
  hide_sidebar: false
  fullscreen: false
  idle_time: 20
  keep_screen_on_time: 86400
  black_screen_after_time: 7200
  control_reactivation_time: 1
  screensaver_stop_navigation_path: /lovelace/dash
  image_url: media-source://media_source
  image_fit: cover
  image_list_update_interval: 3600
  image_order: random
  image_excludes: []
  show_exif_info: false
  fetch_address_data: true
  exif_info_template: >-
    ${address.town|address.city!prefix=!suffix= //
    }${DateTimeOriginal!options=year:numeric,month:long}
  screensaver_entity: input_boolean.wallpanel_screensaver
  info_animation_duration_x: 0
  info_animation_duration_y: 0
  info_animation_timing_function_x: ease-in-out
  info_animation_timing_function_y: ease-in-out
  info_move_pattern: random
  info_move_interval: 60
  info_move_fade_duration: 2
style:
  wallpanel-screensaver-container:
    background-color: '#333333dd'
  wallpanel-screensaver-info-box:
    '--wp-card-width': 450px
    background-color: '#ffffff99'
    box-shadow: >-
      0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
      0px 1px 3px 0px rgba(0, 0, 0, 0.12)
  wallpanel-screensaver-info-box-content:
    '--ha-card-background': none
    '--ha-card-box-shadow': none
    '--primary-background-color': '#fafafa'
    '--secondary-background-color': '#e5e5e5'
    '--primary-text-color': '#212121'
    '--secondary-text-color': '#727272'
  badges:
    - entity: person.somebody
    - entity: sun.sun
  cards:
    - type: markdown
      content: Card 1
      wp_style:
        width: 810px
        grid-row: 1
        grid-column: 1 / span 2
    - type: markdown
      content: Card 2
      wp_style:
        width: 400px
        grid-row: 2
        grid-column: 2
    - type: markdown
      content: Card 3
      wp_style:
        width: 400px
        grid-row: 3
        grid-column: 1
    - type: markdown
      content: Card 4
      wp_style:
        width: 400px
        grid-row: 3
        grid-column: 2

Would it be possible to allow for other picture sources than unsplash? It would be great to use pictures from a local folder or a network folder via ftp. Thanks!

What file types are supported?
I am playing from a Synology and working great. Using this to filter out some but still get the odd blank image
I have NEF, ARW and ORF raw files all in the folders. Not sure of its those causing the issue. I have not turned on debug yet (not 100% sure how to use) but suspect that its one of these file types in there causing
image_excludes:

• '.tif$'
• '/@eadir'

Can you do a sleep time that can have oder settings? Fast time to black screen mostly.

It would be an amazing addition if the image displayed was related to the weather state. For example, show a picture of the sun if the weather is sunny or a picture of rain if raining. Images could either be local or specific urls. Would this be possible?