Setting LCARS as front-end theme messes up the sidebar

[Xiondewah]

When I run the automation to set the them, once I refresh the browser the sidebar only shows the very top part - I can't access any of the additional buttons/links.

It does work properly until I refresh the browser and clearing my cache doesn't solve the problem.

[th3jesta]

Can you please provide a screenshot of what you are seeing? Thanks.

[Xiondewah]

[image0.jpeg] Jonathan

On 4 Jan 2023, at 15:06, Jonathan Drake @.***> wrote:



<385CDF35-1B69-416D-89E8-4D1BDB22226D.jpeg>

[th3jesta]

Sorry Jonathan, that didn't work:

[Xiondewah]

you’ll also notice that there are no gaps between the sidebar button - hopefully this one works 😁

[Xiondewah]

Sorry you can’t see the buttons of course!

[th3jesta]

Yeah, that ain't right. Looks like an incompatibility. What other front-end mods do you have installed?

[Xiondewah]

None as far as I know - this was the first one I added.

[Xiondewah]

What sort of thing might affectnit\/

[th3jesta]

Did you call the reload themes service?

[th3jesta]

What sort of thing might affectnit/

Anything that modifies the sidebar or header bar could potentially break things. Another user bulk-disabled a bunch of custom cards he wasn't using anymore, and that fixed his issues with the sidebar and header. I would say to make sure you have followed the readme closely. It looks like you may have added the theme property to your cards' YAML which is not necessary.

Also, nice idea on creating buttons to set specific themes.

[Xiondewah]

I've had a look - I do use layout-card and custom-button card - could these impact it do you think? I've noticed I can't get the standard weather card to show with the middle-left LCARS as you have in the examples.

Whilst writing, what layout do you use for the entire screen - is it a single column or multiple? I think it would be helpful if you could add a bit to show how you've built up on of the screens as it will save an awful lot of fiddling about trying bits out :-)

Definitely want to get this to work as I've been wanting LCARS for a very long time!

J

[Xiondewah]

I'm really struggling to make any progress on resolving this. I only have a few HACS front-end integrations and 1 other theme installed, but I don't know what else to try. Incidentally I have tried the reload themes service but it doesn't change anything. If I move to another dashboard the theme kicks in other than the gaps between buttons on the sidebar, but if I refresh the browser, the sidebar goes again and I have to reset to the standard theme.

[Xiondewah]

[Xiondewah]

I just removed the layout-card integration but that's only made things worse as the custom-gap card seems to have gone with it now.

[th3jesta]

I do like what you've got so far! But we've gotta get that sidebar and header working for you! Can you verify that the card-mod.js file is in the location you specified in your configuration.yaml? For example:

frontend:
  javascript_version: latest
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js

...check that card-mod.js is there. In case you don't know, the local folder is the www folder in the root of your HA installation directory.

[th3jesta]

It may be helpful if you can provide the full list of front-end mods you've installed from HACS, and if you have anything from the addon-store that modify anything in the UI.

Also, are you on the latest version? Have you modified LCARS.yaml at all?

[th3jesta]

Here's the full YAML for one of my dashboards:

views:
  - title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: '# Entryway'
            card_mod:
              class: header
          - show_current: true
            show_forecast: false
            type: weather-forecast
            entity: weather.home
            name: Outside
            card_mod:
              class: middle
          - type: horizontal-stack
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: cover.garage_door
                icon: mdi:garage-variant
                show_state: true
                icon_height: 30px
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: light.stairs
                icon: mdi:stairs
                icon_height: 30px
                card_mod:
                  class: button-lozenge
          - type: custom:mail-and-packages-card
            name: Mail Summary
            updated: sensor.mail_updated
            details: true
            image: false
            packages_delivered: sensor.mail_packages_delivered
            packages_in_transit: sensor.mail_packages_in_transit
            fedex_packages: sensor.mail_fedex_packages
            ups_packages: sensor.mail_ups_packages
            usps_packages: sensor.mail_usps_packages
            amazon_packages: sensor.mail_amazon_packages
            usps_mail: sensor.mail_usps_mail
            gif_sensor: sensor.mail_image_system_path
            camera_entity: camera.mail_usps_camera
            camera: true
            card_mod:
              class: footer
      - type: vertical-stack
        cards:
          - type: markdown
            content: '# Front Door'
            card_mod:
              class: header
          - show_state: true
            show_name: true
            camera_view: auto
            type: picture-entity
            entity: camera.front_doorbell_main
            image: https://demo.home-assistant.io/stub_config/bedroom.png
            aspect_ratio: '16:9'
            card_mod:
              class: middle
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: lock.front_door_doorlock
            show_state: true
            name: Front door lock
            card_mod:
              class: footer

