Neon Lovelace UI & Theme for tablets

Share your Projects! Dashboards & Frontend
82

Hello, Thanks!
If you can send me your code i can have a look. It´s way easier to find the problem if i can see it on my screen. Maybe i can find a workaround.

The reason why you see the “background” as 770px x 770px for garage and p1/p2/p3/p4 etc is because the picture element sets the height based on the width of the card. There is no way, as i know to change the height of the picture element. It is auto calculated by lovelace and it always try to be square. (Someone please correct me if i am wrong.)

Also with the latest version of homeassistant the swipe card is a bit buggy for me when it is used inside the picture element (long loading times at startup). I have actually deleted the swipe card and now only has my “garage” view. This improved my loading times. I recently also had some problems with the circular sensor card, they moved all over the screen from time to time but this problem is now gone using apexcharts-card instead.

83

Ah, ok, it’s probably this then. Thanks, I’ll keep tweaking it, love the theme though and definitely will share what I end up with!

84

I made some upgrades. If anyone have some questions feel free to ask me :slight_smile:

2 Likes
85

Very cool! Excellent work.

I’ve been tinkering with a landscape-view network/media dashboard (for use on PC) which based heavily on this, and now I’m going to have to play with some of these animations as well :eyes::eyes: – such inspiration!

Curious what issues you were having with the swipe-card? They certainly can be temperamental, but I like to disable the touch movement and turn the clickable pagination bullets into navigation buttons. It’s like a state-switch with hash navigation, only in a card:

swipe

Can’t wait to see what you come up with next!

86

Hello Thanks!
The problem i had with the swipe card might have been due to the picture element card i uses inside the swipe-card or the swipe-card itself, i really don´t know. Some elements changed position from time to time. It also took like 3 seconds to load on my iPad. I did not use the swipe function very much so decided to let it go.

HOWEVER, what you have done with the swipe card in your gif seems really fun :heart_eyes:
It opens up a lot of possibilities. I tried something similar some months ago but did not get it to work.
Care do share your code for that ?

87

Hmm interesting with the element bugs. I don’t have an iOS device to experiment on, but will happily share the code when I’m in front of my PC –

EDIT: Code for the swipe card setup I use can be found here: https://pastebin.com/BiLqgEPC (There’s surely a more elegant way to accomplish what I’ve made, but I’m relatively new to this so you’ll have to forgive the pile of code :grimacing:)

I’ve deleted pages 1 & 2 of the swipe card to save clutter because they’re just stacks of button-cards which I use as custom service-call buttons for personal playlists; the third card is a spotify-card. You could easily add more spotify cards in swipe 1 & 2 if you wanted (e.g. for personal & discover weekly cards) – that’s what I used to have.

Also in there I have a custom media player that I’ve been building for myself (the “playing” element in the state-switch), as well as two media control cards which I’ve hacked down to size for use as transparent media browser buttons for Spotify & yTubeMusic integrations – the two bottom-left icons in the gif below (they’re the two hui-element cards at the bottom of the file):

Animation4
Animation4904×502 1.93 MB

My card as-is may be a bit too verbose, but hopefully you can get something working for your setup!

4 Likes
89

Super cool! Thanks for sharing. I will play around with this :smiley:

1 Like
90

I have a realy strange behaviour.
On a tablet with touch operation, the toggle swich on the lighting page get triggered only on the second push.
Is this an issue from the tablet, or is there a workaround? On my PC with mouse operation there is no such issue.
Any help is welcome.
This dashboard is awsome and i am on the process of transfering to landscape mode for a Lenovo Tab M10 with “Fully Kiosk Browser”.

91

Hello, I have not had that exactly issue however i noticed something similar on my ipad. Somethimes my “notification field”, or the title in the lights popup card are not displayed until a second push on the screen. This issue disappeared when i deleted the animations for the notciations. Strange because it do not make any sense… Maybe it will solve you issue to, please give it a try.

And please share your landscape version, i am excited to see what you guys come up with ! :slight_smile:

92

yes! please share your landscape version if you can. Have the same M10 pad and would be interested in getting the Neon UI on it :smiley:

93

Actually i am done with the layout and placing the Cards on the screen.

@danieljarhult : thanks for your reply. Will give it a try after finished with the “Security”-Feature

image
image1899×1156 251 KB

3 Likes
94

Nice work ! Maybe it is time for me to learn css grid so we can auto switch layout between portrait and landscape.

95

Så sjukt grymt jobbat Daniel, have finally started tinkering with this myself. Halfway there, or something I have two questions.

First, Not related to the theme per se but does anyone know how to select theme per dashboard? I’d prefer to have the standard theme when going to configuration for example as I’m currently working on this at the computer.

Second, to get started resizing the layout to my screen, where is that set up?

96

Hej,
Tack :smiley:

Since this is built with the picture element you need to resize using the style top and left parameter in the lovelace code itself. I have put the “style parameter” at the bottom of each element/card.

          - type: custom:button-card
            tap_action:
              action: none
            show_icon: false
            show_state: true
            show_name: false
            entity: sensor.time
            styles:
              card:
                - background-color: transparent
              state:
                - font-size: 80px
                - color: var(--secondary-text-color)
                - font-weight: lighter
            style:
              top: 40px
              left: 70px
              transform: translate(0%, 0%)

So if you change top:40px to top:20px it will be 20px closer to the top etc.

1 Like
97

Cool tack! Now I get it. I’ll keep tinkering.
Any way to refresh the image when tweaking the background picture? Only way I could get it to update when tinkering with the crop and blur was to restart HA?

EDIT: Don’t mind me, it was just browser cache playing tricks on me!

98

Ok another stupid question, I’m working on my Belysning-popup with the light-entity cards. In the theme-file it says to uncomment for blur effect. It looks already uncommented for me, but I don’t get a blur effect. Is there another dependency? What am I missing? Thx

  # Card-Mod #####################################################################
  # Uncomment the Code below if you have card-mod installed and want blur effect #
  ################################################################################

  
  card-mod-theme: neon
  
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__scrim {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(0,0,0,0.1);
      } 
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        box-shadow: none !important;
        border-radius: var(--ha-card-border-radius);
      }
    .: |
      :host {
        --ha-card-box-shadow: none;
      }

The card itself is unchanged from your code aside from entities.

99

Maybe silly question, but have you installed card-mod?

1 Like
100

Thats not a stupid question at all. And you are right it is already uncommented. I forgot to delete that text.

The blur effect applied in the theme file only applies to “official” popup windows (more-info-cards). However, the popups for the lightcards and personcard are in fact just conditional cards which i have designed to look like a popup.

I am doing a complete rework of the popups using browser-mod instead and also using a css grid instead of the picture element. Then the blur effect in the theme file will be applied correctly.

I can share you my new code as soon as it is ready, likely by the end of this week.

1 Like
101

yes card mod is installed!

102

Cool Daniel, good to know I wasn’t entirely lost :slightly_smiling_face:
Soinds great looking forward, no stress of course - you’re a hero man!