【翻译教程】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教程