¿Escenas en modo nodeRED?

Hola a todos,

Hacía varios meses que no podía tocar Gladys.
Me vuelvo a poner unos días con ello (aprovecho unos días de descanso).
Y lo que me salta a la vista es la pesadez del funcionamiento de las escenas.
De hecho, el sistema de bloques es realmente pesado y poco legible.

Lo ideal sería tener un sistema como el de node RED (que no domino en absoluto), es muy visual e intuitivo…
La idea sería conservar los bloques existentes actualmente (disparadores, acciones, condición, prueba…) pero visualizarlos como pequeños bloques en el lienzo.
Quizás podríamos usar React Flow ya que Gladys está en prereact de lo que he visto en la documentación.
Después no sé en absoluto el trabajo que requeriría…

Pero estoy convencido de este enfoque que es realmente amigable para el usuario.

Ejemplo con un botón que gestiona un ventilador a través de un enchufe conectado.
1 clic en el botón: Enciende el enchufe conectado
2 clics en el botón: Apaga el enchufe conectado
1 clic largo en el botón: Enciende el enchufe y lo apaga después de 2 horas.

Es posible crear 3 escenas diferentes pero terminamos con cantidades de escenas…

Crear una escena que lo gestione todo, lo que me gusta mucho más.

Pero terminamos con algo bastante pesado del tipo :


Si pudiéramos usar un sistema de lienzo, podríamos ser mucho más simples y legibles con algo como :

¿Cuáles son sus opiniones?
Tanto los desarrolladores como los usuarios.

Gracias a ustedes y buen fin de semana :slight_smile:

Es un muy buen feedback, aunque representa un gran trabajo :wink:

Estoy de acuerdo en que hay algunos puntos de fricción en la interfaz actual de creación de escenas. Sin embargo, no estoy seguro de que volver a hacerlo todo sea el mejor enfoque, después de todo son años de trabajo :grinning_face_with_smiling_eyes:

En mi opinión, corregir progresivamente estos puntos de fricción ya es un excelente primer paso.

Por mi parte, una reescritura completa de las escenas no está prevista en el roadmap :slightly_smiling_face:

Entiendo que representa mucho trabajo, pero realmente creo que sería una verdadera ventaja con respecto a otras aplicaciones y es tan fácil de usar :slight_smile:

Y, a largo plazo, si es lo que va a pasar, cualquier desarrollo adicional del sistema actual se perderá al final.

Claude recomienda hacerlo en 3 etapas:

  1. Solo en modo visualización, basándose en las escenas actuales además del sistema actual

  2. En modo edición compatible con el sistema actual

  3. Reemplazo del sistema actual

Pero bueno, es fácil decirlo para él XD

La esperanza hace vivir :slight_smile:

Uno de los puntos especialmente pesados en las escenas es la anidación de los « Si … Entonces … Sino ». Además de ser largo de hacer, es difícil de releer porque es muy difícil tener una visión global.

Necesitaba encadenar 5 o 6 condiciones para traducir en « Texto claro » los valores posibles de un código de error en la API PALLAZZETTI, dudé en hacerme un NodeRED para poder usar un nodo « Cambiar »

¡Estoy de acuerdo!

En tu caso, probablemente no necesites anidar: puedes simplemente encadenar 6 condiciones de manera lineal. Así evitas tener una estructura demasiado ancha horizontalmente y demasiado “comprimida” para leer.

Creo que hay algunas mejoras de interfaz de usuario que hacer para que el bloque “Si… Entonces… Si no” sea menos masivo. Por ejemplo, permitir pasar a pantalla completa con un clic, un poco como hace Notion :slightly_smiling_face:

Pues eso es lo que hago yo, encadenar unos IF tras otros (no anidados) pero al final acabas con escenas interminables.

He modificado el CSS para que sea casi pantalla completa, eso mejora un poco pero sin más.

Después de varios días de intercambio con Claude, he llegado a esto:

Partiendo del sistema actual

Esto da:

PD: los enlaces verdes y rojos de los subbloques ahora son grises.

Partiendo del nuevo sistema:

Esto da en el sistema actual:

Parece que funciona bien, pero realmente habría que probar todas las acciones posibles.

Un pequeño video de demostración:

Francamente, creo que queda bastante bien, aunque aún hay cosas por gestionar.

Contenedor de prueba: Package gladys · GitHub

El código: Comparing GladysAssistant:master...Hizoka76:feat/canvas_style · GladysAssistant/Gladys · GitHub
Atención, gestiona muchos nuevos tipos de bloques que actualmente no existen en Gladys

¡Es muy agradable este cambio entre la vista en « pasos lineales » como hoy, y la vista en « bloques visuales »!

Efectivamente, eso me habla más también :eyes:

Bonito trabajo con Claude

Si alguien quiere probar: Package gladys · GitHub

He utilizado mi base de datos gladys para revisar las escenas y es francamente limpio, no perfecto, he pedido algunas correcciones y he retrasado un contenedor.

Probaré que funcione bien en los próximos días.

Muy simpático, es súper limpio :heart_eyes:

¡Y excelente idea tener un interruptor entre los dos modos!

Me pregunto cómo se verá la vista gráfica en móvil.

No lo había probado en el teléfono.

El diseño es correcto:

Pero la colocación de los bloques debe volver loco XD

Cuando quieres mover un bloque, tienes la ventana de propiedades que se abre y te oculta la vista.
Esto debería ocurrir al soltar el clic y no al hacer clic.

Cuando quieres trazar un enlace, no ves dónde lo colocas porque tu dedo lo tapa.

¡Bravo por el trabajo, hay muchas cosas interesantes! El cambio entre las dos está muy bien hecho.

Lo he estado usando durante 2 días en mi producción.

Los pocos problemas que he tenido ya están resueltos.

Me ha permitido reducir el número de escenas y ganar claridad.

y he añadido un pequeño sistema de enlace a la documentación :slight_smile:

¡Qué bien @Hizo, excelente trabajo :clap:

Tan pronto como creas que está listo para ir a producción en Gladys, tendrás que crear una PR en el repositorio principal :slightly_smiling_face:

Algunos puntos a verificar antes de abrir la PR:

  • El código ha sido bien formateado con Prettier
  • El linting de ESLint funciona correctamente
  • El código está bien probado, con un 100 % de cobertura en el código añadido
  • Las traducciones FR, EN y DE están completas y limpias
  • El código está limpio y no hay grandes aberraciones generadas por la IA

¡Tengo ganas de verlo llegar a Gladys!

He añadido la posibilidad de hacer ctrl + z y ctrl + y al realizar cambios :slight_smile:

Y ahora también es posible añadir comentarios.

La altura está limitada a unas pocas líneas.

@pierre-gilles
Se necesitarán más comentarios de los usuarios para asegurarse de que está bien.
Y el día que queramos pasarlo a Gladys, tendremos que mirarlo juntos.
Y tendrás que dar tu opinión sobre los términos, el diseño…
Sabiendo que mi versión de prueba tiene en cuenta bloques que no existen en Gladys actualmente.
Tengo una rama que debería estar bien para Gladys actual.

Acabo de generar una nueva versión, no he cambiado nada, solo he fusionado con la v4.82 de gladys

El enlace sigue siendo: gladys versions · hizoka76 · GitHub

No he tenido ningún problema con el sistema hasta hoy (no hay experiencia con la v4.82)

Acabo de actualizar a la v5 que es realmente genial.

Pero sigo pensando que el modo nodered es realmente práctico :slight_smile:

¿Por qué no tener un modo avanzado para quienes lo deseen?