Scenes in nodeRED mode?

Development
1

Hello everyone,

It’s been several months since I’ve been able to work on Gladys.
I’m getting back into it for a few days (I’m taking some time off).
And what stands out to me is the heaviness of the scene functionality.
Indeed, the block system is really heavy and not very readable.

The best would be to have a system like node RED (which I don’t master at all), it’s very visual and very intuitive…
The idea would be to keep the existing blocks (triggers, actions, conditions, tests…) but to display them as small blocks on the canvas.
We could maybe use React Flow since Gladys is in prereact from what I’ve seen in the documentation.
After that, I don’t know at all the work that this would require…

But I am convinced by this approach which is really user-friendly.

Example with a button that controls a fan via a smart plug.
1 click on the button: Turns on the smart plug
2 clicks on the button: Turns off the smart plug
Long press on the button: Turns on the plug and turns it off after 2 hours.

It is possible to create 3 different scenes but we end up with a lot of scenes…

Creating a scene that handles everything, which I like much better.

But we end up with something quite heavy like:

GladysActuel
GladysActuel2581×5432 773 KB

If we could use a canvas system, we could be much simpler and readable with something like:

Copie d'écran_20260419_141935
Copie d'écran_20260419_141935761×606 53.4 KB

What are your opinions?
Both developers and users.

Thank you and have a great end of the weekend :slight_smile:

2 Likes
2

It’s a very good feedback, even if it represents a significant task :wink:

I agree that there are a few points of friction in the current scene creation interface. However, I’m not sure that starting from scratch is the right approach, it’s still years of work :grinning_face_with_smiling_eyes:

In my opinion, gradually fixing these points of friction is already an excellent first step.

On my side, a complete rewrite of the scenes is not planned in the roadmap :slightly_smiling_face:

3

I understand that this represents a lot of work, but I really think it would be a real advantage over other applications and it’s so user-friendly :slight_smile:

And so, if in the long term this is what is likely to happen, any additional development of the current system risks being lost in the end.

Claude advises doing it in 3 steps:

  1. Just in display based on the current scenes in addition to the current system

  2. In edit mode compatible with the current system

  3. Replacement of the current system

But well, it’s easy for him to say XD

Hope makes life :slight_smile:

1 Like
4

One of the particularly heavy points in the scenes is the nesting of « If … Then … Else ». In addition to being time-consuming to do, it is difficult to read because it is very difficult to have an overall view.

I needed to chain 5 or 6 conditions to translate the possible values of an error code in the PALLAZZETTI API into « Clear Text », I hesitated to create a NodeRED to be able to use a « Change » node.

1 Like
5

I agree!

In your case, you probably don’t need to nest: you can simply chain 6 conditions linearly. This avoids having a structure that is too wide horizontally and too « compressed » to read.

I think there are a few UI improvements to be made to make the « If… Then… Else » block less massive. For example, allowing to switch to full screen with one click, a bit like Notion does :slight_smile:

6

For me, that’s what I do, I chain IFs one after the other (not nested) but we end up with very long scenes.

I modified the CSS to be practically full screen, it improves a bit but not much.

1 Like
7

After several days of exchanging with Claude, here’s what I’ve come up with:

Starting from the current system

FromActualToNew1
FromActualToNew11920×6134 713 KB

This results in:

FromActualToNew2
FromActualToNew22560×1500 167 KB

PS: the green and red links of the sub-blocks are now gray.

Starting from the new system:

FromNewToActual1
FromNewToActual12560×1283 191 KB

This gives in the current system:

FromNewToActual2
FromNewToActual22560×4265 509 KB

This seems to work well, but it would really be necessary to test all possible actions.

A small usage video:

Frankly, I find that it looks really good even if there are still things to manage.

Test container: Package gladys · GitHub

The code: Comparing GladysAssistant:master...Hizoka76:feat/canvas_style · GladysAssistant/Gladys · GitHub
Note, it handles quite a few new types of blocks that do not currently exist in Gladys

5 Likes
8

It’s really nice, this switch between the « linear steps » view like today, and the « visual blocks » view!

4 Likes
9

That definitely speaks to me more too :eyes:

Nice work with Claude

10

If anyone wants to test: Package gladys · GitHub

11

I used my Gladys database to look at the scenes and it’s really clean, not perfect, I asked for a few corrections and I pushed back a container.

I will test that it works well in the coming days.

12

Very nice, it’s super clean :heart_eyes:

And great idea to have a toggle between the two modes!

I wonder how the graphical view looks on mobile?

13

I hadn’t tested it on a phone.

The visual is correct:

Screenshot_20260508-093336_Chrome
Screenshot_20260508-093336_Chrome1080×2400 176 KB
Screenshot_20260508-093411_Chrome
Screenshot_20260508-093411_Chrome1080×2400 128 KB

On the other hand, setting up the blocks must drive you crazy XD

When you want to move a block, the properties window opens and hides your view.
This should happen when you release the click, not when you click.

When you want to draw a link, you can’t see where you’re placing it because your finger covers it.

1 Like
14

Great job on the work, there are quite a few interesting things. The transition between the two is really well done.

15

I’ve been using it for 2 days on my production environment.

The few issues I had were resolved.

It allowed me to reduce the number of scenes and gain clarity.

And I added a small link system to the documentation :slight_smile:

image
image374×919 18.9 KB

2 Likes
16

Great job @Hizo, well done :clap:

As soon as you think it’s ready for production in Gladys, you’ll need to create a PR on the main repository :slightly_smiling_face:

A few points to check before opening the PR:

  • The code has been properly formatted with Prettier
  • ESLint linting passes correctly
  • The code is well tested, with 100% coverage on the added code
  • The FR, EN, and DE translations are complete and clean
  • The code is clean and there are no major aberrations generated by the AI

Looking forward to seeing this in Gladys!

17

I’ve added the ability to use Ctrl + Z and Ctrl + Y for changes :slight_smile:

And now you can also add comments.

image
image374×276 17.6 KB

image
image374×337 19.5 KB

The height is limited to a few lines.

image
image413×188 11 KB

@pierre-gilles
We’ll need more user feedback to be sure it’s OK.
And when we want to move it to Gladys, we’ll need to look at it together.
And you’ll need to give your opinion on the terms, the visuals…
Knowing that my test version takes into account blocks that don’t exist in Gladys currently.
I have a branch that should be OK for the current Gladys.

1 Like