šŸ“ 100% Templatable Lovelace Configurations

Sorry to disappeoint but no, I tried A LOT using the custom-secondaryinfo but it doesnā€™t seems to work!

I will post an example soon

Will do in few mins :slight_smile:

Edit: Done :slight_smile:

Okay actually I was wrong, I managed to make it work :smiley:

But I need some help please ^^

secondary_info: "${'OnePlus 5 Battery: ' + states['sensor.andrea_oneplus5_battery'].state + '% -' + states['binary_sensor.andrea_oneplus5_charging'].state === 'true' ? 'Charging' : 'Not Charging'}"

It always return ā€œNot chargingā€

Thanks :slight_smile:

New entities option fixed the hold_action for me, thanks.

1 Like

That makes sense I think if you have a busy system. The template card is re-instatiating the card each time there is a state change if not restricted by the entities option. So the card could have been ā€œgoneā€ while you held it.

Well that question opens up a whole can of worms.

I donā€™t even know what a hui-sensor-entity-row is except by experimentation and by inferring from the contents of this post.

I can find no reference to anything hui anywhere and I did ask the question recently and was told,

in order to

So to me they are some undocumented ā€˜magicā€™.

Which all means that I have no idea why this config-template-card needs to use them or what syntax and options are available to use them natively.

So, cutting to the chase, to answer your question, I donā€™t know. But I have tried the following with the results shown. (Interestingly neither appears as a ā€˜cardā€™ unless of course they default to a transparent background).

  - type: custom:hui-sensor-entity-row
    entity: sensor.bakerloo
    secondary_info: last-changed
    style:
      --primary-text-color: yellow

  - type: custom:hui-sensor-entity-row
    entity: sensor.bakerloo
    secondary_info: last-changed

image

A binary sensor has a state on or off. Your code has true which it will never have so thatā€™s why itā€™s always showing ā€œNot chargingā€.

2 Likes

ALL core cards/row/elements have a prefix/suffix that follows this convention:

hui-<card/row/element name>-<type card/row/element>
e.g.
hui-shopping-list-card
hui-sensor-entity-row

You can look in the create files here: https://github.com/home-assistant/home-assistant-polymer/tree/dev/src/panels/lovelace/common

1 Like

Thatā€™s a good point, thanks! :smiley:

But, why the first part of the text is not beinbg show?

My plan was to have an output like:
OnePlus 5: 85% - Charging/Not Charging

But it is showing only the final part, beside the wrong binary_sensor value

EDIT: Tested with ā€˜onā€™, it still only say ā€œNot Chargingā€

Had some fun, used this card to do a temperature-based color weather icon with pop-up forecast and weather map (browser-commander), thanks again for this great card!!

  - type: state-icon
    entity: sensor.dark_sky_minutely_summary
    tap_action: 
      action: none
      service: python_script.browser_cmd
      service_data:
        cmd: 'popup'
        data: 'weather'
    hold_action:
      action: call-service
      service: python_script.browser_cmd
      service_data:
        cmd: 'popup'
        data: 'weathermap'
    style: 
      top: 50%
      left: 50%
      height: auto
      width: 2.6vw   
      background-color: "${var colors=['#442299','#3b0cbd','#3311bb','#4444dd','#e6ffff','#ccffff','#ffffff','#11aabb','#12bdb9',
                                       '#22ccaa','#69d025','#aacc22','#d0c310','#ccbb33','#feae2d','#ff9933','#ff6644','#ff4422',
                                       '#ff3311','#ee1100','#f80c12'];
                                     var temp=parseInt((parseInt(states['sensor.dark_sky_temperature'].state)-10)/(70/20)); 
                                     if (20>=temp>=0) colors[temp];else if (temp<0) colors[0];else colors[20]}"
      border-radius: 100%    

image

1 Like

:tada: Introducing Variables :tada:

1.0.4 Released

You can now use the new variables configuration to create a list of reusable variables to hopefully help clean up your templates. See the updated docs on the repo for an example.

Have fun templating!

3 Likes

Further to my previous answer it doesnā€™t look like I can. I had guessed I would be able to, following the example given above by @arsaboo where he,

and changes the colour behind an icon:

If the answer is not too complex for this post, why can paper-item-icon-color be defined but not primary-text-color and is there any way to discover that information?

Should I change config to card? Seems like it would be more consistent with other cards.

  • Keep config
  • Breaking change to use card

0 voters

2 quick questions on the new variables option:

  • whatā€™s the scope of these declared variables? I have picture-elements card under config, will all cards inside that picture-elements ā€˜seeā€™ the variables?
    [Edit: Tested, all cards under config ā€˜seeā€™ the variables]

  • Is it possible to declare constants in variables option? Like:

    type: 'custom:config-template-card'
    variables:
      - states['light.bed_light'].state
      - ('red')
    [Edit: Works, vars[1] will show 'red', thanks to Ian!! ]
    

TIA

Any feedback/help please?

There must be something stupid I am doing that stop all the rest of the static text to be showed.

Did you try states['binary_sensor.andrea_oneplus5_charging'].state === true ? 'Charging' : 'Not Charging' ?

Yes, by itself it does work (and yes, I changed true to on) :slight_smile:

If it is working by itself, the template should be fine. With variables now possible, I would try putting in variables.

Current status:

secondary_info: "${'OnePlus 5 Battery: ' + states['sensor.andrea_oneplus5_battery'].state + '%' + states['binary_sensor.andrea_oneplus5_charging'].state === 'on' ? ' - Charging' : ''}"

Result in:
image

While this:

secondary_info: "${states['binary_sensor.andrea_oneplus5_charging'].state === 'on' ? 'Charging' : ''}"

Correctly return:
image

You mean put the text in a variable?

What if you just try secondary_info: "${states['binary_sensor.andrea_oneplus5_charging'].state === 'on' ? 'Charging' : 'Not Charging'}"?