Compact Custom Header

Wow, thanks for this great card!!!

Is there any chance to add an option for hide all tabs (full screen option)?

1 Like

At the moment you can hide the header completely with “header: false”, but I do plan to add config to hide just the tabs (only element that’s missing that option at the moment) and am working on a mode where the header is hidden with a small tab to expand. So, essentially, “watch this space”. :slight_smile:

1 Like

In the compact header is it possible to have “Titles” instead of icons for the various screens in the dashboard, for example Sensors 1, Sensors 2, etc.

Yup. That’s just part of lovelace, though. Compact-Custom-Header doesn’t change that.

Just use “title: home” instead of “icon: mdi:home” in your view.

Updates

  • Added disable option. Useful to use default header on a certain user agent.
  • Can now hide/show all tabs (views).

Check out the readme on github for usage. More soon.

@matisaul @freakshock

WOW, that was fast!!! Thanks!! :grinning:

Hi @mayker,

I’ve installed but I get an error:

ERROR (MainThread) [frontend.js.latest.201811211] http://internal-ip:8123/local/custom_ui/compact-custom-header/compact-custom-header.js?=0.0.6:13:51 Uncaught TypeError: Cannot read property ‘split’ of undefined

any hint?

Just pushed a quick update to fix the issue. Thanks @revin!

Hey this doesn’t seem to work too well with the new storage lovelace. If you go into Configure UI it doesn’t like the compact header. I’ve included pics of what it looks like.

It also is adding a card for the compact header where if there aren’t many cards on a view, they look off centered. You can see it in the pictures as well.

Pictures: https://imgur.com/a/bLwmqsm

And just for reference, here’s my code for this view:

  - title: Basement
    icon: mdi:arrow-down-bold-box
    cards:
      - type: picture-elements
        image: /local/room_pic/Guest_off.jpg
        elements:
              - etc
      - type: vertical-stack
        cards:
          - type: picture-elements
            image: /local/room_pic/Basement_off.jpg
            elements:
              - etc
          - type: custom:mini-media-player
            entity: media_player.basement_dot
      - type: custom:compact-custom-header
        clock: options
        clock_format: 12
        clock_am_pm: true
1 Like

Not the first issue I’ve heard about this card and 0.84. I’m sure I’ve got plenty of work to do to make it compatible. I unfortunately am not on 0.84 yet myself, so I can’t test quite yet. I’ll probably be able to check it out this weekend, but bear with me. Free time is a bit limited and the holidays won’t help.

1 Like

Also, a possible fix for the layout issue. Throw this card inside that vertical stack. Otherwise it looks like its working okay for you in 0.84 (aside from overlap in edit mode), so that’s not looking too bad.

  - title: Basement
    icon: mdi:arrow-down-bold-box
    cards:
      - type: picture-elements
        image: /local/room_pic/Guest_off.jpg
        elements:
              - etc
      - type: vertical-stack
        cards:
          - type: picture-elements
            image: /local/room_pic/Basement_off.jpg
            elements:
              - etc
          - type: custom:mini-media-player
            entity: media_player.basement_dot
          - type: custom:compact-custom-header
            clock: options
            clock_format: 12
            clock_am_pm: true

Yea, that’s what I’ve been doing! Annoying little work around, but it works.

It’s also just a little interesting as in you can’t really use the config editor if you want to add custom components, so I don’t think I’ll be using it much anyway. But I’m sure there’ll be something in the future where it’ll work! So I guess as long as you get it ready for that, then you’re gold.

Yeah, I think if you use a fair bit of custom cards, etc. then yaml mode is the way to go for now in 0.84, until there is another solution, but again, I haven’t tried it out yet.

So this is mine… added the card on the last page and it’s adding an extra column.

  - cards:
      - cards:
          - entities:
              - sensor.busmonitor1
              - sensor.busmonitor2
              - sensor.trainmonitor1
              - sensor.trainmonitor2
            show_header_toggle: false
            title: Transport
            type: entities
          - entities:
              - sensor.caltex_woolworths_waitara_pdl
              - sensor.caltex_woolworths_turramurra_pdl
              - sensor.caltex_st_ives_pdl
              - sensor.caltex_st_ives_north_pdl
              - sensor.caltex_woolworths_glenrose_pdl
              - sensor.caltex_belrose_pdl
            show_header_toggle: false
            title: NSW Fuel Watch - Sydney
            type: entities
        id: 2f0d1d772ff94c83bafc2668be7564bf
        type: vertical-stack
      - entities:
          - sensor.caltex_kariong_pdl
          - sensor.caltex_woolworths_pdl
          - sensor.caltex_gosford_west_pdl
          - sensor.caltex_gosford_west_pdl_2
          - sensor.caltex_gosford_west_pdl_3
          - sensor.caltex_woolworths_erina_pdl
          - sensor.caltex_wyoming_pdl
          - sensor.caltex_woolworths_tuggerah_pdl
          - sensor.caltex_woolworths_tuggerah_north_pdl
          - sensor.caltex_wyong_pdl
          - sensor.caltex_wyong_pdl_2
          - sensor.coles_express_kariong_dl
        id: 88a7e41ae27d491fb01263c1ffec1f9b
        show_header_toggle: false
        title: NSW Fuel Watch - Central Coast
        type: entities
      - type: 'custom:compact-custom-header'
    icon: 'mdi:train'
    id: 6
    title: 'Buses, Trains & Fuel'

This is from the ‘raw’ editor in 0.84.1

I tried it on the first card as well but I then ended up with 4 colums on that card so moved it to last and was 2 columns, now 3 with third one empty/blank.

Any way to remove extra column?

see above, put the card in the vertical stack

1 Like

OK! Thought I did that… the new UI editor makes it a bit hard to tell sometimes.

I do get this:
image
and it’s impossible to exit the editor.

Also added this:

# Custom Component Updater
custom_updater:
  show_installable: false
  hide_sensor: false
  track:
    - components
    - cards
    - python_scripts
  component_urls:
    - https://raw.githubusercontent.com/pnbruckner/homeassistant-config/master/custom_components.json
  card_urls:
    - https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json
    - https://raw.githubusercontent.com/maykar/custom-lovelace/master/tracker.json

to config yaml but it’s not showing in the updater?

image

also tried this:

  card_urls:
    - https://raw.githubusercontent.com/kalkih/mini-media-player/master/tracker.json
      https://raw.githubusercontent.com/maykar/custom-lovelace/master/tracker.json

Both of your issues with the card are exactly what I was just going over with kfinderman in the handful of posts from the last hour. I have updated the readme to include the fix for layout issues (vertical-stack) and posted an issue on the github.

To summarize: I am very aware of the issues with 0.84, I’m not on 0.84 and may not be for a little while, until then I am unable to fix issues pertaining to 0.84.

Custom updater no longer supports cards on 0.84 unless in yaml mode. If you are using yaml mode and still having issues I’m not sure what it might be. Nothing on my side has changed and is still functional as far as I can tell. The url from the readme and from your first posted custom-updater code is correct.

https://raw.githubusercontent.com/maykar/custom-lovelace/master/tracker.json

Ah I see. Maybe if I add this to the YAML file it will pick it up. All my other cards are showing except this one. I updated one yesterday as well. Maybe I need to check it actually updated and the .storage agrees with the yaml…

Thanks.