使用Smart Slider 制作页面滚动横幅

如果想要在wordpress网页上添加滚动横幅,我推荐使用smart slider这款插件,相比其他的slider插件,这款插件的交互更加清晰便捷,而且功能也十分强大。

首先创建一个简单的三张图片的滚动横幅体验一下。

点击NEW SLIDER,我更喜欢全宽度的网页,所以选择全宽度,起个名字,其他参数我保持默认,点击创建。

然后点击NEW SLIDE 添加合适的图片。

如果你想制作更加精良的滚动横幅,下面的内容才是这款插件的亮点。

滚动页面,下方可以看到选择slider的设置项目,一共有两行,上面一行是slider的控制参数,下面一行是组件的参数。

可以调节的参数很多,需要细细摸索。如果你熟悉js,可以在developer栏中添加js控制程序。

控制组件如果没有太多需求可以保持默认。

下面我们来看一下怎么编辑slide,点击我们刚才创建的任意一个slide,编辑slide。

可以看到可以编辑的内容是相当丰富的。

每一个slide由background和上面的元素组成,其实刚才我们创建的时候添加的图片就是背景图,我们可以继续在背景图上添加内容。

编辑slide的编辑器使用的是类似ps的图层的概念,可以在一层一层的添加内容。

要对内容进行定位首先要添加一个结构层,其实就是使用盒子模型创建布局。

这里我添加一个特殊布局。然后添加各种层到slide,然后拖动层到想要添加的布局中。

默认的布局可能不符合你的要求,这时你可以调节布局比例。这类似于bootstrap的网格,布局被划分为行和列,通过调整行中列的比例进行控制。

此时,你就拥有了一个内容丰富的slide了。

当然我这里只是粗略的走了一个过程,各种动画和布局还是需要细节调整的,除了图片,你甚至可以添加通过视频链接添加视频层,虽然只支持youtuve和vimeo。

然后我们就可以使用短代码将创建的slider添加到页面中了。

 

使用AT模式控制ESP8266模块与设备进行通信

想要测试网络有没有接通,最方便的方式就是使用ping测试,ESP8266提供了AT+PING=<IP>的指令,我们可以使用AT+PING=”192.168.0.1″指令ping一下路由器,当然,如果你的路由器ip和我们的不一样要修改IP参数。当然你也可以选择ping外网域名,比如AT+PING=”www.baidu.com”。

可以使用AT+CIPDNS_CUR?查看DNS地址,这个DNS地址是临时获取到的地址,也可以使用AT+CIPDNS_DEF=1,”DNS1″,”DNS2″设置指定dns地址并保存到flash中,其实DNS1和DNS2应指定需要的dns服务器的ip地址。

现在我们可以使用安可信提供的TCP&UDP测试工具尝试使用ESP8266与电脑进行通信。

ESP8266支持两种传输模式,可以使用AT+CIPMODE=<mode>进行设置,这两种模式分别是:

0:普通传输模式

1:透传模式,仅支持TCP单连接和UDP固定通信对端的情况

因为透传模式信息直接发送,操作比较简单,我们先使用透传模式测试通信。

使用AT+CIPMODE=1设置传输模式为透传模式。注意上面的指令仅仅是暂时使用透传模式,不会将设置保存到flash,要使用AT+SAVETRANSLINK命令保存透传模式到flash。

打开TCP&UDP测试工具,创建服务器,然后启用服务器,有防火墙的应该选择允许,记录下IP地址和端口号。

要进行通信,首先要建立连接,以TCP连接为例,首先建立ESP8266到电脑的TCP连接,使用AT+CIPSTART指令建立连接。比如:AT+CIPSTART=”TCP”,”192.168.0.131″,3456,就是建立到192.168.0.131:3456端口的连接。成功后可以接收到CONNECT的提示。同时可以在TCP&UDP测试工具中看到已经建立的连接。

然后使用AT+CIPSEND指令发送数据。在透传模式中使用AT+CIPSEND后进入发送模式,ESP8266每接受2048字节数据或20ms后就会将数据发送的服务器。

要停止通信回到指令模式需要单独发送一包+++,注意在发送+++的时候要取消勾选发送新行,不然ESP8266会将其当作要发送的内容。要继续使用命令需要等待至少1秒。

现在我们就已经可以通过TCP与其他设备进行通信了。

更新ESP8266固件

因为在测试网络通信的时候发现有些指令不能用,所以先更新一下固件版本。

使用AT+GMR查看ESP8266的固件版本,发现已经比较老了,最新的固件可以到乐鑫官网下载,固件和烧写工具分别在AT页面工具页面下载。

要进行烧写,首先要将ESP8266阵脚连接成烧写模式,将GPIO0接地,EN接高电平,不要上电,先把USB转串口模块接到电脑上,打开烧录工具。

选择ESP8266 DownloadTool,按照下载的固件中的Readme.md文件中的指引选择合适的bin文件到对应的地址。

选择晶振频率,我没有找到文档说明我用的模块的晶振频率,我本来以为是40M的,烧写之后全是乱码不能用,改用26M烧写成功,选择FLASH SIZE,通过查看Flash芯片上的型号,查询到是8Mbit的,选择合适的COM口和波特率。点击start。

看到等待上电同步之后,连接ESP8266模块的电源。

然后就可以看到烧写的进度,烧写完成后断开电源,将GPIO0悬空,再接通电源。可能会提示错误,可以再次点击START并重新插拔电源线,多试几次可能就可以成功了。

发送AT+GMR查看固件版本。

使用AT模式控制ESP8266模块连接网络

