GithubHelp home page GithubHelp logo

maykar / custom-header Goto Github PK

View Code? Open in Web Editor NEW
254.0 11.0 110.0 4.24 MB

Custom Header adds enhancements and customization options to Home Assistant's Lovelace header.

Home Page: https://maykar.github.io/custom-header

License: MIT License

JavaScript 93.76% TypeScript 6.24%

custom-header's Introduction

GitHub release (latest by date) GitHub Release Date GitHub Releases

No Longer an Active Project

I have come to the difficult decision to stop work on Custom Header and have archived the project. Please, see the following post for more info:

https://community.home-assistant.io/t/custom-header/155399/1100

CUSTOM HEADER

Custom Header adds enhancements and customization options to Home Assistant's Lovelace header. Custom Header is the replacement and successor of Compact Custom Header.

⚠️ Important

  • Some config options can remove your ability to access UI elements. Each of these options is marked with a warning in the docs and in the UI editor. Be sure to read the important notes section of the docs or the warning at the top of the UI editor for instructions on how to restore the default header if needed.
  • Each release of Custom Header is designed for the latest versions of Home Assistant. If you are on lower versions of Home Assistant you need to use earlier versions of CH.

Features

  • Per user/device configs
  • Every config item can be templated with Jinja
  • Style and hide any element in the header
  • Dynamically style header elements based on entity states/attributes
  • Buttons can be hidden, made into custom or templated text, or be placed in the options menu
  • Compact mode, kiosk mode, footer mode, and split mode
  • Default/starting view
  • Advanced styling with CSS
  • And much more

Supporting Development

Demo

This project is translated with Lokalise

custom-header's People

Contributors

giacomocarrozzo avatar iantrich avatar ljmerza avatar ludeeus avatar maykar avatar noxhirsch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

custom-header's Issues

Swipe left and right

Since the old add on CCH was deprecated I’m now using this one and it’s great, the only thing I’m missing is the ability to swipe left and right between views. Can we get that added back please?

iOS app - default tab not highlighted

First, @maykar, Thanks for the new Custom Header!

HA 0.103.0, CH 1.0.2
If i reload the ios app, the following error is raised in the log:

2019-12-16 22:00:47 ERROR (MainThread) [frontend.js.latest.201912041] http://192.168.77.67:8123/community_plugin/custom-header/custom-header.js:576:41723 TypeError: undefined is not an object (evaluating 'e.button_text.menu')

The default tap is opened and i see a gap between the header and the first buttons.
Auswahl_233
also the Home (tab 0) icon ist active, but the default tab should be tab 13.
Auswahl_234
Sometimes the LL refresh message comes up and the gap goes away, but still doesn't show the default tab activated.
Auswahl_235

Exception for Mobile:

  exceptions:
    - conditions:
        user_agent: Mobile
      config:
        compact_mode: true
        options_hide: true
        chevrons: false
        default_tab: tpad_baustelle 
        background: var(--primary-background-color)
        active_tab_color: var(--primary-color)

Hidden Tab Redirect not working

Example :

    - conditions:
        user: test_user
      config:
        hide_tabs: '0,1,2'
        hide_config: true
        hide_help: true
        hide_unused: true
        hide_raw: true
        menu_hide: true
        voice_hide: true
        options_hide: true
        reverse_button_direction: true
        voice_dropdown: true
        menu_dropdown: true
        default_tab: '7'
        compact_mode: true
        disable_sidebar: true
        show_tabs: '7'
        locale: []

If the user goes to ...homeassistant.local/lovelace/0 our /lovelace/1 etc they can view the content. No redirection to the default tab 7.

button_text weirdness

Hi @maykar,

I just updated from CCH to CH and I'm re-working my config.

I have this:

button_text:
    options: '{{ hours12 }}:{{ minutesLZ }} {{ ampm }}'

And I’m somehow getting this in the header:
2019-12-16 at 10 29 AM

Even though the DOM looks like this:

2019-12-16 at 10 29 AM

Edit: it seems to have to do with that dir=“rtl” attribute.

Kiosk mode cuts off the top of the Picture Element Panel

