Compact Custom Header

Sorry if this is a stupid question, is default tab configurable for the iOS app version of HA?
I’m using the config below

cch:
  options: clock
  exceptions:
    - conditions:
        user_agent: Mobile
        media_query: "(max-width: 600px)"
      config:
        default_tab: 4

I’ve tried user agent mobile, iphone ect with no luck. iPhone works on safari on the iphone (it goes to the correct tab) but not on the app, so I’m assuming it has a different user agent.

Hi sorry for being a new user for this component, but how do you remove a exception created through UI. As soon as i created it the paperbin icon disappeared. I can only seem to add another exception but not remove the one i created.

to give you some more info, I´m not running in yaml mode. Currently on the latest release 0.96.4 and running compact header version 1.3.1

Any way that the date and time can be separate things that can replace the icons? I am looking to have the date on the bar in the upper left and the time at the bar on the upper right.


As you can see I have the time on the right but would like replace the hamburger (circled in red) with just the date similar to this:

This is an awesome addition. Thanks for all of the hard work.

1 Like

Sorry for the delay folks. Still on vacation for a bit, but am back behind a screen that’s not a mobile device. I’ll be addressing some of the bug reports and feature requests in the next few days, but wanted to touch on a few posts before I crash for the night.

@pjv & @mattvolp I’ll work on getting things working on legacy devices again soon.

@crankin I’m not sure the user_agent would be different in the iOS app (can anyone that uses storage mode and the iOS app check at the bottom of CCH settings to see?), but why not remove user_agent and just use the media_query? Could also be that default_tab isn’t working in the iOS app, not sure why that would be (I don’t own any iOS devices), but if one of the iOS users could chime in…

@Supersonical You can edit the config from the raw config editor after selecting “configure ui” in lovelace. You can find the exception and it’s config there to delete. I will fix up the editor so that the delete icon doesn’t get hidden when using large user_agents, but you should always be able to get away with only using a small portion of it.

1 Like

Hello,
I have a minor issue with CCH, the “hide_help” and “hide_config” options do not seem to work as expected in my configuration. These entries are still visible in the option menu (available when clicking on the clock, which replaces the option button)

Here is my config (latest version of the addon, latest version of Hassio (0.96.5))

cch:
  default_tab: 0
  hide_help: true
  hide_config: true
  options: clock
  clock_format: 24
  swipe: true
  swipe_animate: swipe
  swipe_wrap: false

Here is what happen when I click on the clock (replacing the option button)
Sans%20titre

Is it an expected result due to the replacement of the button by the clock ?

Default tab works fine in iOS. I think the iOS app does provide a different user-agent. Running into something similar with the button card.

I don’t use storage mode to be able to check the settings page you mentioned. I grabbed it from my NGINX logs.

[29/Jul/2019:12:50:32 -0500] "GET /community_plugin/button-card/button-card.js HTTP/2.0" 304 0 "https:///lovelace/main" "Mozilla/5.0 (iPhone; CPU iPhone OS 13_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148" "-"

1 Like

No, hiding option menu items should work just fine even when it is a clock. Do you have any errors in logs or chrome dev tools?

No, there is no error in the log nor in the chrome dev tool.

What does your resources section look like?

Here it is :

resources:
  - url: /community_plugin/compact-custom-header/compact-custom-header.js
    type: module
  - url: /community_plugin/mini-media-player/mini-media-player.js
    type: module
  - url: /community_plugin/mini-graph-card/mini-graph-card.js
    type: module
  - url: /community_plugin/vertical-stack-in-card/vertical-stack-in-card.js
    type: js

I have changed to HACS this weekend, but I had exactly the same issue with the module installed manually.

Hmm. I was thinking that it was a cache issue and an older version without those features was cached on your system. Usually happens when manually installed and the version number isn’t included at the end of the resource url. But since you’re using HACS that shouldn’t be an issue.

I have cleared the cache anyway and used a second browser, but no luck.
I even modified the config to remove the clock but the issue persists. Could it be another breaking change of Hass.io 0.96 ?

Nah, I’m on 0.96.5 and I can hide all the items fine. HA hasn’t really changed anything in the options menu for a while. I’ve used your exact config and everything works as expected. Not quite sure what’s going on with your issue yet, but I’ll keep looking into it.

hi,

