Compact Custom Header

Share your Projects! Dashboards & Frontend
188

I seem to be having an issue with Lovelace/1 appearing even though I have designed a custom view for the intended mobile device. Does my configuration look correct? The below config appears on every view in my ui-lovelace.yaml file except the very last one (which is omitted from the configuration anyway).

      - type: custom:compact-custom-header
        notification: false
        voice: false
        options: true
        menu: true
        user_agent: iPhone
        user_agent_views:
          - 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21   # Default view.
          - 2,3,4,5,6,7,8,9,10
189

There is no view 0 for user_agent_views.

Looking back on it, I should have started tab numbering with 0 as lovelace does that in the URL, but at least for now numbering starts at one. So, give this a shot:

      - type: custom:compact-custom-header
        notification: false
        voice: false
        options: true
        menu: true
        user_agent: iPhone
        user_agent_views:
          - 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22   # Default view.
          - 3,4,5,6,7,8,9,10,11
190

That seems to have done the trick. Strange that the numbers are so far off.

191

Yeah, I agree. I’ll probably add a breaking change to fix it unless there are any objections. When I did it I was thinking of ease of use, but forgot that the default URLs start with tab 0.

192

Hi, I just have a question. Im trying to use user_agent: but it doesn’t seem to work. Does my config look ok?

theme: midnight
views:
  - id: 0  # Automatically created id
    title: Home
    theme: midnight
    cards:
    - type: vertical-stack
      cards:
      - type: custom:layout-card
        cards:
      - type: custom:compact-custom-header
        header: true
        menu: true
        notification: false
        voice: false
        options: false
        user_agent: Wendy,Courtney,Corey,Darlene
        user_agent_views:
          - 1,2,3,4,5,6,7,8  # Default view.
          - 1,2,3    # Wendy's View
          - 1,4       # Courtneys view.
          - 1,3,5    # Corey's View. 
          - 7

I did place this in every view.

Thanks for any help!

193

Hi

I have just started using this and it works great on my tablets, so thank you.

I do have one issue though, this message keeps appearing in my log:
http://hassio.local:8123/local/custom-lovelace/compact-custom-header/compact-custom-header.lib.js?v0.2.7:185:50 Uncaught ReferenceError: hide is not defined

This is the config I am using just in case:

  - type: custom:compact-custom-header
    notification: false
    options: false
    menu: true
    header: true
    tabs: true

Thanks in advance

194

That all looks correct, as long as the usernames are right. Any errors? Does the header work at all?

195

Reinstall the card and make sure you’re copying the raw files from github. Be sure to add something like 01 to the end of the resources portion. so if its

- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.2.7

change to:

- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.2.701

So that the card will update, but the version number wont interfere with newer versions.

1 Like
196

Yes, it works very good! Thanks for the work you put in!

No errors, I just can’t get custom views.

user_agent can also be the user names that I setup in the UI correct?

197

Yes you should be able to use usernames. What version of HA are you on?

198

0.84.6 - hassio on a rpi3

199

That should be fine as well. What’s the current behavior, does each user’s view just show the default (first) options?

200

Works perfect on 0.85. Thanks!

201

yes, just the default view. Other then that its perfect!

Thanks again, for this card. I agree with others this should be the default lovelace UI!

1 Like
202

Interesting, not sure why usernames aren’t working for ya. Will do some testing when I can.

203

Every time I’ve had problems with cards, my indentation was to blame. Here’s a sample of a user specific view from my lovelace config that works. Maybe this will help?

  - title: Kitchen  #Lovelace 3
    icon: mdi:dishwasher
    id: kitchen
    cards:
      - type: custom:compact-custom-header
        notification: false
        voice: false
        options: true
        menu: true
        user_agent: iPhone
        user_agent_views:
          - 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21   # Default view.
          - 3,4,5,7,8,9,10,11,12,13,12,13
      - type: vertical-stack
        cards:
          - type: "custom:card-modder" #Kitchen Header
            style:
              --paper-card-background-color: rgba(41, 128, 185, 1)
            card:
              type: "custom:button-card"
              color: auto
              color_type: label-card
              name: Kitchen
          - type: horizontal-stack
            cards:
              - type: "custom:card-modder"
                style:
                  border-radius: 10px
                card:
                  type: "custom:button-card"
                  entity: light.kitchen_cabinets
                  icon: mdi:lightbulb
                  name: Cabinets
                  show_state: true
1 Like
204

Is it possbile to turn views on and off? One view when at home another when at work for example. I e switch between default and specific for user.

205

Not currently if it’s the same device, if it’s different devices I’d just use user agent over username. I’ll have to think about the best way to implement something like this.

1 Like
206

Awesome addition to my lovelace collection. Thank you for making space for our buttons :smiley:

I have a background on my views and since the header is now gone, my footer is gray (gets the color from the theme, I guess). That means that my bg is no longer fullscreen

3

207

Background_image option in readme

1 Like