ESP8266实现网页交互

 

前言:

物联网LOT(intermet of things)时代,万物互联,wifi芯片是非常重要的,乐鑫的高性价比的ESP8266芯片凭借低功耗低成本高集成度等优势在市场上占有较高的份额,为什么选用这款芯片可以参考之前的调研报告。在之前的资料整理中,涉及到了硬件设计及软件下载开发等多个方面,但是在软件SDK如何开发,程序如何下载等方面学的并不够细致,在一些场景下,需要我们基于官方提供的程序进行二次开发,但是打开程序后,一看,都是什么鬼,完全无法入手,资料那么多,我又该从哪开始看,希望经过本轮的学习,能够快速的对该芯片进行二次开发。

接下来开始我们的学习吧。(整个学习框架可配合思维导图进行查看)

程序开发使用乐鑫官方提供的NONOS-SDK进行开发,并且之前主要开发单片机,所以更习惯使用集成开发环境,接下来也使用安信可提供的IDE进行开发,不过你也可以使用乐鑫提供的liunx开发环境进行开发。

一.环境搭建

工具

版本

说明

ESP8266 IDE

V0.5

集成开发环境,用于程序的开发及编译(安信可提供)

Flash_download_tools

V3.6.5

程序下载工具(乐鑫)

NONOS-SDK

V3.0

SDK开发包(乐鑫)

ESP-12F.pdf

 

模组原理图及说明

ESP8266调试工具_V2.1

V2.1

调试工具(安信可)

 

安信可资料获取:https://wiki.ai-thinker.com/esp8266

乐鑫资料获取:https://www.espressif.com/zh-hans/support/download/other-tools

 

无论使用乐鑫做的模组还是安信可制作的模组,原理是一样,可能也就是IO口分布不太一样,当我们购买了单模组可以直接通过简单搭建进行测试,也可以直接购买测试板,模组的以下几个引脚需要注意。

一般的测试板都是通过在GPIO0加个按键来实现模式的切换,这里我们使用安信可的ESP-12F进行测试。

 

接下来我们需要安装安信可IDE集成开发环境,软件从安信可官网可以下载,我使用的是的v0.5版本,那它怎么安装怎么使用呢???

https://wiki.ai-thinker.com/esp8266 这个网页里都有。

一步步看一下就行了。

 

那我们如何对下载的SDK进行配置,导入及编译呢???

 

二.SDK的下载及编译

现在我们从乐鑫官网下载最新的无系统SDK,ESP8266_NONOS_SDK-3.0,进行解压

我们会看到如下文件夹,为了更好的理解,简单说下各个文件夹的作用。

driver_lib重命名为app(用户程序文件,命名随意),然后将examples下文件夹复制到app目录下,例:将lOT_Demo(任意实例)文件替换到app文件夹,为了简化结构,删除整个examples文件夹,ESP8266_NONOS_SDK/third_party/makefile 重命名为 makefile.bak ,以防止编译时报错,接下来,我们启动 ESP_IDE,将项目导入 Eclipse

https://wiki.ai-thinker.com/ai_ide_use (详细步骤可查看这个网址)

导入后就可以进行编译啦,编译前需要进行保存,否则编译的为未保存之前的文件。

编译前clean project.我们可以看到已经编译出了可以下载的固件。通过这个实例我们可以将程序进行简单的修改,就能成为我们自己的工程。

注:使用ESP8266_NONOS_SDK 2.x的版本是可以正常编译的,由于我使用的3.0版本,直接这个步骤会报错,所以根据3.0版本还需要做一些修改。

打开工程sdk的顶层makefile,找到配置变量SPI_SIZE_MAP,修改为432Mbit flash

以下为编译成功信息。

 

三.将SDK整理成模板

现在将sdk 3.0的程序整理一下之后作为模板进行使用。调整app文件夹文件如下

 

其他文件均删除。User_main.c中剩余user_init,和user_pre_init。

user_init:上层程序的入口函数,给用户提供一个初始化接口。

user_pre_init:配置RF初始化,注册地址信息等。

2.0版本与3.0部分函数有一点区别,2.0不再单独说明。

Esp8266实际上就是一个单片机,在以往的单片机开发中,我们都知道会有main函数作为入口函数然后有死循环,同时还会有定时器等。

例:

int main(void)

{

初始化

While(1)

{

主循环进行处理

}

}

Void xxx_IRQ(void) //中断

{

中断处理

}

ESP8266 SDK编程基于“内核回调”的方式:(功能均在库中实现,对用户不透明)

Void user_init(void)//内核为用户提供的初始化接口函数

{

//IO口,定时器,中断等的初始化

}

*****以下为sdk内部操作***

{

User_init();//用户应用初始化

While(1)

{

//执行内核功能

//执行用户功能 例:用户初始化了一个1s定时,那么这里将进行定时器计时

}

}

回调函数:当满足条件是,内核会调用回调函数

例:user_init中初始化1s定时。

然后直接从void xxx_cb(void)回调函数中做相应的操作就可以了。那么esp8266有几种函数形式呢??分为四类:应用函数 回调函数 用户任务 中断函数

应用函数说白了就是我们平时封装的函数,主要实现一些功能,被其他函数调用。

回调函数就是初始化后,满足条件会被调用。用户任务,在系统空闲的时候,会调用任务函数,任务函数Non-os中,只支持3个用户任务,优先级2>1>0.中断函数就不解释了。详细的可以查看官方的sdk编程指南,里面有详细的解释。

四.简单的程序编写

模板现在有了,为了更快的使用SDK开发,接下来我们使用模板写一个简单的hello world

串口打印程序吧。参考文档:2c-esp8266_non_os_sdk_api_reference_cn(api说明文档)

  1. 添加.h头文件
  2. User_init中调用api打印函数

