Intial State Not Working - Card Disappears

[almighty059]

I had the default ? for the initial: setting and it didn't seem to be working so I tried a few other things. The only thing that appears to kind of work is if I use a number. Anything else returns NaN in place of the temperature setting.

The card also only appears to be working if I stay on the same screen. For example, if the thermostat was off while the screen reloads then the entire card disappears. If the thermostat is turned off while the card is visible then the temperature value will change to either NaN or whatever number I set for the initial: value.

[ildar170975]

Where is the problem code? Please do not post here a 100-lines-code. Post a short Minimal Working Example.

[almighty059]

My code is basically a copy of one of your examples except that it's inside of a vertical stack. I made a few changes but nothing out of the ordinary. I even tried to use the UI so that only UI-accepted values would be used but I still had the same problem. The only other thing that I tried which isn't reflected in the code is the use of the initial feature. I figured when the thermostat is "off" it's in an "unknown" state but either it didn't work or I did something wrong because it had no effect. I checked to see what the actual state of the temperature set value is when it's off and instead of showing as unavailable, it shows as being a "null" value. Could that be the issue.? Whatever it is, when the thermostat is off and my screen is reloaded everything disappears from inside of the card. If the thermostat is on and your card is showing on the screen and I turn the thermostat off the card remains on the screen but the temperature set value disappears and is replaced with "NaN". Other than this everything else seems to work fine.

type: vertical-stack
cards:
  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: climate.t9_thermostat_living_room
        name: T9 Thermostat
        icon: false
        icon_plus: mdi:chevron-up
        icon_minus: mdi:chevron-down
        service: climate.set_temperature
        param: temperature
        state: temperature
        min: '60'
        max: '80'
        step: '1'
        secondary_info: >-
          Current state:<b style="color:white"> %climate.t9_thermostat_living_room:attributes:hvac_action </b><br />
          Current temp:<b style="color:white"> %climate.t9_thermostat_living_room:attributes:current_temperature </b>
        style: |
          .cur-num{font-size:40px !important}
        unit: °F

[ildar170975]

Start with simplifying the code. Remove everything except basic functionality.

[almighty059]

@ildar170975 I tried that. The custom:numberbox-card setting that seems to be causing the issue is the state: attribute setting. I think the problem has to do with the fact that my climate device does not use a numeric value for it's state. Instead it uses string values such as off, heat, cool, etc. The device only uses numeric values for the following atributes.

current_temperature: - This displays the numeric value of the current temperature regardless of the device state. temperature: - This displays the numeric value that the device is set to but only when the device is on. When the device state changes to off then this attribute no longer displays a numeric value and instead shows a value of null. I'm assuming the null value is what causes the NaN to be displayed on the :numberbox-card. target_temp_high: This always displays a value of null because I do not use it. target_temp_low: This always displays a value of null because I do not use it.

I need to set the state: parameter of the card to temperature in order for it to function correctly. However, when the temperature; parameter changes from a numeric value to a value of null then the card displays NaN. If I reload my computer or tablet screen then instead of displaying NaN the card go completely blank and disappear. The custom:numberbox-card only reappears when I turn my climate device back on which changes the null value back to the numeric value the device is set at.

[htmltiger]

Please try the latest master version. have you tried it without secondary_info? also add initial: 10 and see if that helps.

[almighty059]

@htmltiger I tried removing secondary_info but it makes no difference. Adding an initial value only makes a difference when turning the thermostat off. When the thermostat is turned off the initial value will appear instead of NaN however if the thermostat is off and the page is loaded or reloaded the card still goes blank. I also redownloaded the card using and used the main version but it had no noticeable impact.

I recorded a video and converted it to gif so hopefully that helps. I tried to cut any dead time out of the video so I could show you as much as possible in the gif. The video is made with the code I originally posted with state: temperature. This is how the card functions the best but has the display problems. Again, changing the state: value is the variable that seems to effect the display and functionality the most. I'm pretty sure it's just the way my Honeywell Thermostat reports its state and how the card interprets it, but I'm not sure how to convey that over to how its impacting the code and the way the card is displayed.

[htmltiger]

Can you please send a screenshot of developer tools state of the entity so i can try and replicate the crash.

[almighty059]

I went through the normal steps I take when using the HVAC system and took a screenshot each time the state of something changed.

State 001: HVAC system is off.

• The thermostat entity state is off.
• The attribute temperature: state is null.
• The attribute hvac_action: state is 'off'.

State 002: I turn HVAC system on by switching the thermostat from 'off' to 'heat'. The system goes into standby as it begins it's start up process.

• The thermostat entity state changes to heat.
• The attribute temperature: state changes to 70.
• The attribute hvac_action: state changes to idle.

State 003: HVAC system finishes it's start up process and the system begins heating the house.

• The thermostat entity state remains as heat.
• The attribute temperature: state remains as 70.
• The attribute hvac_action: state changes to heating.

State 004: HVAC system goes back into standby when the thermostat senses that house is at the set temperature.

• The thermostat entity state remains as heat.
• The attribute temperature: state remains as 70.
• The attribute hvac_action: state changes to idle.

State 005: I turn HVAC system off.

• The thermostat entity state changes to off.
• The attribute temperature: state changes to null.
• The attribute hvac_action: state changes to 'off'.

[Paxxil]

I have same issue with Eve Thermo TRV. When turning it off temperature is null and card disappears.

[htmltiger]

please try 4.16

[Paxxil]

Thank you for quick fix! Now the cards stay visible. WHen TRV is OFF it shows "?" instead of temperature number, when TRV is unavailable it shows NaN and also when TRV is unavailable secondary info is messed up.

[htmltiger]

