Neon Lovelace UI & Theme for tablets

danieljarhult · May 11, 2021, 9:24pm

Landscape

UPDATE SEPTEMBER 2021
Now using layout-card and a css-grid for changing between portrait and landscape. I always use this in porttrait so this one is only for you guys
Browser_mod is now used for popups !
Added a footer with som stocks and news info.
Added a “photoframe” popup that autoplays images with the swipe card.
Did some clean-up and added some stuff in the theme-file.
Added the ability to write notes straight on the dashboard. This has high WAF.
Moved media players into a separate popup.
Fine tuned some design elements.

And more…

Video demo of the responsive design and more:

If you like this you can always:

Hello,
So i posted my theme/custom lovelace UI on reddit a and some folks really liked it. I promised to post my code and that is why i started this topic.

FEATURES:

Modern and clean design using 3D-elements and blur-effects.
Popup windows.
Auto switch between portrait and landscape.
Notfications and more !

CONS:
This is specific made for the screen resolution used in the iPad pro 10,5 model but It is works good on desktop and bigger tablets also. For smaller tablets some resizing of the cards and css-grid might be needed.

PROS:
Well, i think it looks awesome

HOW TO SET UP:

1. In order for this to work/look as shown in my pictures and video you will need to have the latest versions of the following custom-cards installed:

