As a few people have requested more info on my new nest hub dash (https://www.reddit.com/r/homeassistant/comments/18l05al/v3_of_my_nest_hub_ha_dashboard_ft_jellyfin_lms/) i thought I better document all of it for you to show the relatively foolproof and minimal skills required way I managed to bang it together.
To get here I have tried probably over 100 different add-ons and integrations, and even now am running other media services side by side to see if they work any better, but this info will detail and link you to each component that I have learned works the best for someone like me who can barley work docker.
Home Hardware & Dashboard Requirements -
I am running what I think is a very typical home setup for someone on this forum. Running HA OS on an old cheap i5 NUC (and a HP elite desk mini before that), and wanting to connect to my Samsung TVs or Google TV/Cast devices, as well as my Sonos setup in an easy way that anyone in my home can use. The other things that were important factors to me included wanting to host my own audio to be played at high quality over the Sonos, easily connect the rest of my media to screens at the same time, and to do everything I would normally have to do in the sonos app, spotify app, HA app etc on my phone - but without having to use my phone (which to me is the most annoying part of sonos).
Recommended Services -
For your Media, having tried them all, if you want to use HA, and if you have sonos, or if you just want an easy way to pick what to watch on TV, Jellyfin has to be your go to. GitHub - alexbelgium/hassio-addons: My homeassistant addons It handles every type of media making it all in one, it can and will connect to everything you want it to. If you can open an web page, you now have both a remote control for your media, and you also have a media player.
This is a prime example. An iPhone 4s, a phone which you can not install apps anymore, but still such a nice peice of hardware, and very cheap on ebay. By opening my Jellyfin web page once, i was able to control my TV, and I was able to control the iPhone from my other phone - from playing music to casting videos. There is no media server that is as easy as this, and I doubt there is one that can connect as many possibilities as this. And there are a few other great things it does which I will cover in the iFrame section a little further down.
**For HTTPS (**required for nest hub, and good to be doing) and to avoid the traditional nginx reverse proxy or similar, you should absolutely look at Cloudflared GitHub - alexbelgium/hassio-addons: My homeassistant addons. One or two clicks with this add on, and not only are your setup at https://home.mydomain.au for example, but all your other services can be hosted simply but telling the add-on config 2 lines.
This is literally all the config you need.
You will need to set up some security on the cloudflared portal. I am using a OTP to my secure email, and I am also leveraging Github OAUTH Passkey which makes it very easy to auth, especially on a device without a keyboard, like a nest hub.
Casting -
Easy, simple blueprint that will cast and keep your dash casting. I have tried them all, and this is the one. I have the google cast integration also setup, and nabucasa.
The sonos card now lets you put in your local ip address which corrects the issue where the album art wouldn’t play which has made the sonos card much more appealing for this purpose because of its features and ease of use and setup. You can also make your own easily, but note, that many custom components and card mod type stuff will not translate across to the nest hub.
One extra thing here, i dont know if it is coincidence or not, but I found if I initiate a cast myself from either a computer that is always on and on the network, or an old phone that I keep on the wifi and use as a mini server, the casting is solid always. If you find yours is cutting out or disappearing, try doing this and see if it helps. My display more or less is 24/7 now with no problems.
Also, if your dash disappears because you interacted with the nest hub, you don’t need to re-cast, just swipe right and you will see a card that says Cast: Lovelace or similar. Press it, and your dash will reopen.
Overall Card Layout -
To keep it simple and usable, it had to be a single card. This is where Tabbed Cards helped, and you will not find a better guide to them than here - https://smarthomescene.com/guides/how-to-setup-tabbed-card-for-home-assistant/ . By using tabs cleverly, you can fully control your lights, music, movies, tv, cameras etc - even if the media is all hosted on the same server, by directing a tab to navigate to a specific part of your media server, instead of the home or landing page.
Here is an example
- attributes:
label: null
icon: phu:jellyfin
card:
type: iframe
url: >-
https://jelly.xxxxxxxx.co/web/index.html#!/music.html?topParentId=xxxxxxxxxxxxxxxxxxx
aspect_ratio: 54%
view_layout:
grid-area: iframe
And this is where the benefits of Jellyfin and Clourflare come into their own. You can be as specific as you want once you have your domain setup, and this example means that this tab goes straight to my ministry of sound CDs only.
Jellyfin will recognize this tab as an individual connection, and you can tell it once which media player to default to meaning you just hit play (and meaning it will show you whats playing already). You can also customize it very easily and get rid of all the any options if you want. And because Jellyin identifies each tab individually, you can then use the same Jellyfin server and the same cloudflare tunnel to make your next tab, which could be a link straight to your TV shows, and defaulting to cast to your TV in the bedroom if using your nest hub in the bedroom etc.
Your nest hub will be able to play to any media player you want, and of course, leaving the tab does not shut it down or anything like that. Finally, Jellyfin will let you login by entering a code displayed on the nest hub into your phone or web browser, so you can keep it secure despite the nest hub lacking any keyboard.
I am currently also using logitech media server on an iframe, along with ‘other’ hosted web apps, and am really just messing with them. The reality is that Jellyfin does it all and more, and making specific tabs from the one server is the best way to go overall and where I will end up.
Look & Theme -
I am using Google Dark Theme -- JuanMTech and I have also used the IOS version which looked as good. I only made two simple changes; i made the background of my cards transparent by changing the yaml for the theme to this ha-card-background: rgba(0, 0, 0, 0.0), and i changed the background image to the image i made of my floorplan.
I used a website called floor-planner to make my blueprint thing for free, and a web based tool to make it darker and a bit softer, and finally i used a free open image hosting service for easy HTTPS hosting of the image (which is required for google nest hub).
Now to place everything where you want it… If you are happy to be non specific, it will be easy, just use your normal tools of stack cards and grids etc. If you want to it be quite specific, time to get dirty with grid layout. The trick here is to just open the dash on the nest hub when you are making it, and see where everything goes. Knowing the dimensions is a big help (1024x600 which you can set at the top level of the tabbed card to help keep the shape) t
type: custom:tabbed-card
aspect_ratio: 1024x600
styles:
Here is where I will share some of my embarrassing grid layout setup. The point is, I just brute force it, and it takes a lot of messing around for quite a few hours. I am sure if I properly looked at it now I could clean it all up and simplify it too, but there is no need.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 8% 7% 3.5% 7.5% 5% 2% 4% 8% 3% 18% 33%
grid-template-rows: 90px 7px 50px 65px 65px 85px 100px
grid-template-areas: >
"clock clock clock clock newtop newtop newtop newtop newtop newtop
media"
". . . newtop1 newtop1 newtop1 newtop1 newtop1 newtop1 newtop1 media"
"top1 . . newtop1 newtop1 newtop1 newtop1 newtop1 newtop1 newtop1
media"
". . . tv tv . hall hall hall chip media"
". fan2 den den den den bathroom bathroom bathroom bedheater media"
it is chaos, but for a good reason. Rather than messing around with padding on cards etc, you can cleverly use grid layout to set a max height for each row. This does not impact the cards of that row, but instead, will bring the row below up or down to your setting, meaning you can neatly tuck cards in and under each other where otherwise you wouldn’t be able to. How to choose the height? pic a number a random, and see how it looks on the nest hub.
Other tips here are to mentally try and keep the columns to 2 or 3 zones so you know they are around 33% or whatever you want them to be, then you can add as many or few sections in those zones of any size, and you just have to keep the total of all the column width % to that number (eg, the media player needed to be 33%, it is the last row, but the 4 cols before that are 4% 8% 3% 18%, which is also 33%. Lastly, ’ . ’ is your friend, and should be used as a spacer or to fll an area you haven’t yet. Oh, and do it like washing a car, top down, do not be tempted to start anything below either. top down, only, or you will wasted days readjusting.
Other things to note…
I have used are these cards;
Mushroom cards especially are nice to look at and easy to customize. One little button might toggle the lights on and off, but it can also change colour if there is motion, double tap it to activate a scene, long press it to play/pause media in that room. The best way to decide is to set up your dash first, and then after a week or two, think about what you have been going to the app on your phone to do because its easier or annoying, and make that a double tap option.
I HIGHLY recommend you get one or more of these amazing things too
and connect it with any blueprint to control your media. Set it up once as a volume nob, with click for play pause, double for skip and hold to queue fav playlist. I love these more than words and it completes the home dash IMO.
Each zone in my place has a motion sensor and is set up with motion lights, time of day lights etc, and also motion sonos (🎙️ Sonos Grouping and Ungrouping using Motion Detection) , this makes me smile every day, and it means your dash is very much more a reference and for one off adjustments. Peak home assistant.
And just because it popped up while i was writing this, if you use ring or similar, you should consider setting up a basic automation to popup the snapshot of motion or doorbell ring on your dash.
it is as simple as adding browser mod in HACS, and adding an automation like this.
Last note, I have also tried this successfully on an Echo Show 5. It is not worth it. The only thing the echo is good at is playing the the news in 30 seconds when there is motion in the bathroom, which is where it will stay.