ESP-01S是安信可使用乐鑫公司出品的使用ESP8266芯片开发的一款WiFi模块。详细参数可以访问安信可官网查看。

首先使用USB转串口模块在电脑上测试AT命令。推荐使用安信可出品的串口调试工具,可以在安信可开发工具清单页面下载。

首先连接USB转串口和ESP8266模块,在产品参数页面我们可以看到这个模块一共有8个阵脚,使用AT模式只需要连接其中5个脚,分别是VCC、GND、TXD、RXD、EN,其中EN需要连接高电平才能进入AT模式,可以使用上拉电阻,也可以直接接VCC,注意VCC使用的是3.3V电源,接5V电源会烧坏。

将USB串口模块连接到电脑上,打开安信可串口调试助手,选择正确的端口号和波特率后打开串口,默认波特率是115200,也可以使用AT指令设置指定波特率。

使用杜邦线接通ESP8266电源,可以从串口助手看到一些乱码,这不需要担心,ESP8266开始工作之前输出乱码是正常的。看到ready提示符之后说明你的ESP8266模块可以工作了。可以发送”AT”指令进行测试,模块会回复”OK”表示工作正常,注意要勾选发送新行,因为ESP8266的AT指令都是以回车换行结束的。

下面使用AT指令将ESP8266模块连接到路由器,具体的AT指令可以在乐鑫官方文档中查询。

ESP8266有三种工作模式,分别是:

1: Station模式

2:SoftAP模式

3:SoftAP+Station模式

这里使用Station将ESP8266作为局域网设备连接到网络,发送AT+CWMODE_DEF=1设置工作模式,并将设置保存到flash中。你也可以使用3模式进行连接,因为我后面的实验都是使用ESP8266作为设备,所以将模式设置为1模式。

使用AT+CWJAP_DEF指令将ESP8266模块连接到希望连接的AP上,这个指令有两个参数,分别是UUID和密码,参数之间使用英文逗号分隔,注意字符串参数都需要加双引号。例如我要连接到我的路由器使用AT+CWJAP_DEF=”MERCURY_3A2″,”********”指令进行连接,你需要将UUID和密码设置为你要用的UUID和密码。

可以使用AT+CIPSTA?指令查询ESP8266获取到的IP地址。

可以使用AT+CWDHCP?指令查询ESP8266 DHCP设置。

可以使用AT+CWAUTOCONN?查询开机是否自动连接AP,通过设置该参数为1或0控制开机是否连接路由器。

更多AT指令可以从AT指令文档中查看。稍后我会介绍如何使用AT指令与其他设备通信。

在ARDUINO上使用DHT库采集DHT22温湿度传感器的数据

DHT22使用的是单总线的设计,利用高电平时间长短表示1和0,这样的设计简化了外部接口,Arduino官网的项目多是采用DHT.h这个库来采集数据,这个库是Adafruit开发的众多库中的一员。

如果只安装DHT库,编译会报错,因为这个库依赖Adafruit Unified Sensor 库。

安装好了库之后从DHT库下载一个简单的DHTtester示例就可以从串口看到温湿度的数据了。

 

如果你使用的是DHT11,只需要取消#define DHTTYPE DHT11的注释,添加#define DHTTYPE DHT22 的注释就可以了。

在ARDUINO上使用u8g2驱动SSD1306LED显示器

我原来用u8glib进行开发,本着有新的用新的的原则,换用u8g2试一下,u8g2支持的主控很全,函数和很强大,只是耗费内存很多,多添加几个字体库可能内存就不够用了,但是奈何字体都那么漂亮。小应用还是可以用一下的。

U8g2在github的地址是https://github.com/olikraus/u8g2,手册还是比较全的。

我用的是国产的arduino的板子,显示器直接不知道牌子,只知道是SSD1306的主控和12864的分辨率。

对于不同的显示器,u8g2使用不同的构造器来区别,只需要到github的参考页面找到合适的构造器构造一个控制对象,就可以轻松控制自己的LED显示器了。

参考https://github.com/olikraus/u8g2/wiki/u8g2setupcpp#introduction的介绍,将构造器改成合适的U8G2_SSD1306_128X64_NONAME_1_4W_SW_SPI,按照参数指定的阵脚连接杜邦线。编译下载就可以看到Hello World! 的字样了。

我的这款显示器比较奇葩,时钟线标注的是D0,数据线标注的是D1,刚拿到显示器的时候还不是很明白SPI总线,让这个标注搞得一脸懵逼。

使用Elementor设计页面

wordpress什么都好,就是页面自定义程度太小,很难做出布局合理好看的页面。有定制需求时,只使用主题限制又太多。最好的办法还是自己设计页面,今天找了几个自定义布局的插件不是很满意,直到找到Elementor才解决了我的需求。

Elementor 采用行列进行布局,行列可以相互嵌套,组件需要放在列中,向行中添加组件的时候会自动添加列。自带的组件基本够用。

如果只是可以进行行列布局,那和我之前尝试的插件没有什么太大的区别。Elementor强大就强大在可以定义行列和组件的各种属性。

比如想要在图片上方叠加文字,我们可以将图片和文本框放在同一个列中,然后调节文字的外边距为负值,这样就可以实现叠加效果。

当然这样只能满足指定页面大小的布局,当页面大小发生改变时布局就会变乱,暂时我还没有找到解决的办法。

Elementor可以分别为电脑、平板和手机设计样式,为了更好的显示效果,最好为每种设备都专门设计布局。

配合上其他组件,Elementor基本可以满足对页面的自定义需求。