【翻译教程】enc28J60 和 Arduino (9)——发送更大的图标

很久没写代码了，hoho，最近想写点。发现luca已经发布了到第13个教程了，俺还是有始有终接着翻吧。。

原文在这儿


上一个教程发布后，有很多同学留言要求用arduino和enc28j60发送更大的图片。

现在我们通过在HTML页面中引用别的网站的图片来解决这个问题：

img_ext.jpg

2013-2-19 21:29 上传
(17.36 KB)





下面我写一个例子来通过互联网控制一个继电器，使用为智能手机优化的用户界面。



逻辑视图



这个例子使用3个模块：Arduino UNO；enc28j60盾；从ebay买的继电器盾，连接到Arduino的一个端口：

webrelay_photo.jpg

2013-2-19 21:30 上传
(66.99 KB)





enc28j60盾连接到我家的ADSL路由器，配置NAT，传入TCP连接中80端口对应为分配给Arduino的IP地址：

webrelay_nat.jpg

2013-2-19 21:30 上传
(12.32 KB)





在我知道我公网的IP地址的情况下我可以连接我的Arduino。最好使用动态的DNS服务（也许使用一个Arduino让他保持更新，正如我这个教程）。



WEB界面



可以保持了简洁的界面：一个标签显示真实的状态，一个按钮控制继电器的开关：


enc_webgui.png

2013-2-19 21:29 上传
(77.29 KB)





对网管的提示：下面的META元标记可以使你的网页更加适合智能手机的显示。

meta_tag.jpg

2013-2-19 21:29 上传
(10.96 KB)




我使用的图标来自Jojo Mendoza设计的Soft Scraps图标集，由于这些图标用于个人和非商业用途是免费的！




你可以从GitHub上下载这2个示例的静态页面。



代码



对于代码详细的解释已经在上一个例程中阐述了，这个例程改变了准备（prepare）和发送HTML页面：

webrelay_old.jpg

2013-2-19 21:30 上传
(43.11 KB)





和往常一样可以从GitHub下载源代码。



演示







返回目录

via - 极客工坊

标签: Arduino教程