2021.12: New configuration menu, the button entity, and gorgeous area cards!

[Migaddo]

Yes have the same issue, i used the flash optin in an automation, and not working anymore.

[petro]

2021.12: New configuration menu, the button entity, and gorgeous area cards!

Signify (Philips) eliminated effects from its new API. That’s why they no longer exist in the new Philips Hue integration (which employs the new API). FWIW, there’s an effect that makes a light “breathe” (what you see when the Hue app identifies a light for configuration) and the developer intends to use that for a long flash (there’s nothing natively available to support a short flash).

[Migaddo]

Thats great news Petro, thank you looking forward for the implementation😀

[tom_l]

It’s a straight name swap see this PR:

Fix for 2021.12.b0 warnings

[DBM (Han)]

Thanks for the update; some nice features to test. But I have a problem as well

I use 2 Hue touch buttons that are build into wall switches. These are the last ones to use my Hue bridge as everything else is migrated to ZHA.

The Hue touch buttons are part of an automation that tests if a specific event comes in via the Hue integration.

alias: Hue Touch Keuken Scenes
description: Process scene commands coming from Hue Touch
id: f00eb98b-a165-4d80-9182-30e2fcdbf26f
trigger:
- platform: event
  event_type: hue_event
  event_data:
    unique_id: 00:00:00:00:00:45:0e:ff-f2

condition: []

action:
- choose:
  # switch left top
  - conditions: 
    - condition: template
      value_template: "{{trigger.event.data.event == 16}}"     
    sequence:
    - service: scene.turn_on
      data_template:
        entity_id: scene.woonkamer_cosy
    - service: logbook.log
      data:
        name: Hue Touch
        message: Button linksboven 

after updating to Home Assistant 2021.12.1 events do not come in any more. Have restarted the system, removed and readded the integration. Not sure what else I can do?

Edit: added correct HA version

[DBM (Han)]

We’ll it showed that I had to

• change the unique_id to device_id

• change “trigger.event.data.event == 16” to “trigger.event.data.subtype == 2”

So probably something changed to the unique_id (no longer unique) and the trigger events changed label and number.
Hue_event output:

Event 18 fired 23:00:
{
    "event_type": "hue_event",
    "data": {
        "id": "hue_tap_switch_2_button",
        "device_id": "25ee5fa89a0b3476e093c87eb6f12741",
        "unique_id": "479d9056-f300-474e-b618-d7f15f82b81c",
        "type": "initial_press",
        "subtype": 2
    },
    "origin": "LOCAL",
    "time_fired": "2021-12-13T22:00:28.562153+00:00",
    "context": {
        "id": "69919057de08fe1fa0eedad2a9c4bd5a",
        "parent_id": null,
        "user_id": null
    }
}

The subtype numbers now are 1, 2, 3 and 4. They used the be the event numbers 16, 17, 34 and 18. Probably missed all of that in the breaking changes.

[flash3d]

Hue transition times are still not working on my end with 12.1. Everything still behaving like 12.0.

Any others experiencing this?

Using:
Call service
Light.turn_off

[Marcin_Bauer]

I have a problem where I updated Hass core to 2021.12, but now I have two pending updates that when I click “Show” there is a black screen and I can’t do anything. My Hass Supervisor is still at 6.6…

Can anyone help? I tried to restart my RPI/Hassio but this still happens.

[petro]

clear your browser cache

[thorschtn (Thorsten)]

Edit: SOLVED!
It was caused by an own copy of the rest integration which wasn’t compatible with 2021.12 anymore. Removing my custom component solved the problem.

When checking my config after the update I’m getting the following error:

Platform error notify.rest - cannot import name 'HTTP_BAD_REQUEST' from 'homeassistant.const' (/usr/src/homeassistant/homeassistant/const.py)

What could I do to solve this?

Additionally in the logfile I’m getting

