- type: grid
title: Hello
The sidebar shows every attribute of an entity. So in my case a template sensor.
Yes, if you edit ui-lovelace.yaml, any changes made to the included files will be updated.
Or you can automate that with https://github.com/akmolina28/lovelace-gulp-watch
config.json
{
"watch_path": [
"/Volumes/docker/hass-config/popup/*.yaml",
"/Volumes/docker/hass-config/button_card_templates.yaml"
],
"ui_lovelace_path": "/Volumes/docker/hass-config/ui-lovelace.yaml"
}
Here’s a terminal alias I use to start everything
alias gulp="cd ~/GitHub/lovelace-gulp-watch && gulp watch"
alias hass='mount=`df | awk "/[email protected]/"`; if [ "$mount" "==" "" ]; then mount_smbfs //user:[email protected]/docker mount/; fi; open ~/mount/hass-config && open ~/mount/hass-config/home-assistant.code-workspace && gulp'
When I type hass into terminal this happens
- mounts config folder over smb
- opens config folder in finder
- opens vscode workspace
- starts lovelace-gulp-watch
1 Like
Hay Mattias
Search samsung TV config…
pleas config
my config.yaml
- platform: samsungtv_tizen
host: IP_ADDRESS
mac: MAC_ADDRESS
you are config?
That cracked me up 
I’m using https://github.com/ollo69/ha-samsungtv-smart
Install with hacs and configure using ui
1 Like
So, in trying to mix things up, I wanted to place several ctm:button-cards in a card with grid-layout but wanted to be able to style the background. So, what should I use? AND thinking of your suggestion @Mattias_Persson to style from the themes.yaml can I apply a style to the HA grid-card with a background via themes?
This sounds exactly like what I need.
Problem is installing it on my Rasp. I got node installed but npm isn’t installed and I’m stuck at trying to install apt-get on my Raspberry in order to install rpm in order to install Gulp. Can’t even find anyone explaining how to do it (apt-get on a Raspberry running HA).
It’s the little things that often hold me back. I can guess things and find things but sometimes I just raise my arms up in the air and shrug.
Thanks @Mattias_Persson
I’m going to try and do the theme route like I did earlier. I already tried and got stuck when I couldn’t find a class in the sidebar section I wanted.
I tried you example above (using a custom button card in a custom mod card) but the sidebar just didn’t show anything at all. I’m guessing I did it wrong.
Is there a way to fix these broken icons in the custom-card? NaN% and the broken file? Where do those live?
This state is idle. How to add this?
I tried this… was very hopeful but it didn’t work
#################################################
# #
# SIDEBAR VERTICAL-STACK #
# #
#################################################
grid-layout$hui-vertical-stack-card$: |
#root {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
button-card:nth-child(1):
$: |
#root {
padding: 10%;
}
button-card:nth-child(2):
$: |
#root {
padding: 10%;
}
Second button Sidebar
“#view**>hui-view>grid-layout$#root>hui-vertical-stack-card$#root>**button-card:nth-child(2)$#card”
First button Sidebar
“#view**>hui-view>grid-layout$#root>hui-vertical-stack-card$#root>**button-card:nth-child(1)$#card”
NaN% is not a broken button, it’s a “unknown” value of your sensor (usually). The icon, I don’t know.
this happens to me when my Awair doesn’t emit a value to HA.
Wait, this json runs on your PC or your docker where HA is?
Thanks for the amazing work with this dashboard.
I’m trying to figure out what’s going on in the media section, i can’t get the input_select.conditional_media change when playing something on my chromecast. I only if i change it manually.
I wonder why there is two media player entity in verdagsrum media_player.bravia_tv and media_player.verdagsrum is that not the same TV, and if it is, why two entites?
doesnt this look right?
First of all, really amazing dashboard! Building this is really addictive, and time consuming when you’re new to HomeAssistant.
I’m really struggling with replacing the ‘Corona Footer’ with some of my own sensors like (sensor.envoy_12212_current_power_production) Solar producten.
Did someone already implement this or could someone help me go implement this.
How should the ui-lovelace, sensor and button_card_templates look like?
Thanks!
I was struggling with the corona footer as well but I solved it with this.
in the template.yaml:
- unique_id: coronavirus
state: template
attributes:
coronavirus: |
<ha-icon icon="mdi:virus"></ha-icon> <b>Coronavirus</b> <font color="#2f3436">|</font>
<ha-icon icon="mdi:emoticon-sad"></ha-icon> <b>{{states('sensor.germany_coronavirus_confirmed')}}</b> Fälle <font color="#2f3436">|</font>
<ha-icon icon="mdi:grave-stone"></ha-icon> <b>{{states('sensor.germany_coronavirus_deaths')}}</b> Verstorben <font color="#2f3436">|</font>
<ha-icon icon="mdi:map-marker-radius"></ha-icon> <b>{{states('sensor.inzidenz_berlin')}}</b> Inzidenz <font color="#2f3436">|</font>
<ha-icon icon="mdi:chart-bar"></ha-icon> <b>{{ (((states('sensor.germany_coronavirus_confirmed') | int) / 83247589) * 100)|round(1)}} %</b> von DE
in lovelace:
type: custom:button-card
view_layout:
grid-area: footer
entity: sensor.template_coronavirus
template: coronavirus
template:
coronavirus:
show_state: true
show_name: false
show_icon: false
tap_action:
action: none
state_display: |
[[[
return entity.attributes.coronavirus;
]]]
styles:
state:
- place-self: start
- font-family: SF Display
- font-weight: 400
- font-size: 1.26vw
- letter-spacing: 0.05vw
- white-space: nowrap
- opacity: 0.6
card:
- background: none
- padding: 0
- margin-top: '-1vw'
- overflow: hidden
extra_styles: |
ha-icon {
vertical-align: 5%;
opacity: 0.4;
width: 1.2vw;
}
.ellipsis {
color: #6a7377;
}
/* phone */
@media screen and (max-width: 800px) {
#state {
display: none;
}
}
3 Likes
Any ideas in how to implement the username in the greetingtemplate?
I tried it with {{user}} but in the template its not working, with markdown it is.
{%- elif time <= 13 -%} Guten Tag {{user}}{{'\U0001F60A'}}
Sorry I wasn’t curious about the original values
the icon changes when I turn on the tv and when I turn it off.
but buttons on the icon do nothing.
did you need dust
token?
something was seen in medi.player
ui.lovace.yaml - moded
…
- type: custom:button-card
entity: Loft_light
name: Konyha led
template:
- base
- light
- icon_hue
- loader
…
could I get help with the lock feature to prevent a script/card to turn off my pc switch if my pc is running? I currently have a binary sensor to ping my pc to see if it’s on or off.
been looking around more and im still not entirely sure how to go about this, should i use something like IOTLink instead to know if my pc is online instead of a binary entity from pinging?
In the dator card, theres a variable that looks at the state of ‘lock.dator’ im assuming and to have it unlock it depends on the state of ‘script.home_leave’?
- type: custom:button-card
entity: switch.computer_imac
name: Dator
hold_action:
!include popup/studio_dator.yaml
template:
- base
- icon_imac
- loader
- lock
variables:
lock: >
[[[
let lock = states['lock.dator'];
return lock === undefined || lock.state;
]]]
trigger: >
[[[
let trigger = states['script.home_leave'];
return trigger === undefined || trigger;
]]]