使用树莓派的基于Iot的Web控制的家庭自动化

大家好，欢迎来到今天的教程，Raspberry Pi的优点之一就是强大的功能和便捷性，它使您有机会将设备连接到Internet，尤其是用于家庭自动化相关项目的设备。今天，我们将探讨通过使用Internet单击网页上的按钮来控制AC设备的可能性。使用此基于IoT的家庭自动化系统，您可以在世界任何地方控制家用电器。可以从任何可以运行HTML应用程序的设备（例如智能手机，平板电脑，计算机等）运行此Web服务器。

所需组件：

对于此项目，需求将分为硬件和软件两类：

一，硬件要求：

1. Raspberry Pi 3（其他版本都不错）
2. 运行Raspbian Jessie的8或16GB存储卡
3. 5v继电器
4. 2N222晶体管
5. 二极体
6. 跳线
7. 连接块
8. 要测试的LED。
9. 交流灯测试
10. 面包板和跨接电缆
11. 220或100欧姆电阻

二。软件要求：

除了在树莓派上运行的Raspbian Jessie操作系统之外，我们还将使用WebIOPi框架，在您的PC上运行的notepad ++和filezila，将文件从PC复制到树莓派，尤其是Web应用程序文件。

同样，您无需为此家庭自动化项目使用Python进行编码，WebIOPi将完成所有工作。

准备Raspberry Pi：

这对我来说是一种习惯，我认为这是一个好习惯，每次我想使用Raspberry Pi时要做的第一件事就是更新PI。对于此项目，本节将包含Pi更新过程和安装WebIOPi框架，这将帮助我们处理从网页到树莓派的通信。我应该指出，使用python Flask框架也可以用一种可能更容易的方式完成此操作，但是DIY有趣的一件事是当您深入研究并进行艰苦的工作时。那就是DIY的所有欢乐来临的地方。

要通过以下命令更新树莓派，然后重新启动RPi；

sudo apt-get更新sudo apt-get升级sudo重新启动

完成之后，接下来是我们要安装webIOPi框架。

确保使用以下命令位于主目录中：

光盘〜

使用wget从其sourceforge页面获取文件；

wget

下载完成后，解压缩文件并进入目录；

tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /

此时，在运行安装程序之前，我们需要安装一个补丁，因为此版本的WebIOPi不适用于我正在使用的raspberry pi 3，并且我找不到与Pi 3明确兼容的WebIOPi版本。 。

下面的命令用于在仍位于WebIOPi目录中的情况下安装补丁并运行；

wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch补丁-p1 -i webiopi-pi2bplus.patch

然后，我们可以使用来运行WebIOPi的安装程序安装；

须藤./setup.sh

如果在安装安装过程中被要求安装任何依赖项，请继续说是。完成后，重新启动您的pi。

须藤重启

测试WebIOPi安装：

在跳到原理图和代码之前，重新打开Raspberry Pi，我们将需要测试WebIOPi安装，以确保一切都能正常运行。

运行命令；

须藤webiopi -d -c / etc / webiopi / config

在pi上发出上述命令后，将连接到raspberry pi的计算机的Web浏览器指向http：// raspberrypi。mshome.net:8000或http; // thepi的IP地址：8000。系统将提示您输入用户名和密码。

用户名是 webiopi 密码是 覆盆子

以后可以根据需要删除此登录名，但是即使您的家庭自动化系统也应具有更高级别的安全性，以防止只有任何人拥有IP控制设备和IOT设备。

登录后，环顾四周，然后单击GPIO头链接。

对于此测试，我们将一个LED连接到GPIO 17，因此继续并将GPIO 17设置为输出。

完成此操作后，将led连接到树莓派，如下图所示。

连接后，返回网页并单击11针按钮以打开或关闭LED。这样，我们可以使用 WebIOPi 控制Raspberry Pi GPIO 。

测试后，如果一切按说明工作，那么我们可以返回到终端并使用CTRL + C停止程序。如果您对此设置有任何疑问，请通过注释部分来通知我。

有关Webiopi的更多信息，请访问其Wiki页面（http://webiopi.trouch.com/INSTALL.html）。

测试完成后，我们就可以开始主项目了。

为Raspberry Pi家庭自动化构建Web应用程序：

在这里，我们将编辑WebIOPi服务的默认配置，并添加自己的代码以在调用时运行。我们要做的第一件事是在计算机上安装 Filezilla 或任何其他FTP / SCP复制软件。您会同意我的观点，即通过终端在pi上进行编码非常麻烦，因此在这个阶段，filezilla或任何其他SCP软件将派上用场。在我们开始为该IoT Home自动化Web应用程序编写html，css和java脚本代码并将它们移至Raspberry Pi之前，让我们创建项目文件夹，其中包含所有Web文件。

确保您使用时位于主目录中，然后创建文件夹，进入创建的文件夹并在目录中创建html文件夹：

