Configuring "Rooms" in lovelace

Configuration
1

Hi. In the Lovelace UI I’d like to configure tabs for “lights”, “heating” etc across the tabs at the top which is simple to do however when I click “lights” I want to display a list of rooms that when I click on a room I’m taken to another screen with the list of all the lights in that room.

The reason for this is I have lots of lights and when I’m going to turn one off using my phone I want to be able to filter down to it quickly. As such I don’t want a long list of all my lights that I need to scroll through.

Any idea how I do this?

Thanks.

2

Weblink. But you’ll need to have each room as a view. And each view will need an id for the weblink.

3

Actually you don’t. Check out the awesome work of @thomasloven https://github.com/thomasloven/lovelace-state-switch.

2 Likes
4

Though weblinks or even better a nice picture using navigation_path also makes for a very nice interface.

5

I like that state switch but I hate combo boxes on phones. A nice change to that would be an option to have it as a second title bar with tabs. You mind if I take your JS and doctor it to behave that way?

6

Sure. Go ahead.
I’m bad at putting licence agreements in my stuff, but I generally go by MIT - do whatever you want, but if you use a lot of my code please give credit.

Personally, I use a row of buttons which set the value of a hidden input_select via a service call.

stateswitch
stateswitch1406×835 1010 KB

7

Great switch, will most certainly try it out.
Is it possible somehow to grab who is logged into the device? Say it knows the user logged into hass on my phone vs my wifes?

8

Cool, Will do. Yes, what you are doing is what I would do but I was thinking more along these lines for the buttons:

image

9

Look more carefully at the github page. Demo picture and code.

Edit: But let’s try to keep this thread on topic and discuss state-switch here: My Lovelace Plugins

10

Whooops! Thought I was in that thread actually. Sorry for the OT :slight_smile:

And I see. I guess I missed the exact part I needed of the code. Got it, Thank you =)

11

I use mnonster card for exactly your needs (quickly have a look at which lights are on and turn them off. Different solution is needed if you want an easy access to turn them on

  - id: xxxxxxxxxxxxxxxxxx  # Automatically created id
    type: custom:monster-card
    card:
      type: Entities
      title: Lights that are ON
      show_header_toggle: false
    filter:
      include:
        - domain: light
          state: on
        - entity_id: switch.light*
          state: on
      exclude:
        - entity_id: light.garden
12

Thanks for all the replies. I’m digesting them and I’ll try some out.

With navigation paths I’ll need a view which I think means I have no option but to have a tab? The problem I find with tabs is using them on a phone so I’d prefer to have very few tabs. Would be great if you can have a view that is hidden from the top.

I really like the idea of two rows of tabs I’ll be interested to see how that develops. I guess a new “tabbed” component card could work here…

The drop down looks good but I’m not sure how easy they will be to use on a phone which is my primary interface.

13

Could you not have a row of input_booleans as your second row of tabs that whilst are off hide your entities but when you press on it shows the entities for that tab/input_boolean?

14

Petro, this is exactly what I want do do. Have you implemented this?

Thanks, Richard

15

Nope, I ended up revamping my UI.