mayker
(maykar (pronounced "maker" with a southern accent))
692
@Mariusthvdb For the icon issue, make sure the tab you are adding an icon to already has an icon and not just a title. Will look into the array.length error. For the template, it’s just JavaScript so you can use ternarys, multiple if statements, if else, etc. In your particular case, else if is the best option so you can have that fallback else statement.
@klogg Thank you for the thorough reply rest assured I’m on the case, as I’m sure you’ve seen your not the only one with the issue. Bear with me.
ok, I did take out the icon to be sure… put the icon back again, and then that icon is displayed, not the templated icon… changed entities to entity and lost the ‘return’ and went from === to ==. Don’t know what else could be wrong now in the template.
I’ ve also carefully inspected the template for spacing, (missed a dash too, according to the doc) and now use:
the mentioned error isnt there anymore, but still no luck. either the icon of the view is displayed, and when taken out, the view name. No template icon.
there’s another issue, and I think it started after having set the exceptions for the iPhone:
right side menu (Options)
left side (Home)
both on Chrome and Safari (Mac) not in the iOS 2 beta app.
error is back unfortunately:
Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'array.length')
mayker
(maykar (pronounced "maker" with a southern accent))
695
Please try the latest version 1.0.3b6, multiple fixes. Thanks for your patience.
@Mariusthvdb Your example should work as you just posted with the latest fixes as well as fix your other issues. Keep me posted.
cool, thanks for all your efforts!
the overlapping menu icons left and right are gone, showing fine again. No more errors in inspector either.
unfortunately my template menu icon is still not working, and showing the fixed icon set in the view configuration.
Just to be sure I do it correctly: this template is set in the main config, not the actual view config?
maybe give me a template that is sure to work, and tested on your side? Might simply be the way the template is evaluating the entity on this side.
That fixed my problems. Thanks for all your efforts
mayker
(maykar (pronounced "maker" with a southern accent))
699
So this is working for me perfectly (when I change the entity of course). The only difference is the hyphen in front of “template:”. This is entirely on how I’m handling the config and I just updated the readme. I may remove the need for that at some point, but give it a try.
conditional_styles:
- template:
tab:
12:
- icon: >
if (entity['sensor.family_home'].state == '0') 'mdi:account-off';
else if (entity['sensor.family_home'].state == '1') 'mdi:account';
else if (entity['sensor.family_home'].state == '2') 'mdi:account-multiple';
else if (entity['sensor.family_home'].state == '3') 'mdi:account-multiple-check';
else 'mdi:account-group';
had already tried that yes, but unfortunately no succes.
Having copied your last post exactly in my main config, only thing left I can imagine is a setting in the view itself. I havent got a number there, so maybe that’s it?
well, don’t know why, but all of a sudden the icon snapped into place! Hope this is here to stay, as it was one of the niceties regular HA had over Lovelace. You’ve just made my day thank you very much indeed!
I’ll leave the post as it was, for reference to other community members.
@mayker, can I just suggest you have an error in the docs? (It was looking at @Mariusthvdb post that showed me why mine wasn’t working )
Should this:
- type: custom:compact-custom-header
main_config: true
conditional_styles:
- template:
- background: > # Style the header's background can use CSS colors or background images.
if (entity["input_boolean.living_room"].state == "off") "#000";
else if (entity["input_boolean.living_room"].state == "on") "url('/local/bg.jpg')";
- tab:
3: # Number of the tab to style.
- icon: > # MDI icon for tab or button.
if (entity["device_tracker.galaxys8"].state == "home") "mdi:account";
else "mdi:account-off";
- color: > # MDI icon for tab or button.
if (entity["device_tracker.galaxys8"].state == "home") "blue";
else if (entity["device_tracker.galaxys8"].state == "not_home") "#ffffff";
be this:
- type: custom:compact-custom-header
main_config: true
conditional_styles:
- template:
background: > # Style the header's background can use CSS colors or background images.
if (entity["input_boolean.living_room"].state == "off") "#000";
else if (entity["input_boolean.living_room"].state == "on") "url('/local/bg.jpg')";
tab:
3: # Number of the tab to style.
- icon: > # MDI icon for tab or button.
if (entity["device_tracker.galaxys8"].state == "home") "mdi:account";
else "mdi:account-off";
- color: > # MDI icon for tab or button.
if (entity["device_tracker.galaxys8"].state == "home") "blue";
else if (entity["device_tracker.galaxys8"].state == "not_home") "#ffffff";
haha. well you never know who you help with posting a bit of a struggle…
must say I am a bit confused with the need for dashes in this config.
So used to only needing them when more than 1 item is listed, I would think (in my specific icon template) to need this:
conditional_styles:
template:
tab:
12:
icon: >
if (entity['sensor.family_home'].state == '0') 'mdi:account-off';
else if (entity['sensor.family_home'].state == '1') 'mdi:account';
else if (entity['sensor.family_home'].state == '2') 'mdi:account-multiple';
else if (entity['sensor.family_home'].state == '3') 'mdi:account-multiple-check';
else 'mdi:account-group';
instead of:
conditional_styles:
- template:
tab:
12:
- icon: >
if (entity['sensor.family_home'].state == '0') 'mdi:account-off';
else if (entity['sensor.family_home'].state == '1') 'mdi:account';
else if (entity['sensor.family_home'].state == '2') 'mdi:account-multiple';
else if (entity['sensor.family_home'].state == '3') 'mdi:account-multiple-check';
else 'mdi:account-group';
thank you very much indeed!
)