cd〜mkdir webapp cd webapp mkdir html

在html文件夹中为脚本，CSS和图像创建一个文件夹

mkdir html / css mkdir html / img mkdir html /脚本

创建完文件后，我们开始在PC上编写代码，然后通过filezilla移至Pi。

JavaScript代码：

我们将编写的第一段代码是javascript的代码。它是与WebIOPi服务进行通信的简单脚本。

重要的是要注意，对于这个项目，我们的Web应用程序将包含四个按钮，这意味着我们计划仅控制四个GPIO引脚，尽管在演示中我们将仅控制两个继电器。最后检查完整的视频。

webiopi（）。ready（function（）{webiopi（）。setFunction（17，“ out”）; webiopi（）。setFunction（18，“ out”）; webiopi（）。setFunction（22，“ out”）; webiopi （）.setFunction（23，“ out”）; var content，button; content = $（“#content”）; button = webiopi（）。createGPIOButton（17，“ Relay 1”）; content.append（button）; button = webiopi（）。createGPIOButton（18，“ Relay 2”）; content.append（button）; button = webiopi（）。createGPIOButton（22，“ Relay 3”）; content.append（button）; button = webiopi（ ）.createGPIOButton（23，“ Relay 4”）; content.append（button）;}）;

上面的代码在WebIOPi准备就绪时运行。

下面我们解释了JavaScript代码：

webiopi（）。ready（function（）： 这只是指示我们的系统创建此函数并在webiopi准备就绪时运行它。

webiopi（）。setFunction（23，“ out”）; 这有助于我们告诉WebIOPi服务将GPIO23设置为输出。我们这里有四个按钮，如果要实现更多按钮，则可以有更多按钮。

var内容，按钮； 这行代码告诉我们的系统创建一个名为content的变量并将该变量设置为按钮。

内容= $（“#内容”）; content变量仍将在我们的html和css中使用。因此，当我们引用#content时，WebIOPi框架会创建与之关联的所有内容。

button = webiopi（）。createGPIOButton（17，“ Relay 1”）; WebIOPi可以创建各种按钮。上面的代码段帮助我们告诉WebIOPi服务创建一个GPIO按钮，该按钮控制GPIO引脚，在本例中为17标记为“继电器1”。其他的也一样。

content.append（button）; 将此代码附加到在html文件或其他位置创建的按钮的任何其他代码。可以创建更多按钮，并且所有按钮都具有此按钮的相同属性。这在编写CSS或脚本时特别有用。

创建JS文件后，如果您以与我相同的方式创建了文件，我们将其保存，然后使用filezilla将其复制到webapp / html / scripts。

完成此操作后，我们开始创建CSS。您可以从最后的“代码”部分给出的链接中下载整个代码。

CSS代码：

CSS帮助我们使IoT Raspberry Pi家庭自动化网页看起来更漂亮。

我希望网页看起来像下面的图像，因此必须编写 smarthome.css 样式表来实现它。

下面我们解释了CSS代码：

CSS脚本太大了，无法在此处包含，因此我只选择其中一部分并将其用于分类。您可以从此处下载完整的CSS文件。CSS很简单，您可以通过遍历CSS代码来理解它。您可以轻松跳过这一部分并立即使用我们的CSS代码。

脚本的第一部分表示Web应用程序主体的样式表，如下所示；

正文{background-color：#ffffff; background-image：url（'/ img / smart.png'）; 背景重复：不重复；背景位置：中心；背景大小：cover; 字体：粗体18px / 25px Arial，无衬线；颜色：浅灰色；}

我想相信上面的代码是不言自明的，我们将背景色设置为白色的#ffffff，然后在该文件夹位置添加背景图片（还记得我们以前的文件夹设置吗？），请确保该图片不通过将background-repeat属性设置为no-repeat来进行重复，然后指示CSS集中背景。然后，我们开始设置背景大小，字体和颜色。

完成主体后，我们为按钮编写了CSS，使其看上去很漂亮。

按钮{显示：块；职位：相对边距：10px;填充：0 10px;文本对齐：居中；文字修饰：无；宽度：130像素；高度：40px；字体：粗体18px / 25px Arial，无衬线；颜色：黑色；文字阴影：1px 1px 1px rgba（255,255,255，.22）; -webkit-border-radius：30px; -moz-border-radius：30px; border-radius：30px;

为了简短起见，代码中还做了其他所有事情以使其看起来不错。您可以更改它们以查看会发生什么，我认为它叫做通过反复试验来学习，但是关于CSS的一件好事是用简单的英语表达的东西，这意味着它们很容易理解。按钮块的另一部分几乎没有用于按钮上的文本阴影和按钮阴影的附加功能。它还具有轻微的过渡效果，有助于在按下按钮时看起来美观和逼真。这些分别针对webkit，firefox，opera等定义，以确保网页在所有平台上均具有最佳性能。

下一个代码块用于WebIOPi服务，以告诉它这是WebIOPi服务的输入。

我 NPUT {显示：块; 宽度：160像素；高度：45像素；}

我们要做的最后一件事是在按下按钮时给出某种指示。因此，您可以看一下屏幕，按钮的颜色可以让您知道当前状态。为此，为每个按钮实现了以下代码行。

#gpio17.LOW {background-color：Gray; 颜色：黑色；}#gpio17.HIGH {background-color：红色；颜色：浅灰色；}

上面的代码行仅根据按钮的当前状态更改按钮的颜色。当按钮关闭（低）时，按钮的背景色变为灰色以显示其无效状态；当按钮打开（高）时，按钮的背景色变为红色。

袋子中的CSS，保存为smarthome.css，然后通过filezilla（或您要使用的任何其他SCP软件）将其移动到树莓派上的styles文件夹中，并修复最后一块html代码。请记住从此处下载完整的CSS。

HTML代码：

html代码将所有内容（JavaScript和样式表）组合在一起。

按钮; 接收培根

内head标签存在着一些非常重要的功能。

上面的代码行使Web应用程序可以使用chrome或移动浏览器保存到移动桌面。这可以通过chrome菜单来完成。这使该应用程序可以从移动桌面或家庭轻松启动。

下面的下一行代码提供了对Web应用程序的某种响应。它使它能够占据启动它的任何设备的屏幕。

下一行代码声明网页标题栏上显示的标题。

接下来的四行代码分别执行将html代码链接到需要按需工作的多个资源的功能。

上面的第一行调用了主要的WebIOPi框架JavaScript，该JavaScript硬编码在服务器根目录中。每次使用WebIOPi时都需要调用此方法。

在第二行指出HTML页面我们的jQuery脚本，第三点它在我们的样式表的方向。最后，如果我们决定将其用作网页应用程序或网页的图标，则最后一行有助于设置要在移动桌面上使用的图标。

html代码的主体部分仅包含break标签，以确保按钮与下面的行正确对齐，从而告诉html代码显示JavaScript文件中的内容。该 ID =”内容” 应该提醒你更早的JavaScript代码在我们按钮的内容声明。

您知道演练，将html代码作为index.html并通过filezilla移至Pi上的html文件夹。您可以从此处下载所有CSS，JS和HTML文件。

用于家庭自动化的WebIOPi服务器编辑：

在此阶段，我们准备开始创建原理图并测试我们的Web应用程序，但是在此之前，我们需要编辑webiopi服务的配置文件，以便其指向使用html文件夹中的数据而不是其随附的配置文件。 。

要编辑配置，请以root权限运行以下命令；

须藤nano / etc / webiopi / config

查找配置文件的http部分，在该部分下检查以下内容， #Use doc-root更改默认HTML和资源文件的位置

使用#注释掉其下的所有内容，如果您的文件夹像我的那样设置，则将您的doc-root指向项目文件的路径

doc-root = / home / pi / webapp / html

保存并退出。如果您使用该端口在pi上运行了另一台服务器，也可以将端口从8000更改为该端口。如果没有保存并退出，请继续前进。

重要的是要注意，您可以使用以下命令更改WebIOPi服务的密码：

须藤webiopi-passwd

它将提示您输入新的用户名和密码。这也可以完全删除，但是安全性很重要吗？

最后，通过发出以下命令来运行WebIOPi服务：

sudo /etc/init.d/webiopi开始

可以使用以下命令检查服务器状态：

sudo /etc/init.d/webiopi状态

可以停止使用它来运行；

sudo /etc/init.d/webiopi停止

要设置WebIOPi在启动时运行，请使用；

sudo update-rc.d webiopi默认

如果要反向启动并使其停止运行，请使用;

sudo update-rc.d webiopi删除

电路图和说明：

完成我们的软件设置后，我们所有人都可以开始为该Web控制的家用电器项目创建原理图。

虽然我无法将手放在继电器模块上，但是对于业余爱好者来说，使用它更容易。因此，我在这里绘制普通的独立5v继电器的原理图。

如上面的弗里茨电路所示，连接电路。您应注意，您自己的继电器的COM，NO（常开）和NC（常闭）可能位于不同的侧面/点。请使用毫米进行测试。在此处了解有关中继的更多信息。

连接我们的组件后，从网页启动服务器，转到Raspberry Pi的IP并按前面所述指示端口，使用用户名和密码登录，您应该会看到一个与下图完全相同的网页。

现在，您只需单击按钮，即可从任何地方轻松地无线控制四个AC Home设备。这将适用于手机，平板电脑等，您可以添加更多按钮和继电器来控制更多设备。查看下面的完整视频。

就是这样，伙计们，谢谢你们坚持不懈。如有任何疑问，请将其放在评论框中。