Microduino ENC网络（八）/zh - 版本历史

Radiumray9@gmail.com：/* 原理图 */

2015-01-27T12:37:10Z

‎原理图

Radiumray9@gmail.com：/* 程序 */

2014-10-29T06:46:04Z

‎程序

Radiumray9@gmail.com：/* 设备 */

2014-10-29T06:45:41Z

‎设备

2014年5月27日 (二) 07:19 Pkj

2014-05-27T07:19:51Z

Pkj：/* 调试 */

2014-04-28T03:03:53Z

‎调试

Pkj：/* 调试 */

2014-04-28T03:03:32Z

‎调试

Pkj：Created page with "{| style="width: 800px;" |- | ==目的== 本教程将教大家如何控制两个Led，并用更为时尚的网页元素—图像。 ==设备== '''Microduino-Core''' '''..."

2014-04-28T03:02:51Z

Created page with "{| style="width: 800px;" |- | ==目的== 本教程将教大家如何控制两个Led，并用更为时尚的网页元素—图像。 ==设备== *'''Microduino-Core''' *'''..."

新页面

{| style="width: 800px;"
|-
|
==目的==
本教程将教大家如何控制两个Led，并用更为时尚的网页元素—图像。

==设备==
*'''[[Microduino-Core]]'''
*'''[[Microduino-FT232R]]'''
*'''[[Microduino-ENC28J60]]'''
*'''[[Microduino-RJ45]]'''

*其他硬件设备
**USB数据连接线一根

==图像==

首先你要明白当一个网页引用了一些外部资源（如图像，javascript...）后的处理流程：

*用户的浏览器连接web服务器，请求HTML网页。
*浏览器解析页面，找到外部资源。
*浏览器向服务器请求每一个外部资源。

当服务器应答，它在响应的头文件中告诉浏览器他发送的文件MIME类型。下面这个例子（用Fiddler嗅探）是关于PNG图像。
[[File:Fiddler嗅探.jpg|600px|center|thumb]]

Microduino代码应该能够：

*读取浏览器的请求（保存在Ethernet:buffer）。
*识别浏览器请求的资源（HTML页面、图像...）。
*创建一个正确的头文件（含类型Content-Type）。
*发送头文件和请求的资源到浏览器。

==二进制资源==

图片是一个二进制文件，在这个例子中我们应该能够把它以字节数组（byte arrays）的形式存放在我们的代码中。bin2h这个工具可以帮助我们进行转换。

转换结果是一个文本文件：
[[File:Bin2h.jpg|600px|center|thumb]]
为了节省Microduino内存，我们用PROGMEM指令存储在flash中：
[[File:imagebincode.jpg|600px|center|thumb]]

==原理图==

[[File:MicroduinoENC8原理图.jpg|600px|center|thumb]]

*Microduino-ENC28J60
*Microduino-RJ45
*Microduino-Core
*Microduino-FT232R
层层堆叠，再插上网线。

==程序==

https://github.com/Microduino/Microduino_Tutorials/tree/master/Microduino_ENC/ENCnetworkeight

==调试==

步骤一：首先需要下载EtherCard库：https://github.com/jcw/ethercard

放到你的IDE的libraries文件夹中，重启IDE。

步骤二：解释一下代码：

//我们的代码解析浏览器的请求，如果请求两个图片中的一个图片，调用send_png_image()方法，把它发送给浏览器。

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));

//这个方法准备正确头文件及用emit_raw_p方法添加图形文件的二进制数据到响应，最后用httpServerReply()发送响应给浏览器。

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());
}

//如果浏览器的请求中包含?LEDx，Led的状态发生改变，HTML页面重新创建，根据Led的状态设定正确的图标。

if(strstr((char *)Ethernet::buffer + pos, "GET /?LED1") != 0) {
led1Status = !led1Status;
digitalWrite(LED1PIN, led1Status);
　　　}

步骤三：连接好灯泡，如下图：
[[File:MicroduinoENC8连接图.jpg|600px|center|thumb]]

步骤四：下载代码并编译通过。

步骤五：用浏览器访问Microduino的IP地址后，点击页面上的连个图标按钮，看看灯泡有啥反应。

==结果==

访问你的Microduino IP地址，当用户点击其中一个图标，浏览器将请求该页面并添加?LEDx后缀：Microduino将改变相应的Led状态和图标的颜色。

==视频==

http://v.youku.com/v_show/id_XNzA0NDEzNjUy.html

|}

←上一版本		2014年5月27日 (二) 07:19的版本
第1行：		第1行：
		+	{{Language \| Microduino_ENC_Network_(8)}}
	{\| style="width: 800px;"		{\| style="width: 800px;"
	\|-		\|-

@@ 第52行： / 第52行： @@
 *Microduino-RJ45
 *Microduino-Core
-*Microduino-FT232R
+*Microduino-USBTTL
 层层堆叠，再插上网线。
 ==程序==

@@ 第58行： / 第58行： @@
 ==程序==
-https://github.com/Microduino/Microduino_Tutorials/tree/master/Microduino_ENC/ENCnetworkeight
+[https://github.com/Microduino/Microduino_Tutorials/tree/master/Microduino_ENC/ENCnetworkeight ENCnetworkeight]
 ==调试==

@@ 第7行： / 第7行： @@
 ==设备==
-*'''[[Microduino-Core]]'''
+*'''[[Microduino-Core/zh]]'''
-*'''[[Microduino-FT232R]]'''
+*'''[[Microduino-USBTTL/zh]]'''
-*'''[[Microduino-ENC28J60]]'''
+*'''[[Microduino-ENC28J60/zh]]'''
-*'''[[Microduino-RJ45]]'''
+*'''[[Microduino-RJ45/zh]]'''
 *其他硬件设备
 **USB数据连接线   一根
 ==图像==

←上一版本		2014年4月28日 (一) 03:03的版本
第83行：		第83行：
	bfill.emit_raw_p(png_image, image_size);		bfill.emit_raw_p(png_image, image_size);
	ether.httpServerReply(bfill.position());		ether.httpServerReply(bfill.position());
−	}	+	}

	//如果浏览器的请求中包含?LEDx，Led的状态发生改变，HTML页面重新创建，根据Led的状态设定正确的图标。		//如果浏览器的请求中包含?LEDx，Led的状态发生改变，HTML页面重新创建，根据Led的状态设定正确的图标。

@@ 第90行： / 第90行： @@
        led1Status = !led1Status;
        digitalWrite(LED1PIN, led1Status);
-−
+    }
@@ 第100行： / 第100行： @@
 步骤五：用浏览器访问Microduino的IP地址后，点击页面上的连个图标按钮，看看灯泡有啥反应。
 ==结果==

Microduino ENC网络（八）/zh - 版本历史

Radiumray9@gmail.com：/* 原理图 */

Radiumray9@gmail.com：/* 程序 */

Radiumray9@gmail.com：/* 设备 */

2014年5月27日 (二) 07:19 Pkj

Pkj：/* 调试 */

Pkj：/* 调试 */

Pkj：Created page with "{| style="width: 800px;" |- | ==目的== 本教程将教大家如何控制两个Led，并用更为时尚的网页元素—图像。 ==设备== *'''Microduino-Core''' *'''..."

Pkj：Created page with "{| style="width: 800px;" |- | ==目的== 本教程将教大家如何控制两个Led，并用更为时尚的网页元素—图像。 ==设备== '''Microduino-Core''' '''..."