查看“Microduino W5500网络(八)/zh”的源代码
←
Microduino W5500网络(八)/zh
跳转至:
导航
、
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
{| style="width: 800px;" |- | ==目的== 本教程将教大家如何控制两个Led,并用更为时尚的网页元素—图像。 ==设备== *'''[[Microduino-Core/zh]]''' *'''[[Microduino-USBTTL/zh]]''' *'''[[Microduino-W5500/zh]]''' *'''[[Microduino-RJ45/zh]]''' *其他硬件设备 **USB数据连接线 一根 **LED灯 两个 **220欧姆电阻 两个 ==图像== 首先你要明白当一个网页引用了一些外部资源(如图像,javascript...)后的处理流程: *用户的浏览器连接web服务器,请求HTML网页。 *浏览器解析页面,找到外部资源。 *浏览器向服务器请求每一个外部资源。 当服务器应答,它在响应的头文件中告诉浏览器他发送的文件MIME类型。下面这个例子(用Fiddler嗅探)是关于PNG图像。 [[File:Fiddler嗅探.jpg|600px|center|thumb]] Microduino代码应该能够: *读取浏览器的请求(保存在buffer中)。 *识别浏览器请求的资源(HTML页面、图像...)。 *创建一个正确的头文件(含类型Content-Type)。 *发送头文件和请求的资源到浏览器。 ==二进制资源== 图片是一个二进制文件,在这个例子中我们应该能够把它以字节数组(byte arrays)的形式存放在我们的代码中。bin2h这个工具可以帮助我们进行转换。 转换结果是一个文本文件: [[File:Bin2h.jpg|600px|center|thumb]] 为了节省Microduino内存,我们用PROGMEM指令存储在flash中: [[File:W5500Imagebincode.png|600px|center|thumb]] ==原理图== [[File:MicroduinoW5500EightSchematic.png|600px|center|thumb]] *Microduino-W5500 *Microduino-RJ45 *Microduino-Core *Microduino-USBTTL 层层堆叠,再插上网线。 ==程序== ==调试== 步骤一:首先需要确保你的IDE中有_02_Microduino_Ethernet_WIZ库,如果没有下载放到你的IDE的libraries文件夹中,重启IDE。 步骤二:如果你的IDE的libraries文件夹中还有之前的Ethernet库的话,需要删除掉,因为之前的Ethernet是根据W5100协议编写的。 然后需要改动一下_02_Microduino_Ethernet_WIZ文件以使库函数与Microduino-W5500模块的引脚对应: 先找到_02_Microduino_Ethernet_WIZ库中的utility文件夹里的w5100.h 把代码中的 #define wiz_cs_pin 8 //CS_PIN 改为 #define wiz_cs_pin 10 //CS_PIN 就可以了。 步骤三:解释一下代码: //我们的代码解析浏览器的请求,如果请求两个图片中的一个图片,调用send_png_image()方法,把它发送给浏览器。 if(strstr((char *)buffer, "GET /led_off.png") != 0) { send_png_image(led_off, sizeof(led_off)); } else if(strstr((char *)buffer, "GET /led_on.png") != 0) { send_png_image(led_on, sizeof(led_on)); } //这个方法准备正确头文件添加图形文件的二进制数据发送响应给浏览器。 client.println("HTTP/1.0 200 OK\r\n"); client.println("Content-Type: image/png\r\n\r\n"); client.write((uint8_t*)png_image, image_size); //如果浏览器的请求中包含?LEDx,Led的状态发生改变,HTML页面重新创建,根据Led的状态设定正确的图标。 if(strstr((char *)buffer, "GET /?LED1") != 0) { led1Status = !led1Status; digitalWrite(LED1PIN, led1Status); } if(strstr((char *)buffer, "GET /?LED2") != 0) { led2Status = !led2Status; 步骤四:连接好灯泡,如下图: [[File:MicroduinoW5500EightConnected.png|600px|center|thumb]] 步骤五:下载代码并编译通过。 步骤六:用浏览器访问Microduino的IP地址后,点击页面上的连个图标按钮,看看灯泡有啥反应。 ==结果== 访问你的Microduino IP地址,当用户点击其中一个图标,浏览器将请求该页面并添加?LEDx后缀:Microduino将改变相应的Led状态和图标的颜色。 ==视频== |}
返回至
Microduino W5500网络(八)/zh
。
导航菜单
个人工具
创建账户
登录
名字空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
Welcome
首页
创客大赛
大赛详情
3D打印
安装月球车
图形化编程
操控月球车
升级月球车
编程工具下载
软件下载
Arduino
Processing
Mixly
Scratch
模块套件
Microduino 102
mCookie 102
mCookie 202
mCookie 302
IBC
其他
应用套件
四轴飞行器
平衡车
小车CUBE
音乐播放器
刷卡音乐播放器
wifi气象站
彩虹音乐触摸灯
分贝检测仪
迎门汇报
LED点阵时钟
LED点阵屏幕
硬件
mCookie
Sensor
Microduino
MicroWrt
MicroNux
MicroRobot-Core
MicroRobot-CoreESP
ideaBoard
ideaBox
MicroMV
MicroAI
帮助
常见问题
帮助
工具
链入页面
相关更改
特殊页面
页面信息