【翻译教程】enc28J60 和 Arduino (8)——Arduino处理图片

zcbzjx

趁热打铁，最后一篇教程。。。这个例子我觉得最重要的是：提供了一个Arduino处理图片的方法。
原文在这儿

---

---

    我发表上一篇教程如何使用网页控制Led后，有人问我如何控制一个以上的Led，今天我来告诉你如何控制两个Led，并用更为时尚的网页元素—图像。

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

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

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

    Arduino代码应该能够：

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

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

    为了节省Arduino内存，我们用PROGMEM指令存储在flash中：


Arduino
    同往常一样，完整的代码共享在GitHub。
    下面是我的代码将显示在浏览器的网页。

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

    让我们先来了解一些代码片段。

1.     if(strstr((char *)Ethernet::buffer + pos, "GET /led_off.png") != 0)
   
2.       send_png_image(led_off, sizeof(led_off));
   
3.     else if(strstr((char *)Ethernet::buffer + pos, "GET /led_on.png") != 0)
   
4.       send_png_image(led_on, sizeof(led_on));

复制代码

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

1. void send_png_image(PGM_P png_image, unsigned int image_size) {
   
2. 
   
3.   BufferFiller bfill = ether.tcpOffset();
   
4.   bfill.emit_p(PSTR("HTTP/1.0 200 OK\r\n"
   
5.     "Content-Type: image/png\r\n\r\n"));
   
6.   bfill.emit_raw_p(png_image, image_size);
   
7.   ether.httpServerReply(bfill.position());
   
8. }

复制代码

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

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

复制代码

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


示范


返回目录

ninjiafan

非常感谢...这个系列的教程让我对28J60熟悉了不少...呵呵...多谢分享...

545zhou

我是初学enc28J60，我有一个问题:有没有和它类似的但是无线的可以通过wifi和路由联通的模块？谢谢。

zcbzjx

有wifi模块，可以搜索下，不过小贵

小黑

好东西啊   改天好好看看

wyyyh

wifi迷你路由+有线方式也是可以考虑的

／Ｂａｐａｓ

老师，我想问一下啊，如果一个页面里面设置多个不同的按钮，可否对应控制驱动不同的功能电路（如一个按钮控制led，一个控制步进电机）？

zcbzjx

控制led和控制步进电机应该有些不同之处。led就是开 关。代码中就是0 1，步进电机应该还有相应的驱动电路，以及转停，如何转（速度 方向。。。）所以要靠自己来想如何解决这些问题。教程就是领进门，具体应用还是要自己动动脑筋的。。

五哥U五哥

看了上一篇文章，我把控制灯的代码复制了一遍，只将关键字后加一个2,以作区分，实现了两个按钮分别控制两个灯的功能（相当笨的方法）。。。接着就看了这篇文章，看来代码是可以大大优化的

mypear

"HTTP/1.0 200 OK\r\n" "Content-Type: image/png\r\n\r\n"请问这句话有什么用？

zcbzjx

mypear 发表于 2013-3-27 16:47
"HTTP/1.0 200 OK\r\n" "Content-Type: image/png\r\n\r\n"请问这句话有什么用？

应该是http 头文件

mypear

Content-Type:text/html，这定义后是不是不能用图片？用图片是用Content-Type: image/png定义？
这句话“这个方法准备正确头文件及用emit_raw_p方法添加图形文件的二进制数据到响应”不明。图片是转化为字节，0xXX这格式，是又要转化为1010二进制发给浏览器？

zcbzjx

mypear 发表于 2013-3-29 17:03
Content-Type:text/html，这定义后是不是不能用图片？用图片是用Content-Type: image/png定义？
这句话“这 ...

应该是这样，通过头文件说明是图片格式的，这样把接收到的数据按照图片显示出来。。。俺也是二把刀。。不太清楚。

mypear

zcbzjx 发表于 2013-3-29 18:18
应该是这样，通过头文件说明是图片格式的，这样把接收到的数据按照图片显示出来。。。俺也是二把刀。。不 ...

hehe,弄了很久也没效果http://jiangjunbin.oicp.net:82/，就是显示不了图片

hotboy

二进制的图片，好可怕。。。难道arduino只能用这样的图片嘛？不能通过路径来读取sd卡中的图片嘛？