junkfix / numberbox-card

Replace input_number sliders with plus and minus buttons
110 stars 9 forks source link

Intial State Not Working - Card Disappears #65

Closed almighty059 closed 11 months ago

almighty059 commented 2 years ago

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 commented 2 years ago

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

almighty059 commented 2 years ago

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 commented 2 years ago

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

almighty059 commented 2 years ago

@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 commented 2 years ago

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

almighty059 commented 2 years ago

@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.

ezgif-3-179652cbda

htmltiger commented 2 years ago

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

almighty059 commented 2 years ago

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.

Screenshot 2022-10-12 180945

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.

Screenshot 2022-10-12 181055

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

Screenshot 2022-10-12 185349

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

Screenshot 2022-10-12 191044

State 005: I turn HVAC system off.

Screenshot 2022-10-12 192304

Paxxil commented 11 months ago

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

htmltiger commented 11 months ago

please try 4.16

Paxxil commented 11 months ago

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.

image
htmltiger commented 11 months ago

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 commented 11 months ago

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

image

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 commented 11 months ago

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