With the new HA demanding that Configuring Command Line sensor using YAML be moved. Should we move the youtube_watching.yaml command line sensor also to our new command_line.yaml file?
Or just leave it there?
As far as I know, the new command line sensor template looks like this. So far it works fine for me…
Yes, that’s what I changed it to. Thanks
I have another question…
my plan is to change media player button icon depending on service used (Apple TV)
how can I achieve this using the original media template?
You can use a different svg path with a specific state condition, and return variable path… in your case I think it will be something like entity.attributes.source === ‘AppleTV’ or HDMI 2 and so on.
1 Like
Did you manage to fix this for the newest version of the dashboard also?
I need some help with figuring out why my Desktop and Mobile have different graph formatting in the button cards.
This is what my desktop sees:
But this is what my phone sees:
This wasn’t always this way, the graph on the Mobile was consistent with the Desktop last year in an older version of Home Assistant. Here’s the code I used for the templates, and the ui-lovelace.yaml.
Base Template:
base2:
template:
- settings
- tilt
- extra_styles
variables:
state_on: >
[[[ return ['on', 'home', 'cool', 'fan_only', 'playing', 'unlocked'].indexOf(!entity || entity.state) !== -1; ]]]
state: >
[[[ return !entity || entity.state; ]]]
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
entity_picture: >
[[[ return !entity || entity.attributes.entity_picture; ]]]
timeout: >
[[[ return !entity || Date.now() - Date.parse(entity.last_changed); ]]]
aspect_ratio: 1/1
show_state: true
show_icon: false
state_display: >
[[[ if (variables.state === true) return variables.translate_unknown; ]]]
tap_action:
ui_sound_tablet: |
[[[
let screensaver = states[variables.entity_tablet] === undefined ||
states[variables.entity_tablet].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state_on && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
card_bounce: |
[[[
// duration
let duration = 800;
// animate
this.style.animation = `card_bounce ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`;
// reset
window.setTimeout(() => { this.style.animation = "none"; }, duration + 100)
// add animation
if (this.getElementsByTagName("style").length === 0) {
// phone condition
let mq = window.matchMedia('(max-width: 800px)').matches;
let style = document.createElement('style');
style.innerHTML = `
@keyframes card_bounce {
0% { transform: scale(1); }
10% { transform: scale(${mq ? "0.92" : "0.94"}); }
25% { transform: scale(1); }
30% { transform: scale(${mq ? "0.96" : "0.98"}); }
100% { transform: scale(1); }
}
`;
this.appendChild(style);
}
]]]
action: toggle
haptic: medium
double_tap_action:
haptic: success
hold_action:
action: block
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(2, min-content)
- gap: 1.3%
- align-items: start
- will-change: transform
name:
- justify-self: start
- line-height: 121%
state:
- justify-self: start
- line-height: 115%
card:
- border-radius: var(--button-card-border-radius)
- border-width: 0
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- overflow: hidden # REQUIRED FOR CUSTOM TEMPLATES
- --mdc-ripple-color: >
[[[
return variables.state_on
? '#97989c'
: 'rgb(0, 0, 0)';
]]]
- color: >
[[[
return variables.state_on
? '#97989c'
: '#4b5254';
]]]
- background-color: >
[[[
return variables.state_on
? 'rgba(115, 115, 115, 0.25)'
: 'rgba(255, 255, 255, 0.85)';
]]]
Temperature Template:
temperature:
template:
- base2
- extra_styles
show_name: true # Hides Card Name
show_state: true # Hides Card state
state_display: >
[[[ return ' '; ]]]
custom_fields:
graph:
card:
type: "custom:mini-graph-card"
height: 140
hours_to_show: 24
points_per_hour: 1
line_width: 8
font_size: 75
decimals: 0
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
color_thresholds:
- value: 65
color: "#276696"
- value: 77
color: "#228C22"
- value: 79
color: "#d35400"
- value: 80
color: "#c0392b"
card_mod:
style: |
:host{
--accent-color: #039be5;
--ha-card-border-width: 0px;
}
styles:
custom_fields:
graph: [bottom: 0%, left: 0%, width: 130%, position: absolute, margin: 0% 0% -14% -15.2%]
icon:
- width: 67%
- fill: "#9da0a2"
icon_temp:
styles:
custom_fields:
icon:
- margin-top: 2%
custom_fields:
icon: >
<svg viewBox="10 5 50 50">
<style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M41.74 10.852v2h-7.75v-2zm-3.25 4.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zm4.5 2.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zM35.2 41.685A10.14 10.14 0 0 1 25.074 51.81a10.14 10.14 0 0 1-10.125-10.125c0-3.618 1.9-6.906 5-8.725V10.006c0-2.826 2.3-5.125 5.125-5.125s5.125 2.3 5.125 5.125V32.96c3.1 1.817 5 5.106 5 8.725zm-2 0c0-3.07-1.706-5.845-4.453-7.24l-.547-.278v-24.16a3.13 3.13 0 0 0-3.125-3.125 3.13 3.13 0 0 0-3.125 3.125v24.16l-.547.278a8.09 8.09 0 0 0-4.453 7.24c0 4.48 3.645 8.125 8.125 8.125s8.125-3.645 8.125-8.125zm-1.666 0a6.47 6.47 0 0 1-6.459 6.458 6.47 6.47 0 0 1-6.458-6.458 6.46 6.46 0 0 1 4.796-6.233l.37-.1v-22.23h2.583v22.23l.37.1a6.46 6.46 0 0 1 4.796 6.233zm-6.14-4.305c-.154-.684-.842-1.134-1.543-.974a5.31 5.31 0 0 0-4.158 5.207 1.29 1.29 0 0 0 2.58 0c0-1.277.902-2.41 2.147-2.7.692-.16 1.13-.85.974-1.543z"/>
</svg>
ui-lovelace.yaml:
#################################################
# #
# OUTSIDE #
# #
#################################################
- type: grid
title: Outside
view_layout:
grid-area: outside
columns: 2
cards:
- type: custom:button-card
entity: sensor.pirateweather_temperature
name: Temp
tap_action: !include popup/lounge_temperature.yaml
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- entity: sensor.pirateweather_temperature
- entity: sensor.nightstate
color: gray
y_axis: secondary
show_line: false
show_points: false
show_legend: false
show_labels: false
tap_action: !include popup/lounge_temperature.yaml
variables:
state_on: >
[[[
if (entity) {
return entity.state
}
]]]
circle_input: >
[[[
if (entity) {
return Math.round(entity.state).toString()
}
]]]
circle_input_unit: '°F'
template:
- temperature
- icon_temp
- circle
1 Like
I love your design for Lovelace and I’m using the fork from @Laffer but I’m stuck with the template sensors. They are all unavailable. What should I do to get them to work?
@MGiesing ; I’d suggest that you copy individual templates and verify by using the Developer Tools (Template) tester.
Open the yaml: “\config\include\template.yaml”
Start by copying all of the code under “state:” for each sensor, and test them. I’m sure there are cases where entities that are exclusive to my environment are used.
1 Like
I’m currently on 2023.7.3 and everything works atm.
1 Like
Did you share this config somewhere?
1 Like
hi,
how did you setup this?
I have a Dream machine Pro and AP from unifi and want to be able to set it up like you or @VietNgoc
Hello everyone,
After setting up my dashboard according to Mattia’s template, I started to try out some things in my normal dashboard with the classic Home Assistant cards.
My problem now is that Mattias’ theme also makes the standard Home Assistant cards transparent.
Is there a way to use 2 separate themes?
Yes, you can have as many as you want. For the main one, give it a name like ‘hass theme’, which you set via profile menu affects the whole frontend from HA, you will have a main list of things for HA elements, for example you set there the colors for sidebar, primary color, secondary etc.
But in the main theme, you will have to set card-mod-more-info-yaml: which affects the appearance of the dialog, popup… .
#################################
# MAIN INTERFACE COLORS
#################################
primary-color: "rgba(0, 0, 0, 1)"
dark-primary-color: "rgba(0, 0, 0, 1)"
light-primary-color: "rgba(0, 0, 0, 1)"
accent-color: "rgba(0, 255, 0, 1)"
#################################
# SIDEBAR MENU
#################################
sidebar-text-color: "rgba(255, 255, 0, 1)"
sidebar-background-color: "rgba(100, 255, 100, 1)"
sidebar-icon-color: "rgba(0, 255, 255, 1)"
sidebar-selected-icon-color: "rgba(255, 255, 255, 1)"
sidebar-selected-text-color: "rgba(255, 255, 255, 1)"
sidebar-selected-background-color: "rgba(0, 0, 0, 1)"
in lovelace.yaml by Matt you leave the theme: tablet set for views
type: custom:grid-layout
icon: mdi:home-circle
theme: tablet
path: summary
layout:
default:
...
2 Likes
Did someone manage to get a second circle with a different entity value in the button below the normal circle on the right top?
i try to get 1 circle with the set temperature of my AC and a circle below with the current temperature of the room.
Just a suggestion, it would have been great to add simple pagination dots beneath the slider within the Media for better UX. I understand you’re not obligated to fulfill requests, of course, but that slider is excellent for maintaining the existing grid structure, and I need to use it in many places. I thought it would be nice if there were dots. I tried to do it myself, but I’m new and struggled a bit 