unexpected behavior for compact, footer and split mode

[Mariusthvdb]

in variuos combinations, please see extensive post here

config:

#https://maykar.github.io/custom-header/#configuration/main
#test_template: >-
#  {%- if is_state('input_select.mode','Developer') -%}
#  {%- if 'Chrome' in userAgent -%}0 to 30
#  {%- else -%}0 to 29
#  {%- endif -%}
#  {%- else -%}0 to 3,5 to 22,27,29
#  {%- endif -%}

header_text: >-
  {% if is_state('input_boolean.ch_use_header_text_template','on') %}
  {% if is_state('input_boolean.ch_vertical_marquee_up','on') %}
  {% set keyframe = "@keyframes show {
  100% {margin-top:-144px;}
  83% {margin-top:-96px;}
  67% {margin-top:-96px;}
  50% {margin-top:-48px;}
  33% {margin-top:-48px;}
  17% {margin-top:0px;}
  0% {margin-top:0px;}}" %}
  {% else %}
  {% set keyframe = "@keyframes show {
  0% {margin-top:-144px;}
  17% {margin-top:-96px;}
  33% {margin-top:-96px;}
  50% {margin-top:-48px;}
  67% {margin-top:-48px;}
  83% {margin-top:0px;}
  100% {margin-top:0px;}}" %}
  {% endif %}
  <style>
  #flipper{color:#999;}
  #flip {height:24px;overflow:hidden;}
  #flip > div > div {color:var(--primary-text-color);height:24px;margin-bottom:24px;display:inline-block;text-overflow: clip;white-space: nowrap;}
  #flip div:first-child {animation: show 10s linear infinite;}
  {{keyframe}}
  #flipper p {position:fixed;color:#999; }
  </style>
  <div style='float: left'>Ha Rpi4: {{viewTitle}}: ;</div>
  <div id=flip><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  Daily - {{states('sensor.dark_sky_daily_summary')}}</div></div><div><div>
  Hourly - {{states('sensor.dark_sky_hourly_summary')}}</div></div><div><div>
  Summary - {{states('sensor.dark_sky_summary')}}</div></div><div><div>
  {% else %}Ha Rpi4: {{viewTitle}}
  {% endif %}

## all default
disabled_mode: >-
  {{is_state('input_boolean.ch_disabled_mode','on')}}
kiosk_mode: >-
  {{ is_state('input_select.mode','Kiosk') }}
compact_mode: >-
  {{is_state('input_boolean.ch_compact_mode','on')}}
shadow: >-
  {{is_state('input_boolean.ch_shadow','on')}}
footer_mode: >-
  {{is_state('input_boolean.ch_footermode_mode','on')}}
split_mode: >-
  {{is_state('input_boolean.ch_split_mode','on')}}
disable_sidebar: >-
  {{is_state('input_boolean.ch_disable_sidebar','on')}}
hide_header: >-
  {{is_state('input_boolean.ch_hide_header','on')}}
hide_help: >-
  {{is_state('input_boolean.ch_hide_help','on')}}
hide_unused: >-
  {{is_state('input_boolean.ch_hide_unused','on')}}
hide_refresh: >-
  {{is_state('input_boolean.ch_hide_refresh','on')}}
hide_config: >-
  {{is_state('input_boolean.ch_hide_config','on')}}
#hide_raw: false
default_tab_on_refresh: false

# https://maykar.github.io/custom-header/#configuration/buttons
menu_hide: >
  {{is_state('input_boolean.ch_menu_hide','on')}}
voice_hide: >-
  {{is_state('input_boolean.ch_voice_hide','on')}}
options_hide: >-
  {{is_state('input_boolean.ch_options_hide','on')}}
menu_dropdown: >-
  {{is_state('input_boolean.ch_menu_dropdown','on')}}
voice_dropdown: >-
  {{is_state('input_boolean.ch_voice_dropdown','on')}}
reverse_button_direction: >-
  {{is_state('input_boolean.ch_reverse_button_direction','on')}}
#button_icons:

button_text:
  options: >-
    {% if is_state('input_boolean.ch_use_options_text_template','on')%}{{ time }} - <ha-icon icon='{{states('sensor.weather_icon')}}' style='vertical-align: middle';></ha-icon> - {{states('sensor.temp_current') }}°
    {% endif %}
#options_css: 'color:var(--primary-text-color);'

show_tabs: >-
  {% if is_state('input_select.mode','Developer') %}
  {%- if 'Chrome' in userAgent -%}0 to 30
  {%- else -%}0 to 29
  {%- endif -%}
  {%- else -%}0 to 3,5 to 22,27,29
  {%- endif -%}
#  {% if is_state('input_select.mode','Developer') %}0 to 29{% else %}0 to 3,5 to 22,27,29{% endif %}
#hide_tabs: >-
#  {% if 'Chrome' not in userAgent %}30{%endif%}

