I felt the same, Bartem. I’m not pretty enough to see my pic everyday. I created animojis with location state transparent backgrounds. These aren’t in the HKI cards, though. I am really looking forward to seeing Jim’s 2.0 project and will likely adopt that then.
Haha I am not pretty either 
, but I thought it looked cool. Anyways, if I know where to get those animoji I will put that into the project. Followers of my slack channel have already seen previews. And it is really really cool!! I am sure there is not a single project out here that has done something wild like this .
I am reluctant to send previews here because for non slack users I want it to be a bang surprise.
I saved one and with photoshop I turned it into a PNG with a transparent background
Hm ok, I think that might help me already, not sure if it will make 2.0.0, but updates will be super easy to make starting from 2.0.0 (as I no longer have to worry about those darn update guides).
So it will surely make its cut in 2.0.1 or in 2.1.0
For the Animoji… within Messages app on my Mac, I just right click the picture, select Open, which opens it up within the Preview app, from there select File, Save, and select a format, I choose png files.
eh unfortunately I don’t have a Mac
Here’s my custom alarm view:
Fair warning, when transitioning from the armed to the disarmed state, the Arm Away button does not get styled unless you refresh the page. Browser_mod has a refresh command that may patch this issue.
# lovelace_gen
- title: Alarm
icon: 'mdi:shield'
path: alarm
cards:
- type: vertical-stack
cards:
- !include
- '../templates/system_header.yaml'
- name: "[[[ if (states['alarm_control_panel.alarm'].state == 'disarmed') return `The alarm is disarmed!`; else return `The alarm is armed!` ]]]"
icon: mdi:alert #fal:sensor-alert
content: Alarm
- type: custom:layout-card
cards:
- type: custom:layout-card
cards:
- type: alarm-panel
entity: alarm_control_panel.alarm
states:
- arm_home
- arm_away
{% raw %}
style:
.: |
ha-card {
overflow: hidden;
opacity: 0.7;
}
'#armActions mwc-button':
$: |
button {
min-height: 50px;
font-size: 18px !important;
--mdc-theme-primary: var(--primary-text-color); var(--name-color-off);
border-color: rgba(57,128,228,0) !important;
border-radius: 12px;
box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2), 0 0 20px 6px rgba(0, 0, 0, 0.19);
}
'#keypad mwc-button:nth-of-type(11)':
$: |
:host {
background: transparent;
float: left !important;
}
button {
display: block;
min-height: 50px;
font-size: 28px !important;
--mdc-theme-primary: var(--primary-text-color); var(--name-color-off);
border-color: rgba(57,128,228,0) !important;
width: 50%;
border-radius: 12px;
box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2), 0 0 20px 6px rgba(0, 0, 0, 0.19);
#box-shadow: 0 0 60px 30px #fff, 0 0 100px 60px #f0f, 0 0 140px 90px #0ff;
}
'#keypad mwc-button:nth-of-type(-n+9)':
$: |
:host {
background: transparent;
float: left !important;
}
button {
display: block;
min-height: 50px;
font-size: 28px !important;
--mdc-theme-primary: var(--primary-text-color); #var(--name-color-off);
border-color: rgba(57,128,228,0) !important;
width: 50%;
border-radius: 12px;
box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2), 0 0 20px 6px rgba(0, 0, 0, 0.19);
}
'#keypad mwc-button:nth-of-type(12)':
$: |
button {
min-height: 50px;
font-size: 18px !important;
--mdc-theme-primary: var(--primary-text-color); var(--name-color-off);
border-color: rgba(57,128,228,0) !important;
border-radius: 12px;
box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2), 0 0 20px 6px rgba(0, 0, 0, 0.19);
}
{% endraw %}
And the person card…too lazy to build a template
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.me_present
entity_picture: '/local/brian-hi.png'
layout: icon_name_state2nd
show_entity_picture: true
show_state: false
show_name: false
size: 50%
tap_action:
action: more-info
state:
- value: 'off'
styles:
entity_picture:
- filter: brightness(50%) blur(2px) grayscale(50%)
styles:
grid:
- grid-template-areas: '"i location" "i travel" "i home" "i battery"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
custom_fields:
location:
- padding-bottom: 2px
- align-self: end
- justify-self: start
- font-family: Helvetica
- font-size: 0.8em #11px
- font-weight: bold
- text-transform: capitalize
battery:
- padding-bottom: 2px
- align-self: end
- justify-self: start
- font-family: Helvetica
- font-size: 0.8em #11px
travel:
- padding-bottom: 2px
- align-self: end
- justify-self: start
- font-family: Helvetica
- font-size: 0.8em #11px
home:
- padding-bottom: 2px
- align-self: end
- justify-self: start
- font-family: Helvetica
- font-size: 0.8em #11px
card:
- opacity: 0.8
- overflow: hidden;
entity_picture:
- width: 95%
state:
- font-family: Helvetica
- font-size: 0.8em #11px
- font-weight: bold
- justify-self: start
# - padding-left: 0.7em #10px
- text-transform: capitalize
custom_fields:
{% raw %}
location: >
[[[
return `
</ha-icon><span>${states['person.brian'].state}</span>`
]]]
{% endraw %}
{% raw %}
battery: >
[[[
var level = states['sensor.brians_phone_battery_level'].state;
if(level <= 10){
var info = `<ha-icon style="color: red; transform: scale(0.8, 0.8);" icon="fas:battery-empty"></ha-icon>
<span>${level}%</span>`
} else if (level <= 25){
var info = `<ha-icon style="color: orange; transform: scale(0.8, 0.8);" icon="fas:battery-quarter"></ha-icon>
<span>${level}%</span>`
} else if (level <= 50){
var info = `<ha-icon style="color: var(--paper-item-icon-color); transform: scale(0.8, 0.8);" icon="fas:battery-half"></ha-icon>
<span>${level}%</span>`
} else if (level <= 75){
var info = `<ha-icon style="color: var(--paper-item-icon-color); transform: scale(0.8, 0.8);" icon="fas:battery-three-quarters"></ha-icon>
<span>${level}%</span>`
} else {
var info = `<ha-icon style="color: var(--paper-item-icon-color); transform: scale(0.8, 0.8);" icon="fas:battery-full"></ha-icon>
<span>${level}%</span>`
}
return info;
]]]
{% endraw %}
{% raw %}
travel: >
[[[
return `<ha-icon style="color: var(--paper-item-icon-color); transform: scale(0.8, 0.8)" icon="fas:road"></ha-icon>
<span><span style="color: var(--text-color-sensor);">${states['sensor.brian_journey_work'].state} min</span></span>`;
]]]
{% endraw %}
{% raw %}
home: >
[[[
return `<ha-icon style="color: var(--paper-item-icon-color); transform: scale(0.8, 0.8)" icon="fas:home"></ha-icon>
<span><span style="color: var(--text-color-sensor);">${states['sensor.brian_journey_home'].state} min</span></span>`;
]]]
{% endraw %}
And for the interested few…the weather card, heavily borrowed from the button-card forum posts. Was initially a fan of the shadow changing colors depending on the state, but personally its novelty is starting to wear off, left it in as it may appeal to others.
- type: custom:button-card
{% raw %}
style: |
ha-card {
overflow: hidden;
}
{% endraw %}
icon: mdi:weather-sunny
entity_picture: /local/icons/animated-weather/day.svg
color: auto
size: 60% #2em
aspect_ratio: 5/1
entity: weather.dark_sky
show_name: false
show_state: true
show_label: false
show_entity_picture: true
tap_action:
action: navigate
navigation_path: /lovelace/weather
haptic: light
layout: icon_label
styles:
grid:
- grid-template-areas: '"i temp" "i s" "i sun"'
- grid-template-columns: 40% 1fr
- grid-template-rows: 1fr min-content 1fr
card:
- opacity: 0.8
state:
- padding-bottom: 2px
- align-self: center
- justify-self: start
- font-family: Helvetica
- font-size: 0.8em #13px
- text-transform: capitalize
custom_fields:
temp:
- padding-bottom: 2px
- align-self: end
- justify-self: start
- font-family: Helvetica
- font-size: 0.8em #11px
- font-weight: bold
- text-transform: capitalize
sun:
- padding-bottom: 2px
- align-self: center
- justify-self: start
- font-family: Helvetica
- font-size: 0.8em #11px
- font-weight: normal
custom_fields:
{% raw %}
temp: >
[[[
var outTemp = Math.round(entity.attributes.temperature);
var inTemp = Math.round(states['sensor.average_temperature'].state);
return (outTemp ? outTemp : '0') + '° Outside / ' + (inTemp ? inTemp : '0') + '° Inside';
]]]
{% endraw %}
{% raw %}
sun: >
[[[
var options = { hour: 'numeric', minute: 'numeric' };
var sunrise_date = new Date(states['sun.sun'].attributes.next_rising);
var sunrise_time = sunrise_date.toLocaleDateString("en-US", options).split(",")[1];
var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
var sunset_time = sunset_date.toLocaleDateString("en-US", options).split(",")[1];
var sunstate = states['sun.sun'].state;
if(sunstate == 'above_horizon'){
var info = `<ha-icon style="color: var(--paper-item-icon-color); width: 12px;" icon="mdi:weather-sunset-down"></ha-icon>
<span>${sunset_time}</span>`
} else {
var info = `<ha-icon style="color: var(--paper-item-icon-color); width: 12px;" icon="mdi:weather-sunset-up"></ha-icon>
<span>${sunrise_time}</span>`
}
return info;
]]]
{% endraw %}
state:
- value: clear-night
icon: mdi:weather-night
entity_picture: /local/icons/animated-weather/night.svg
- value: cloudy
icon: mdi:weather-cloudy
entity_picture: /local/icons/animated-weather/cloudy.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: overcast
icon: mdi:weather-cloudy-arrow-right
entity_picture: /local/icons/animated-weather/cloudy.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: fog
icon: mdi:weather-fog
entity_picture: /local/icons/animated-weather/cloudy.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px purple
icon:
- color: purple
- value: hail
icon: mdi:weather-hail
entity_picture: /local/icons/animated-weather/rainy-7.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: lightning
icon: mdi:weather-lightning
entity_picture: /local/icons/animated-weather/thunder.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: lightning-rainy
icon: mdi:weather-lightning-rainy
entity_picture: /local/icons/animated-weather/thunder.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: partly-cloudy
icon: mdi:weather-partly-cloudy
entity_picture: /local/icons/animated-weather/cloudy-day-3.png
- value: pouring
icon: mdi:weather-pouring
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: rainy
icon: mdi:weather-rainy
entity_picture: /local/icons/animated-weather/rainy-7.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px #03a9f4
icon:
- color: #03a9f4
- value: snowy
icon: mdi:weather-snowy
entity_picture: /local/icons/animated-weather/snowy-6.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: snowy-rainy
icon: mdi:weather-snowy-rainy
entity_picture: /local/icons/animated-weather/snowy-6.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px white
icon:
- color: white
- value: sunny
icon: mdi:weather-sunny
entity_picture: /local/icons/animated-weather/day.svg
styles:
card:
- box-shadow: 0px 0px 10px 3px yellow
icon:
- color: yellow
- value: windy
icon: mdi:weather-windy
entity_picture: /local/icons/animated-weather/cloudy.svg
- value: windy-variant
icon: mdi:weather-windy-variant
entity_picture: /local/icons/animated-weather/cloudy.svg
@righteousbs thanks for sharing this. I will merge some of this code with the master. I think I can get those animoji from an iphone as well right? I don’t have a mac that is why I ask.
Don’t worry about templating, I’ll template it for use with v 2.0.0 as v 2.0.0 is completely ui based (meaning config is done through the ui)
Really cool, you will make a lot of people happy as I know a lot that think those photo’s are too prominent. This is more discrete. In any case I like it. Not sure if I will take the weather part as I need to test that first.
Thanks!
Jim,
A screenshot of the animoji on an iPhone or any other device that supports an app that has animojis can then be forwarded via email, message app, etc. to whatever computer/device you want and opened in a graphics application to produce the final image. As long as you allow a reference to an external image file, any image could be used.
I’m using person states for the different images. These relate to defined zones.
entity: person.jenniferaniston
image: /local/persons/jenniferaniston_avatar_v1.png
name: Jennifer
show_name: false
show_state: false
state_image:
Studio: /local/persons/jenniferaniston_avatar_studio_v1.png
Beverly_Nails: /local/persons/jenniferaniston_avatar_away_v1.png
Hilton: /local/persons/jenniferaniston_avatar_hotel_v1.png
Wife_Office: /local/persons/jenniferaniston_avatar_work_v202001211218.png
home: /local/persons/jenniferaniston_avatar_home_v202001211224.png
not_home: /local/persons/jenniferaniston_avatar_away_minicooper_v202001230851.png
type: picture-entity
Thanks, I actually like the svg approach, but I will look into what looks best.
I have a closed beta at the end of this week, for people that want to try it please join my slack channel (link in the first post). I hope to have it ready on friday!
I like the SVG approach, as well. I wanted custom images for different locations, but it requires a good bit of work.
What is the code for Hassos, SpeedTest and Update cards?
Thanks
Update: v2.0.0 closed beta will arrive within 48 hours. If you want to test this join the slack channel (link in the first post) and ask me personally. No open beta this time around!
Videos will come after the weekend!
Thank you for the support and patience!
Update: Wanted to let you all know that the beta is currently running (we’re at beta 6) and that the release will come somewhere next week. People that want to help testing can still join the beta (please join slack for links, you can find the invite in the first post of this thread).
Videos will come soon, they will all be released on the same day (to add up to the “surprise” factor)!
Hey @jimz011, I know you are onto bigger and better things with 2.0, I didn’t look into it enough yet to see what’s invovled in moving my setup, but I was wondering if you have any idea where this scrollbar is coming from, it started a week or two ago… I’m assuming an update to one of the plugins changed something?
Haha yes, well beta7 is out already with beta8 coming tonight, so far so good. Users tell me it is the easiest version of HKI to date as everything can be set in real-time within the UI. Though currently it is a bit heavy. If you haven’t tried v2.0.0 yet I will advise you to try it on a test environment. Moving from 1.1 to 2.0.0 should be super simple. Most users report that they have installed HKI from scratch within the hour!
As to answer your question, honestly I have not seen that before, so I wouldn’t know where it comes from though I have heard someone talking about layout-card doing this, but I don’t have it so I doubt that it’s the card that causes this.
I also have a question for you, could you elaborate on what those little circles in your buttons do?
I have layout-card from the previous setup so maybe that’s where’s it coming from… thanks
The circle is because my color bulbs icons always stayed the color of the last color change, even after changing the “temperature” back to normal color, the icon stayed the last rgb color (not sure why, but it annoyed me to have a red or blue bulb icon when the light was on standard colors) so that was a way to show that it is a color bulb, and it changes depending what color it is, but the icon still does the standard yellow on off color a normal bulb would do. (I have kids and they like to randomly make the lights colors… it makes it easier for them to know which bulbs can change colors)
Also I just finished moving all my color bulbs directly to HA with my HUSBZB-1, instead of with the Lightify component/gateway after hearing about the Lightify shutdown… which has changed the behavior, which is actually working awesome because now the circle disappears on regular color, or at least changes to the temperature color in some cases… (just noticed this after you mentioned the circle, thanks)
