Code Monkey home page Code Monkey logo

Comments (5)

Mariusthvdb avatar Mariusthvdb commented on June 12, 2024

without any example, I couldnt say....

usually the changes only kick in after a state change. you can force that in dev tools state

from custom-ui.

danielbrunt57 avatar danielbrunt57 commented on June 12, 2024

I tried setting a new state on an entity after saving a change in configuration.yaml and reloading location & customization but the new value for the templated attribute did not update. Here's my code currently:

homeassistant:
#  customize: !include customize.yaml
#  customize_domain:
#    light:
#      templates:
#        icon_color: "return state === 'on' ? 'yellow' : 'grey';"
  customize_glob:
#    "*.*":
#      hide_attributes:
#        - templates
    sensor.*_battery_plus:
      new_attribute: "and again"
      templates:
        templated_attribute: "Just a string"
        battery_last_replaced_button: return 'button.' + entity.entity_id.split('.')[1].split('_battery_plus')[0] + '_battery_replaced';
        icon_color: >
          var r = Math.min(255, Math.round(510 - 5.10 * ~~Number(state)));
          var g = Math.min(255, Math.round(5.10 * ~~Number(state)));
          var h = r * 0x10000 + g * 0x100;
          return '#' + ('000000' + h.toString(16)).slice(-6);
#    binary_sensor.*_motion:
#      templates: &motion_templates
#        icon: "return state === 'on' ? 'mdi:motion-sensor' : 'mdi:human-male';"
#        icon_color: "return state === 'on' ? 'yellow' : 'grey';"
#    binary_sensor.*_occupancy:
#      templates: *motion_templates
#    sensor.*_battery:
#      templates: &battery_color
#        icon_color: >
#          var r = Math.min(255, Math.round(510 - 5.10 * Number(state)));
#          var g = Math.min(255, Math.round(5.10 * Number(state)));
#          var h = r * 0x10000 + g * 0x100;
#          return '#' + ('000000' + h.toString(16)).slice(-6);
#    sensor.*_battery_level:
#      templates: *battery_color
#        icon_color: >
#          var r = Math.min(255, Math.round(510 - 5.10 * Number(state)));
#          var g = Math.min(255, Math.round(5.10 * Number(state)));
#          var h = r * 0x10000 + g * 0x100;
#          return '#' + ('000000' + h.toString(16)).slice(-6);

image

Just before the above, I also removed custom-ui-only v2024.1.16 which I had manually installed, and installed custom-ui v2024.1.18 via HACS.

The other thing I'm wondering is whether I should be able to reference the templated attributes in Dev Tools? Currently, I cannot. state_attr('','') returns None after a restart. No, wait a second, now it's showing. But it's not updating in dev tools>template when i see a change in dev tools>states.

image

{% set entity = "sensor.bathroom_battery_plus" %}
{{ entity|replace("sensor.","button.")|replace("_battery_plus","_battery_replaced") }}
{{ state_attr(entity, 'new_attribute') }}
{{ state_attr(entity, 'icon_color') }}
{{ state_attr(entity, 'battery_last_replaced_button') }}

image

This is what I see in dev tools template after a system restart:
image

Sometime later (much later) it changes.

from custom-ui.

danielbrunt57 avatar danielbrunt57 commented on June 12, 2024

Those templated attributes still have not updated in dev tools>template...

from custom-ui.

Mariusthvdb avatar Mariusthvdb commented on June 12, 2024

sorry, but you're not making this easy to assist.

please make a minimal failing example, so we can check that.

and no, the attributes can Not be templated n dev tools templates nor core backend templates. we tried, but there is no way.
please always search other issues, open and closed, before posting.

for now, just give it a restart to see if the template is actually functional, and updates after that

from custom-ui.

danielbrunt57 avatar danielbrunt57 commented on June 12, 2024

Ok, so upon deep reflection over the last 7 hours and reading and re-reading your documentation slowly and carefully, I came to realize that Dev Tools>Template couldn't possibly see or be influenced by the front-end templating which custom-ui overlays onto the state of things, I dropped that method of testing and went looking for a front-end view of things. I used the battery-state-card where I could view attributes.whatever via its {KSting} within name: and secondary_info: and the custom templated attributes existed as I intended. I changed to this simple config:

homeassistant:
  customize:
    sensor.bathroom_battery_plus:
      templates:
        battery_last_replaced_button: >
           ${ 'button.' + entity.entity_id.split('.')[1].split('_battery_plus')[0] + '_battery_replaced' }
#        icon_color: >
#          var r = Math.min(255, Math.round(510 - 5.10 * ~~Number(state)));
#          var g = Math.min(255, Math.round(5.10 * ~~Number(state)));
#          var h = r * 0x10000 + g * 0x100;
#          return '#' + ('000000' + h.toString(16)).slice(-6);

restarted HA and verified the state of that entity.
I changed configuration.yaml to:

homeassistant:
  customize:
    sensor.bathroom_battery_plus:
      templates:
        battery_last_replaced_button: >
           ${ 'button.' + entity.entity_id.split('.')[1].split('_battery_plus')[0] + '_battery_replaced' }
        icon_color: >
          var r = Math.min(255, Math.round(510 - 5.10 * ~~Number(state)));
          var g = Math.min(255, Math.round(5.10 * ~~Number(state)));
          var h = r * 0x10000 + g * 0x100;
          return '#' + ('000000' + h.toString(16)).slice(-6);

and used reload Locations and customizations but dev tools>state did not show the new attribute.
I then changed the state using dev tools but still no change.
Then I reloaded the MQTT integration and the attributes updated.

I repeated the process altering included/commented and performed the same reload sequence and although the template disappeared, its resulting attribute from before was still present.

homeassistant:
  customize:
    sensor.bathroom_battery_plus:
      templates:
#        battery_last_replaced_button: >
#           ${ 'button.' + entity.entity_id.split('.')[1].split('_battery_plus')[0] + '_battery_replaced' }
        icon_color: >
          var r = Math.min(255, Math.round(510 - 5.10 * ~~Number(state)));
          var g = Math.min(255, Math.round(5.10 * ~~Number(state)));
          var h = r * 0x10000 + g * 0x100;
          return '#' + ('000000' + h.toString(16)).slice(-6);

image

I now have a much better understanding of all the inner workings and although the last edit wasn't fully updated via reload, what I'm seeing appears to just be normal behaviour and I'm okay with that. It's not like I'm doing edits all the time and since a full restart only takes about 90 seconds, it's not the end of the world. Just a little inconvenient when changing things and troubleshooting my errors.

Thank you very much for your time looking at this!

from custom-ui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.