#Is it possible to have certain cards of
waxen spindle
This is what I have so far, it's a work in progress so some of the CSS styles are not properly laid out yet as far as which template they should be in
The section labeled NAV BUTTONS is that part I want to repeat on each view
quartz sundial
Sorry for the late response. I ended up staying a few extra hours at work.
Looking at your yaml, you've already implemented what would have been one of my suggestions: the custom:button-card templates.
I think the easiest thing to accomplish what you're trying to do is by using the decluttering card https://github.com/custom-cards/decluttering-card
You should be able to take the whole custom:layout-card section and drop it into a decluttering card (essentially the equilavent of a button-card template.)
The only hard part I envision is the changing the button color for the "active screen." I imagine it should just be a matter of setting variables in the decluttering card and a default value for the "inactive screen" coloring. Then passing the variable for the appropriate screen when it is supposed to be active. (I hope that made sense; it did in my head but typing it out... not so much.)
quartz sundial
So I was thinking about this and I wonder if we're looking at this in the wrong perspective. There might be another way to accomplish your LCARS dashboard. My idea: conditional cards.
Your layout is essentially static, so to speak. The nav buttons and graphics are all the same. The only thing that changes is the title, center area, and button columns. So how about focusing on changing just those area?.
What if your nav buttons no longer navigate but instead set a value in an input_text. Then you have seven conditional cards that each hold the title, center area and button columns in a layout-card. Each conditional is set to only show based on the state of the input_select.
waxen spindle
No problem I appreciate any reply. I didn't know the decluttering card even existed so I'll give it a look.
I gave up on trying to use yaml anchors. They work well enough for simple things like replacing strings or simple lists. When you get into more complex objects with multiple indentations it seems to fail for some reason. I also can't find any examples of anyone doing it online (and believe me I've looked) so I'm assuming it's just not possible with the current version of yaml.
Okay I see where you're going with the conditional cards.
quartz sundial
Yeah. I never ventured into using yaml anchors. I think they're good in theory but ultimately wouldn't work for me.
waxen spindle
I just saw your next message. For some reason my phone didn't refresh.
waxen spindle
Yeah. I never ventured into using yaml anchors. I think they're good in theory b...
If your conditional card idea works it might be the way to go. I also want to have multiple tablets around the house. It seems like that idea might scale pretty easily. The home screen would be unique to each room but follow the basic layout that you've already seen. The rest of the nav buttons would all be the same regardless of the location of the tablet.
quartz sundial
I had to take a minute to try to figure out how to scale across multiple screens. Having only one input_select would mean if you changed on screen, the other would change too because of the input_select. That wouldn't be optimal. Lovelace isn't the greatest at figuring out which screen is being shown. But what if each screen had its own username and cooresponding input_select. I'm not sure if the conditional card can handle multiple conditions.
If Kitchen username & input_select.kitchen = screen to show...
If Living Rom username & input_select.living_room = screen to show...
This might be the fix for all that. Instead of the conditional card the state switch card https://github.com/thomasloven/lovelace-state-switch
waxen spindle
Yeah I haven't tackled that problem yet. I had two ideas. First idea was just making separate dashboard for each tablet, but then you run into the problem of having to copy paste code everywhere. Second option was having unique users for each tablet.
quartz sundial
The above link can handle hashes This allows for controlling the view on a browser-window to browser-window basis, and without needing a controlling entity., users, and device_ids or combinations via a template.
waxen spindle
Awesome this gives me something to try this weekend.
I work in IT during the day doing just about everything from unjamming printers to programming website and database.
Sometimes I just don't feel like doing it at home so I do most of my playing with HA on the weekends
quartz sundial
Understandable. On the bright side, you now have three different options that in theory should accomplish a working LCARS. I'd like to see how it turns out. The potential with what you alreay having going looks like it can do a lot. (Consider a Red Alert option... 🤔 )
waxen spindle
Oh I already have. I don't have the mockups on my phone but I can send you some tomorrow It does feature a "red alert"
quartz sundial
Something else to consider. Your custom:button-cards can "hold" more stuff in them. Here's one of my examples with toggle switches in it.
My motion detector cards. The dot signifies the battery level.
waxen spindle
Yeah I thought about adding icons for different things like fans and lights. The wife doesn't like the fact that it says light light light light light light.
She would rather it say living room and have a picture of a light instead of the word light
I have to say I agree with her it would look better that way.
waxen spindle
Fortunately she's also a Star Trek nerd so she is cool with the Lcars displays 🙂
quartz sundial
Last one. The automatic signifies the light is in auto on/off mode. Time next to it is a modded entities card that counts down. Temp/RGB in top right. And how long light has been on beneath that.
That's awesome. Just need to find some appropriate icons. Material Design Icons may not be fitting.
Oh. And button press ripple animations. I have those too but I don't know if it would work well with LCARS.
waxen spindle
Yeah I don't like the ripple animations but I wouldn't mind it if the button flashed a little bit as your finger touches it
I also got browser mod to play sound file when you push the buttons so you get the satisfying beeps and boops
quartz sundial
Nice. I think there is a way to get it to flash the border or something instead of the ripple. But I'm drawing a blank at the moment on how it was done.
waxen spindle
That's kind of farther down my list. I'll probably implement the button being a lighter shade of blue when the light is on instead of off. Then I'll deal with the flashing feature at a later date.
quartz sundial
Think it has something to do with CSS.
That's kind of like my buttons shown above. Subdued when off but lit up when on.
waxen spindle
Yeah I do like those.
quartz sundial
This is something that I am starting to implement. When light is RGB, card reacts to that.
waxen spindle
Yeah that's definitely cool
Nice to be able to see what things are doing from across the room
quartz sundial
Agreed. I also have buttons/indicators for brightness and just managed to incorporate brightness range for each instead of specifically then number shown.
waxen spindle
How long have you been working on your stuff?
It's taking me about 3 weekends to get this far.
quartz sundial
You've done a lot over 3 weekends. I was looking at your layout-card code and (with the screenshot) gave me a better understanding how you're able to make things work the way you do.
Looking through the search, my first message in #frontend-archived was Jan 2022. So I think I've been messing with it since late 2021.
I have over 1600 messages in that channel now.
But I started with dashboards using AppDaemon but quickly outgrew it and needed it to be able to do more.
waxen spindle
Never heard of AppDaemon. One of my problems is that there's so much out there it's hard to know everything about HA. It's growing super fast.
I don't know if you use any ESP home stuff or not. But if you do I'm the guy that wrote the component for the TM1638.
Took me about 8 months to do that and I got it merged into the ESP home repo.
I use it to control my air conditioner. I made a custom control panel and everything
quartz sundial
Believe me, I know. I started using HA in late 2019 and there has been a lot of improvements.
I thought I had something with ESPHome but I don't see it in my integrations. So maybe I'm confused.
waxen spindle
FYI I have not had time to work on this yet, but I will share the results with you when I do. It was a busy weekend.
waxen spindle
Oddly the most challenging thing at the moment is disabling the ripple effect when clicking a button. I thought that would be low hanging fruit, but it's more difficult that I thought.
quartz sundial
Why not add something to your template that "overrides" the JS. Here's my style section that has the ripple effect (that you don't like). yaml styles: card: - background-color: transparent - '--ha-card-box-shadow': none - border-radius: 20px - '--mdc-ripple-color': white - '--mdc-ripple-press-opacity': 1.5 - border: 1px solid var(--primary-text-color)
Wonder if this would work?yaml - '--mdc-ripple-color': transparent - '--mdc-ripple-press-opacity': 0.0
waxen spindle
I just started playing with the css variables today (I'm a bit of an old school web developer so CSS variables are still a bit new to me, I work on a lot of legacy code) I did find that this works, at least for card objects
card_mod:
style: |
mwc-ripple {display:none;}
It looks like your transparent and opacity settings also accomplish the same thing. I also found the docs for the material/ripple packaged on npm.org which may prove useful in the future.
Your suggestion is probably better because cardmod only works with ha-card elements. The CSS variables will likely work in more, if not all, cases.
waxen spindle
I started playing with this again over the weekend. I had some good success with using !include statements. I did not try the declutter card yet. I'm currently looking for a way to get the name of the current view so I can write a template to change the color of the currently active button in the NAV menu.
Then I remembered what you said about the declutter card and passing variables, so I may end up going that route.
I know how to use the "states" object to get the status of sensors and such. I was wondering if there is a list of environment variables somewhere that I could pick through to see if I can get information bout the currently displayed view.
quartz sundial
If you use Fully Kiosk Browser, there is an entity for current page.
There might be something useful in browser-mod but I haven't really looked into using it much.
waxen spindle
I do use Fully Kiosk
Ok so I'm dumb, how would I get data from Fully Kiosk into HA?
waxen spindle
This did the trick
lcars-nav:
styles:
card:
- background-color: >
[[[
//debugger;
if (location.pathname.split('/').pop().toLowerCase() == this._config.name.toLowerCase())
return "#002138";
else
return "#01466A";
]]]
Ignore the "debugger" part.
Basically it gets the current URL path, takes out everthing except what's after the last slash, then compares it to the card name. If it matches then the background color changes.
I was able to inspect the "this" variable of the button card by attaching a debugger in Chrome
quartz sundial
I'd have to see this in action to completely understand its usage. I copied it and it definitely checks to see if the name matches the page.
waxen spindle
If it helps, it's use in my button-card template to change the background color of the button
quartz sundial
The template reference made it click for me. Each button is able to check which page is being shown and if they match, light up; if not, stay dark.
waxen spindle
Awesome. I also used a similar trick for the title bar on the page. It will automatically pick up the lcars_display_name property of the view. I discovered you can literally make up your own variables in the YAML and they will be rendered to the page. Once there, you can write JavaScript to pick them up and display them. I'm hoping to start working my air conditioner control panel this weekend.
quartz sundial
LCARS mobile & tablet dashboard featured on @burnt goblet https://youtu.be/HYmtGLPDdkk?si=KSVAkkq1DxARci2x&t=732
The theme the submitter used:
LCARS Theme https://github.com/th3jesta/ha-lcars
waxen spindle
I had to take a minute to try to figure out how to scale across multiple screens...
FYI this worked exactly as you predicted it would
quartz sundial
Is that a good thing or a bad thing? Did it handle multiple screens okay?
waxen spindle
It's like 99% working. I had to use a combination of custom:button-card javascript templates and HA Jinja templates to make everything work. I think the solution is also very elegant in a way. The whole thing aboute lovelace not being able to handle mulitple screens nativly ended up being a plus. A side effect of this is that I can easily control one screen from another screen by simply setting the input_text value. So the negative ended up being a positive because it gave me a "feature" I didn't even know I had
I'm going to tidy it up and share the code as soon as I can. Thanks for your ideas and help. I would have gotten to this sooner, but I worked a haunted house all October with my 11 yo daughter. She loves it, but it makes or some very long nights on the weekend and I just didn't have the energy to put into many side projects during that month. The time between Thankgiving and New Years is a pretty slow time at the office for me, so I should have time to finish all this up.
And yes the multiple screens seems to be working just fine so far.
waxen spindle
Is that a good thing or a bad thing? Did it handle multiple screens okay?
I've got everything working 100% now. Let me know if you want a demo. The two major pieces of magic are a javascript template in the custom:button-card template for the navigation buttons, and adding a corresponding jinja (not a fan) template in the custom:state-switch card which contains the main controls. I then added a input_text for each user and stored the currently loaded page in it. Changing the value of the input_select results in the display changing.
card:
- background-color: >
[[[
debugger;
var hauser = user.name.replace(/\W+/gm, "_").toLowerCase();
var inputtext = "input_text."+ user.name.replace(/\W+/gm, "_").toLowerCase() + "_page";
if (states[inputtext].state.toLowerCase() == this._config.name.toLowerCase())
//return "#1A577D";
return variables.active_color;
else
//return "#01466A";
return variables.inactive_color;
]]]``` - type: custom:state-switch
entity: template
template: "{{ states('input_text.' + user | regex_replace(find='\\W+', replace='_', ignorecase=False) | lower +'_page')}}"
It would have been nice if the custom:state-switch also used javascript templates like custom:button-card does, but the dev chose to go with jinja, so I had to learn that. Both cards appear to have been written by the same dev, so I'm not sure why he went a different route with state-swtich, but it is what it is.
Also, the replace and regex_replace methods, basically find any nonalphanumeric characters in the username and convert them to an underscore because spaced and nonalphanumeric text is not allowed as an input text name. This could result in a name collision if you are not careful with your usernames, but it's not a big deal to me. I also noticed that jinja {{user}} and javascript "user.name" returns the user's displayname and not the actual username which was annoying, but again it is what it is.
One more thing, and sorry for spamming the thread. I had all of this working using only custom:button-cards and !include statements in my yaml files, however, I uncovered and reported a bug (https://github.com/custom-cards/button-card/issues/803) which causes the background color on the controls to flicker when changing screens via navigation links. The other styles are not affected, just the background color, but it was too annoying to leave it be, so I tried your suggestion of using the state-swtich and it solved that issue and others. So thanks for sending me down the correct path.