ESP8266 + FLProg-创建基于Web的配置界面

来源

前一篇关于FLProg和ESP8266结合的文章已经过回顾,现在我们将考虑更详细地使用此控制器在程序中工作。

与arduino一样,在项目上的工作始于选择控制器。 与以前的版本不同,为了方便用户,将控制器移至文件夹的树形结构。



选择特定的控制器或板时,您可以查看其图像,引脚排列以及技术规格。

创建Web配置界面时的主要工作是在项目树中完成的。
首先,配置接入点。

我们将项目树打开到包含“ 访问点 ”的位置,然后双击分支“ 已禁用 ”,打开访问点即可使用。



在打开的分支中,配置接入点设置。 要更改所需的参数,请双击相应的分支。



网络名称(SSID) -接入点将组织的网络名称。
连接密码-连接到接入点的密码。 如果留为空白,则接入点将没有密码且可免费连接。

IP地址 -控制器在接入点创建的网络中将拥有的IP地址。 然后,您可以在此地址连接到控制器。

设置IP地址后,其余参数(“ 子网掩码”和“ 网络网关” )将自动填充,但是如果需要,可以更改非标准值。

结果应该是这样的。



我们已经完成了接入点,我们可以折叠该节点,然后转到客户端。 我们还扩展了它的节点,并通过双击“ Disconnected ”分支来启用它



自定义客户端。 有两个用于配置客户端的选项。 直接设置网络设置,并通过DHCP接收设置。 首先,我们使用第二个选项。



请注意,出于安全原因,连接密码未显示在项目树中。

Wi-Fi接口的设置完成。 我们关闭(如果需要)客户端节点,然后继续设置Wi-Fi固件更新模式(如果需要)。 仅当客户端打开时,此节点才会出现。

我们通过双击“ Disabled ”分支来启用此模式



我们设置必要的参数(通过双击相应的分支来更改参数的值)。



密码 -在填写新固件之前设置密码时,需要输入密码。
设备名称 -此名称将显示在Arduino IDE中连接端口的名称中。

在此处阅读有关Arduino OTA模式的更多信息。

现在,我们直接进行Web配置界面的创建。 打开“ Web配置界面 ”节点,然后双击“ 禁用 ”分支将其打开



Web设置界面是一组带有参数的页面。 如果有多个页面,则会自动生成一个菜单来访问它们。 对于每个页面,如果您在整个Web设置界面中使用通用样式,则可以设置自己的CSS样式。
要为整个Web界面配置通用的CSS样式,请双击“ 常规样式 ”分支



常规样式设置窗口打开。



在“ 样式描述 ”选项卡上直接有一个输入字段,用于描述适用于所有设置页面的样式。 默认情况下,此字段已使用样式填充,以创建标准界面。 但是,如果要更改页面的设计,则可以更改它们。

在“ 样式 ”选项卡上,您可以指定用于特定页面元素的样式的名称。



默认情况下也填充此选项卡。

在“ 文本 ”选项卡上,您可以输入页面上使用的主要元素的文本。



要将对话框的所有值恢复为默认值,可以使用“ 默认 ”按钮。

如果常规样式中指定的样式和文本设置未被特定页面的样式设置阻止,则它们会应用到所有设置页面(我们将在下面考虑)
页面显示在“ 设置页面 ”节点中。 我们揭示它。



默认情况下,总是有一页。 打开其节点后,便可以访问其设置。



主页地址-主设置页面的地址。 默认情况下, 主机是网络上控制器的地址。 如有必要,您可以进行更改。 将其更改为主机/设置地址(双击此分支)。



页面名称 -菜单中页面的名称。 保留它的名称-“ Home
页面样式 -双击此分支将弹出该特定页面的样式设置对话框。







在此对话框中,可以为此页面添加其他CSS样式,并为设计元素分配样式和文本。 您也可以重新定义“常规样式”对话框中描述的样式。

在“ Parameters ”节点中,设置页面上显示的参数 。 在主页上,我们将设置以纯文本格式显示通过DHCP从路由器收到的IP地址。 通过双击“ 添加参数 ”分支来添加参数



打开用于创建新参数的对话框。 其中,对于初学者,请按按钮以选择系统参数。



将打开可用系统参数的列表。 选择参数“ Wi-Fi客户端-IP地址 ”。



在标签字段中,输入此参数的文本标签,然后在参数类型字段中,选择“ 文本



创建参数后,将出现一个项目树的新节点,您可以在其中配置此参数的样式,更改参数设置或删除它。