[th3jesta]

Here's the full list of my front-end mods:

And here's my list of add-ons:

[Xiondewah]

card-mod.js is in the right location.

[Xiondewah]

Oh and no I haven't changed the yaml file

[th3jesta]

Okay, I'm going to install those and see if I can reproduce.

[Xiondewah]

Thank you. I do appreciate this help as I'm desperate to get it up and running :-)

[th3jesta]

I managed to reproduce it once, but it fixed itself on the next refresh. I'm still working through installing all of your mods.

Out of curiosity, what hardware are you running on?

[Xiondewah]

Its an R-Pi 4

[th3jesta]

Okay, so far I am able to reproduce the exact screenshot you shared by the following:

1. Set a non-LCARS theme from the profile page
2. Refresh so that everything is set to the new theme
3. Set an LCARS theme
4. Navigate to a dashboard However, once on a dashboard, if I refresh, the sidebar loads correctly and stays that way. Still working through your mods.

[Xiondewah]

Where do I set the theme from profile?

[Xiondewah]

Found it - ignore that.

[Xiondewah]

It does say backend-selected

[th3jesta]

Yeah, that means your browser session is relying on an automation to set it, which is fine.

I'm beginning to think this is hardware/performance-related, but not sure yet. Almost through all your mods.

[Xiondewah]

What hardware are you running it on?

[th3jesta]

I think it's performance. Let's talk about your setup, now.

• Are you using a proxy/reverse-proxy like Nginx or Apache to access your Home assistant, or are you accessing it directly by <ip>:8123?
• If you are behind a proxy, what happens when you access via <ip>:8123?
• If you are behind a proxy, have you set up Cloudflare?

I'm running my instance on a full-fat Ubuntu server with AMD Ryzen 4000 series CPU, NVMe storage, and hardwired to my network. I have Nginx set up with Cloudflare for optimization, and I am using my own domain name and static IP--no DDNS service like DuckDNS.

If you have Nginx set up so that you can access your Home Assistant outside of your home network, I would recommend setting up Cloudflare, which is pretty easy.

[th3jesta]

Some other things:

• Every time you change the theme, you should call the reload themes service and then refresh the browser, especially if switching from a non-LCARS theme. If your theme buttons are are calling an automation to load theme, add the reload theme service to the automations.
• I would recommend removing every front-end mod that you are not using, especially the ones that ask you to reload the frontend, as each of those get loaded every time a page loads.

[th3jesta]

Also recommend clearing your browser cache.

[Xiondewah]

I’ll try that later - I have tried clearing the cache but will do it again.

[Xiondewah]

I removed all front-end integrations, cleared cache etc and this is the result. This is the same dashboard I sent previously. Currently restoring from backup. Don’t really understand why it got worse 🙄

[image0.jpeg]

Jonathan

On 6 Jan 2023, at 14:07, Jesse Wisener @.***> wrote:



Also recommend clearing your browser cache.

— Reply to this email directly, view it on GitHubhttps://github.com/th3jesta/ha-lcars/issues/22#issuecomment-1373690241, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AL5ZTQNBK5YQMO657UKFTP3WRARIHANCNFSM6AAAAAATQ3R6X4. You are receiving this because you authored the thread.Message ID: @.***>

[th3jesta]

I don't think images in email replies make it to GitHub.

What browser are you using? Have you tried on the mobile app?

[Xiondewah]

Yes, same on the app. I’m taking a break now - need a glass of wine! I’ll try some more over the weekend. May even start entirely from scratch with a fresh SD card and install.

