查看“Microduino ENC Network (8)”的源代码
←
Microduino ENC Network (8)
跳转至:
导航
、
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
{{Language | Microduino ENC网络(八)}} {| style="width: 800px;" |- | ==Objective== This tutorial will show you how to control two leds with a more stylish webpage thanks to some images ==Equipment== *'''[[Microduino-Core]]''' *'''[[Microduino-FT232R]]''' *'''[[Microduino-ENC28J60]]''' *'''[[Microduino-RJ45]]''' *Other equipment **USB cable ==Images== First, you need to understand what happens when, in a webpage, there are references to external resources (images, javascript…: *user’s browser contacts the web server and asks for HTML page; *browser parses the page and finds external resources; *browser asks for each resource to the web server. When the web server answers, it tells the browser (in response header) the type of the file it’s sending using the MIME standard. Here’s an example (sniffed using Fiddler) about a PNG image: [[File:Fiddler嗅探.jpg|600px|center|thumb]] Microduino’s sketch should be able to: *read browser‘s request (saved in Ethernet::buffer); *identify the resource the browser is requesting (HTML page, images…); *create an header with the correct Content-Type; *send header and resource to the browser. ==Binary Resources== Images are binary files: in our simple example we should be able to store them in our sketch, in the form of byte arrays. I found a very useful utility that helps with this conversion: bin2h. Conversion’s result is a text file: [[File:Bin2h.jpg|600px|center|thumb]] To save microcontroller’s RAM memory, we store the images in the program memory using the directive PROGMEM: [[File:imagebincode.jpg|600px|center|thumb]] ==Schematic== [[File:MicroduinoENC8原理图.jpg|600px|center|thumb]] *Microduino-ENC28J60 *Microduino-RJ45 *Microduino-Core *Microduino-FT232R Stack all modules and then connect the ethernet cable, as follows: ==Program== https://github.com/Microduino/Microduino_Tutorials/tree/master/Microduino_ENC/ENCnetworkeight ==Debug== Step 1:Download the EtherCard library and copy to your libraries fold of IDE, then restart IDE. https://github.com/jcw/ethercard Step 2:Explain the program: //My sketch parses browser’s request and – if it’s asking for one of the two images – calls the method to send it back to the browser: if(strstr((char *)Ethernet::buffer + pos, "GET /led_off.png") != 0) send_png_image(led_off, sizeof(led_off)); else if(strstr((char *)Ethernet::buffer + pos, "GET /led_on.png") != 0) send_png_image(led_on, sizeof(led_on)); //This method prepares the response with the correct header and calls emit_raw_p() method to add image’s bytes to the response; finally it sends the full response back to the browser using httpServerReply method. BufferFiller bfill = ether.tcpOffset(); bfill.emit_p(PSTR("HTTP/1.0 200 OK\r\n" "Content-Type: image/png\r\n\r\n")); bfill.emit_raw_p(png_image, image_size); ether.httpServerReply(bfill.position()); } //If, instead, browser’s request contains ?LEDx, led’s status is changed and the html page is created with the correct images depending on leds’ statuses: if(strstr((char *)Ethernet::buffer + pos, "GET /?LED1") != 0) { led1Status = !led1Status; digitalWrite(LED1PIN, led1Status); } Step 3: Connect the bulb, as follws: [[File:MicroduinoENC8连接图.jpg|600px|center|thumb]] Step 4:Copile the code and download it. Step 5:Use the browser to access the Microduino's IP, then click button, observe the bulb's state. ==Result== Access the Microduino's IP address, click the button, browser will request the page and add the ?LEDx suffix: Microduino will change the LED state and the button's color. ==Video== http://v.youku.com/v_show/id_XNzA0NDEzNjUy.html |}
该页面使用的模板:
模板:Language
(
查看源代码
)
模板:Nmbox
(
查看源代码
)
返回至
Microduino ENC Network (8)
。
导航菜单
个人工具
创建账户
登录
名字空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
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
帮助
常见问题
帮助
工具
链入页面
相关更改
特殊页面
页面信息