optional: (someone was asking how i did to display my car information and that is done with:

I also use the Waze Travelsensor integration, Spotify integration, yahoo finance and more…

2. For the gradient icons/images used in the four top cards: Download them here and put them in your www folder.

The 3D weather icons can be downloaded here. For some weather conditions i have one pic for day and one for night. See my code for example and put them in your www folder.

3. Here is my lovelace code. I am not using yaml-mode. Just copy my code and overwrite the code inside your Raw config editor. (updated 15/9 2021)

4. And here is the needed theme file. Put it under /config/themes/Neon/neon.yaml (updated 15/9 2021)

5. You should also create a group for binary sensors and lights. This group should include the same sensors that you would like to show in your notifications.

6 Now it is up to you to change to your sensors, titels, etc. If you have a bigger tablet than the iPad 10,5 just increase the grid-gap to make it fit on your tablet. (see line 14 and 25 in the code) If you haver a smaller screen you can reduce the grid-gap but it will most likely look ugly if you make it to small. Then you will have to change the width of the grid itself and also change some of the width and margins of the elements/cards. Just ask me if you have any questions!

THANKS

@thomasloven for creating all amazing custom-cards. This design is only possible thanks to many of your cards.
@Mattias_Persson for inspiration. I did steal the code for the tap action animation from your code.
@tben for some inspiration. I borrowed the code for the colured img_cell behind the icons
@RomRider for the mighty button-card !
Creator of noctis theme https://github.com/aFFekopp/noctisI . I modfied this theme file with my own colors and parameters. .

david1 · May 12, 2021, 12:38am

Guess I gotta cal out of work tomorrow!

Bimmer · May 12, 2021, 11:04am

Man this has got to be one of the best dashboards I’ve seen.

Thanks for sharing!!!

david1 · May 13, 2021, 4:45am

whats avlarmart? (what is the language?)

danieljarhult · May 13, 2021, 4:53am

That means ”alarm of” in swedish. I control a separate alarm system that is no part of home assistant.

MarvinS · May 13, 2021, 7:06am

First off, let me start by saying amazing work on this dashboard. I am currently trying to build my own using your guide. However, my custom:light-popup-card does not seem to pop-up. I literally copied your code and just changed the entity_id:

- type: 'custom:light-popup-card'
  card_mod:
  style: |
	ha-card {
	}
	h4 {
	font-size: 12px; 
	color: var(--primary-text-color); }
  entity: light.fasad
  icon: 'ios:lightbulb'
  hideState: null
  sliderColor: var(--accent-color)
  brightnessHeight: 140px
  brightnessWidth: 50px
  fullscreen: true
  sliderThumbColor: var(--accent-color)
  sliderTrackColor: '#3a3c55'
  style:
    top: 190px
    left: 65px
    height: 400px

I do have the custom lovelace card installed. Anything I am missing here?

danieljarhult · May 13, 2021, 12:00pm

Thanks ! That is strange. Do you have Cupertino Icons installed ? And do you write Entity_id in your code or just entity:?

h0jeZvgoxFepBQ2C · May 13, 2021, 2:42pm

Wow this looks really awesome!

But is it not possible to install this somehow via the HACS manager? Would be cool if you could provide an installation method which does all the work and is easily to update

danieljarhult · May 13, 2021, 3:15pm

That would be cool indeed just way beyond my knowledge unfortunally.

MarvinS · May 13, 2021, 4:17pm

Yep I do have those icons installed.

- type: 'custom:light-popup-card'
  card_mod:
    style: |
	ha-card {
	}
	h4 {
	  font-size: 12px; 
	  color: var(--primary-text-color); 
        }
  entity: light.dinner
  icon: 'ios:lightbulb'
  hideState: null
  sliderColor: var(--accent-color)
  brightnessHeight: 140px
  brightnessWidth: 50px
  fullscreen: true
  sliderThumbColor: var(--accent-color)
  sliderTrackColor: '#3a3c55'
  style:
    top: 190px
    left: 65px
    height: 400px

When I tap the lamp icon, some black lines appear and quickly disappear, but nothing really pops up

danieljarhult · May 13, 2021, 8:30pm

Just to be super clear, you are using this inside the picture element card right ? Becuase you are missing som spaces before each line of code.

If you are using it togheter with the rest of my code It should look like this:

          - type: 'custom:light-popup-card'
            card_mod:
              style: |
                h4 {
                font-size: 12px; 
                color: var(--primary-text-color); }
            entity: light.fasad
            icon: 'ios:lightbulb'
            hideState: false
            sliderColor: var(--accent-color)
            brightnessHeight: 140px
            brightnessWidth: 50px
            fullscreen: true
            sliderThumbColor: var(--accent-color)
            sliderTrackColor: '#3a3c55'
            style:
              top: 190px
              left: 65px
              height: 400px

I do think that this card was not intended do be used inside the picture element. I experimented a little bit now and found out that when i add this code to a new lovelace view:

type: picture-elements
elements:
  - type: 'custom:light-popup-card'
    entity: light.fasad
    icon: 'ios:lightbulb'
    hideState: false
    sliderColor: var(--accent-color)
    brightnessHeight: 140px
    brightnessWidth: 50px
    fullscreen: true
    sliderThumbColor: var(--accent-color)
    sliderTrackColor: '#3a3c55'
    style:
      top: 190px
      left: 65px
      height: 400px
image: local/box.png

It only shows up in some views/tabs but i can not add it as a new card to some other views/tabs… So it seems to be a bit buggy to say the least.

If you would like a more stable solution you can change the vertical sliders to a horizontal using GitHub - thomasloven/lovelace-slider-entity-row: 🔹 Add sliders to entity cards and then you can use the GitHub - thomasloven/lovelace-hui-element: 🔹 Use built-in elements in the wrong place to add a standard entites card with lights and horizontal sliders inside a picture element.You can also add rgb options with GitHub - bokub/rgb-light-card: 💡 A Lovelace custom card for RGB lights .
I tried this setup in my design to and it looks just as good.

scooper86 · May 14, 2021, 6:29pm

Amazing, beautiful dashboard!

milkplus · May 15, 2021, 11:25am

Honestly, this is amazing. Thanks for sharing and can’t wait to give it a go. Am new to HA/Lovelace so will be a good learning experience diving into this. Any chance if you think this will scale down ok to an iPad Mini?

danieljarhult · May 15, 2021, 12:23pm

Thanks ! I think it will look ok on an iPad mini just need some works to make it look perfect. Do not worry, i started with home Assistant two months ago myself so i think you can make it work

damiantje99 · May 15, 2021, 12:47pm

Hi Daniel,

First of all, amazing UI. I want to run this on my iPad Air 2, so it needs a little modification.
I came from far, but there is one thing I can’t figure out.

Somehow, the card for the Calendar and Music seems to be to small in height. I need to push those cards up, so it first the screen. As you can see in the screenshot, the texts falls away. If I push them further, they will disappear.

I’ve pushed both cards up with a -top: -30%

I hope you can help me figure this out. If you need the full code, let me know.

danieljarhult · May 15, 2021, 3:02pm

Looks amazing and it is really fun to see other people using my design ! Send me your whole code and i will take a look.

danieljarhult · May 15, 2021, 3:43pm

I answer you here if anybody else has the same issue.

So i looked in your code and you need to do this:

on your line 1516 (the last pices of code) you need to change the value to a smaller one from 830px to example 780px.

    style:
      top: 780px
      left: 425px
      width: 770px
      height: 300px

Then you just need to put the Agenda and Music further down. Delete your -30px value and set it to 0px. Move the whole card instead with the parameters in the code above here until you get a result that you like.

milkplus · May 16, 2021, 7:17am

thanks for the encouragement, have been working on this since yesterday and am slowly getting there! there really is no better way to learn than by doing. My formatting is still a bit off, but for now i’m just trying to figure out what i want where and how to get various elements in. so far i’ve added a camera feed to where your calendar section is, and a section for dishwasher controls which i’m pretty pleased about.

I have a couple questions though, if you don’t mind?

For the bottom Lighting section, is it possible to add groups of lights to the vertical sliders? I tried this but it keeps breaking the formatting - when i put in a single light entity it works as expected.

Secondly, I have Sonos speakers littered around my house rather than chromecast devices, is there any way you know to send spotify playlists to these? i tried to google it but i just get results for mini-media-player, which is great!, but it only lets you define a master player for each card, rather than let you pick which speaker you want to play on… at least as i understand it.

Thanks again for sharing your code. It’s incredibly impressive that you managed this in just 2 months. i’m honestly in awe.

danieljarhult · May 16, 2021, 8:39am

Thanks for the kind words!

Yes you can put groups of light to the vertical sliders. Thats how i am using it myself. You just need to add lights as a group in your config.yaml. Like this:

light:
  - platform: group
    name: Fasad
    entities:
      - light.spa
      - light.forrad
      - light.entre

Then you just add light.fasad to the vertical slider.

And for sonos, i rembered reading something about it in the spotifyplayist–card forum and found this GitHub - ChrisK91/sonos-playlist-card Maybe you can use it.

Have a good day !

MarvinS · May 16, 2021, 9:04am

Thanks for the pointers, it’s starting to look amazing already:

And the sliders:

The only downside of the sliders is that it is really hard to control them on a tablet when they are inside a swipe card, have you found a solution for that yet?