Jonathan

On 6 Jan 2023, at 15:02, Jesse Wisener @.***> wrote:



I don't think images in email replies make it to GitHub.

What browser are you using? Have you tried on the mobile app?

— Reply to this email directly, view it on GitHubhttps://github.com/th3jesta/ha-lcars/issues/22#issuecomment-1373743556, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AL5ZTQLNBADLFAQKSNCU2W3WRAXZXANCNFSM6AAAAAATQ3R6X4. You are receiving this because you authored the thread.Message ID: @.***>

[chrda81]

I have the same problem when using Safari or the campanion app. The problem seems to be solved by editing the lcars.yaml themes file (located in /config/themes/lcars/lcars.yaml) and removing the defined height for the sidebar:

card-mod-sidebar: &card-mod-sidebar |
    :host {
      content: "";
      # height: 100px;
      width: 200px;
      border-right: 0px !important;
      border-top-left-radius: 80px;
      box-shadow: black 0px -130px 0px 0px;
    }

[th3jesta]

Interesting! Can you share a screenshot of the result, please?

[chrda81]

I also removed the line for width, because the mobile view was not looking good. Here is the result.

[th3jesta]

Thanks for that. I'll have to play around with it, because at one point during development, those were required for the radii to not get squished.

[chrda81]

Just as information: I use Home Assistant 2023.1.1 with Frontend 20230104.0 - latest. Maybe somthing has changed there? I installed your mod today and ran into this. So I don't have something to compare with older versions.

[th3jesta]

Confirmed. I commented those lines and nothing changed. I think it's because I positioned the Home Assistant text and the icon some time after defining the size of the corner and radii, and now they are keeping the proportions of their parent container correct. @Xiondewah Xiondewah please try updating to the latest release (1.7.6) and see if that resolves your issues.

[Xiondewah]

I have a Home Assistant Yellow coming in the next month (hopefully) so will try from a bare bones install.

In the mean time I'm fiddling about and have come up with this - which I think looks good:

type: vertical-stack cards:

• type: markdown content: '#  ' card_mod: class: header
• type: horizontal-stack cards:
  • type: custom:auto-entities card: type: logbook title: Sensor Log style: | .card-header { font-size: 18px; padding: 2px 15px 2px 15px } ha-card { background: black; } ha-card { color: red; } hours_to_show: 1 filter: include:
    • area: Library*
    • area: kitchen
    • area: Hallway
    • area: Dining*
    • area: Living*
    • area: Lobby*
    • area: Utility*
    • area: Landing*
    • area: Jonny*
    • area: Colin*
    • area: Spare*
    • area: Front*
    • area: Garden* card_mod: class: middle
• type: horizontal-stack cards:
  • show_name: true show_icon: false type: button tap_action: action: navigate navigation_path: '' hold_action: action: none name: Overview card_mod: class: footer

Give it a go - just change the area names etc.

[Xiondewah]

Also - I think a class on the vertical/horizontal stack could be useful (you mentioned it somewhere) - especially vertical.

[Xiondewah]

Confirmed. I commented those lines and nothing changed. I think it's because I positioned the Home Assistant text and the icon some time after defining the size of the corner and radii, and now they are keeping the proportions of their parent container correct. @Xiondewah Xiondewah please try updating to the latest release (1.7.6) and see if that resolves your issues.

I'm on the latest version - no change. I'm going to try taking out the sidebar stuff from the theme just to check.

[Xiondewah]

Interesting! Can you share a screenshot of the result, please? It's already commented out for me so that's not it I'm afraid.

[Xiondewah]

I just installed Chrome and it works perfectly - so it's a Safari problem - though it also doesn't work properly on the desktop app. Not sure if that helps.

[Xiondewah]

OK so I don't pretend to understand this, but I refreshed Safari after Chrome was opened and it's working perfectly! I closed Chrome and refreshed Safari and it's still fine.

[th3jesta]

Safari probably just decided to clear the cache. I suspect it had nothing to do with Chrome.

Either way, glad this is (finally) resolved! Big thanks to @chrda81!