Platform error: notify
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/config.py", line 887, in async_process_component_config
    platform = p_integration.get_platform(domain)
  File "/usr/src/homeassistant/homeassistant/loader.py", line 530, in get_platform
    cache[full_name] = self._import_platform(platform_name)
  File "/usr/src/homeassistant/homeassistant/loader.py", line 535, in _import_platform
    return importlib.import_module(f"{self.pkg_path}.{platform_name}")
  File "/usr/local/lib/python3.9/importlib/__init__.py", line 127, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
  File "<frozen importlib._bootstrap>", line 1030, in _gcd_import
  File "<frozen importlib._bootstrap>", line 1007, in _find_and_load
  File "<frozen importlib._bootstrap>", line 986, in _find_and_load_unlocked
  File "<frozen importlib._bootstrap>", line 680, in _load_unlocked
  File "<frozen importlib._bootstrap_external>", line 850, in exec_module
  File "<frozen importlib._bootstrap>", line 228, in _call_with_frames_removed
  File "/config/custom_components/rest/notify.py", line 15, in <module>
    from homeassistant.const import (
ImportError: cannot import name 'HTTP_BAD_REQUEST' from 'homeassistant.const' (/usr/src/homeassistant/homeassistant/const.py)

[thompy93 (Thomas)]

I can’t seem to find any docu on what type of devices and entitites that will show up on the area card. Did some testing now with my living room. It seems to only find lights, even though reciever and other media devices are assigned to that area.

Am I missing something here?

[Prodigyplace]

@petro

can you show me what you mean “in the integration”?

Integrations

[g3org]

Hello.

I’m using 2 separate themes, one is set in my profile, another one as a theme for every lovelace tab. One of the differences is card-background-color variable, tabs use theme with more transparent color, this way cards blend better to the gradient page background, while popups with more info keep more opaque color from main theme to maintain text readability.

After this update theme set for tabs doesn’t respect card-background-color variable anymore, instead it uses the value from main theme. This behavior isn’t consistent though, as some cards added from HACS (e.g. mini-graph-card) still use the right value, which results in different backgrounds for different cards.

Here’s a screenshot from 2021.11:

…and from 2021.12:

---

Expand main theme code

synthwave-mod:
  # text
  primary-text-color: '#eee'
  secondary-text-color: '#eeeeeeca'
  text-primary-color: '#e4ddd4'
  disabled-text-color: '#acacac'

  # main interface colors
  primary-color: '#f650b9'
  primary-background-color: '#3a3c55'
  dark-primary-color: '#f650b9'
  light-primary-color: '#323149'
  accent-color: '#f650b9'
  divider-color: '#49549539'
  paper-dialog-button-color: '#fff'
  switch-unchecked-button-color: '#fff'
  # iron-icon-fill-color: '#fff'
  yellow: '#ffcc00'
  green: '#72f1b8cc'
  
  ###
    
  # background and sidebar
  card-background-color: '#3f486de6'
  app-header-background-color: 'var(--primary-background-color)'
  paper-card-background-color: 'none'
  secondary-background-color: 'none' # behind the cards on state
  ha-card-border-radius: '8px'
  
  # sidebar menu
  sidebar-text-color: 'var(--secondary-text-color)'
  # sidebar-background-color: 'var(--paper-listbox-background-color)' # backward compatible with existing themes
  sidebar-icon-color: 'var(--secondary-text-color)'
  sidebar-selected-text-color: 'var(--primary-text-color)'
  sidebar-selected-icon-color: 'var(--primary-text-color)'
  
  # mwc - for some reason it's buttons
  mdc-theme-primary: 'var(--dark-primary-color)'
  mdc-theme-secondary: 'var(--dark-primary-color)'
  
  # shadows
  ha-card-box-shadow: '0'

  # icons
  paper-item-icon-color: 'var(--secondary-text-color)'  # Off
  paper-item-icon-active-color: 'var(--accent-color)' # On

  # switches
  toggle-button-color: 'var(--primary-color)'
  # --toggle-button-unchecked-color: 'var(--accent-color)'
  paper-toggle-button-checked-button-color: 'var(--primary-text-color)' # Knob On
  paper-toggle-button-checked-bar-color: 'var(--dark-primary-color)' # Background On
  switch-checked-color: 'var(--dark-primary-color)' # Background On
  paper-toggle-button-unchecked-button-color: 'var(--primary-text-color)' # Knob Off
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)' # Background Off

  # Sliders
  slider-color: 'var(--primary-color)'
  slider-secondary-color: 'var(--light-primary-color)'
  slider-bar-color: 'var(--disabled-text-color)'
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--dark-primary-color)'
  # paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
  switch-unchecked-track-color: 'var(--primary-text-color)'

  # radio buttons
  paper-radio-button-checked-color: 'var(--paper-toggle-button-checked-button-color)'
  paper-radio-button-unchecked-color: 'var(--paper-toggle-button-unchecked-button-color)'

  # other
  state-icon-color: 'var(--green)'
  table-row-background-color: 'var(--card-background-color)'
  table-row-alternative-background-color: 'var(--card-background-color)'
  
  ###

  # UI
  paper-card-header-color: 'var(--text-primary-color)' # Title in settings

  # Left Menu
  paper-listbox-background-color: 'var(--light-primary-color)' # Background
  sidebar-background-color: 'var(--light-primary-color)'

  # bar-card compatibility
  # https://github.com/custom-cards/bar-card
  custom-bar-card-color: 'var(--accent-color)'

  # fix dropdown background
  material-background-color: 'var(--light-primary-color)'

  # Scrollbar
  scrollbar-thumb-color: 'var(--divider-color)'

  # simple-thermostat buttons
  # https://github.com/nervetattoo/simple-thermostat
  st-mode-background: 'var(--primary-background-color)'
  st-mode-active-background: 'var(--dark-primary-color)'

     ### SYNTAX MOD ###
     
  # NORD 
  codemirror-keyword: "#81A1C1"
  codemirror-operator: "#81A1C1"
  codemirror-variable: "#d8dee9"
  codemirror-variable-2: "#d8dee9"
  codemirror-variable-3: "#d8dee9"
  codemirror-builtin: "#81A1C1"
  codemirror-atom: "#b48ead"
  codemirror-number: "#b48ead"
  codemirror-def: "#8FBCBB"
  codemirror-string: "#A3BE8C"
  codemirror-string-2: "#A3BE8C"
  codemirror-comment: "#bc9262"
  codemirror-tag: "#bf616a"
  codemirror-meta: "#81A1C1"
  codemirror-attribute: "#8FBCBB"
  codemirror-property: "#8FBCBB"
  codemirror-qualifier: "#d8dee9"
  codemirror-type: "#d8dee9"

