本设计使用由网页控制的MicroPython驱动的节日灯装饰!通过MicroPython和智能节日灯来庆祝节日,这些节日灯都是通过网络控制的!该项目向您展示如何使用在ESP8266 WiFi微控制器上运行的MicroPython为NeoPixels设置动画。只需在网页上选择动画的颜色和类型,点击一个按钮,您的节日灯就会充满动感的节日欢呼。智能节日灯甚至可以记住他们上次动画时的动画。这个项目很好地展示了ESP8266和MicroPython的优势,例如使用WebREPL轻松访问WiFi并将数据存储在MicroPython的文件系统中。
本指南需要以下硬件:
- ESP8266运行MicroPython。 该羽毛ESP8266是完美的,如果你没有一个板呢,但是任何ESP8266板应该工作。有关如何在电路板上运行MicroPython的详细信息,请参阅电路板指南中的加载MicroPython。
- NeoPixels。 您可以使用任何类型的 NeoPixel,如条带,矩阵等。但是请确保使用RGB而不是RGBW像素,因为此项目的代码仅假设RGB像素。像30像素/米NeoPixels这样的三到四米长的条带非常适合环绕一个小花圈或小树。查看NeoPixel Uberguide,了解有关不同类型NeoPixels以及如何为其供电的更多信息。
- 5V电源。 你需要一个5伏电源,有足够的电流来驱动所有像素。每个NeoPixel都可以提供高达60mA的电流,因此请确保获得足够大的电源以支持所有像素!这款5V 10amp电源可以在全亮度下处理多达约150个NeoPixels(将一个插孔插孔 连接到接线端子适配器,以便轻松连接电源)。查看NeoPixel Uberguide以获取更多电源选项。
- 大电容保护像素。 正如NeoPixel Uberguide所提到的那样,您可能需要在电源连接处添加一个大电容,以防止突然出现电源时损坏像素。这里的4700uF 10V电解电容应该可以很好地工作。
- 焊接工具。 您可能需要焊接一些NeoPixel和其他连接,因此请务必使用烙铁,焊料和电线。如果您不熟悉焊接,请查看优秀焊接指南。
接线
如下所示连接硬件:
- 电源接地/ -到NeoPixel GND /地和羽毛HUZZAH ESP8266 GND /地。
- 电源5V / +至NeoPixel + 5V和羽毛HUZZAH ESP8266 USB引脚。对于其他ESP8266板,请检查其规格,看看哪个引脚可以支持运行电路板的5V电源输入。
- 羽毛HUZZAH ESP8266针脚15到NeoPixel Din /输入。您可以使用ESP8266上的大多数其他GPIO引脚(引脚16除外),但本指南假设您使用引脚15。
- 如果您使用电容来保护像素(强烈推荐!),请按如下方式连接:
电容器阳极到电源5V / +。
如果您使用圆柱形插孔连接到端子排适配器,最简单的方法是将电容器直接连接到下面的端子(确保带有条纹的一侧连接到负极/接地端子!)
接下来就进入软件部分了
设置MicroPython和WebREPL
首先确保您为您的主板运行最新版本的ESP8266 MicroPython。有关将MicroPython加载到ESP8266板上的更多信息,请查看如何在电路板指南中加载MicroPython。
请注意,在本指南编写时,当前版本的ESP8266 MicroPython是1.8.6。更高版本可能会更改WebREPL,因此如果遇到意外问题,请尝试返回1.8.6版本。
接下来按照本指南设置ESP8266板上的WebREPL。请注意,最新的1.8.6版MicroPython略微改变了WebREPL的设置方式,因此请按照指南或官方说明启用WebREPL。在您的ESP8266运行MicroPython并且可以连接到其WebREPL之前,请不要继续
加载MicroPython代码
代码在文件中请自行下载
控制灯
现在为了一些乐趣,您已准备好控制网页上的灯光!在Web浏览器中打开lights.html页面(请注意,该页面已使用最新的Chrome浏览器进行了测试,但它应该可以与其他现代Web浏览器一起使用,例如Safari和IE 8+)。
你应该看到页面加载,看起来像:
确保您的计算机已连接到ESP8266主板的WiFi网络,就像您使用WebREPL时一样(但请确保您没有在另一个选项卡或浏览器中连接到WebREPL!)。
将电路板URL设置为用于访问WebREPL的URL(如果您不确定,则保留默认值,这是大多数WebREPL连接使用的)。
在密码字段中输入您在设置和访问WebREPL时设置的密码。
您可以使用页面上的字段控制灯光的动画:
- 动画 - 此下拉菜单控制灯光是否会以实心脉冲,追逐,平滑淡入淡出或空白动画(无动画)进行动画处理。
- 动画周期 - 此值控制动画的速度(以毫秒为单位),或动画在任何特定颜色上停留的时间。小值会加速动画,大值会减慢动画速度。
- 颜色 - 此下拉菜单控制灯光将显示的颜色范围。您可以选择蓝色/红色,绿色/红色或蓝色/白色颜色组。查看下面的index.html代码和How it Works视频3,了解如何添加更多颜色!
- 镜像颜色 - 此复选框控制所选颜色是否应平滑上下移动。默认情况下,颜色会从蓝色变为红色,但是通过保持镜面颜色检查,您会看到它们上下移动,例如从蓝色到红色,再从蓝色再到蓝色。尝试打开和关闭镜像以查看它如何更改动画。
选择所需选项后,单击“ 更新灯光”按钮。过了一会儿,您应该看到所选动画的灯光栩栩如生!
怎么运行的
如果您对网页如何控制灯光感到好奇,请下载观看以下视频,深入探讨项目的创建和运作方式,视频在压缩文件中。