Compact Custom Header & Custom User/Device Views


#449

Yeah, throw one in there just to remind me. Thanks!


#450

Will do :+1:


#451

someone can help me integrate the custom header on this card, I have tried a thousand ways and I do not get it, thanks

  - title: Floor plan
    panel: true
    icon: mdi:floor-plan
    cards:
      - type: picture-elements
        image: /local/floor-plan/plano.png
        elements:
          - type: state-badge
            entity: sensor.temperatura_da_casa
            style:
              top: 30%
              left: 8%
              font-size: 12px
          - type: state-label
            entity: sensor.o_tempo_temperature
            prefix: "Temperatura exterior "
            tap_action:
              action: navigate
              navigation_path: /lovelace/2
            style:
              top: 98%
              left: 12%
              font-size: 15px
          - type: state-icon
            entity: switch.interruptor_1
            title: Luz estanteria
            tap_action:
              action: toggle
            style:
              top: 7%
              left: 38%
              --iron-icon-height: 52px
              --iron-icon-width: 52px

#452
  - title: Floor plan
    panel: true
    icon: mdi:floor-plan
    cards:
      - type: vertical-stack
        cards:
        - type: picture-elements
          image: /local/floor-plan/plano.png
          elements:
            - type: state-badge
              entity: sensor.temperatura_da_casa
              style:
                top: 30%
                left: 8%
                font-size: 12px
            - type: state-label
              entity: sensor.o_tempo_temperature
              prefix: "Temperatura exterior "
              tap_action:
                action: navigate
                navigation_path: /lovelace/2
              style:
                top: 98%
                left: 12%
                font-size: 15px
            - type: state-icon
              entity: switch.interruptor_1
              title: Luz estanteria
              tap_action:
                action: toggle
              style:
                top: 7%
                left: 38%
                --iron-icon-height: 52px
                --iron-icon-width: 52px
        - type: 'custom:compact-custom-header'

#453

it works!

many thanks


#454

Really loving this card. It’s great for smaller devices like my iPhone to get some more screen space back.

As I’ve only just started using this, I’ve noticed that everytime I refresh lovelace I get the message System service_log/write called show up on the bottom left of the screen. Looking at dev-info to view the logs show this:

2019-03-04 11:00:36 ERROR (MainThread) [frontend.js.latest.201902200] https://my_url/lovelace/home:0:0 Uncaught

Loading up DevTools in Google Chrome shows this:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at https://my_url/customcards/github/maykar/compact-custom-header-editor.js?v=1.0.1b1:232:16

Is this an issue with Compact Custom Header or with the frontend as per the error in my logs?


#455

most likely caching…


#456

I’ve tried on multiple browsers. It’s the same thing. It’s not a caching issue. Even used browsers I never use.


#457

I still call caching… I have seen these issues in the past. Removing cookies and deleting all website data fixes them for me… I don’t see any issue with this card.


#458

Just used firefox. Cleared it all out to make sure. I don’t normally use it, but thought I’d try something else. No cache, cookies, etc are saved. Still getting an error. Although the logs are different when using Firefox. It shows the following, which seems to be the same error that Chrome was giving.

2019-03-04 11:49:52 ERROR (MainThread) [frontend.js.latest.201902200] https://my_url/customcards/github/maykar/compact-custom-header-editor.js?v=1.0.1b1:232:0 NotSupportedError: Operation is not supported

This is in the console for Firefox.

NotSupportedError: Operation is not supported compact-custom-header-editor.js:232
  <anonymous> https://my_url/customcards/github/maykar/compact-custom-header-editor.js?v=1.0.1b1:232
  InnerModuleEvaluation self-hosted:4362
  self-hosted:4351
  evaluation self-hosted:4315

Here is line 232 from compact-custom-header-editor.js.


#459

Ok how about chrome? There are a few issues with firefox till the new version in March. (issues with custom-cards)


#460

What version of HA are you running, do you have javascript_version: latest under frontend: in your configuration.yaml, can you share your config for the card including resources?


#461

Chrome is having an issue with the same line.

Running 0.88.2, yes I have javascript_version: laterst under frontend:

My current config for the card on my first view is as follows:

  - type: custom:compact-custom-header
    main_config: true
    background_image: true
    voice: hide
    exceptions:
      - conditions:
          user_agent: iPhone
        config:
          menu: overflow
          notifications: overflow

and I have this at the resources: on my ui-lovelace.yaml file

  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
    type: module
  - url: /customcards/github/maykar/compact-custom-header.js?track=true
    type: module

#462

I haven’t used the new version of custom_updater myself (slacking I know), but I think your problem is that you’re importing the card twice. Remove this one:

  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
    type: module

#463

That was it!!! WOW!! :flushed:

I thought it was an odd way to use custom updater with your card, but it’s written there in your instructions.


#464

Those are instructions for “Manual installation” or " Installation and tracking with custom_updater", not both


#465

Ah, ok. I miss understood somehow.

Which is the better one to use? I now realise that one is loaded externally, and the other is kept locally.


#466

Manual installation is, well, manual. You need to update and install manually.

Custom_Updater is a component with a card that helps automate the upgrade process. You need to install it and it’s wiki can be found here:


#467

All good. Your approach to working with custom_updater is different to the other stack of card I use. I’ll stick with the manual way for now.

But thanks for your work on this card. It’s awesome and make use on smaller devices much better. Keep up the good work. :slight_smile:


#468

Like I said, I have yet to use the new version of custom_updater, but the instructions for it in my readme were written by the creator of custom_updater.