# https://maykar.github.io/custom-header/#configuration/exceptions
exceptions:
#  - conditions:
#      user_agent: Chrome
###      template: "{{'Chrome' in userAgent}}"
##      template: "{{'Chrome' not in userAgent}}"
#    config:
##      hide_tabs: 30
#      show_tabs: >-
#        {% if is_state('input_select.mode','Developer') %}0 to 30{% else %}0 to 3,5 to 22,27,29,30{% endif %}
  - conditions:
      user: Gezin, name, name, name, name
    config:
      show_tabs: 0 to 3,7,16 to 19
      voice_hide: true
      options_hide: true
  - conditions:
      user_agent: iPhone
    config:
      footer_mode: true
      indicator_top: false
      header_text: >-
        {% if is_state('input_boolean.ch_use_header_text_template','on') %}
        {% if is_state('input_select.mode','Developer') %}
        <marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on')%} 'right' {% else%}'left' {% endif %} >
        <span>
        User: {{user}}, User_id: {{userID}}, Admin: {{isAdmin}},
        Owner: {{isOwner}}, Device_id: {{deviceID}}, View: {{viewTitle}},
        Path: {{viewPath}}, Index: {{viewIndex}}, Url: {{url}},
        User agent: {{userAgent}}
        </span>
        </marquee>
        {% else %}
        {% set inside=states('sensor.temperatuur_living')%}
        {% set outside=states('sensor.temp_current')%}
        {% set temp_color='var(--primary-text-color)'%}
        {% set symbol='°C' %}
        <div style='display: flex;display: -webkit-flex;'>
        <div>Ha&nbspRpi4:&nbsp;</div>
        <marquee direction={% if is_state('input_boolean.ch_horizontal_marquee_right','on')%} 'right' {% else%}'left' {% endif%} >
        <span style='color: {{temp_color}}'>
        Inside temperature: {{inside}}{{symbol}},
        Outside temperature: {{outside}}{{symbol}},
        </span>
        <span style='color: orange;'>
        System alerts: {{states('sensor.marquee_alerts')}}
        </span>
        <span style='color: {{temp_color}}'>
        Summary - {{states('sensor.dark_sky_summary')}},
        Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
        Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
        </span>
        </marquee>
        {% endif %}
        {% else %}Ha Rpi4: {{viewTitle}}
        {% endif %}

#        {% set alerts = namespace(active=[], color='var(--google-red-500)') %}
#        {% if states('sensor.weatheralerts') | float != 0 %}
#          {% for alert in state_attr('sensor.weatheralerts', 'alerts') %}
#          {% set alerts.active = alerts.active + [alert['title']] %}
#          {% endfor %}
#        {% else %} {% set alerts.active = alerts.active + ['No active alerts'] %}
#        {% endif %}
#        {% set inside=states('sensor.temperatuur_living')%}
#        {% set outside=states('sensor.temp_current')%}
#        {% set temp_color='var(--primary-text-color)'%}
#        {% set symbol='°C' %}
#        <div style='display: flex;display: -webkit-flex;'>
#        <div>Ha&nbspRpi4:&nbsp;</div>
#        <marquee>
#        <span style='color: {{ temp_color }}'>
#        Inside temperature: {{ inside }}{{ symbol }},
#        Outside temperature: {{ outside }}{{ symbol }},
#        </span>
#        <span style='color: {{ alerts.color }};'>
#        Alerts: {{ alerts.active | join(' - ')}},
#        </span>
#        <span style='color: orange;'>
#        System alerts: {{states('sensor.marquee_alerts')}},
#        </span>
#        <span style='color: {{ temp_color }}'>
#        Summary - {{states('sensor.dark_sky_summary')}},
#        Daily -  {{states('sensor.dark_sky_daily_summary').split('.')[0]}},
#        Hourly - {{states('sensor.dark_sky_hourly_summary').split('.')[0]}}.
#        </span>
#        </marquee>

      menu_hide: true
#      voice_hide: false
      options_hide: true
  - conditions:
      user_agent: iPad
    config:
      menu_hide: true
#      voice_hide: false
      options_hide: true

# https://maykar.github.io/custom-header/#configuration/tabs
chevrons: >-
  {{is_state('input_boolean.ch_chevrons','on')}}
indicator_top: >-
  {{is_state('input_boolean.ch_indicator_top','on')}}

#default_tab:
reverse_tab_direction: >-
  {{is_state('input_boolean.ch_reverse_tab_direction','on')}}

#hide_tabs: An array or comma separated string of tabs to hide, more info below
#show_tabs: An array or comma separated string of tabs to hide, more info below
hidden_tab_redirect: >-
  {{is_state('input_boolean.ch_hidden_tab_redirect','on')}}

tab_icons:
  alarm: >-
    {{states('sensor.alarm_panel_icon')}}
  phones_tablets: >-
    {{states('sensor.presence_icon')}}
  weer_klimaat: >-
    {{states('sensor.weather_icon')}}
  alarmclock: >-
    {{'mdi:alarm-off' if is_state('sensor.next_alarm','Not set') else 'mdi:alarm'}}