保存按钮”“重置按钮”节点指定页面上数据保存和控制器重置按钮的可用性。 由于我们的主页上没有任何可更改的数据,因此可以通过双击“ Used ”分支来禁用页面上的这些按钮(默认情况下,按钮显示在页面上)。



通过双击“ 添加页面 ”分支来添加新页面



将打开用于创建新页面的对话框。 在其中填写页面名称(在设置界面菜单中将被称为)和地址。 子页面地址总是转到主页地址。 在此页面上,我们将配置接入点设置。



与主页一样,在新页面节点中,您可以更改页面地址,名称,为此特定页面设置样式,设置显示的参数和按钮的存在。 好吧,此外还有删除页面的功能。



将参数“ Wi-Fi接入点-网络名称(SSID) ”添加到页面中



我们将为其选择“ 输入字段 ”类型和“ 网络名称 ”标签



以相同的方式,添加接入点的其余参数。



如果页面上有多个参数,则分支会出现在参数节点中,以更改参数在页面上的显示顺序。

由于页面上有可变参数,因此我们将在其上保留控制器的“保存”和“重新加载”按钮。

在样式对话框中为该页面设置该页面的标题。



在相同的情况下,创建一个带有客户端设置的页面。 对于参数“ Wi-Fi客户端-通过DHCP获取IP ”,我们设置“ 复选框 ”参数的类型



如果页面节点中的界面中有两个以上的页面,则也会显示控制界面菜单中页面位置的分支。 但是主页始终始终是第一页。



目前,访问界面和所有页面都是免费的。 我们引入了访问限制。 为此,请双击“ Access to Interface ”节点的“ Free Access ”分支。



现在,您将需要登录以访问界面。 可以设置有效授权时间。 默认情况下是15分钟。 在此时间之后,在上次用户活动之后,将自动重置当前用户。 可以通过双击相应的分支来更改此时间。



在“ 用户 ”节点中,可以设置所需的用户数。 总会有一个超级用户(默认登录名为admin )。 所有页面和参数始终对他可用。 对于任何用户,您都可以在其站点中指定用户名和密码。



创建一个新用户,该用户将有权配置访问点。 为此,双击“ 添加用户 ”分支。 将打开“添加用户”对话框。 在其中,我们将设置新用户的用户名和密码



并创建另一个可以配置客户端的用户。



通过登录名和密码启用访问后,“ Exit ”按钮将出现在所有页面上,用于退出当前用户。 保留在所有页面上。



现在配置对页面的访问。 主页始终对所有用户可用。 在其余页面的节点中,出现了一个新的分支“ Access ”。 在“ 访问点 ”页面的节点中双击该分支。



将打开一个对话框,用于选择要访问该页面的用户。 默认情况下,访问对所有用户开放。 取消选中用户“ User_Client ”,从而限制其对该页面的访问。



同样,我们将访问客户端设置页面的权限限制为用户“ User_Tochka



让我们创建另一个页面来设置用户名和密码



将所有用户的登录名和密码参数添加到此页面。 在通过登录名和密码启用访问后,这些参数将出现在系统参数列表中。



对于此页面,我们将不配置访问限制,而是直接在参数上配置限制。 访问设置分支出现在参数节点中,类似于页面访问设置。



拒绝管理员参数对两个用户的访问,而我们仅保留这些参数所属的用户对用户参数的访问。

在此基础上,我们认为Web界面的配置已完成。

按下程序主界面中的“编译项目”按钮,并在Arduino IDE中获得现成的草图。





在Arduino IDE上,我们选择板子。



以及控制器所连接的端口



然后将固件填充到控制器中



所以,我们得到了什么...

下载后,将出现一个新的接入点。



我们已经连接到它,然后转到我们在项目中设置的地址。 出现登录页面。



输入密码和管理员登录名,然后转到主页



我们在菜单中看到所有页面





并在登录和密码页面上的所有参数。



我们离开并在User_Tochka登录 。 我们在菜单中仅看到可访问的页面,只有我们的用户名和密码



我们已经在User_Client登录 ,该图片是合适的-我们只看到应该的内容



我们打开Arduino IDE,并在端口设置中看到控制器已准备就绪,可以“无线”更新固件。



今天就这些了。

在下一课中,我们将考虑用户系统参数以及与精确时间服务器的同步。 在此处下载在本课程中创建的项目。

UPD
本课程是针对3.1.4版创建的,目前已在预发布测试中。 您可以在此处下载。 您可以从中心的公司博客项目网站论坛 了解有关FLProg项目的更多信息。 此外,在ArduinoProm频道上, 可以观看各种各样的视频课程。

Source: https://habr.com/ru/post/zh-CN422053/


All Articles