FuenteLa
publicación anterior sobre la combinación de FLProg y ESP8266 fue una revisión, y ahora consideraremos trabajar en un programa con este controlador con más detalle.
Al igual que con Arduino, el trabajo en un proyecto comienza con la elección de un controlador. A diferencia de las versiones anteriores, para comodidad de los usuarios, los controladores se movieron a la estructura de árbol de las carpetas.
Al elegir un controlador o placa específicos, puede ver su imagen, pinout, así como especificaciones técnicas.
El trabajo principal al crear la interfaz de configuración web se realiza en el árbol del proyecto.
Primero, configure el punto de acceso.
Abrimos el árbol del proyecto en el punto "
Punto de acceso " inclusive y haciendo doble clic en la rama "
Desactivado " activamos el punto de acceso para que funcione.
En las ramas abiertas, configure los ajustes del punto de acceso. Para cambiar el parámetro requerido, haga doble clic en la rama correspondiente.
Nombre de red (SSID) : el nombre de la red que organizará el punto de acceso.
Contraseña para la conexión: contraseña para conectarse al punto de acceso. Si se deja en blanco, el punto de acceso no tendrá una contraseña con una conexión gratuita.
Dirección IP: dirección IP que tendrá el controlador en la red creada por el punto de acceso. En esta dirección, puede conectarse al controlador.
Los parámetros restantes (
máscara de subred y
puerta de enlace de red ) se completarán automáticamente después de configurar la dirección IP, pero si es necesario, se pueden cambiar si se requieren valores no estándar.
El resultado debería ser algo así.
Hemos terminado el punto de acceso, podemos colapsar este nodo e ir al cliente. También expandimos su nodo y lo habilitamos haciendo doble clic en la rama "
Desconectado "
Personaliza al cliente. Hay dos opciones para configurar el cliente. Configuración directa de la configuración de red y configuración de recepción a través de DHCP. Para empezar, usamos la segunda opción.
Tenga en cuenta que por razones de seguridad, la contraseña de conexión no se muestra en el árbol del proyecto.
Con la configuración de las interfaces Wi-Fi se han terminado. Apagamos (si es necesario) el nodo del cliente y procedemos a configurar el modo de actualización del firmware de Wi-Fi (si es necesario). Este nodo aparece solo cuando el cliente está encendido.
Habilitamos este modo haciendo doble clic en la rama "
Deshabilitado "
Establecemos los parámetros necesarios (el cambio del valor de los parámetros se realiza haciendo doble clic en la rama correspondiente).
Contraseña : cuando establezca una contraseña antes de completar un nuevo firmware, deberá ingresarla.
Nombre del dispositivo : este nombre aparecerá en el nombre del puerto de conexión en el IDE de Arduino.
Lea más sobre el modo OTA Arduino
aquí .
Ahora procedemos directamente a la creación de la interfaz de configuración web. Abra el nodo "
Interfaz de configuración web " y actívelo haciendo doble clic en la rama "
Desactivado "
La interfaz de configuración web es un conjunto de páginas con parámetros. Si hay más de una página, se genera automáticamente un menú para acceder a ellas. Para cada página, puede establecer sus propios estilos CSS si utiliza estilos comunes para toda la interfaz de configuración web.
Para configurar estilos CSS comunes para toda la interfaz web, haga doble clic en la rama "
Estilo general "
Se abre la ventana de configuración de estilo general.
En la pestaña "
Descripción de estilos " hay un campo de entrada directamente para la descripción de los estilos aplicados a todas las páginas de configuración. Por defecto, este campo ya está lleno de estilos para crear una interfaz estándar. Pero si desea cambiar el diseño de las páginas, puede cambiarlas.
En la pestaña "
Estilos ", puede especificar los nombres de los estilos utilizados para elementos de página específicos.
Esta pestaña también se llena por defecto.
En la pestaña "
Textos ", puede ingresar los textos de los elementos principales utilizados en la página.
Para restaurar todos los valores de este diálogo con los valores predeterminados, puede usar el botón "
Predeterminado ".
La configuración de estilo y texto especificada en los estilos generales se aplica en todas las páginas de configuración, si no está bloqueada por la configuración de estilo de una página específica (lo consideraremos a continuación)
Las páginas se muestran en el nodo "
Páginas de configuración ". Lo revelamos
Por defecto, siempre hay una página. Una vez abierto su nodo, tenemos acceso a su configuración.
Dirección de la
página de inicio : dirección de la página de configuración principal. Por defecto,
host es la dirección del controlador en la red. Si es necesario, puedes cambiar. Cámbielo a la dirección de
host / configuración (haga doble clic en esta rama).
Nombre de la página: el nombre de la página en el menú. Déjalo con el nombre - "
Inicio "
Estilo de página : al hacer doble clic en esta rama, aparece el cuadro de diálogo de configuración de estilo para esta página en particular.
En este cuadro de diálogo, puede agregar estilos CSS adicionales para esta página y asignar estilos y textos para elementos de diseño. También puede redefinir los estilos descritos en el cuadro de diálogo de estilos generales.
En el nodo "
Parámetros ", se establecen los
parámetros que se muestran en la página. En la página principal, configuraremos la visualización de la dirección IP recibida del enrutador a través de DHCP en texto sin formato. El parámetro se agrega haciendo doble clic en la rama "
Agregar parámetro "
Se abre el cuadro de diálogo para crear un nuevo parámetro. En él, para empezar, presione el botón para seleccionar el parámetro del sistema.
Se abre una lista de parámetros del sistema disponibles. Seleccione el parámetro "
Cliente Wi-Fi - Dirección IP ".
En el campo de etiqueta, ingrese las etiquetas de texto para este parámetro, y en el campo de tipo de parámetro, seleccione "
Texto "
Después de crear el parámetro, aparecerá un nuevo nodo del árbol del proyecto en el que puede configurar el estilo para este parámetro, cambiar la configuración del parámetro o eliminarlo.
Los nodos
“Botón Guardar” y
“Botón Restablecer” especifican la disponibilidad de los botones para guardar datos y restablecer el controlador en la página. Como no tenemos datos modificables en la página principal, deshabilite estos botones en la página haciendo doble clic en la rama "
Usado " (de forma predeterminada, los botones están presentes en la página).
Agregue una nueva página haciendo doble clic en la rama "
Agregar página "
Se abrirá el cuadro de diálogo para crear una nueva página. En él, complete el nombre de la página (como se llamará en el menú de la interfaz de configuración) y la dirección. Las direcciones de las subpáginas siempre van a la dirección de la página de inicio. En esta página configuraremos la configuración del punto de acceso.
Además de la página principal, en el nuevo nodo de página, puede cambiar la dirección de la página, el nombre, establecer estilos para esta página en particular, establecer los parámetros mostrados y la presencia de botones. Bueno, además existe la posibilidad de eliminar la página.
Agregue el parámetro "
Punto de acceso Wi-Fi - nombre de red (SSID) " a la página
Y seleccionaremos el tipo de "
Campo de entrada " y la etiqueta "
Nombre de red "
Del mismo modo, agregue los parámetros restantes del punto de acceso.
Si hay más de un parámetro en la página, aparecen ramas en los nodos de parámetros para cambiar el orden en que se muestran los parámetros en la página.
Como hay parámetros variables en la página, dejaremos los botones de guardar y volver a cargar en el controlador.
Para esta página en el diálogo de estilos, establezca el título para esta página.
En el mismo escenario, cree una página con la configuración del cliente. Para el parámetro "
Cliente Wi-Fi: obtener IP sobre DHCP ", establecemos el tipo del parámetro "
Casilla de verificación "
Si hay más de dos páginas en la interfaz en los nodos de la página, también aparecen ramas que controlan la posición de las páginas en el menú de la interfaz. Pero la página principal siempre sigue siendo la primera.
Por el momento, el acceso a la interfaz y a todas las páginas es gratuito. Introducimos una restricción de acceso. Para hacer esto, haga doble clic en la rama "
Acceso libre " del nodo "
Acceso a la interfaz "
Ahora deberá iniciar sesión para acceder a la interfaz. Se puede establecer el tiempo de autorización activo. Por defecto, son 15 minutos. Después de este tiempo, después de la última actividad del usuario, el usuario actual se restablecerá automáticamente. Este tiempo se puede cambiar haciendo doble clic en la rama correspondiente.
En el nodo "
Usuarios ", puede establecer el número requerido de usuarios. Siempre hay un superusuario (el inicio de sesión predeterminado es
admin ). Todas las páginas y parámetros están siempre disponibles para él. Como para cualquier usuario, puede especificar un nombre de usuario y contraseña en su sitio.
Cree un nuevo usuario que tendrá derecho a configurar el punto de acceso. Para hacer esto, haga doble clic en la rama "
Agregar usuario ". Se abre el cuadro de diálogo Agregar usuario. En él estableceremos el nombre de usuario y la contraseña del nuevo usuario
Y cree otro usuario que pueda configurar el cliente.
Después de habilitar el acceso mediante inicio de sesión y contraseña, el botón "
Salir " apareció en todas las páginas, lo que sirve para salir del usuario actual. Déjalo en todas las páginas.
Ahora configure el acceso a las páginas. La página principal siempre está disponible para todos los usuarios. Y en los nodos de las páginas restantes ha aparecido una nueva rama "
Acceso ". Haga doble clic en esta rama en el nodo de la página "
Punto de acceso ".
Se abrirá un cuadro de diálogo para seleccionar usuarios para acceder a la página. Por defecto, el acceso está abierto a todos los usuarios.
Desmarque el usuario "
User_Client ", limitando así su acceso a esta página.
Del mismo modo, restringimos el acceso a la página de configuración del cliente al usuario "
User_Tochka "
Creemos otra página para configurar nombres de usuario y contraseñas
Agregue a esta página parámetros de inicio de sesión y contraseña para todos los usuarios. Estos parámetros aparecieron en la lista de parámetros del sistema después de habilitar el acceso mediante inicio de sesión y contraseña.
Para esta página, no configuraremos la restricción de acceso, sino que configuraremos la restricción directamente en los parámetros. Las ramas de configuración de acceso aparecieron en los nodos de parámetros, similar a la configuración de acceso a la página.
Denegamos el acceso a ambos usuarios por los parámetros del administrador, y dejamos el acceso a los parámetros del usuario solo al usuario al que pertenecen estos parámetros.
En esto consideramos que la configuración de la interfaz web es completa.
Presione el botón "Compilar proyecto" en la interfaz principal del programa y obtenga un boceto listo en el IDE de Arduino.
En Arduino IDE, seleccionamos nuestra placa.
Y el puerto al que está conectado el controlador
Luego llene el firmware en el controlador
Entonces, ¿qué obtuvimos ...
Después de la descarga, aparece un nuevo punto de acceso.
Estamos conectados a él y nos dirigimos a la dirección establecida por nosotros en el proyecto. Aparece la página de inicio de sesión.
Ingrese la contraseña y el inicio de sesión de administrador, y acceda a la página principal
Vemos todas las páginas en el menú.
Y en la página de inicio de sesión y contraseña todos los parámetros.
Salimos e
iniciamos sesión en
User_Tochka . Solo vemos páginas accesibles en el menú, y solo nuestro nombre de usuario y contraseña
Hemos iniciado sesión en User_Client y la imagen es adecuada: solo vemos lo que se supone
Abrimos el IDE de Arduino y en la configuración del puerto vemos que el controlador está listo para actualizar el firmware "por aire".
Eso es todo por hoy.
En la próxima lección, consideraremos los parámetros del sistema del usuario y la sincronización con servidores de hora exactos. Descargue el proyecto creado en esta lección
aquí .
UPD
Esta lección fue creada para la versión 3.1.4, que ahora está en pruebas previas al lanzamiento. Puedes descargarlo
aquí . Puede obtener más información sobre el proyecto FLProg en
el blog de
la compañía en el centro ,
el sitio web del proyecto y el
foro . Además, en el canal
ArduinoProm , puede ver una gran variedad de lecciones en video.