怎样在没有以太网屏蔽的情况下设置Arduino Web Control

电子说

1.2w人已加入

描述

今天,我想我会确切地解释我如何使用一些 JavaScript , Processing,和 Arduino 来实现这一目标。我将概述该方法不需要以太网屏蔽你的Arduino,我会提供完整的代码样品供您还可以使用

要求:

Arduino

点亮以控制Arduino上的适当电路;看到您的PC或Mac

网站托管

基本的编码技巧我周围背光从上周部件的电路图和故障教程。

处理软件使用JavaScript和PHP,尽管我将提供您可以自定义的完整代码。

Arduino设置

首先,请参考上周的Arduino方面的教程东西我们将使用的代码是相同的,因为我使用的是相同的RGB LED灯带控制电路,因此在此不再赘述。总而言之,Arduino将通过USB串行连接读取RGB值到计算机。

Arduino

处理应用

我们将要使用的处理应用非常简单(PASTEBIN);它采用了基本的 loadStrings()函数读取存储在远程网络地址的文本文件 - 在这种情况下,我使用的 http://jamesbruce.me/lights/LED.txt 。在您的虚拟主机上创建一个示例文本文件进行测试,然后进行相应调整。文本文件应仅为R,G和B的3行值。

Arduino

您还需要将串行端口更改为USB连接的端口。和以前一样,应用程序要做的第一件事是将串行端口列表输出到控制台–选中要使用的串行端口,然后重新运行。

Arduino Web控件

在Web控件方面,我选择了一个名为Spectrum的simplecolorpicker jQuery插件;还有其他人,但是我觉得这很简单,可以在移动设备上进行触摸操作,而其他我却没有。将在 spectrum.js 和 spectrum.css 在同一个目录中的一切文件的(我做了一个/lightssub-directoryon我的服务器,以保持干净的东西)。 我们将使用PHP既显示web控制,并处理的 LED.txt 文件写入如果变量是在POST请求中给出。当用户访问此页面并选择一种颜色时,它会向AAAX请求发送一个带有颜色变量的颜色。这将整个内容保留在一个文件中。完整的PHP/HTML可以在此pastebin (连同其他文件保存在子目录中的 index.php )中找到,但是让我简要介绍一下

PHP :检测是否存在名为“ colors”的发布变量。如果是这样,请打开LED.txt文件进行写入,然后用post变量覆盖。

Arduino

HTML :导入 jQuery , Spectrum.js 下,和 Spectrum.css

的的JavaScript :的getRGB函数返回逗号的阵列分离RGB值给出各种不同的CSS色彩格式,例如 #aaaaa

的的JavaScript :创建频谱控制,并附加AJAX调用选择的颜色已更改的事件。 Ajax调用由控制给出的RGB值这个处理程序文件。

最后,确保您的 LED.txt 文件是可写的由服务器。应该具有 655 或 777 权限。启动文件,并给它一展身手;处理应用程序将需要运行,并将每秒刷新一次文件。如果页面上没有出现颜色选择器,请检查JavaScript控制台是否有错误。

陷阱和进一步的工作

正如我所提到的,此方法不是故意使用以太网屏蔽的,所以任何人基本的网站托管服务可以使其设置非常快速且成本低廉。但是,这确实意味着我们需要使用Processing应用程序作为获取数据的网关。如果没有运行PC,它将无法正常工作。通过添加以太网orWiFishield的,我们可以将Arduino的任何地方而不被拴在PC,并在远端读取命令或直推他们到Arduino一点点端口转发。我改天再说。还有并发的问题 - 我们把它设置方式是,该文件将仅仅是overwrittenevery timesomeone选择一个新的颜色,颜色的变化之间的延迟的处理代码决定。如果要让许多用户不断调整颜色,则带有数据库的排队系统可能更合适;如果更新的发生频率高于刷新文件的频率,则使用平面文件存储值可能会导致某些更改被忽略。然后,当然,除非您正在观看我们的现场直播,否则您无法知道它是否还可以正常工作。理想情况下,应该在控制页面上设置并嵌入一个网络摄像头。不过,作为技术演示,我认为这很棒。我希望您能看到通过Arduino远程控制互联网上任何东西的潜力。贾斯汀建议我们移交对我的烤箱的控制权;我拒绝了您是否有任何有趣的项目对您有帮助?
        责任编辑:wv

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分