When turning it off temperature is null and card disappears.

WHen TRV is OFF it shows "?" instead of temperature number,

what do you expect to display when there is null?

I can fix the secondary info to display '?' when it displays climate.office_trv,... I can fix the NaN display to ? but cannot store the old value

[Paxxil]

Best would probably be something like this: (I created this with combination of templating, card-mod and css styles)

For anyone interested here is my code (I use Decluttering Card):

  trv_template:
    default:
      min: '5'
      max: '31'
    card:
      type: custom:numberbox-card
      entity: '[[entity_1]]'
      name: '[[name]]'
      border: false
      service: climate.set_temperature
      state: temperature
      param: temperature
      unit: °C
      min: '[[min]]'
      max: '[[max]]'
      step: 0.5
      secondary_info: >
        <div style="font-weight:bold;"><div style="display:inline-block;
        width:8px; fill:rgb(155,155,155); vertical-align:middle;
        line-height:15px;"><svg preserveAspectRatio="xMinYMin meet"
        focusable="false" role="img" aria-hidden="true" viewBox="5 0 24 24"
        height="15px"><g><path class="primary-path" d="M15 13V5A3 3 0 0 0 9
        5V13A5 5 0 1 0 15 13M12 4A1 1 0 0 1 13 5V8H11V5A1 1 0 0 1 12
        4Z"></path></g></svg></div>
        %[[entity_1]]:attributes:current_temperature:~1 <span
        style="margin-left:-3px;">°C</span> &nbsp;⁞&nbsp; <div
        style="width:15px; display:inline-block; fill:rgb(155,155,155);
        vertical-align:middle; line-height:15px;"><svg
        preserveAspectRatio="xMidYMid meet" focusable="false" role="img"
        aria-hidden="true" viewBox="0 0 24 24"><g><path class="primary-path"
        d="M22 13V21H20V19H16.58C15.81 20.76 14.05 22 12 22S8.19 20.76 7.42
        19H4V21H2V13H4V15H7.43C7.93 13.85 8.85 12.93 10
        12.42V11H8V9H16V11H14V12.42C15.15 12.93 16.07 13.85 16.57 15H20V13H22M17
        2H7C6.45 2 6 2.45 6 3S6.45 4 7 4H10V5H11V8H13V5H14V4H17C17.55 4 18 3.55
        18 3S17.55 2 17 2Z"></path></g></svg></div> %[[entity_2]]:state:~0 <span
        style="margin-left:-3px;">%</span> &nbsp;⁞&nbsp; <div style="width:10px;
        display:inline-block;  fill:rgb(155,155,155); vertical-align:middle;
        line-height:15px;"><svg preserveAspectRatio="xMidYMid meet"
        focusable="false" role="img" aria-hidden="true" viewBox="5 0 24 24"
        height="15px"><g><path class="primary-path"
        d="M16.67,4H15V2H9V4H7.33A1.33,1.33 0 0,0 6,5.33V20.67C6,21.4 6.6,22
        7.33,22H16.67A1.33,1.33 0 0,0 18,20.67V5.33C18,4.6 17.4,4
        16.67,4Z"></path></g></svg></div> %[[entity_3]]:state:~0 <span
        style="margin-left:-3px;">%</span></div> 
      card_mod:
        style: |
          state-badge {
            line-height: 40px !important;
            background-color: rgba(33, 150, 243,0.2) !important;
            color: rgba(33, 150, 243) !important;
            --mdc-icon-size: 21px;
            flex: 0 0 42px !important;
            width: 42px !important;
            height: 42px !important;
          }
          div.info {
            font-size: 15px;
            font-weight: bold;
            margin-left: 10px !important;
          }
          div.secondary {
            font-size: 13px;
          }          
          div.main {
            min-width: 120px;        
            background-color: rgba(225, 225, 225, 0.05) !important;
            border: medium !important;
            border-radius: 10px !important;
            --paper-font-subhead_-_font-size: 14px !important;
            --mdc-icon-size: 21px;
          }
          h3 {line-height:37px !important}

          {% if is_state('[[entity_1]]','unavailable') %} 
            ha-card state-badge {
              background-color: rgba(255, 87, 34, 0.2) !important;
              color: rgba(111, 111, 111, 1) !important;                 
            }      
            ha-card div.secondary, ha-card ha-icon {
              display: none;
            } 
            ha-card h3.cur-num {
              visibility: hidden;
            }
            ha-card h3.cur-num::after {
              content: 'Unavailable';
              visibility: visible;
              margin-left: -30px;            
            }   

          {% elif is_state('[[entity_1]]','off') %}
            ha-card state-badge {
              background-color: rgba(111, 111, 111, 0.2) !important;
              color: rgba(111, 111, 111, 1) !important;                 
            }
            {% if state_attr('[[entity_1]]','temperature') == none %}
              ha-card div.secondary, ha-card ha-icon {
                display:none;
              }          
              ha-card h3.cur-num {
                visibility:hidden;
              }      
              ha-card h3.cur-num::after {
                content: 'Off';
                visibility: visible;
                margin-left: -10px;            
              }      
            {% endif %}

          {% else %}
            {% if is_state_attr('[[entity_1]]','hvac_action','idle') %}
              ha-card state-badge {
                background-color: rgba(33, 150, 243, 0.2) !important;
                color: rgba(33, 150, 243, 1) !important;                 
              }
            {% else %}
              ha-card state-badge {
                background-color: rgba(255, 87, 34, 0.2) !important;
                color: rgba(255, 87, 34, 1) !important;                 
              }          
            {% endif %}
          {% endif %}

[htmltiger]

I am closing it now as this should fix 4.17 most issues within scope of this.