Home Assistant setup guide Custom Button Card 4: Variables & Procedurals

[@3ATIVE]

See the rest of my *"Custom Button Card"* series here: kzbin.info/aero/PLWRTMby105bghMzvCYV5Y2v1_dAeqILIG

[@t-ladtheband]

you are my main source for everything custom button card. Thank you for your efforts!!!

[@3ATIVE]

🥳 Thank you for the kind feedback Tom. I'm not done yet, there's a couple more tutorials coming soon.

[@28jiminy]

Thank you for this series. I really struggled with the custom button card, and, after trying a few sources of information, I've found your series the most helpful.

[@3ATIVE]

Thank you, Josh! I appreciate your feedback and I'm glad my series was helpful for you.

[@RottieHaven]

Today is going to be a Home Assistant day! Thanks for sharing :)

[@3ATIVE]

Excellent, have fun. 😎 If you have questions... feel free to hulla at me.

[@rasbe6863]

Another great video. Guess I know what I am spending my Saturday doing now for my buttons

[@3ATIVE]

LOL. Thanks 'ResBae' - Have fun and if you need help... I'm always here. 😉

[@bartj9378]

Very informative video. Thanks for ideas! I have good one that I am trying to solve... I want to move entity picture between 6 set positions depending on value of input select. I would appreciate some pointers.

[@3ATIVE]

Yes, you can. In fact I have a tutorial that may be of help for you: kzbin.info/www/bejne/n5PMd6mZh7N4jdU

[@arnauddubarry3588]

Hello everyone Thanks for the video very useful Where do yo find the list of command that can be used such as slice, charAt, text-transform .... Many thanks for all the tips

[@3ATIVE]

Thank you Arnaud Dubarry, it's nice to hear it was use/help-full for you.😎 It's all JAVAScript and CCS - I use various sites for reference.

[@simonburke6681]

wow, you been busy, cheers again matey

[@3ATIVE]

Yay, thanks man. 🖖

[@jonastohr6526]

hey thanks for work one question can i use two conditons at once in like this if (entity.state == "on") + (states["sensor.psa_preconditioning_status"].state == 'Enabled' ) return ...

[@3ATIVE]

If I were to try it, my line would look something like this: if( CONDITION_1 && CONDITION_2) return...

[@Kentin62320]

hello great your videos! I have a question how to display the status of the garage door (open) when it is open and closed when it is closed? currently I managed to do that except that I do not have the real state of the door: if it is not closed correctly the application still shows me the closed door ... I have a door sensor and a button to open and close. do you have the code for it to take into account the sensor on the animation? thank you so much (:

[@3ATIVE]

Other than Open & Closed, what other states or values do you get from the Door?

[@Kentin62320]

@@3ATIVE binary sensor and Switch Binary sensor to know the real state of the door (whether open or closed). and switch to open and close the door

[@EncontrosNoCaminhoCicloTurismo]

Hi, nice tutorials, its possible to make a sprinker animating with splashes of droplets ?

[@3ATIVE]

Thank you, I'm happy you find them useful. Sure, the button card will display animated GIFs too. See Chapter 8 of Button Card 1: kzbin.info/www/bejne/ZqjKapWao6x3ZpI

[@bogdantarasovych6289]

Great job 👍👍

[@3ATIVE]

Thnx - I hope you find it helpful.

[@chrisblackton]

Thanks for this! I anxiously await all your videos but this, in particular, I've been anticipating since part 3! I've got my fans all adjusted and it looks fantastic! But now I'm having trouble with a similar custom button card issue regarding my household's phones. How can I change the icon based on the state value of a different entity? Basically I want to combine the techniques in this video with the "changing icons" part of your first video in this series.

[@3ATIVE]

Thanks for the feedback Chris, it's always great to hear from people using my tutorials. 💖 To change the icon(s) based on the state of another Entity, you'll pretty much need what I showed here in 'Chapter 2" Except, instead of '- animation: ...' you would have this code: icon: | [[[ if (states[entity].state=='on') return 'mdi:power-standby' if (states[entity].state=='on') return 'mdi:power-standby' if (states[entity].state=='on') return 'mdi:power-standby' else return 'mdi:power-standby' ]]] Obviously you'll need to change 'entity' for your ones and each of the 'mdi:power-standby' for the Icons you want to use for each state. This can either go under the ' - value 'on', if you want this to change only when the button is on. Or, if you want it 'live' (regardless of the button's state) simply place this in the 'styles' for the whole card and you see where it would go in this video: kzbin.info/www/bejne/j4bVYoh3fb6Lh9E - at line 15. 😎

[@chrisblackton]

@@3ATIVE Thanks so much for the guidance. I still couldn't get it to work the way I wanted but it lead me to rethink what I really wanted I I wound up creating something even better!

[@3ATIVE]

@@chrisblackton Happy to... 'help' ? 😊 Sorry, you had troubles in the first instance... but, I'm glad you got something better! YAY! 🥳

[@pjnorris]

