nice! thanks a lot!
it looks much better now.
But I still have this issue while swiping on mobile or tablet. when I swipe, it also registers a press action. but on desktop, swiping with mouse swiping doesn’t register a press action. Any idea what could be the issue?
What a great sidebar! Can you share the code? Tnx. Jos
try changing the parameters followfinger and grabCursor: false
type: custom:swipe-card
parameters:
watchSlidesProgress: false
slidesPerView: 1
speed: 700
roundLengths: true
grabCursor: false
followFinger: false
pagination:
type: bullets
clickable: true
dynamicBullets: true
dynamicMainBullets: 1
effect: cube
cubeEffect:
shadow: false
autoplay:
delay: 10000
disableOnInteraction: false
pauseOnMouseEnter: true
Hi there, many thanks for the compliments. I have done my sidebar inside the ui-lovelace.yaml rather than the template that was originally provided in Mattias git. Here is the section of code from mine though. I have changed it slightly from my original post and now looks like this
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:mushroom-chips-card
chips:
- type: alarm-control-panel
entity: alarm_control_panel.our_home
name: Home Alarm
content_info: state
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: template
entity: lock.front_door
icon: mdi:lock
content: |
{% if is_state("lock.front_door", "locked") %}
Locked
{%- else -%}
Unlocked
{%- endif %}
icon_color: |-
{% if is_state("lock.front_door", "locked") %}
green
{%- else -%}
red
{%- endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: template
content: |-
{{states.light
| rejectattr('attributes.is_hue_group', 'defined')
| rejectattr('attributes.entity_id', 'defined')
| selectattr('state', 'eq', 'on')
| list
| count
}}
icon: mdi:lightbulb
icon_color: orange
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
alignment: center
- type: custom:mushroom-template-card
primary: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening, {{user}}
{% elif (time >= 12) %}
Good Afternoon, {{user}}
{% elif (time >= 5) %}
Good Morning, {{user}}
{% else %}
Hello, {{user}}
{% endif %}
tap_action:
!include popup/calendar.yaml
icon: ''
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: custom:clock-weather-card
entity: weather.openweathermap
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_rows: 5
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: DDD
hide_today_section: false
hide_forecast_section: true
hide_clock: false
hide_date: false
hourly_forecast: true
use_browser_time: false
time_zone: null
card_mod:
style: |
ha-card
{background: transparent;
border-style: none;
}
- type: custom:weather-card
entity: weather.openweathermap
forecast: true
details: false
current: false
hourly_forecast: true
card_mod:
style: |
ha-card .forecast
div.precipitation_probability {display: true;}
div.precipitation {display: true;}
ha-card {
background: transparent;
border-style: none;
}
ha-card div.current span.icon.bigger {
width: 7em;
height: 7em;
margin-top: -2.6em;
margin-left: 0.0em;
}
ha-card div.current span.temp {
font-size: 3.3em;
right: 1.0em;
}
ha-card div.forecast.clear.spacer {
padding-bottom: 0px;
padding-top: 0px;
}
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/pictures/megan2.png
elements:
- type: image
entity: person.megan
image: /local/pictures/megan2.png
tap_action:
!include popup/home_megan.yaml
hold_action:
action: none
style:
left: 50%
top: 50%
width: 100%
heigth: 100%
filter: grayscale(100%)
state_filter:
home: revert
- type: state-label
entity: person.megan
style:
left: 0
bottom: 0
pointer-events: none
font-size: 12px
font-weight: var(--name-font-weight)
font-family: var(--font-family)
line-height: 4px
color: white
background-color: rgba(0, 0, 0, 0.4)
width: 100%
transform: initial
text-align: left
- type: state-label
entity: sensor.megans_iphone_battery_level
style:
top: 0
right: 0
pointer-events: none
transform: initial
font-size: 12px
font-weight: var(--state-font-weight)
font-family: var(--font-family)
color: white
line-height: 6px
padding: 3px 12px
- type: icon
icon: mdi:cellphone
style:
top: 0
right: 0
pointer-events: none
transform: scale(0.6)
color: white
line-height: 1px
padding: 2px 1px
font-size: 11px
font-family: var(--font-family)
- type: conditional
conditions:
- state_not: home
entity: person.megan
elements:
- type: state-label
entity: sensor.megan_home_travel_time
style:
top: 0
right: 0
pointer-events: none
transform: initial
font-size: 12px
font-weight: var(--state-font-weight)
font-family: var(--font-family)
color: white
line-height: 32px
padding: 7px 14px
- type: icon
icon: mdi:home
style:
top: 0
right: 0
pointer-events: none
transform: scale(0.6)
color: white
line-height: 16px
padding: 18px 1px
font-size: 11px
font-family: var(--font-family)
- type: picture-elements
image: /local/pictures/keith2.png
elements:
- type: image
entity: person.keith
image: /local/pictures/keith2.png
tap_action:
!include popup/home_keith.yaml
hold_action:
action: none
style:
left: 50%
top: 50%
width: 100%
heigth: 100%
filter: grayscale(100%)
state_filter:
home: revert
- type: state-label
entity: person.keith
style:
left: 0
bottom: 0
pointer-events: none
font-size: 12px
font-weight: var(--name-font-weight)
font-family: var(--font-family)
line-height: 4px
color: white
background-color: rgba(0, 0, 0, 0.4)
width: 100%
transform: initial
text-align: right
- type: state-label
entity: sensor.keiths_phone_battery_level
style:
top: 0
right: 0
pointer-events: none
transform: initial
font-size: 12px
font-weight: var(--state-font-weight)
font-family: var(--font-family)
color: white
line-height: 6px
padding: 3px 12px
- type: icon
icon: mdi:cellphone
style:
top: 0
right: 0
pointer-events: none
transform: scale(0.6)
color: white
line-height: 1px
padding: 2px 1px
font-size: 11px
font-family: var(--font-family)
- type: conditional
conditions:
- state_not: home
entity: person.keith
elements:
- type: state-label
entity: sensor.keith_home_travel_time
style:
top: 0
right: 0
pointer-events: none
transform: initial
font-size: 12px
font-weight: var(--state-font-weight)
font-family: var(--font-family)
color: white
line-height: 32px
padding: 7px 14px
- type: icon
icon: mdi:home
style:
top: 0
right: 0
pointer-events: none
transform: scale(0.6)
color: white
line-height: 16px
padding: 18px 1px
font-size: 11px
font-family: var(--font-family)
- type: custom:power-flow-card-plus
entities:
grid:
name: Grid
color_circle: true
color_icon: true
display_state: two_way
entity:
consumption: sensor.energy_management_123_1d
invert_state: true
color_value: true
use_metadata: false
home:
entity: sensor.energy_management_123_1d
name: Home
color_icon: true
color_value: true
fossil_fuel_percentage:
entity: sensor.electricity_maps_grid_fossil_fuel_percentage
name: Renewables
color:
- 119
- 187
- 65
icon: mdi:leaf
color_value: true
state_type: power
display_zero: true
color_icon: true
individual1:
entity: sensor.energy_management_123_1d_cost
name: Daily Cost
color_value: true
color_icon: true
display_zero: true
icon: mdi:currency-gbp
unit_of_measurement: p
decimals: 2
color:
- 31
- 125
- 196
clickable_entities: true
display_zero_lines:
mode: show
transparency: 50
grey_color:
- 189
- 189
- 189
use_new_flow_rate_model: true
w_decimals: 0
kw_decimals: 2
min_flow_rate: 1.5
max_flow_rate: 6
max_expected_power: 2000
min_expected_power: 0.01
watt_threshold: 1000
transparency_zero_lines: 0
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
} type or paste code here
How can I achive it, that the horizontal stack is always on the bottom of the sidebar? ^^"
Edit: Oh,. i saw that this i a frequently asked question…
And is it possible to set a fix width of the sidebar?
Yes. Here is my code that includes a fixed sidebar on my tablet and desktop. I just specify a specific width for my sidebar column.
views:
- title: "dashboard"
path: "dashboard"
theme: larryo108
type: custom:grid-layout
layout:
#default
grid-template-columns: 185px 1fr 1fr
grid-template-rows: fit-content(100%) 1fr
grid-template-areas: |
"sb col1top col2top"
"sb col1bot col2bot"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 1fr
grid-template-row: fit-content(100%) fit-content(100%) 1fr 1fr 0fr
grid-template-areas: |
"col1top"
"col2top"
"col1bot"
"col2bot"
"sb"
Hi @hopkins2703 , I wanted to ask you for two courtesies: the first, if you can tell me how to put the dots under the slide cards; the second, if you can share the background colors. I would be grateful.
In order to have pagination bullets you need to add the following under each area definition, so for example the end of the swipe card part below
- type: grid
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 40
threshold: 5
pagination:
type: bullets
cards:
- type: grid
columns: 2
cards:
The background I just pulled from the internet, here is the blue gradient in the above dashboard. Though I have now swapped back to my original green gradient which I’ve also attached for you
Thank you,
very much
Thanks this was the problem.
Can anyone help me with the following layout issue? I added the bullets for the navigation but they look different on different places. Take a look at the attached picture.
Under the media section the bullets are aligned correctly but in the woonkamer section they are touching the buttons. Any way to fix this issue?
This is my theme code (tablet.yaml):
#################################################
# #
# SWIPE CARD MARGIN #
# #
#################################################
$swipe-card$:
.: |
.swiper-pagination {
top: 95%;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 0px !important;
}
.swiper-container {
margin: -1.5vw !important;
padding: 1.5vw !important;
margin-bottom: -2.5vw !important;
}
.swiper-pagination-bullet {
background-color: rgba(255, 255, 255, .7) !important;
}
@media screen and (max-width: 800px) {
.swiper-container {
margin-bottom: 0vw !important;
}
.swiper-pagination {
top: 92%;
}
}
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 0 0.1vw 0 0 !important;
}
hui-horizontal-stack-card$hui-grid-card$swipe-card$:
.: |
.swiper-container {
margin: -1.5vw !important;
padding: 1.5vw !important;
margin-bottom: -1vw !important;
}
.swiper-pagination {
right: 10% !important;
top: 50% !important;
}
.swiper-pagination-bullet {
background-color: rgba(255, 255, 255, .7) !important;
}
@media screen and (max-width: 800px) {
.swiper-pagination-bullet {
width: 0.5em !important;
height: 0.5em !important;
}
}
and this is my dashboard code (same for media section as woonkamer section):
#################################################
# #
# MEDIA #
# #
#################################################
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 40
threshold: 5
pagination:
type: bullets
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:.....
kind regards,
Remco
That looks good. Maybe someone can help.
go to the theme file and disable “grid-card-gap: 5%” (you can find it at the beginning) by putting a # in front. Reload the theme from developer tools → services (type themes and select Home Assistant Frontend: Reload themes) and see how it goes.
Again in the theme file I set up this section like this (reloads the theme with each change):
#################################################
# #
# SWIPE CARD MARGIN #
# #
#################################################
$swipe-card$:
.: |
div {
height: 100%;
}
.swiper-container {
margin: -1.5vw !important;
padding: 1.5vw !important;
}
.swiper-pagination {
position: inherit !important;
height: auto;
margin-top: -0.5vh;
}
.swiper-pagination-bullets {
bottom: 4px !important;
}
.swiper-pagination-bullet {
background: rgb(255, 255, 255) !important;
}
.swiper-pagination-bullet-active {
opacity: 0.7 !important;
}
@media screen and (max-width: 800px) {
.swiper-pagination-bullet {
width: 10px !important;
height: 10px !important;
}
.swiper-container {
padding: 0vw 0vw 3vw !important;
}
}
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 0 0.15vh 0 0 !important;
}
Hi, thanks a lot, that’s very good now. Just looking again, I can see a much bigger gap between the next line of “rooms” on my phone. And the spacing is determined on all “rooms” equally, right? I mean, how to make it not shift the line (not create a bigger gap)?
Thank you very much.
How do I set the wallpaper in the tablet theme?
could you post link?
Has anyone had a problem when the dashboard loads, where there is a vertical scroll bar on the right hand side, even though the visible content all fits on the screen ok? As soon as I tap the screen of the tablet, the page adjusts slightly and the scrollbar disappears. The same if I do a ctrl+f5, the browser window refreshes and clears the scrollbar in the same way. I just don’t know what is causing the scrollbar to display initially. I guess some ‘hidden’ content/viewport sizing somewhere is taking up too much space, but is then recalculated upon a refresh or touch event. Unless it’s Browser_mod requiring the touch interaction to properly activate, but I’m not sure why this would cause or introduce the scrollbar…
Hello friends, I don’t have much experience in SVG, I’m trying to create this animated icon for my dash, but the animation isn’t cool, could someone try to fix it for me?
I’ve already exhausted my experiences.
icon_watchtower:
styles:
custom_fields:
icon:
- width: 77%
- margin-left: -14%
- margin-top: 1%
custom_fields:
icon: >
[[[
let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
return `
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Watchtower</title>
<path d="M12 .099C5.373.099 0 5.426 0 12c0 6.571 5.373 11.9 12 11.9S24 18.573 24 12C24 5.428 18.627.1 12 .1Zm.139 7.34 5.377 2.66v.222h-.526v.504l6.36-1.619a11.525 11.525 0 0 1-.248 6.424l-6.112-1.22v.652h2.428v1.091h.393l-.002.248-2.745 1.471.67 4.219-.203.111a11.72 11.72 0 0 1-5.506 1.367A11.68 11.68 0 0 1 6.72 22.3h-.01v-.003c-.065-.033-.131-.064-.195-.098l.685-4.31-2.765-1.473.001-.264h.413v-1.09h2.435v-.65L.961 15.675a11.464 11.464 0 0 1-.602-3.676c0-.987.125-1.947.36-2.863l6.564 1.676v-.51h-.578v-.203Zm-4.856 3.373v3.6l.33-.067v-3.451zm.33.082 2.668.68v-1.061H7.613Zm2.668.68v2.24l.328-.067v-2.09zm.328.083.452.115.039-.439h2.076l.04.453.458-.115v-1.158h-3.065zm3.065.014-.002 2.074.33.067v-2.225l2.658-.678v-.396H14v1.074zm2.986-.762v3.434l.33.066v-3.584zm0 3.434-2.658-.531v.935h2.658zm-2.988-.598-.281-.055.097 1.057h.184zm-3.063.002v1h.178l.096-1.055zm-2.996.598v.402h2.666v-.933zm-.904 7.95c.003.003.007.003.01.005l10.812-.098-.343-2.219H7.078Zm5.428-14.704-5.291 2.594h10.527Zm-.905 3.888-.298 3.268h2.408l-.299-3.268zm-3.619 3.543v.069h9.235l-.004-.069zm-2.547.32v.81h2.217v-.81zm2.547 0v.81h3.01v-.81zm3.229 0v.81h2.605v-.81zm2.824 0v.81h3.18v-.81zm3.398 0v.81H19.2v-.81Zm-12.216 1.05 2.574 1.37h9.422l2.574-1.37z"
class="${state} light-color"
style="clip-path: ${state ? 'polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%);' : 'inset(0 0 0 0);'} animation: ${state ? 'air 1s infinite' : 'none'};" />
<style>
@keyframes air {
0%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 98% 32%, 63% 42%, 65% 58%, 100% 43%); }
75% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 100% 44%, 64% 61%, 64% 73%, 100% 72%); }
50% { clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0, 78% 38%, 64% 43%, 64% 72%, 100% 73%); }
}
</style>
</svg>
`;
]]]
that was facebood add, i didnt save the link.