Diseño básico de la interfaz de usuario de Node-Red

1. Introducción a la interfaz de interfaz de usuario

El diseño de la interfaz de usuario depende de los atributos de pestaña y grupo en el nodo. Tab puede entenderse como una página, y Group es un grupo. La pestaña puede contener Grupo.
Al usar el control del tablero, puede establecer los nombres de pestaña y grupo de los nodos, y puede verlos en la interfaz de la interfaz de usuario después de la configuración.

2. etiqueta del tablero

Al usar el nodo del tablero, habrá una pequeña etiqueta llamada tablero junto a la "Ventana de depuración" en el lado derecho de la pantalla, y hay tres opciones de Diseño, Tema y Sitio debajo.
Diseño significa diseño. En Diseño, puede reorganizar pestañas, grupos y controles, y editar sus propiedades. También puede agregar otras páginas web a la pestaña.
Sitio significa la dirección, puede configurar la interfaz de usuario del título o seleccionar la barra de título. También puede configurar los gráficos básicos del diseño de la cuadrícula en unidades de píxeles, que es la "unidad" que es de 48 píxeles por defecto como se mencionó hace un momento, o configurar los controles por separado. El tamaño del grupo Tema significa el tema
. Puede elegir brillante, oscuro o personalizado.

(1) Disposición

En la pestaña Diseño, puede ver las Pestañas y Grupos de todos los programas, y ver los nodos contenidos en las pestañas correspondientes.Por supuesto, la función más importante es la revisión del diseño. Aquí hay dos métodos de revisión, que se pueden ajustar según las preferencias.

1. Modificación de diseño-1
   Mantenga presionado el nodo que desea mover con el botón izquierdo y arrástrelo a una posición adecuada.Habrá una línea de puntos para marcar la posición de destino.
   Ventajas: Este método es más rápido de arrastrar y fácil de operar
   Desventajas: El tamaño del nodo debe configurarse al configurar Tabulador o Grupo, y automáticamente llenará la posición vacante de acuerdo con el tamaño del nodo. del nodo no es uniforme, la interfaz no es hermosa.
   
2. Modificación de diseño-2
   Haga clic en Diseño después del nombre de la pestaña para ajustar el diseño de los nodos en toda la interfaz. Cuando el nodo no está bloqueado, significa automático y el tamaño no se puede ajustar; cuando el nodo está bloqueado, puede arrastrar y soltar el nodo a voluntad y modificar la longitud y el ancho del nodo.
   Ventajas: al usar este método para modificar el diseño, modifique el diseño de la interfaz y el diseño visto para la interfaz de la interfaz de usuario, y la comprensión general del diseño es alta; Desventajas: solo se pueden modificar los nodos en esta pestaña
   . La interfaz de la interfaz de usuario muestra varias pestañas. El orden de las pestañas no se puede ajustar.
   

(2) Sitio

Hay muchos contenidos modificables en la interfaz de diseño del sitio.

1. Título: El nombre de la interfaz de usuario se puede modificar. El nombre mencionado aquí se refiere al nombre de la pestaña del navegador;
2. Opciones:

• En el menú de opciones, puede modificar la visualización u ocultar el marco de la etiqueta. El marco de la etiqueta es la parte horizontal que muestra el nombre de la pestaña en la interfaz de la interfaz de usuario. El color predeterminado es azul; el siguiente es un diagrama de efecto de comparación de las dos opciones ;
  

• Elija mostrar u ocultar el nombre del menú, el nombre del menú es la parte vertical del nombre de la pestaña que se muestra;
  

3. El formato de fecha es el formato de fecha. Para obtener más información, puede consultar los detalles en la esquina superior izquierda del cuadro de entrada e ingresar a la interfaz de detalles para ver;
4. Los tamaños pueden ajustar el tamaño de la ventana 1x1, el espaciado de la ventana, etc.

(3) Tema

Node-red también puede establecer diferentes temas para la interfaz de la interfaz de usuario, incluidos el día, la noche y la personalización; en el tema del día o de la noche, también puede personalizar el color de la barra, el color de la fuente de la pestaña, el color de fondo predeterminado del nodo, etc.; También puede modificar todo el tipo de letra de los números o letras de la interfaz de usuario.