Possibility to categorize / group scenes

Feature description

Hello :slight_smile:
When you start to have a fairly extensive installation with Gladys, you also start to have a lot of scenes!

I think it would be more readable and easier to use if we could put our scenes into categories (visible as a banner, for example) that can be hidden and displayed.

Or in the manner of Dashboards with a dropdown list?

Thank you :slight_smile:

What I think is complicated is knowing whether we want predefined categories… or the ability to create our own categories. Since each user will want to create a scene that is unique to them, the same will go for the categories.

I also think we need to find a way to organize the scenes to manage them better.

I had considered the possibility of displaying them as a list whose order can be changed by drag & drop.
This would allow more to be displayed on a single page, with better readability.

Especially since by naming them appropriately, you can find your way around quite easily:

[LIGHTS] Dim the brightness in the evening
[ALERT] Mailbox mail
[ALERT] Temperature < 15°
[INFO] The dog's bowl is empty

Etc…

Yes, for me I was already thinking about categories created by users as we do for the Dashboards.

I think the goal would be to be able to have a possible separation between the scenes of your choice.

For example, in my case, I could separate the scenes of my aquarium, the living room lighting, and the scenes of the alarm system.

Why not, I can see a filterable tag system for example! Something to think about :slight_smile: :blush:

@Checconio Since you say your installation is becoming quite extensive, would you be interested in being interviewed for my YouTube series « Gladys Assistant chez vous Â»?
(https://www.youtube.com/playlist?list=PLkBwN_hZI5TeMkv-sZ0UdU4AVxIOHefIG)

(We can discuss this privately if you like, to avoid cluttering the topic here)

That’s a great idea :+1: especially since it’s usually very simple for the user to use, and it’s very flexible: a scene can have multiple tags.

Yes a tag will allow displaying the same scene in multiple « views Â» which is indeed better than what I had in mind :slight_smile:

Small bump because this point is starting to interest me :smiley:
I’ve got a parent scene that is triggered by a motion sensor.
This scene only triggers scenes in // which themselves trigger others ^^
So I end up with a lot of scenes and it’s quickly confusing :smiley:
![Screenshot_20220813-225015_Chrome|180x500, 100%

I’m learning the same tech as Gladys for a personal project.
Once I’ve mastered it, I might look into developing the feature to test it ^^

Quick bump to keep this in mind for development.

Also, the feature request already existed since October 2021:

@Pasdesushi, @PhilippeMA, @Psoy (I see that you voted for both), @syper and @Kalvin maybe could you group your votes on this one and we’ll close the other (the discussion will remain accessible)?

Hello,
I did a small test by setting up a tagging system in the scenes.





I’ve modified the search to filter by tags and titles.

Does this meet your needs?

I think it’s great; for me it meets the request.

Small aesthetic question: I think the tags should be aligned differently, not centered / or not in that spot on the boxes.

Great work on the development, functionally it’s nice but I think there’s a bit of design work to do :smiley:

Editing

In terms of editing, it’s weird to have tags inside a looong textarea that takes 100% of the width of the screen

Maybe the tags could be displayed « normally Â» on a grey background, and there could be a small « + Â» button to add tags (and an « x Â» on each tag to remove it)

Something along these lines:

I think it’s important to see existing tags in order to be able to attach a scene to an already existing tag.

Filtering

We should think about a tag-based filtering system, something like this:

Regarding the cards, I think there’s some reorganization to do to make it more visual :slight_smile:

An example found on Dribbble:

(I don’t want to do that at all, it’s just to show an example :stuck_out_tongue: )

You’re right, I just used a lib « react-tag-input-component Â»

Ok I don’t see anything similar as a lib on the internet. I’ll probably create my own component. Should I try to make it as generic as possible so we can use it elsewhere?

Yes, now that you say it it’s obvious.
I think I’ll have to make changes in the models for that because for the moment I had gone with an array of strings in the devices. But to have access to all the tags of all the scenes I think I’ll have to create a « tags Â» table and a « device_tag Â» table. And therefore add new CRUD routes to manage the tags, what do you think?

Again, I think adding a « tags Â» table is important because that will avoid having to go through all the scenes to get all the tags.

Wouldn’t it be better to abandon the table view of scenes for just a list? Because we’re adding more and more things to the scenes display and we have less and less space.

That’s better, yes :slight_smile:

I imagine you mean « scenes Â» and not device

Indeed I prefer a relational approach, we’re rather relational on the project :slight_smile:

I see 2 options:

  1. Either as you described, a « t_tag Â» table, and « t_tag_scene Â»
  2. Or a single « t_tag_scene Â» table, making the relation between a scene and a tag (as text)
t_tag_scene:
- scene_id uuid
- name text

To find all available tags, simply do:

SELECT DISTINCT name FROM t_tag_scene

The option with the relation table is good if we ever wanted to really add additional options to the tags, but in our case here it might be overkill

I’d lean more towards option 2 personally, what do you think?

I don’t think so, we just need to rethink the display inside the card :slight_smile:

@pierre-gilles :
I’m making a small suggestion using the « react-select Â» lib that we already use in gladys.


But I’m not yet a fan of the result. What do you think?

Your solution is not bad, but it looks « odd Â» within the rest of the editing interface.

Just my two cents, personally I like it this way :slight_smile: it’s not intrusive, it’s easy to use, it gets the job done, I think

The relational table is surely a good idea; reading that I thought it could be useful to be able to work on the devices!! I’m thinking specifically of MQTT devices that are also used virtually. Being able to link virtual devices to physical devices via tags, for example group the virtual ones, etc!!

Not a fan either, functional but it looks a bit like a « big block Â» in the middle of the screen, it doesn’t really fit into the existing design

If you don’t have many ideas, what I usually do is see how other products handle it: open a few products you use that have this kind of tagging system, and see how they do it. There’s no point reinventing the wheel when designers from big companies have already worked on this for hours :wink:

For example, GitHub has split their « issue Â» page into 2 parts:

With the editing on the right (tags, etc..)

If you look at Zapier (which does the same thing as us: scenes), they have the same behavior as GitHub, a bar on the right:

If you click on « Settings Â», it looks like this:

I’m not saying it’s the solution, but in my opinion it’s worth exploring! It would allow you to put your component « react-select Â» in a sidebar that would be « delimited Â» and wouldn’t take 100% of the width.

I have quite a few projects in mind for the scenes: viewing the execution history of the scenes, with what happened in each run, and that could fit in this sidebar :slight_smile:

What do you think?

One thing at a time, let’s stay focused here.

Very promising!

This morning I was thinking that we could add filters to the scenes view.
For example: active / disabled / by type of triggers (selection of devices) / etc.