#active_tab_color: black
active_tab_css: 'background-color: rgba(0, 0, 0, 0.3);'
tab_indicator_color: black
tabs_color:
  alarm: >-
    {{states('sensor.alarm_panel_icon_color')}}
  phones_tablets: >-
    {{state_attr('sensor.family_home','icon_color')}}
  alarmclock: >-
    {{'green' if is_state('sensor.next_alarm','Not set') else 'red'}}
  home_climate: >-
    {{states('sensor.temperature_color_name')}}

which is unchanged from using 1.3.0 versions thanks for having a look

bottom line now, using split mode now gives me the tab/icons in the footer, and the header in the header. which is what I need. Still the other functionality seems to be somewhat bugged.

[github-actions[bot]]

Please, be sure to read the issues section of the docs and provide the required information. Issues that don't provide the necessary information may not get a reply and may be closed. If this is a feature request you can ignore this message.

[maykar]

Stripping your config to the relevant code to make it easier to troubleshoot:

compact_mode: >-
  {{is_state('input_boolean.ch_compact_mode','on')}}
footer_mode: >-
  {{is_state('input_boolean.ch_footermode_mode','on')}}
split_mode: >-
  {{is_state('input_boolean.ch_split_mode','on')}}
exceptions:
  - conditions:
      user_agent: iPhone
    config:
      footer_mode: true

[Mariusthvdb]

you beat me, was just going to post this:

kiosk_mode: >-
  {{ is_state('input_select.mode','Kiosk') }}
compact_mode: >-
  {{is_state('input_boolean.ch_compact_mode','on')}}
shadow: >-
  {{is_state('input_boolean.ch_shadow','on')}}
footer_mode: >-
  {{is_state('input_boolean.ch_footermode_mode','on')}}
split_mode: >-
  {{is_state('input_boolean.ch_split_mode','on')}}

as my full CH config. Which has the exact same results. Compact mode only works on its own. Footer mode does nothing

split mode works alright. Kiosk mode works fine too, but it is triggered from another input as you can see, so it isn't listed in the screenshots.

[maykar]

Been trying to recreate your issues, but everything is working as intended for me. I should add an exception so that split_mode ignores compact_mode since they don't work together, but other than that I am so far stumped.

[Mariusthvdb]

hi, testing 3.1.7 I still find footer mode does nothing...

split mode works as before, splitting the header into a header and a footer, with the tabs/icons in the footer.

confirm we can now use split mode and compact mode, and it shows split mode (before it dint show the footer)

so, issue left: footer mode does nothing....

proof of te new version loaded:

[maykar]

Just to try and track this down, try the following configs with no templates and let me know if they work as expected.

Simple footer mode:

custom_header:
  footer_mode: true

Compact footer:

custom_header:
  compact_mode: true
  footer_mode: true

Split mode:

custom_header:
  split_mode: true

Split mode flipped:

custom_header:
  split_mode: true
  footer_mode: true

[Mariusthvdb]

sure, Ive tested these, and their template variants. Where I write no, nothing happens at all. yes means works as expected... mobile = iOS app desktop = Safari Mac

custom_header:
  footer_mode: true

desktop: yes mobile: no

footer_mode: >-
  {{is_state('input_boolean.ch_footer_mode','on')}}

desktop: no mobile: no

custom_header:
  compact_mode: true
  footer_mode: true

desktop: yes mobile: no

compact_mode: >-
  {{is_state('input_boolean.ch_compact_mode','on')}}
footer_mode: >-
  {{is_state('input_boolean.ch_footer_mode','on')}}

desktop: only compact mode showing compact header, no footer mobile: no

custom_header:
  split_mode: true

desktop: yes mobile: no

split_mode: >-
  {{is_state('input_boolean.ch_split_mode','on')}}

desktop: yes mobile: no

custom_header:
  split_mode: true
  footer_mode: true

desktop: yes mobile: no

split_mode: >-
  {{is_state('input_boolean.ch_split_mode','on')}}
footer_mode: >-
  {{is_state('input_boolean.ch_footer_mode','on')}}

desktop: only split mode makes the tabs/icons shown in the footer, and header show title etc, footer-mode does nothing mobile: no

edit !!!

feeling quite embarassed here.... really sorry..

I had an edit mistake in the footer boolean

footer_mode: >-
  {{is_state('input_boolean.ch_footermode_mode','on')}}

wont work.... now that I have edited these to

footer_mode: >-
  {{is_state('input_boolean.ch_footer_mode','on')}}

they kick in.

will test further now, with my regular, more templated setup ... again, my huge apologies!!

quick further update:

on iOS mobile app, the CH settings don't seem to do anything at all. While a shortcut favorite to the mobile desktop does work as expected, and the exceptions using

  - conditions:
      user_agent: iPhone
    config:
      footer_mode: true
      indicator_top: false

show the desired outcome

[maykar]

Sounds like everything is working well with the modes then. I will look into the settings issue (feel free to create a new issue if you'd like), but am closing this one for now.