I don’t use hsl colors, I just wanted to clarify that the color variables come from custom:button-card.
No, I gave up.
thank you that helps a lot
1 Like
#################################################
# #
# MEDIA #
# #
#################################################
- type: grid
title: Media ↔
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 40
threshold: 5
cards:
- type: horizontal-stack
cards:
1 Like
Hi @mossele
I am interested in your sidebar.
How did you do moon effect and time for sunrise and below the horizon?
Can you also send the setup for “Pool” the whether.
i have one for now but whant more info.
hey everyone, I picked up this dashboard again after working on int 2 years ago during COVID and unfortunately it seems like I have to start from scratch because of all the changes HASS went through. Anyway, I just can’t get the damn popups to work, not even for the lights, already installed Mushroom but they do not appear…anyone an Idea where I should look first? Kinda new to HASS as well.
im follwing @VietNgoc code’s on github. Now i get the buttons as a overlay?
does this come arround when i add more ? to meet the grid?
like the clock etc. o dont see it ad all
edit: clock is on the middel now
type: custom:grid-layout
icon: mdi:home-circle
theme: tablet
path: main
layout:
default:
margin: 0
grid-gap: 1.5%
grid-template-columns: 0 1fr 1fr 1fr 1fr 1fr 1fr 0
grid-template-rows: 0 min-content fit-content(100%) fit-content(100%) fit-content(100%) 0
grid-template-areas: |
". . . . . . . ."
". chips chips chips chips weather header ."
". security mainrooms devices other floorplan floorplan ."
". cameras climate nowplay movies floorplan floorplan ."
". footer footer footer footer nowplaying nowplaying ."
". . . . . . . ."
# phone
'(max-width: 800px)':
# grid-gap: calc(var(--custom-layout-card-padding) * 1.7)
grid-gap: 1.8vw
margin: 0
# grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-columns: 0 1fr 1fr 0
grid-template-rows: 0 min-content min-content fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%)
grid-template-areas: |
". . . ."
". header weather ."
". chips chips ."
". home security ."
". media cameras ."
". mainrooms devices ."
". other climate ."
". floorplan floorplan ."
". footer footer ."
#################################################
# #
# DASHBOARD #
# #
#################################################
cards: !include_dir_merge_list dashboard/
Edit: i had to paste in the portrait settings aswell
mediaquery:
#portrait
'(min-width: 801px) and (max-width: 1440px)':
grid-gap: 1vw
grid-template-columns: 0 1fr 1fr 1fr 0
grid-template-rows: fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) 0fr
grid-template-areas: |
". sidebar home security ."
". media cameras climate ."
". mainrooms devices other ."
". floorplan floorplan floorplan ."
". footer footer footer ."
". . . . ."
Only the top cards are not showing complete
#################################################
# #
# Mond #
# #
#################################################
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
entity: sensor.moon
show_state: false
icon_color: ''
fill_container: false
picture: /local/moon_phases/{{states(entity)}}.png
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
- type: markdown
content: |-
<font color="#9b9b9b">{{ states('sensor.moon') | replace("new_moon",
"Neumond") | replace("full_moon", "Vollmond") |
replace("first_quarter", "zunehmender Halbmond") |
replace("last_quarter", "abnehmender Halbmond") |
replace("waning_crescent", "Abnehmender Sichelmond") |
replace("waning_gibbous", "abnehmender Dreiviertelmond") |
replace("waxing_crescent", "zunehmender Sichelmond") |
replace("waxing_gibbous", "zunehmender Dreiviertelmond") }}</font>
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
#################################################
# #
# Sonne #
# #
#################################################
- type: markdown
content: >
<font color="ember"><ha-icon
icon="mdi:weather-sunset-up"></ha-icon></font> <font color="#9b9b9b">{{
as_timestamp(state_attr("sun.sun",
"next_rising")) |timestamp_custom("%H:%M:%S") }}</font> <font
color="red"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></font>
<font color="#9b9b9b">{{ as_timestamp(state_attr("sun.sun",
"next_setting")) |timestamp_custom("%H:%M:%S") }} </font>
card_mod:
ha-card {padding: 0;}
style: |
ha-card {
background: none;
box-shadow: none;
text-align: left
}
for the pool weather:
button-card:
- type: custom:button-card
entity: weather.owm_zambujal
name: "Zambujal"
tap_action:
!include /config/popup/weather-forecast.yaml
template:
- base
- weather_forecast
variables:
temp_min: sensor.openweathermap_forecast_temperature_low
temp_max: sensor.openweathermap_forecast_temperature
current_weather: weather.owm_zambujal
and the weather_forecast template:
#################################################
FORECAST
#################################################
weather_forecast:
variables:
temp_min: ‘’
temp_max: ‘’
current_weather: ‘’
aspect_ratio: 1/1
show_icon: false
show_entity_picture: true
show_name: true
show_state: true
show_label: true
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: |
“n”
“temp”
“i”
“s”
“l”
- grid-template-columns: 1fr
- grid-template-rows: min-content repeat(2, 1fr) repeat(2, min-content)
- gap: 0%
card:
- color: > #rgba(157, 160, 162, 1) #rgba(84, 85, 85, 1) #rgba(85, 86, 86, 1)
[[[
if (states[‘sun.sun’].state == ‘below_horizon’){
return ‘rgba(157, 160, 162, 1)’;
} else
return ‘rgba(71, 71, 71, 1)’;
]]]
- background: > # else linear-gradient(to top, rgba(123,168,197,0.8) 0%, rgba(61,132,176,0.8) 100%)
[[[
if (states[‘sun.sun’].state == ‘below_horizon’){
return ‘linear-gradient(to top, rgba(53,59,83,0.8) 0%, rgba(10,14,34,0.8) 100%)’;
} else
return ‘linear-gradient(to top, rgb(123 168 197) 0%, rgba(61,132,176,0.8) 100%)’;
]]]
# return ‘linear-gradient(to top, rgb(123 168 197) 0%, #b0c5d3 100%)’; — rgb(213, 215, 216)
name:
- place-self: start
- text-transform: uppercase
- font-weight: 400
img_cell:
- justify-content: start
icon:
- width: 25%
#- width: 37%
label:
- place-self: start
- margin-left: -5px
custom_fields:
temp:
- place-self: start
#- margin-top: -10px
label: >
[[[
return <ha-icon icon="mdi:arrow-up-thin" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon> <span> ${states[variables.temp_max].state}°</span> <ha-icon icon="mdi:arrow-down-thin" style="width: 1.5em; height: 1.5em; margin-right: -0.3em;"></ha-icon> <span> ${states[variables.temp_min].state}°</span>
]]]
custom_fields:
temp: >
[[[ return entity.attributes.temperature + “°”; ]]]
entity_picture: >
[[[
if ((entity.state == ‘sunny’) && (states[‘sun.sun’].state == ‘above_horizon’))
return “/local/weather/clear-day.svg”;
if ((entity.state == ‘sunny’) || (entity.state == ‘clear-night’) && (states[‘sun.sun’].state == ‘below_horizon’))
return “/local/weather/clear-night.svg”;
if (entity.state == ‘fog’)
return “/local/weather/fog.svg”;
if ((entity.state == ‘partlycloudy’) && (states[‘sun.sun’].state == ‘above_horizon’))
return “/local/weather/partlycloudy-day.svg”;
if ((entity.state == ‘partlycloudy’) && (states[‘sun.sun’].state == ‘below_horizon’))
return “/local/weather/partlycloudy-night.svg”;
if (entity.state == ‘rainy’)
return “/local/weather/rain.svg”;
if (entity.state == ‘sleet’)
return “/local/weather/sleet.svg”;
if (entity.state == ‘snow’)
return “/local/weather/snow.svg”;
if (entity.state == ‘cloudy’)
return “/local/weather/cloudy.svg”;
else (entity.state == ‘wind’)
return “/local/weather/wind.svg”;
]]]
extra_styles: |
[[[
return #name { font-size: 1.0vw; } #temp { font-size: 2.5vw; } #state { font-size: 1.5vw; } #label { font-size: 1.5vw; } /* portrait */ @media screen and (max-width: 3000px) { #name { font-size: 0.8vw !important; } #temp { font-size: 1.8vw !important; } #state { font-size: 0.7vw !important; } #label { font-size: 0.7vw !important; } } /* phone */ @media screen and (max-width: 1350px) { #name { font-size: 1vw !important; } #temp { font-size: 2vw !important; } #state { font-size: 1.2vw !important; } #label { font-size: 1.2vw !important; } } /* phone portrait*/ @media screen and (max-width: 600px) { #name { font-size: 4vw !important; } #temp { font-size: 9vw !important; } #state { font-size: 3.5vw !important; } #label { font-size: 3.5vw !important; } } @keyframes card_bounce { 0% { transform: scale(1); } 15% { transform: scale(0.9); } 25% { transform: scale(1); } 30% { transform: scale(0.98); } 100% { transform: scale(1); } }
]]]
I’m not experiencing that issue and I’m on 2023.11.2. The swipe animation works fine.
Hi, beautiful project, how can I check the status of the running and stopped containers?
For example:
- platform: rest
unique_id: container_portainer
name: Docker Portainer
icon: si:portainer
json_attributes:
- state
- status
- image
resource: http://192.168.0.146:8126/container/portainer
value_template: >
{{ value_json.state }}
timeout: 60
scan_interval: 360
1 Like
Thank you!
Hi everyone. I have just got this up and running but I can’t get it to properly fit my iPad (running the home assistant companion app). changing the image resolution doesn’t do anything. anyone where im going wrong??
I saw some other people had the same issue, I couldn’t find a solid answer for my problem? anyone know?
you got browser mod installed?
I set it this way, without conditional_media template.
Notice the selected part in the picture is different from the original code. Maybe that what you need to change.
2 Likes