I just moved from Compact Custom header to Custom header, and found kiosk mode broke.
I have my default view set to a picture element and in kiosk mode the top section of my picture element is cut off by about the distance of the normal header. I tried this on two different browsers.
Hass.io Version 192, HassOS 2.12 and Custom Header 1.0.3
The config is;

custom_header:
  clock_date: true
  compact_mode: true
  exceptions:
    - conditions:
        user: 'Danielle, Camille, Abi, Colin'
      config:
        clock_format: '12'
        hide_tabs: ' 4, 5,6'
        menu: show
        notifications: show
        swipe_amount: '15'
        swipe_animate: none
        voice: show
        locale: []
    - conditions:
        user: House
      config:
        clock_format: '12'
        default_tab: '0'
        hide_tabs: '4,5,6'
        kiosk_mode: true
        menu: show
        notifications: show
        swipe_amount: '15'
        swipe_animate: none
        voice: show
        locale: []
  button_text:
    options: '{{ time }}<br>{{ date }}'
  swipe: true
resources:
  - type: module
    url: /community_plugin/custom-header/custom-header.js

Icons and text on tabs

Hi, would it be possible to get icon and text on a tab? Now we have only a choice between icon or text.

Tanks :-)

Browser refresh takes you back to default tab

HASS: v0.103.2
CC: v1.1.0

As title says, when browser is refreshed you are taken back to default tab.
The actual page is refreshed, but then after it loads, you are then take to default tab.
Not sure if this is by design, but even if homesetter is used, or on Fully Kiosk browser where a different page is used as home screen for dashboard, it goes back to default tab.

Swipe Navigation

Would love it if you could bring back swiping between tabs again

Transparent issue

background: transparent is only working as a footer not as a header.

Viewport resize (padding, margin)

Using custom-header with fully kiosk browser and Google Chrome. Regardless of the background image or page content the page does not fit to screen. Same page with compact-custom-header and same config worked without any issue. It's like with hiding the header it does not decrease the viewports height (I don't know if I've explained correctly)

  • Home Assistant 0.103.0
  • Custom Header: 1.0.3
  • Fully Kiosk browser, Google Chrome Version 79.0.3945.79 (Official Build) (64-bit)

Custom Header config:

custom_header:
  compact_mode: true
  kiosk_mode: true
  disable_sidebar: false
  hide_header: true
  default_tab: 1
  hide_tabs: 
    - 0
    - 2
  hide_help: true
  hide_unused: true
  hide_refresh: true
  hide_config: true
  hide_raw: true
  menu_hide: true
  voice_hide: true
  options_hide: true

Another thing is that with the following config it does not hide the header.

custom_header:
  compact_mode: true
  kiosk_mode: true
  disable_sidebar: true
  hide_header: true

Changing the disable_sidebar: true to false it hides the header too.

Swipe navigation not included.

Swipe navigation is no longer packaged with Custom Header. Use the stand alone add-on Swipe Navigation. I'm working on a rewrite of that add-on as well as it and the swipe navigation in CCH was buggy at best.

CH always redirects to tab 0

The new Custom Header redirects always to tab 0 even if no default is set. In the editor I can see a 0 in default_tab but can't remove it (it always reappears).
This is my config:

custom_header:
  chevrons: false
  compact_mode: true
  editor_warnings: false
  hide_help: true
  menu_hide: true
  voice_hide: true
  hidden_tab_redirect: false
  hide_tabs: 'floorplan, feed'

Thank you for help!

EDIT:

  • I'm using HA 103.0, CA 1.0.1 & up2date Chrome on Win10
  • No relevant errors in Console & Log

Cannot read property 'indexOf' of nul

After upgrade to 1.0.7 got following error

http://192.168.1.204:8123/community_plugin/custom-header/custom-header.js:4256:48 Uncaught TypeError: Cannot read property 'indexOf' of nul

Browser console

Uncaught TypeError: Cannot read property 'indexOf' of null
    at selectTab (custom-header.js:4256)
    at styleHeader (custom-header.js:4741)
    at processAndContinue (custom-header.js:4768)
    at buildConfig (custom-header.js:4794)
    at custom-header.js:4827

With this error - cannot open "Raw config editor".