os_printf("SDK version:%s\n",system_get_sdk_version());//打印版本

  1. 由于8266默认串口0打印波特率为 74800,所以需要重配置一下,要想重配置就要调用串口驱动中的函数,接下来添加串口驱动。

sdk->driver_libdirverinclude 中的文件添加到app下的对应文件夹下。

  1. 引用.h文件。
  2. 然后下载验证

现象正常,此时第一个程序就验证完成了。

 

其他的驱动操作步骤都是类似的就不一一去操作了。

五.实现网页控制

我们当前的目的是写一个网页,通过控制网页来实现led亮灭的控制。那么该如何实现呢,让我们进行下关键点的梳理。

 

Esp8266相当于作为一个web服务器,当我连接wifi后通过外部设备输入相应的IP,esp8266进行解析,将存储在8266,falsh中的网页读取并显示出来,当我点击网页上的按钮后,8266进行解析,控制灯亮。网页与服务器之间使用Get/POST协议。

 

首先,将ESP8266作为AP模式,创建局域网。使外部设备能够接入ESP8266,

Esp8266建立TCP server,打开相应端口,接收客户端的访问数据,进行相应的应答。

写一个html网页,将网页烧写入FLASH中的user_param区中。

当客户端以指定的格式发送数据给服务器时,发送网页给客户端。

1.8266设置AP模式,建立wifi热点

  1. 创建TCP_server,建立帧听
  2. 等待clientl连接server,等待接收数据
  3. 根据接收的数据,读取flash中的网页,返回给浏览器。
  4. 当按下网页上按钮后,进行灯的亮灭控制。
  5. Html的制作,下载到flash中相应位置。

注:以手机浏览器为例,其访问的ip地址,过程是怎样的?

我们把8266作为服务器端,手机浏览器作为客户端,一般都是使用get请求,除非指定post提交。请求后,8266肯定要以http协议数据来回复内容的

1.知识扩展

(1)网络结构:

接下来我们说一下网络结构。

学过网络的都知道

OSI模型七层结构:应用层,表示层,会话层,运输层,网络层,数据链路层,物理层。

TCP/IP 协议四层结构:应用层,传输层,网络层,网络接口层。

常用的五层协议:应用层(TFTP,HTTP,FTP,DNS,Telnet),传输层(TCP,UDP),网络层(IP,ICMP(ping),RIP,OSPF,BGP,IGMP),数据链路层(SLIP,CSLIP,PPP,ARP,RARP,MTU),物理层。

 

例:小A在小B处买了一本书,小B叫来了快递公司快递员小C,小C检查包装,并在包装上填写好物品名称,收获人,地址等信息,然后将包裹带回了快递公司给了物流处,物流处查看包装信息后是北京的包裹,就将包裹放在飞机上运往北京,北京快递员小D接收到后,检查包裹,查看地址,将包裹配送给小A。

 

小A和小B处在最上层,相当于应用层,依赖快递员小C和小D的服务。小C和小D为传输层,负责对书检查,打包等工作,填入地址等信息。快递公司物流处属于网络层,根据客户信息决定将包裹发到哪里,飞机属于网络接口层,以自己的方式完成物流处递交来的包裹运输。

 

1997年IEEE制定无线局域网的协议标准802.11,系列标准。使用星型拓扑,中心接入点叫做AP。使用802.11系列协议的局域网又称为wifi。

 

(2)GET/POST

 

GET和POST是什么?HTTP协议中的两种发送请求的方法。

HTTP是什么?HTTP是基于TCP/IP的关于数据如何在网中如何通信的协议。

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP,也就是说,GET/POST都是TCP链接。

(3)html制作

Esp8266设置AP模式,建立热点后,作为tcp_server等待client接入,此时使用手机连入网络,然后打开浏览器,输入192.168.4.1:8266 此时浏览器弹出界面。

输入url使用get机制,操作网页内部按钮使用post机制。

程序内部:

URL的解析,及从flash读取的数据到网页的转化该怎么实现

网页该怎么写??

打开dreamweaver,新建html网页

新建一个表单,设置为post方法,新建按钮用于提交表单。详细的可以自行学习网页制作相关知识。

我们平时访问百度等,可以通过浏览器抓一下过程,esp8266也要模拟该过程进行网页的提交,我使用火狐自带的抓包工具(F12),一般IE自带的抓包工具也可以。

 

 

 

 

 

 

六.固件下载:

我们要将生成的固件烧写到我们的板卡中,那么怎么下载呢

 

 

 

那么固件的烧写地址是怎么得到,FLASH地址是怎么分配的,详细可查看《安信可ESP8266入门教程》 《程序下载》

(1)NON-FOTA(不支持云端升级)

 

 

 

乐鑫不同版本的SDF可能会改变文件的烧写地址,以控制台输出地址为准。

(2)FOTA(支持云端升级)

 

 

 

 

实例一:

将web_server工程生成的文件下载到8266中,地址使用编译器提示的地址。

Html的地址放在0x64000地址。

通过手机连接ESP8266_HA wifi,密码12345678

使用浏览器输入192.168.4.1:8266

点击开灯按键,板卡上灯亮。

实例二.(支持微信一键配网,支持网页固件升级,支持网页参数配置)

将plug2.0进行编译,生成固件

输入192.168.40.117/upload,会弹出升级界面,进行网页的升级。

然后输入192.168.40.117进入主界面。

可控制灯,及网络相关参数配置。

 

 

八.项目应用

可将esp8266模块应用到大多数的板卡中,测试人员可通过连入网页实现对设备的升级,参数修改,降低维护成本。示意图如下所示:

输入192.168.40.117(之后固定使用192.168.4.1)会弹出如下界面

 

输入192.168.40.117/upload,弹出升级界面

 

  • 29
    点赞
  • 162
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值