I was having trouble getting proper wrap of two cards on a dashboard tab, so I solved it with a two grid setup on the HACs custom grid card.
On my Kindle Fire wall panel in landscape mode it looks fantastic, but on my phone which is vertical everything is messed up and skinny.
Is there a solution, should I be doing a different dashboard tab depending on which user is looking at it and having some tabs only available to my kiosk user, and some hidden from my kiosk user? How will that affect swiping?
tom_l
August 16, 2023, 3:33pm
2
I have one whole dashboard designed for desktop and one for small screened mobile devices. You can assign the default dashboard on each device.
1 Like
BebeMischa
August 16, 2023, 6:58pm
3
Same here. The only good solution to have the layout set right on any screen format.
Sounds like a great idea, and copying dashboards is pretty simple. Question. Why do it with different dashboards, rather than one global dashboard with custom tabs that are visible or invisible depending on the user? Having a unique user for the wall-mount tablet makes that easy. Pluses and minuses?
BebeMischa
August 16, 2023, 8:45pm
5
I don’t want my family members to have two different logins depending on the device they use. WAF unfriendly…
Rudd-O
August 16, 2023, 10:15pm
6
I sometimes use a vertical layout-card (with a max number of columns) and insert breaks manually where I think it would wrap great on the phone, and sometimes I use a single column horizontal layout-card with “groups” within, consisting of either vertical or horizontal layout cards that themselves contain the cards I want to arrange. The goal is for wide screen dashboards to look nice single-column, and it’s hard to think about how to arrange the cards for this, but so far I’ve gotten away with it.
This one is a masonry layout that adapts:
The trick is that the inner tiles are themselves vertical stacks, so whatever I want to stick together vertically, I will add to a vertical stack inside my layout. You can totally do the same with the grid, by the way!
Some sample code for the screenshots (incomplete):
- theme: Backend-selected
title: Appliances
path: appliances
icon: mdi:vacuum
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Cleaning
alignment: start
card_mod:
style:
mushroom-title-card$: |
div.header {
padding-bottom: 0;
}
h1 {
font-size: 125% !important;
}
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-entity-card
entity: vacuum.sucker
- type: custom:mushroom-entity-card
entity: sensor.sucker_status
name: Detailed status
- type: custom:mushroom-entity-card
entity: sensor.last_vacuum_cleaned_area
name: Cleaned area
- type: custom:mushroom-template-card
entity: sensor.sucker_battery
icon: '{{ state_attr("vacuum.sucker", "battery_icon") }}'
icon_color: |-
{% set level = states('sensor.sucker_battery') | int %}
{% if level >= 30 %}
green
{% elif level >= 15 %}
yellow
{% else %}
red
{% endif %}
primary: Battery level
secondary: '{{ states(''sensor.sucker_battery'', with_unit=True) }}'
- type: custom:mushroom-entity-card
entity: sensor.last_time_sucker_finished_cleaning_seconds
name: Last vacuum
- type: custom:mushroom-entity-card
entity: input_datetime.next_vacuum_time
name: Next vacuum
tap_action:
action: more-info
- type: custom:tabbed-card
tabs:
- attributes:
label: Full
card:
type: custom:xiaomi-vacuum-map-card
entity: vacuum.sucker
vacuum_platform: Neato
map_source:
camera: camera.sucker_cleaning_map
calibration_source:
identity: true
map_locked: true
tiles: []
icons:
- icon: mdi:play
conditions:
- entity: vacuum.sucker
value_not: cleaning
- entity: vacuum.sucker
value_not: error
- entity: vacuum.sucker
value_not: returning
tooltip: Start
tap_action:
action: call-service
service: vacuum.start
service_data:
entity_id: vacuum.sucker
- icon: mdi:pause
conditions:
- entity: vacuum.sucker
value_not: docked
- entity: vacuum.sucker
value_not: idle
- entity: vacuum.sucker
value_not: error
- entity: vacuum.sucker
value_not: paused
tooltip: Pause
tap_action:
action: call-service
service: vacuum.pause
service_data:
entity_id: vacuum.sucker
- icon: mdi:stop
conditions:
- entity: vacuum.sucker
value_not: docked
- entity: vacuum.sucker
value_not: idle
- entity: vacuum.sucker
value_not: error
- entity: vacuum.sucker
value_not: paused
tooltip: Stop
tap_action:
action: call-service
service: vacuum.stop
service_data:
entity_id: vacuum.sucker
- icon: mdi:home-map-marker
conditions:
- entity: vacuum.sucker
value_not: docked
- entity: vacuum.sucker
value_not: returning
tooltip: Return to base
tap_action:
action: call-service
service: vacuum.return_to_base
service_data:
entity_id: vacuum.sucker
- icon: mdi:target-variant
conditions:
- entity: vacuum.sucker
value_not: docked
- entity: vacuum.sucker
value_not: error
- entity: vacuum.sucker
value_not: cleaning
- entity: vacuum.sucker
value_not: returning
tooltip: Clean spot
tap_action:
action: call-service
service: vacuum.clean_spot
service_data:
entity_id: vacuum.sucker
- icon: mdi:map-marker
tooltip: Locate
tap_action:
action: call-service
service: vacuum.locate
service_data:
entity_id: vacuum.sucker
map_modes: []
- attributes:
label: By area
card:
type: custom:xiaomi-vacuum-map-card
entity: vacuum.sucker
map_locked: true
vacuum_platform: Neato
map_source:
camera: camera.neato_floor_plan
crop:
top: 90
bottom: 120
left: 65
right: 105
calibration_source:
identity: true
tiles: []
icons: []
map_modes:
- template: vacuum_clean_segment
name: Rooms
predefined_selections:
- id: Kitchen
outline:
- - 340
- 610
- - 670
- 610
- - 670
- 700
- - 460
- 700
- - 460
- 800
- - 260
- 800
icon:
name: mdi:fridge
x: 490
'y': 710
- id: Office
outline:
- - 240
- 850
- - 670
- 850
- - 670
- 1005
- - 170
- 1005
icon:
name: mdi:chair-rolling
x: 450
'y': 930
- id: Living space
outline:
- - 670
- 250
- - 950
- 250
- - 950
- 1080
- - 670
- 1110
icon:
name: mdi:sofa
x: 810
'y': 680
- id: Gym
outline:
- - 1020
- 250
- - 1270
- 250
- - 1270
- 520
- - 1020
- 520
icon:
name: mdi:weight-lifter
x: 1140
'y': 380
- id: Guest bathroom
outline:
- - 950
- 650
- - 1110
- 650
- - 1110
- 780
- - 950
- 780
icon:
name: mdi:bathtub
x: 1030
'y': 715
- id: Master bathroom
outline:
- - 1130
- 540
- - 1250
- 540
- - 1250
- 780
- - 1130
- 780
icon:
name: mdi:shower
x: 1190
'y': 660
- id: Master bedroom
outline:
- - 950
- 835
- - 1160
- 835
- - 1160
- 780
- - 1260
- 780
- - 1260
- 835
- - 1260
- 1050
- - 950
- 1080
icon:
name: mdi:bed
x: 1130
'y': 960
max_selections: 1
service_call_schema:
service: neato.custom_cleaning
service_data:
entity_id: '[[entity_id]]'
zone: '[[selection_unwrapped]]'
- type: conditional
conditions:
- entity: climate.novamatic_cl_1590
state_not: unavailable
card:
type: vertical-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Air conditioning
alignment: start
card_mod:
style:
mushroom-title-card$: |
div.header {
padding-bottom: 0;
}
h1 {
font-size: 125% !important;
}
- square: false
type: grid
cards:
- type: custom:mushroom-climate-card
entity: climate.living_space
hvac_modes:
- cool
- 'off'
show_temperature_control: true
collapsible_controls: false
hold_action:
action: more-info
secondary_info: none
tap_action:
action: more-info
layout: horizontal
columns: 1
- square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: input_boolean.air_conditioning_suspended
name: Suspended
- type: custom:mushroom-entity-card
entity: binary_sensor.air_conditioning_overflow_tank_full
name: Overflow full
- type: custom:mushroom-entity-card
entity: light.air_conditioning_tank_pump_switch
name: Pump switch
- type: custom:mushroom-entity-card
entity: binary_sensor.air_conditioning_tank_full
name: Tank full
columns: 2
- type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style:
mushroom-title-card$: |
div.header {
padding-bottom: 0;
}
h1 {
font-size: 125% !important;
}
card:
type: custom:mushroom-title-card
title: Kitchen
alignment: start
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-entity-card
entity: sensor.kitchen_refrigerator_temperature
name: Fridge temp
layout: horizontal
primary_info: state
secondary_info: name
- type: custom:mushroom-entity-card
entity: sensor.kitchen_refrigerator_humidity
layout: horizontal
primary_info: state
secondary_info: name
name: Humidity
- type: custom:mushroom-entity-card
entity: sensor.kitchen_freezer_temperature
name: Freezer temp
layout: horizontal
primary_info: state
secondary_info: name
- type: custom:mushroom-entity-card
entity: sensor.kitchen_freezer_signal_strength
layout: horizontal
primary_info: state
secondary_info: name
name: Signal
- type: conditional
conditions:
- entity: sensor.kitchen_cooking_temperature_probe_1_uncalibrated
state_not: unavailable
card:
type: grid
columns: 2
square: false
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.kitchen_cooking_temperature_probe_1
name: Probe 1
show_line: true
smoothing: false
points_per_hour: 60
hours_to_show: 1
show:
icon: false
legend: false
- type: custom:mini-graph-card
entities:
- entity: sensor.kitchen_cooking_temperature_probe_2
name: Probe 2
show_line: true
smoothing: false
points_per_hour: 60
hours_to_show: 1
show:
icon: false
legend: false
- type: entities
entities:
- entity: input_text.kitchen_cooking_temperature_probe_1_target
name: Target 1 (°C)
- type: entities
entities:
- entity: input_text.kitchen_cooking_temperature_probe_2_target
name: Target 2 (°C)
- type: custom:mushroom-template-card
entity: sensor.kitchen_cooking_temperature_probe_1_alert
primary: >
{{
states("sensor.kitchen_cooking_temperature_probe_1_alert") |
capitalize }}
icon: >
{% if "above" in
states("sensor.kitchen_cooking_temperature_probe_1_alert")
or "below" in states("sensor.kitchen_cooking_temperature_probe_1_alert") %}
mdi:thermometer-alert {% else %} mdi:thermometer-check {%
endif %}
- type: custom:mushroom-template-card
entity: sensor.kitchen_cooking_temperature_probe_2_alert
primary: >
{{
states("sensor.kitchen_cooking_temperature_probe_2_alert") |
capitalize }}
icon: >
{% if "above" in
states("sensor.kitchen_cooking_temperature_probe_2_alert")
or "below" in states("sensor.kitchen_cooking_temperature_probe_2_alert") %}
mdi:thermometer-alert {% else %} mdi:thermometer-check {%
endif %}
tom_l
August 17, 2023, 2:21am
7
I have a lot of views (tabs). Which would require excessive scrolling on the view bar on the mobile device.
Also you can’t assign a default view for a device.
Thanks so much those are some great ideas.