Expand tabs theme code

synthwave-mod-lovelace:
  # text
  primary-text-color: '#eee'
  secondary-text-color: '#eeeeeeca'
  text-primary-color: '#e4ddd4'
  disabled-text-color: '#acacac'

  # main interface colors
  primary-color: '#f650b9'
  primary-background-color: 'linear-gradient(3deg, #363553, #6f617e, #689ac1)'
  dark-primary-color: '#f650b9'
  light-primary-color: '#323149'
  accent-color: '#f650b9'
  divider-color: '#49549539'
  paper-dialog-button-color: '#fff'
  switch-unchecked-button-color: '#fff'
  # iron-icon-fill-color: '#fff'
  yellow: '#ffcc00'
  green: '#72f1b8cc'
  
  ###
    
  # background and sidebar
  card-background-color: '#3f486d77'
  app-header-background-color: 'var(--primary-background-color)'
  paper-card-background-color: 'none'
  secondary-background-color: 'none' # behind the cards on state
  ha-card-border-radius: '8px'
  
  # sidebar menu
  sidebar-text-color: 'var(--secondary-text-color)'
  # sidebar-background-color: 'var(--paper-listbox-background-color)' # backward compatible with existing themes
  sidebar-icon-color: 'var(--secondary-text-color)'
  sidebar-selected-text-color: 'var(--primary-text-color)'
  sidebar-selected-icon-color: 'var(--primary-text-color)'
  
  # mwc - for some reason it's buttons
  mdc-theme-primary: 'var(--dark-primary-color)'
  mdc-theme-secondary: 'var(--dark-primary-color)'
  
  # shadows
  ha-card-box-shadow: '0'

  # icons
  paper-item-icon-color: 'var(--secondary-text-color)'  # Off
  paper-item-icon-active-color: 'var(--accent-color)' # On

  # switches
  toggle-button-color: 'var(--primary-color)'
  # --toggle-button-unchecked-color: 'var(--accent-color)'
  paper-toggle-button-checked-button-color: 'var(--primary-text-color)' # Knob On
  paper-toggle-button-checked-bar-color: 'var(--dark-primary-color)' # Background On
  switch-checked-color: 'var(--dark-primary-color)' # Background On
  paper-toggle-button-unchecked-button-color: 'var(--primary-text-color)' # Knob Off
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)' # Background Off

  # Sliders
  slider-color: 'var(--primary-color)'
  slider-secondary-color: 'var(--light-primary-color)'
  slider-bar-color: 'var(--disabled-text-color)'
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--dark-primary-color)'
  # paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
  switch-unchecked-track-color: 'var(--primary-text-color)'

  # radio buttons
  paper-radio-button-checked-color: 'var(--paper-toggle-button-checked-button-color)'
  paper-radio-button-unchecked-color: 'var(--paper-toggle-button-unchecked-button-color)'

  # other
  state-icon-color: 'var(--green)'
  table-row-background-color: 'var(--card-background-color)'
  table-row-alternative-background-color: 'var(--card-background-color)'
  
  ###

  # UI
  paper-card-header-color: 'var(--text-primary-color)' # Title in settings

  # Left Menu
  paper-listbox-background-color: 'var(--light-primary-color)' # Background
  sidebar-background-color: 'var(--light-primary-color)'

  # bar-card compatibility
  # https://github.com/custom-cards/bar-card
  custom-bar-card-color: 'var(--accent-color)'

  # fix dropdown background
  material-background-color: 'var(--light-primary-color)'

  # Scrollbar
  scrollbar-thumb-color: 'var(--divider-color)'

  # simple-thermostat buttons
  # https://github.com/nervetattoo/simple-thermostat
  st-mode-background: 'var(--primary-background-color)'
  st-mode-active-background: 'var(--dark-primary-color)'