trying a second tab to have a dynamic icon gives me issues… I am trying to configure my alarm-panel tab as follows:

conditional_styles:
  - template:
      tab:
        7:
          - icon: >
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'disarmed') return 'mdi:shield-check';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'armed_away') return 'mdi:shield-lock';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'armed_custom_bypass') return 'mdi:security';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'armed_home') return 'mdi:shield-home';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'armed_night') return 'mdi:shield-home';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'pending') return 'mdi:shield-outline';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'triggered') return 'mdi:bell-alert';
              return 'mdi:shield-check';
        14:
          - 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';

when I click refresh, the correct icon is displayed for a fraction of a second after which it resorts to the icon of tab 14…

04

what could be going on here? I have both views set with an icon, without an icon in the view, the custom header icon won’t change

icon 7 (the alarm) uses

title: Alarm
icon: mdi:shield-check
path: alarm
cards:
  - type: custom:compact-custom-header

icon 14 uses:

title: Phones & Tablets
path: phones_tablets
icon: mdi:account-group
cards:
  - type: custom:compact-custom-header

changing the template to:

          - icon: >
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'disarmed') 'mdi:shield-check';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'armed_away') 'mdi:shield-lock';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'armed_custom_bypass') 'mdi:security';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'armed_home') 'mdi:shield-home';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'armed_night') 'mdi:shield-home';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'pending') 'mdi:shield-outline';
              if (entities['alarm_control_panel.ha_main_alarm'].state == 'triggered') 'mdi:bell-alert';
              return 'mdi:shield-check';

doesnt make a difference, nor does:

  - template:
      tab:
        7:
          - icon: >
              if (entity['alarm_control_panel.ha_main_alarm'].state == 'disarmed') 'mdi:shield-check';
              else if (entity['alarm_control_panel.ha_main_alarm'].state == 'armed_away') 'mdi:shield-lock';
              else if (entity['alarm_control_panel.ha_main_alarm'].state == 'armed_custom_bypass') 'mdi:security';
              else if (entity['alarm_control_panel.ha_main_alarm'].state == 'armed_home') 'mdi:shield-home';
              else if (entity['alarm_control_panel.ha_main_alarm'].state == 'armed_night') 'mdi:shield-home';
              else if (entity['alarm_control_panel.ha_main_alarm'].state == 'pending') 'mdi:shield-outline';
              else if (entity['alarm_control_panel.ha_main_alarm'].state == 'triggered') 'mdi:bell-alert';
              return 'mdi:shield-check';

out of ideas how to change the template, which in traditional js customize version does its job in regular HA…

homeassistant:
  customize:
    group.home_alarm: #menu tab
      templates:
        icon: >
          if (entities['alarm_control_panel.ha_main_alarm'].state === 'disarmed') return 'mdi:shield-check';
          if (entities['alarm_control_panel.ha_main_alarm'].state === 'armed_away') return 'mdi:shield-lock';
          if (entities['alarm_control_panel.ha_main_alarm'].state === 'armed_custom_bypass') return 'mdi:security';
          if (entities['alarm_control_panel.ha_main_alarm'].state === 'armed_home') return 'mdi:shield-home';
          if (entities['alarm_control_panel.ha_main_alarm'].state === 'armed_night') return 'mdi:shield-home';
          if (entities['alarm_control_panel.ha_main_alarm'].state === 'pending') return 'mdi:shield-outline';
          if (entities['alarm_control_panel.ha_main_alarm'].state === 'triggered') return 'mdi:bell-alert';
          return 'mdi:shield-check';

separate post.please allow…

since my efforts above wont work, I decided to updated to the latest CCH version. But now it isnt loaded at all, and I see this in the inspector:

SyntaxError: Importing binding name 'hass' is not found.

my HA system isnt yet on 96, so I probably need to downgrade CCH. But where can I find version 1.10 on the Github please?

You can load older versions if you are using HACS… click on the release list and you will see a dropdown (in HACS) and you can revert.

o really? that would be a reason to reinstate HACS…cool. didnt know that yet. thanks!

but, as things stand now, I dont use HACS, and would need a link to the version on the Github directly…

So on the github page there is a releases link/tab and you can scroll down and see all the releases

must be going silly here, but I cant see it…

update

duh, found it! completely missed out on that one before.

thanks David, learn something new each day…

1 Like

releases