This is how my dashboard is rendering on my PC or Samsung Galaxy S10+ phone:
This is how my dashboard is rendering on my tablet:
You’ll observe that the Horizontal Stack and Vertical Stack cards are all rendering with zero margins between their cards, and my meteogram card resource isn’t found on my tablet despite being present in the resource list. When I try to add a card, Meteogram is available as a card on PC but not on my tablet.
The timeline was:
-
Completely fresh factory tablet with HA install, and the horizontal and vertical stack cards initially had the aforepictured rendering error
-
At some point in the course of setting things up, the tablet suddenly got a handle on things and started rendering the vertical and horizontal stacks with their proper margins. It also faithfully loaded the Meteogram card, and I spent quite a lot of time tweaking the javascript for an ideal tablet presentation.
-
I installed the “WallPanel” HACS add-on and suddenly it reverted back to zero margins on the vertical and horizontal stacks, and suddenly couldn’t locate the meteogram card resource, despite never having touched anything related to that resource address, the javacript file itself, theme, or anything other than adding another lovelace resource with HACS.
Attempts at resolving this have included:
- Removing WallPanel in HACS
- Force closing and clearing cache on the tablet android app. When I was editing the meteogram resource file, this is how I was able to update the app and see the latest changes I’d made to the javascriopt resource
- Restarting the tablet
- Deleting all HA app data and signing back into the app
- Uninstalling the HA app completely and reinsalling it
- Reverting to the stock Meteogram resource from github
- Restarting HA
- Reverting the customized theme back to stock theme from github
- Removing the Meteogram resource and then adding it again
- Adding another HACS lovelace resource to try to trigger a resource reload
- Rebooting the RP4 HA is installed on
Nothing matters except getting this setup to work correctly on the tablet, which has a physically excellent AMOLED screen, form factor and hardware performance for a “kiosk” style Home Assistant controller. I don’t think the issue has anything to do with WallPanel, so much as there is some weird issue with serving Lovelace dashboard resources given it’s now gone back and forth with the rendering issue and can’t locate a resource it had in cache perfectly before and could repeatedly retrieve it. I just can’t shake the tablet back out of its issue…
Dashboard YAML:
views:
- type: custom:masonry-layout
title: Test
layout:
max_cols: 2
max_width: 390
card_margin: var(--masonry-view-card-margin, 18px 12px 12px)
margin: 0px 0px 0px 0px
padding: 00px 0px 0px 0px
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.apartment_lighting
show_brightness_control: true
layout: horizontal
primary_info: none
secondary_info: none
icon_type: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_select.apartment_lighting_state
icon: mdi:lightbulb-on-outline
show_name: false
show_icon: true
tap_action:
action: call-service
service: script.set_apartment_brightness_to_extremely_low
styles:
card:
- width: 67px
- height: 60px
state:
- value: Extremely low
styles:
card:
- background-color: '#840000'
- type: custom:button-card
entity: input_select.apartment_lighting_state
icon: mdi:lightbulb-on-30
show_name: false
show_icon: true
tap_action:
action: call-service
service: script.set_apartment_brightness_to_very_low
styles:
card:
- width: 67px
- height: 60px
state:
- value: Very low
styles:
card:
- background-color: '#840000'
- type: custom:button-card
entity: input_select.apartment_lighting_state
icon: mdi:lightbulb-on-50
show_name: false
show_icon: true
tap_action:
action: call-service
service: script.set_apartment_brightness_to_low
styles:
card:
- width: 67px
- height: 60px
state:
- value: Low
styles:
card:
- background-color: '#840000'
- type: custom:button-card
entity: input_select.apartment_lighting_state
icon: mdi:lightbulb-on-70
show_name: false
show_icon: true
tap_action:
action: call-service
service: script.set_apartment_brightness_to_medium
styles:
card:
- width: 67px
- height: 60px
state:
- value: Medium
styles:
card:
- background-color: '#840000'
- type: custom:button-card
entity: input_select.apartment_lighting_state
icon: mdi:lightbulb-on
show_name: false
show_icon: true
tap_action:
action: call-service
service: script.set_apartment_brightness_to_full
styles:
card:
- width: 67px
- height: 60px
state:
- value: Full
styles:
card:
- background-color: '#840000'
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.kitchen_lighting_state
name: kitchen off
show_name: false
show_icon: true
icon: mdi:pot-steam
tap_action:
action: call-service
service: script.kitchen_lighting_off
styles:
card:
- width: 67px
- height: 60px
icon:
- color: rgb(240, 243, 255)
state:
- value: 'on'
styles:
card:
- background-color: '#840000'
- type: custom:button-card
entity: null
name: bedroom off
show_name: false
show_icon: true
icon: mdi:bed
color: rgb(240, 243, 255)
tap_action:
action: call-service
service: null
styles:
card:
- width: 67px
- height: 60px
- font-weight: bold
- font-size: 13px
label:
- justify-self: start
- padding: 0px 0px
state:
- value: 'off'
styles:
card:
- background-color: '#840000'
- type: custom:button-card
entity: null
name: bedroom off
show_name: false
show_icon: true
icon: mdi:reorder-vertical
color: rgb(240, 243, 255)
tap_action:
action: call-service
service: null
styles:
card:
- width: 67px
- height: 60px
- font-weight: bold
- font-size: 13px
label:
- justify-self: start
- padding: 0px 0px
state:
- value: 'off'
styles:
card:
- background-color: '#840000'
- type: custom:button-card
entity: null
name: bedroom off
show_name: false
show_icon: true
icon: mdi:book-open-variant-outline
color: rgb(240, 243, 255)
tap_action:
action: call-service
service: null
styles:
card:
- width: 67px
- height: 60px
- font-weight: bold
- font-size: 13px
label:
- justify-self: start
- padding: 0px 0px
state:
- value: 'off'
styles:
card:
- background-color: '#840000'
- type: custom:button-card
entity: input_select.apartment_lighting_state
name: all off
show_name: false
show_icon: true
icon: mdi:lightbulb-multiple-off-outline
tap_action:
action: call-service
service: script.set_apartment_brightness_to_zero
styles:
card:
- width: 67px
- height: 60px
- font-weight: bold
- font-size: 20px
state:
- value: 'Off'
styles:
card:
- background-color: '#840000'
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.media_is_playing
show_name: false
show_icon: true
icon: mdi:skip-previous
size: 50%
tap_action:
action: call-service
service: script.previous_media
styles:
card:
- width: 60px
- height: 60px
icon:
- color: rgb(228, 228, 231)
state:
- value: 'on'
styles:
icon:
- color: '#3f51b5'
- type: custom:button-card
entity: input_boolean.media_is_playing
show_name: false
show_icon: true
icon: mdi:rewind
size: 50%
tap_action:
action: call-service
service: script.rewind
styles:
card:
- width: 60px
- height: 60px
icon:
- color: rgb(228, 228, 231)
state:
- value: 'on'
styles:
icon:
- color: '#3f51b5'
- type: custom:button-card
entity: input_boolean.media_is_playing
show_name: false
show_icon: true
icon: mdi:play
size: 50%
tap_action:
action: call-service
service: script.play_pause_media
styles:
card:
- width: 92px
- height: 60px
icon:
- color: rgb(228, 228, 231)
state:
- value: 'on'
icon: mdi:pause
styles:
card:
- background-color: '#292d46'
icon:
- color: '#3f51b5'
- type: custom:button-card
entity: input_boolean.media_is_playing
show_name: false
show_icon: true
icon: mdi:fast-forward
size: 50%
tap_action:
action: call-service
service: script.fast_forward
styles:
card:
- width: 60px
- height: 60px
icon:
- color: rgb(228, 228, 231)
state:
- value: 'on'
styles:
icon:
- color: '#3f51b5'
- type: custom:button-card
entity: input_boolean.media_is_playing
show_name: false
show_icon: true
icon: mdi:skip-next
size: 50%
tap_action:
action: call-service
service: script.next_media
styles:
card:
- width: 60px
- height: 60px
icon:
- color: rgb(228, 228, 231)
state:
- value: 'on'
styles:
icon:
- color: '#3f51b5'
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.volume_is_muted
show_name: false
show_icon: true
icon: mdi:volume-off
size: 50%
tap_action:
action: call-service
service: script.mute_unmute
styles:
card:
- width: 60px
- height: 60px
icon:
- color: rgb(228, 228, 231)
state:
- value: 'on'
styles:
card:
- background-color: '#292d46'
icon:
- color: '#3f51b5'
- type: custom:mushroom-media-player-card
entity: media_player.a_v_unit
layout: horizontal
icon_type: none
volume_controls:
- volume_set
primary_info: none
secondary_info: none
- type: horizontal-stack
cards:
- type: custom:mushroom-fan-card
entity: fan.tower_fan
show_percentage_control: true
show_oscillate_control: true
show_direction_control: false
collapsible_controls: false
layout: horizontal
icon_animation: true
secondary_info: none
primary_info: none
- type: custom:button-card
entity: input_boolean.fan_natural
icon: mdi:sine-wave
show_name: false
show_icon: true
tap_action:
action: call-service
service: script.toggle_fan_natural
styles:
card:
- width: 60px
- height: 60px
icon:
- color: rgb(228, 228, 231)
state:
- value: 'on'
styles:
card:
- background-color: '#2b4032'
icon:
- color: '#4caf50'
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.red_series_dimmer
name: living room
layout: horizontal
fill_container: false
primary_info: name
secondary_info: none
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.plug_in_2_outlet_dimmer_simultaneous_500s
name: dining table
layout: horizontal
fill_container: true
primary_info: name
secondary_info: none
show_brightness_control: true
- type: custom:mushroom-light-card
entity: light.red_series_dimmer_2
layout: horizontal
fill_container: true
primary_info: name
secondary_info: none
show_brightness_control: true
name: kitchen
- type: custom:mushroom-light-card
entity: light.plug_in_1_outlet_dimmer_500s
layout: horizontal
fill_container: true
primary_info: name
secondary_info: none
show_brightness_control: true
name: countertop
- type: custom:meteogram-card
title: null
show_cloud_cover: true
show_pressure: false
show_precipitation: true
show_weather_icons: false
show_wind: true
dense_weather_icons: true
meteogram_hours: 24h
diagnostics: false
entity_id: weather.forecast_home
layout_mode: sections
display_mode: core
styles:
'--meteogram-grid-color': rgb(46, 48, 56)
'--meteogram-cloud-color': '#FFFFFF'
'--meteogram-temp-line-color': '#840000'
'--primary-text-color': rgb(138, 140, 153)
'--meteogram-timescale-color': rgb(228, 228, 231)
- type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.eversweet_3_pro_water_level
show_label: true
show_icon: true
show_name: false
layout: icon_label
styles:
card:
- font-weight: bold
- font-size: 18px
- height: 60px
state:
- value: 'off'
label: cat water
icon: mdi:check-bold
styles:
label:
- justify-self: start
icon:
- color: '#4caf50'
- margin-right: '-00%'
- margin-left: '-00%'
- value: 'on'
label: low cat water
icon: mdi:exclamation-thick
styles:
label:
- justify-self: start
- margin-left: '-20%'
icon:
- color: rgb(240, 243, 255)
- margin-right: 0px
- margin-left: '-25%'
- padding-left
- animation: blink 1s ease infinite
card:
- background-color: '#840000'
- type: custom:button-card
entity: binary_sensor.fresh_element_mini_food_level
show_label: true
show_icon: true
show_name: false
layout: icon_label
styles:
card:
- font-weight: bold
- font-size: 18px
- height: 60px
state:
- value: 'off'
label: cat food
icon: mdi:check-bold
styles:
label:
- justify-self: start
icon:
- color: '#4caf50'
- margin-right: '-00%'
- margin-left: '-00%'
- value: 'on'
label: low cat food
icon: mdi:exclamation-thick
styles:
label:
- justify-self: start
- margin-left: '-20%'
icon:
- color: rgb(240, 243, 255)
- margin-right: 0px
- margin-left: '-25%'
- padding-left
- animation: blink 1s ease infinite
card:
- background-color: '#840000'
- type: custom:horizon-card
moon: false
- clock_style: digital
clock_size: large
time_format: '24'
show_seconds: true
no_background: false
type: clock