Great video series... quick question, your entity for number.fan_kitchen_speed - is that a helper, as I created a slider input_number with the more-info tap action and I can't replicate what you have there.... clues? EDIT: realised you got that variable from ESPHome for the fan. So how do I do my own variable for the slider without using ESPHome? EDIT2: Ignore, I sussed it out! It was input_number to set a slider, just had my steps configured incorrectly.

[@3ATIVE]

Hi Paul, LOL I love that you asked the question, worked it out yourself AND found your own solution. - Yeah, for a while now I've been getting ESPHome do more - From these 'sliders' to all sorts of 'on-board' local automation. I like my devices to 'smart' and not just commanded from a central server.

[@pjnorris]

@@3ATIVE thanks for the tips. My solution is not elegant though. The slider is at top and history dominates the pop up. Going to investigate opening another pop up in some way. I have 6 fans with 3+1 speeds, and a light that has four dim settings (WLED strip on monitor - 0, 25, 50, 75, 100 brightness).

[@3ATIVE]

@@pjnorris One way to get rig of the history is to stop it being recorded. You can use 'recorder:' to limit what goes in to the History.

[@xbmcnut]

I'm trying to pull the fan speed from an attribute but can't quite figure out the code. This is what's NOT working if (states["climate.rumpus.attributes.fan_mode"].state == low)

[@3ATIVE]

I see... I don't use "fan_mode" on any my "Climate" devices. You'll have to check what state(s) the attributes have on yours and do the logic on those.

[@xbmcnut]

@@3ATIVE Cracked it! if (states['climate.rumpus'].attributes.fan_mode == 'low') return 'rotating 3s linear infinite'

[@3ATIVE]

@@xbmcnut Cool, good find. Thanks for the feedback. 🙏

[@avanaraveloson5017]

Thank you very much for this video. I couldn't figure out without your tutorial. I'm trying to add the AND function to my template but I'm stuck. What am I missing? icon: | [[[ if (states[entity].state=='on') return 'mdi:power-standby' if (states[entity].state=='on') return 'mdi:power-standby' if (states[entityA].state=='off') AND if (states[entityB].state=='off') return 'mdi:electric-switch' else return 'mdi:power-standby' ]]]

[@3ATIVE]

If I'm following what you're trying to do then you would code something like this: If(states[entity].state=='on' && states[entity].state=='off') return... It's the "&&" that is the 'AND' logic you are after.

[@avanaraveloson5017]

Thanks 🙏. I'll give it a try.

[@rjt1969]

I have a question. I have a couple of iFan03's (Factory Firmware) controlling two older 3 speed A/C fans. Just recently I am getting this in my logs "The fan.set_speed service is deprecated and will fail in 2022.3 and later, use fan.set_percentage or fan.set_preset_mode instead" I just set up an ordinary Button Card and use the slider it fails because it can't call the fan:set_percentage So my question is that if I use this button_card_fan.yaml code will it work (assuming I load the custom:button_card)?

[@3ATIVE]

The 'button_card_fan.yaml' example uses the three entities: switch.fan_name_speed[1/2/3] from my 3-Speed Fan convert project: kzbin.info/www/bejne/lYnKe6yPrNGYoNE to adjust the spin speed of an icon, I.E. how long it takes to rotate once. So: * IF "switch...speed_1" is on, the icon takes 3 seconds * IF "...speed_2" is on, take 1 second * IF "...speed_3" is on, take 0.5 second If your iFan03 has similar entities, you can easily adapt my code to suit. 👍 However, if it's outputting a percentage, each one of the "if" statements would need to test a percent level - So you could do something like: * IF less than 33%, spin the icon slow * IF between 33% & 60%, spin the icon medium speed * IF above 60% then spin the icon fast! Or you could use the percentage (0-100%) directly and rotate the icon proportionally 😊

[@3ATIVE]

I had a 'play' this morning and came up with this: facebook.com/3ative/videos/1355306954914476/ Would this be helpful / Useful for your setup?

[@rjt1969]

@@3ATIVE Yes for sure that's great... but not sure how I could implement it with my setup (iFan03 -factory firmware and SonoffLAN HACS) as it does not seem to return percentage speed?

[@3ATIVE]

@@rjt1969 I was thinking more like, Maybe you don't need the percentage from the iFan, but instead send it a percentage with "fan.set_percentage"?

[@3ATIVE]

@@rjt1969 I haven't used the iFan controllers... I made my own. 😉

[@vtaoe]

There's a much easier way to handle the capitalization of the name. Under the main card, use: styles: name: - text-transform: capitalize

[@3ATIVE]

Indeed... changing the line: *From* : return entity.entity_id.slice(11).charAt().toUpperCase() + entity.entity_id.slice(12,-7) + " Fan" *To just* : return entity.entity_id.slice(11,-7) + " fan" Thanks 👍 I tried to keep everything it's doing in one place - _Makes it easier for people to follow and gives them options for use elsewhere_ 😉