[ohipe]

same here. did you solve?

[woodmj74 (Mike Wood)]

I have to say I’m going to buck the trend now. Having used the new configuration UI for three days I found myself forgetting it had changed. Just like when MS moved from Windows 10 to 11 or other such examples.

It takes time but I honestly believe it was done for the good reasons - there are things I’ll be feeding back on sure and hopefully they go towards improving the next incremental change. Just felt it worth saying as some comments very very negative and must crush those who work on it.

[XLR-24]

I have the same problem with my Xiaomi Philips Zhirui downlights. As far as I can see on Github (https://github.com/rytilahti/python-miio/pulls) they are working on it.

[lolfonfire]

Exact same issue with the lumi.gateway.v3
Only the illuminance is working

[sparkydave (🇦🇺 Dave)]

Well done to everyone involved with this release. The upgrade went smoothly for me other than having to reinstall the WebRTC Cmaera integration (simple fix).

I like the new UI. Sure it will take a little while to navigate as quickly as I did with in the old version but that isn’t a bad thing, all change takes getting used to. It seems there are far too many people on here that can’t handle change!

[Devha]

Is anyone else having trouble with the Evil Genius Labs integration? I’m trying to add my Fibonacci 256, and when I enter in its IP address, I get a “Failed to connect” error. I both my Fibonacci and my HA Blue are on an IoT VLAN, and the HA Blue is able to ping my Fibonacci, so I’m not sure why it’s not able to connect.

[tom_l]

@sparkydave

Sure it will take a little while to navigate as quickly as I did with in the old version

Dont forget the Quick Bar. If you want fast that is the way. Press c and a couple of related letters and all commands and navigation options are right there.

I think the duplicate server controls are due to my panel redirects.