Home Assistant 0.103.0
Browser: Chrome - Version 77.0.3865.90 (Official Build) (64-bit)
Config: default config without any changes

header too big

If I hard refresh, the header loads fine but if I just refresh after that, the header is really long. Seems like A timing issue. A margin-top: 111px and padding: 8px is making the header big and icons out of line

image

version 1.0.7

custom_header:
  compact_mode: true
  hide_help: true
  hide_unused: true

default_tab & hide_tabs not working in exceptions

I have been using CCH with success both with mobile and desktop browsers. But with the latest CH plugin i am having issues hiding unwanted tabs and setting default tabs in my mobile browser. I am using full kiosk browser which worked perfectly with CCH. Now only partial CH controls are working like kiosk mode is working and other functioning in kiosk mode. Please check why default tabs and hide tabs are not working in mobile. It is working in desktop only.

Shadow on scroll

Noticed that with Custom Header enabled, the header drop shadow on scroll no longer works (see screen shots)

Without CH enabled:
Screen Shot 2019-12-22 at 3 54 53 PM

With CH enabled:
Screen Shot 2019-12-22 at 3 55 49 PM

Tabs not cover all header space

I'm on Chrome 79.0.3945.79
custom-header 1.0.6
homeassistant 0.103.0

This is how lovelace appears with custom-header

image

...and this is how lovelace appears without custom-header...

image

As you can see, on the right there is a lot of space unused using custom-header

image

This is my configuration

custom_header:
  exceptions:
    - conditions:
        user: anna
      config:
        default_tab: anna
        disable_sidebar: true
        hide_config: true
        hide_help: true
        hide_raw: true
        hide_unused: true
        show_tabs: 'anna,clima,finestre'
        voice_hide: true

Changing theme doesn't change colors

When changing my HA theme it doesn't directly change the custom header colors. Only after a page refresh.

Using the latest version of custom header and HA. And my theme color values for example:

ch-background: '#121314'
ch-active-tab-color: '#307aff'
ch-all-tabs-color: '#ffffff'

Templates not rendering

Hi,

I searched the docs but cannot find it. How do your create this GIF, provided in the docs? An HA card with switches to set functions of Custom Header live.

demo 1

I did created some input_booleans in HA, but there seems no way to set the actions for the booleans. Perhaps this is not the right approach or templates are not rendered correctly.

thanks

Tab icons only work one way

This is my config:

custom_header:
  tab_icons:
    Actieve lampen: >-
      {% if is_state("group.all_lights", "on") %} mdi:lightbulb-on {% else
      %}mdi:lightbulb-off-outline{% endif %}
  compact_mode: true

The goal is that when the last light switches off, the icon becomes an empty light bulb. When at least one of the lights in the group is on, the icon is a full lightbulb. This used to work well in CCH with this code:

cch:
  conditional_styles:
    template:
      - tab:
          Actieve lampen:
            - icon: >
                if (states["group.all_lights"].state == "on")
                "mdi:lightbulb-on"; else "mdi:lightbulb-off-outline";`

The problem is that on load my frontend loads the standard icon (not the one defined here) and it only changes once when I go from lights on -> lights.off then it becomes the correct icon and never changes back.
The if statement renders correctly in the development tools -> template test page on Hassio.

Any errors relevant to Custom Header found in the HA logs: none
Any relevant errors found in your browsers dev console (usually found by hitting F12): none
The version of Home Assistant and Custom Header you are using: 103.3
The browser type your are using: chrome on mac and android

without >- in template.....No way to get out of Kiosk mode

Have 4 modes in my setup:

input_select:
  mode:
    name: Mode selection
    icon: mdi:account-settings
    options:
     - Normal
     - Full house
     - Kiosk
     - Developer
#    initial: Normal

never used the Kiosk mode before, so all this input_select does is change the Theme state, to indicate the Kiosk mode is truly on.

Trying the feature on CH now with this:

kiosk_mode: >
  {{ is_state('input_select.mode','Kiosk') }}

enables the Kiosk mode just fine, really nice.

selecting one of the other modes after that, does make the input_select change state, and all other things belonging to that particular state.

It doesn't however stop the Kiosk mode! No way to get out of that, other than using the disable_ch suffix...

config:

#https://maykar.github.io/custom-header/#configuration/main
#header_text:

## all default
#disabled_mode: false
kiosk_mode: >
  {{ is_state('input_select.mode','Kiosk') }}

compact_mode: true

#footer_mode: true
#disable_sidebar: false
#hide_header: false
#hide_help: false
#hide_unused: false
#hide_refresh: false
hide_config: true
#hide_raw: false

# https://maykar.github.io/custom-header/#configuration/buttons
#menu_hide: false
#voice_hide: false
#options_hide: false
#menu_dropdown: false
#voice_dropdown: false
#reverse_button_direction: false
#button_icons:

button_text:
  options: >-
    {{ hours24 }}:{{ minutesLZ }} - {{state_attr('weather.home_darksky','temperature') }}°
#
#    {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} -  <ha-icon icon={{states('sensor.weather_icon')}}></ha-icon>
#    {{state_attr('weather.home_darksky','temperature') }}°

show_tabs: >
  {% if not is_state('input_select.mode','Developer') %}0 to 21, 26 to 28
  {% else %} 0 to 28
  {% endif %}

# https://maykar.github.io/custom-header/#configuration/exceptions
exceptions:
  - conditions:
      user: Gezin, redacted
    config:
      show_tabs: 0 to 3,6,15 to 18
      voice_hide: true
      options_hide: true
  - conditions:
      user_agent: iPhone
    config:
      menu_hide: true
#      voice_hide: false
      options_hide: hide
  - conditions:
      user_agent: iPad
    config:
      menu_hide: true
#      voice_hide: false
      options_hide: hide

# https://maykar.github.io/custom-header/#configuration/tabs
#chevrons: true
#indicator_top: false
#default_tab:
#reverse_tab_direction: false
#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: true

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'}}

tabs_color:
  phones_tablets: >-
    {{state_attr('sensor.family_home','icon_color')}}

CH 1.0.6 HA 103.0

just tested it with this template:

kiosk_mode: >-
  {{ states('input_select.mode') == 'Kiosk'}}

and that does work alright, as does this:

kiosk_mode: "{{ states('input_select.mode') =='Kiosk'}}"

and:

kiosk_mode: >-
  {{ is_state('input_select.mode','Kiosk') }}

will add 'format templates needs >-' to title

can close this, and maybe set a general issue for the template specifics? Its a bit of a guess right now, since as you can see in my config, not all templates (see tabs_color and show_tabs) need the >- for multiline

Per user/device not work

Hi,

I have a different user/password to access HA on my tablet.
When I change settings there (kiosk Mode) then everywhere the config is changed.

How I can I fix this? It must only work on the tablet.

In kiosk mode the webpage is pushed up

Hi, when I use kiosk mode, the web page is pushed up so 10% of page is not visible. I'm using Chrome.
This is what my code looks like:

custom_header:
  compact_mode: true
  footer_mode: false
  hide_help: true 
  background: "#434954" 
  voice_hide: true
  exceptions:
    - conditions:
        query_string: kiosk
      config:
        kiosk_mode: true

https://pastebin.com/Am1tQM9b

Edit:
From the log:
Tried to serve up '/config/www/community/custom-header/lit-element.js.map' but it does not exist

date and time

Hey,
great job! Can you please add date and time feature as CCH?
Thanks

exceptions config does not appear to work

hi :). Thank you for this wonderful bit of UI tweaking code!

I am attempting to get per-user layouts working... but can't seem to get it. Can you give me some pointers on where to look for clues?

Here's my config:

title: MyHA
resources:
  # HA has no support for per-user UI, so for now we use this wonderful component to make sure
  #   that we do get something that looks like a per-user UI
  # See: https://github.com/maykar/custom-header
  ##
  - url: /community_plugin/custom-header/custom-header.js
    type: module
    # A card that allows us to display big numbers; see: https://github.com/custom-cards/bignumber-card
  - url: /community_plugin/bignumber-card/bignumber-card.js
    type: js
    # A wonderful way to get related actions for an entity
    # See: https://github.com/custom-cards/button-entity-row
  - url: /community_plugin/button-entity-row/button-entity-row.js
    type: module

# See: https://maykar.github.io/custom-header/#configuration/main
custom_header:
  ###
  # DEFAULTS
  ###
  # Kiosk mode HIDES the header completely; i'd rather have it be small, but still on top.
  kiosk_mode: false
  compact_mode: true
  footer_mode: false
  # Hides the voice/assistant/chat button
  voice_hide: true
  # We create "exceptions" to the config for each user
  exceptions:
    - conditions:
        user: ME
      config:
        # When compact mode is ON, no header text, so use "footer mode" to test
        header_text: "hello ME "
        footer_mode: false
        options_hide: false

    - conditions:
        # There is a ?kds at the end of the URL...
        query_string: kds
        user: kds
        # TODO: ask the author which of these takes precedence; if user ME logs in but has ?kds at the end of the url, what happens?

      config:
        # We want the kds interface to be very limited and w/ very few ways to accidentally navigate away
        ##
        # Hides the options button ⚠️ ( the three dots on the topright)
        options_hide: true
        # Places menu button in the options drop-down
        menu_dropdown: true
        # Disables and hides the sidebar and menu button
        disable_sidebar: true
        # Hides the "Unused Entities" option in the options menu
        hide_unused: true
        # Hides the "Refresh" option in the options menu
        hide_refresh: true
        # Hides the "Configure UI" option in the options menu ⚠️
        hide_config: True
        # Hides the "Raw Config Editor" option in the options menu ⚠️
        hide_raw: true
        # Hides the "Help" option in the options menu
        hide_help: true

I am using version Installed: 1.0.8 of your. plugin via HACS.
I am on home-assistant 0.103.0 and i am using both Firefox on OSX and Chromium on Raspbian to test. the kds user is the user on the raspbian host.

On both hosts, i see the same UI layout :(.

Also, what is the "order" for deciding which exceptions get applied? See my # TODO: note above

Default page not functioning.

For my gardener I have set only one view visible (#9) , set that to the default page and enabled kisok mode. However when logging in using this user in a private browsing window view #0 is shown in kisok mode.

Screenshot_2019-12-16 Home Assistant

In kiosk mode menu not disappear menu

Screenshot_1
Hi,

I've this configuration for user "tablet":

custom_header:
  compact_mode: true
  exceptions:
    - conditions:
        user: Tablet
      config:
        default_tab: '10'
        disable_sidebar: true
        header_text: casa
        hide_config: true
        hide_raw: true
        hide_tabs: '0,1,2,3,4,5,6,7,8,9,11'
        options_hide: true
        hide_header: true
        chevrons: false
        kiosk_mode: true
  header_text: Casa
  hide_help: true
  hide_unused: true
  voice_hide: true

With option kiosk mode, the bar menu should disappear?

Cards drawn above page Kiosk mode when panel: true

If using kiosk: true and panel: true for tab, then the cards begin to draw above the page.
If hide_header: true is added, then kiosk mode works, sort of. The header is drawn at the bottom, although blank, so the page is longer than it shouild be (can notice on mobile via scrolling)
hide_header: true works on it's own as well in the same manner.

Kiosk Mode incl Tabs

Hi,

Would be nice to have Kiosk Mode include the tabs.
Then you can switch tabs but nothing else.

Cheers

view_css does not apply in kiosk mode

Hi,
it seems like view_css does not apply in kiosk mode:

custom_header:
  chevrons: false
  compact_mode: true
  editor_warnings: false
  hidden_tab_redirect: false
  hide_help: true
  hide_tabs: 'floorplan, feed'
  menu_hide: true
  voice_hide: true
  view_css: 'margin-top: -200px!important;'

In "normal mode" the style is applied. In kiosk mode it doesn't change anything.

HA 0.103.0, CH 1.0.3, Chrome up2date on Win 10
No errors in log & console

Error: "evaluating '_.voice.style'"

Hi,

great add-on !! love it!

I see some errors in log:

2019-12-16 13:21:23 ERROR (MainThread) [frontend.js.latest.201911196] https://192.168.100.24:8123/community_plugin/custom-header/custom-header.js:576:42389 TypeError: undefined is not an object (evaluating '_.voice.style')

already cleared cache etc...

content of page overflows bottom browser window

please see:

Schermafbeelding 2019-12-17 om 17 05 38

Schermafbeelding 2019-12-17 om 17 08 08

not using any setting for footer in the config:

hide_config: true
compact_mode: true
button_text:
  options: >-
    {{ hours24 }}:{{ minutesLZ }} - {{state_attr('weather.home_darksky','temperature') }}°

show_tabs: >
  {% if not is_state('input_select.mode','Developer') %}0 to 21, 26 to 28
  {% else %} 0 to 28
  {% endif %}

Hassio Rpi4, 103.0 CH version 1.0.4

Transparency not working for me on home/default view only

Using the latest version to date, 1.0.9. Tried the following:

  • background: transparent

  • header_css: 'background-color: rgba(0,0,0,0.3)'

  • header_css: 'background-color: transparent !important'

None of which worked for the default page - the other tabs/views work fine. The only thing that has worked for me is:

header_css: 'background: center / cover no-repeat url("/local/bg/hex.jpg") fixed'

which works like the original CCH transparent option worked; unfortunately when I use this, none of my button texts work and instead of showing the variable values, it shows the config text. (e.g. instead of the actual date and the state values, it displays "{{ date }} - {{ states.sensor.header_var.state }}". (Should note that I also tried reversing the single and double quotes in that line to see if it made a difference but it doesn't. It's as if there's something in that line that needs to be escaped otherwise the rendered result breaks button text.)

Additional info:

HA version - Hass.io 0.103.2 (YAML mode)
Browsers - Chrome and Firefox

CH config:

## CUSTOM HEADER CONFIG
custom_header:
  compact_mode: true
  background: transparent
  #header_css: 'background: center / cover no-repeat url("/local/bg/hex.jpg") fixed'
  #header_css: 'background-color: rgba(0,0,0,0.3)'
  #header_css: 'background-color: transparent !important'
  active_tab_color: cyan 
  notify_indicator_color: '#FFFF00'
  button_text:
    options: '{{ date }} - {{ states.sensor.header_var.state }}'
  exceptions:
    - conditions:
        media_query: "(max-width: 900px)"
      config:
        hide_tabs: 
          - 0
    - conditions:
        media_query: "(min-width: 900px)"
      config:
        hide_tabs:
          - 1

Not seeing any relevant errors in either HA logs or dev tools in Chrome.

Hide header option

Compared to the older CCH I would love to see to be able to hide the header by itself. Current functionality will only have kiosk_mode that can support this, however, for mobile I would still like to be able to swipe open the menu. This gives a nice "app-feel" touch to it.

active tab indicator doesn't follow

when going to the left panel developer tools, do some work and go back to overview, the home page is loaded. However the active tab indicator of CH is still on the tab one was before clicking developer tools.

Schermafbeelding 2019-12-18 om 11 28 35

this is on my Homepage, and should of course look like
Schermafbeelding 2019-12-18 om 11 31 17

I ve also tried to reload the page, but that makes the indicator disappear altogether..

Schermafbeelding 2019-12-18 om 11 34 02

HA 103.0 CH 1.0.6

CH config:

#https://maykar.github.io/custom-header/#configuration/main
#header_text:

## all default
#disabled_mode: false
kiosk_mode: >-
  {{ is_state('input_select.mode','Kiosk') }}

#"{{ states('input_select.mode') =='Kiosk'}}"

compact_mode: true

#footer_mode: true
#disable_sidebar: false
#hide_header: false
#hide_help: false
#hide_unused: false
#hide_refresh: false
hide_config: true
#hide_raw: false

# https://maykar.github.io/custom-header/#configuration/buttons
#menu_hide: false
#voice_hide: false
#options_hide: false
#menu_dropdown: false
#voice_dropdown: false
#reverse_button_direction: false
#button_icons:

button_text:
  options: >-
    {{ hours24 }}:{{ minutesLZ }} - {{state_attr('weather.home_darksky','temperature') }}°
#
#    {{ hours12 }}:{{ minutesLZ }} {{ AMPM }} -  <ha-icon icon={{states('sensor.weather_icon')}}></ha-icon>
#    {{state_attr('weather.home_darksky','temperature') }}°

show_tabs: >
  {% if not is_state('input_select.mode','Developer') %}0 to 21, 26 to 28
  {% else %} 0 to 28
  {% endif %}

# https://maykar.github.io/custom-header/#configuration/exceptions
exceptions:
  - conditions:
      user: Gezin, Hanna, Louise, Frederike, Marte, Wijke
    config:
      show_tabs: 0 to 3,6,15 to 18
      voice_hide: true
      options_hide: true
  - conditions:
      user_agent: iPhone
    config:
      menu_hide: true
#      voice_hide: false
      options_hide: hide
  - conditions:
      user_agent: iPad
    config:
      menu_hide: true
#      voice_hide: false
      options_hide: hide

# https://maykar.github.io/custom-header/#configuration/tabs
#chevrons: true
#indicator_top: false
#default_tab:
#reverse_tab_direction: false
#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: true

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'}}

tabs_color:
  phones_tablets: >-
    {{state_attr('sensor.family_home','icon_color')}}

lit-element.js.map does not exist

Home Assistant 0.103.0
Custom Header: 1.0.3
Fully Kiosk browser, Google Chrome Version 79.0.3945.79 (Official Build) (64-bit)
Custom Header config:

custom_header:
  kiosk_mode: false
  disable_sidebar: false
  hide_header: false
  hide_help: false
  hide_unused: false
  hide_refresh: false
  hide_config: false
  hide_raw: false
  menu_hide: false
  voice_hide: true
  options_hide: false
  default_tab: 0

In Home Assistant developer-tools/logs I get this error:

"Tried to serve up '/config/www/community/custom-header/lit-element.js.map' but it does not exist"

Cannot upgrade / install

May well be a HACS issue, but all my other HACS-installed things are updating fine - trying to update this one gives me the following two errors in the log....

2019-12-23 11:34:41 ERROR (MainThread) [homeassistant.components.websocket_api.http.connection.140415940246992] Unable to serialize to JSON: Object of type AIOGitHubException is not JSON serializable
{'id': 34, 'type': 'event', 'event': {'event_type': 'hacs/error', 'data': {'message': AIOGitHubException('GitHub returned 404 for https://api.github.com/repos/maykar/custom-header/contents/dist')}, 'origin': 'LOCAL', 'time_fired': datetime.datetime(2019, 12, 23, 11, 34, 41, 637859, tzinfo=<UTC>), 'context': {'id': 'f2bedc745d1f4232a71bd3730ccddb48', 'parent_id': None, 'user_id': None}}}
2019-12-23 11:34:58 ERROR (MainThread) [hacs.repository.plugin.maykar.custom-header] Download was not complete.

😢

Sidebar is resized with compact_mode: false

When compact_mode is set to false the side bar is still resized as if it were set to true. It is really apparent when on other panels:

image

Example config:

custom_header:
  hide_tabs: '5'
  hide_unused: true
  hide_config: true
  compact_mode: false
  hide_help: true

When voice not defined in configuration.yaml, custom-header.js

I normally hide the voice button but did not update that setting when I ported over from cch to custom-header so I got the following error:

2019-12-16 08:13:52 ERROR (MainThread) [frontend.js.latest.201912041] https://hass.local:8123/community_plugin/custom-header/custom-header.js:576:42389 TypeError: undefined is not an object (evaluating '_.voice.style')

Time to right

In previous version of costom header i use this configuration:
cch:
menu: hide
options: clock
To switch time at position of options button and time was on right side as i want.

Now i'm using this config:
custom_header:
header_text: '{{ time }}'
compact_mode: true
hide_help: true
voice_hide: true

But time is invisible.

If i use:
custom_header:
header_text: '{{ time }}'
hide_help: true
voice_hide: true
With this config the time is on the left side.

The documentation don't explain how to set time to right side.
Can you help me to config time correctly?

Thank you.

Header overlap on iOS 12

On my iPad mini 2 the Header is overlapping the views and the first tap is not visible

IMG_0003

My config

custom_header:
  compact_mode: true
  hide_config: true
  chevrons: false

Hass.io Version 0.103.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.