Step 1: The electronic part
电子部分没有什么特别的，它只有8个LED与保护他们的电阻器。唯一困难的部分就是LED连接上树莓派好管脚。事实上，我将使用Wiring Pi库（您可以访问他的网站：http://wiringpi.com/），该库中使用的引脚的数量不一定和你的树莓派相同。到这个页面对比管脚：http://wiringpi.com/pins/（只是要小心你的树莓派的修订，其管脚排列是不完全一样）。我会用接线管脚0至7。
关于电阻，最好是270Ω，但因为我没有这个，我使用的是560Ω电阻（LED都只是不太亮）。
最后，我已经做了两个原理图。第一个（有完整的树莓派）是显示你，因为他们显示板上的实际管脚。第二个是一个简化的版本，它的表示你只有用销和它们在接线裨库匹配（在板的GPIO接线数/实际数）。
Step 2: Installing and using the Wiring Pi library第2步：安装和使用的Wiring Pi库
As said before, Wiring Pi is a library. It simplifies a lot using the Raspberry Pi GPIOs (one command instead a long process). It also means that you can use it in any of your C codes. However, we won't build and use a C program but the Gpio utility. It's a software made by Gordon and coming with the library. It allows you to control the GPIOs in a bash script or directly in a command line. Using this utility is however a lot slower than a C program.
正如前面所说，Wiring Pi是一个库。它简化了很多使用树莓派的GPIO（一个命令，而不是一个长期的过程）。这也意味着，你可以在任何C语言中使用它。但是，我们不会建立和使用一个C语言，我们用GPIO utility。已经包含在刚才的库里了。它可以让你控制一个bash脚本或直接在命令行中的GPIO。不过比C写的程序慢了许多。
We first need to install it. Gordon himself is explaining it very well on his website: http://wiringpi.com/download-and-install/. You just need to download it from GIT then to build it using the ./build command.
You should now be able to use the Gpio utility, type the "gpio mode 0 out" command to test it out. If nothing special appears, everything's fine. Else, if the board is printing "command not found error" or something like that, be sure that you've followed the guide and build the library.
我们首先需要安装它。 http://wiringpi.com/download-and-install/ 戈登本人也是在其网站上解释得很好。你只需要从GIT下载它然后使用./build命令来建立它。
您现在应该能够使用“GPIO实用工具”，键入“GPIO模式0出”命令来测试它。如果没有什么特别的出现，一切都很好。否则，如果终端显示“命令未找到错误”或类似的东西，请确保您遵循了指南和建库顺序。
Let's turn on and off the first LED (Wiring pin 0). You first need to set the pin as an output. Use the "gpio mode 0 out" command to do so. "0" is the wiring pin number and "out" simply stands for output. Now, use the "gpio write 0 1" command to turn on your LED. "0" is again the pin number and "1" is the status (1 for ON and 0 for OFF). If everything's fine you should see your LED shining. To turn it off, simply use the "gpio write 0 0" command.
我们来试试打开和关闭第一个LED（Wiring 销0）。首先，您需要设置为输出引脚。使用“GPIO mode 0 out”命令。 “0”是布线引脚数目，“out”简单地表示输出。现在，使用“GPIO write 0 1”命令打开你的LED。 “0”是管脚号 “1”是（1“开” 0是“关”）的状态。如果一切正常，你会看到你的LED闪亮。要关闭该功能，只需使用“GPIO write 0 0”命令。
Just a little tip, if you want to use the actual pin number (GPIO-17) instead of the Wiring Pi number (0 is corresponding to GPIO-17), use the -g flag in your command. Ex: "gpio -g write 17 1" instead of "gpio write 0 1".
如果你想使用实际针数（GPIO-17）而不是Wiring Pi（0对应的GPIO-17），使用-g标志在你的命令。例如：“GPIO-g wirite 17 1”，而不是“GPIO write 0 1”。
There is also the "gpio read" command which allows you to read the pin's status. It may seems useless when the pin has been set as an output but it allows you to be sure of the pin's status when you can't see the LED. Using it is as simple as before, just type "gpio read 0" where "0" is the wiring pin number. The command is returning the pin's status (again 1 for ON and 0 for OFF).
还有命令“gpio read”，它可以让你读引脚的状态。脚被设置为输出，它可能看起来没啥用，当你无法看到LED的时候它可以让你确定引脚的状态。使用它很简单，只要之前，只需键入“gpio read 0”，其中“0”是接线引脚数量。该命令返回引脚的状态（1为“开”，0为关闭）。
Now that you can use this utility, let's play a little bit with it. You can first, if it's not already the case, control remotely your Raspberry Pi with SSH. You can use Putty for Windows or ServerAuditor for your Smartphone. Then have fun with bash scripts such as this one which is turning on LEDs 0 to 7, waiting 2 seconds, then turning them off again:
现在你可以使用这个实用工具玩一下下。你可以先、远程使用SSH控制你的树莓派。您可以使用 Putty for Windows或ServerAuditor为您的智能手机。然后运行bash脚本，如下面这个，被打开LED 0到7，等待2秒钟，然后再次将其关闭：
- #!/bin/bash
- #set mode to output
- for i in 0 1 2 3 4 5 6 7;
- do gpio mode $i out;
- done;
- #turn on LEDs 0 to 7
- for i in 0 1 2 3 4 5 6 7;
- do gpio write $i 1;
- done;
- #wait 2 seconds
- sleep 2;
- #turn LEDs off
- for i in 0 1 2 3 4 5 6 7;
- do gpio write $i 0;
- done;
Step 3: Installing a web server then transferring your website to it第3步：安装一个Web服务器，然后把网站上传
Controlling the LEDs remotely with SSH is pretty cool but the interface (console) isn't very user friendly and typing the commands every time is long and annoying. That's why we need a graphical interface for our project.
Programming an app for each OS (IOS, Android, Windows phone, Mac, Linux, Windows,...) would be too long and would require to know a lot of different languages for nearly nothing. It would also require to do an application running on the Raspberry Pi. Making it this way would be overkill and time wasting.
That's why a website is the best solution, it's compatible with all devices and you "only" need to know four languages: HTML (for the page's skeleton), CSS (page's style), PHP (interactions with the server) and JavaScript (interactions with the user).
用SSH远程控制LED灯是很酷，但接口（控制台）不是很人性化，键入命令，每次都是漫长而令人讨厌。这就是为什么我们需要一个图形界面。
给每个操作系统编一个程序太麻烦（IOS，安卓，Windows phone，苹果，Linux和Windows，...），还需要做的树莓派运行的应用程序。使这种方式是对时间的浪费。
这就是为什么一个网站是最佳的解决方案，它与所有设备兼容，你“只”需要知道四种语言：HTML（用于页面的骨架），CSS（网页的风格），PHP（与服务器的交互）和JavaScript（互动与用户）。
We indeed need to install a web server on the Raspberry Pi. In our case, we don't need a MySQL database, only a HTTP server and its PHP extension.
我们需要在树莓派安装Web服务器。在我们的例子中，我们并不需要一个MySQL数据库中，只有一个HTTP服务器和PHP扩展。
After updating your Raspberry Pi with the "sudo apt-get update" command, type "sudo apt-get install apache2 php5 libapache2-mod-php5" to install Apache HTTP server and PHP5 extension. You can now test if your server is working by typing the IP of your Raspberry Pi in your browser. You should now see a "It works!" page with two other lines. If you don't, then check your board's IP, try re-installing Apache or rebooting your Raspberry Pi. This page is showing that your Apache server is working properly but not its PHP extension. To check it, navigate to your "/var/www/" directory by using the "cd /var/www/" command. If you use the "ls" command, you should have only one file named "index.html". This file corresponds to the "It works!" page. You can now delete it ("sudo rm index.html") and create another one called "index.php" (use "sudo nano index.php"). Then type the following text:
"sudo apt-get install apache2 php5 libapache2-mod-php5" 用这个命令安装HTTP服务器和php5.
现在可以测试，如果在你浏览器键入IP，您现在应该看到“It works！”和其他两行文字。
如果没有，那么请检查您的IP，请尝试重新安装Apache或重新启动您的树莓派。本页面显示的Apache服务器工作正常，但不是它的PHP扩展。要检查它，通过使用"cd /var/www/"。如果使用“ls”命令，你应该只有一个名为“index.html”一个文件。这个文件对应于“It works!”页。现在，您可以将其删除（"sudo rm index.html"），然后再创建一个名为“index.php文件”（用"sudo nano index.php"）。然后键入以下内容：
- <em><?php
- phpinfo();</em>
- <em>?></em>
After saving it using ^o (Ctrl + o), exit nano editor with ^x (Ctrl + x). Now if you refresh your browser, you should see a long page with lots of information about your server and PHP. If you don't, check the index.php file, try re-installing PHP or try to understand the error displayed instead of the page (Google it if necessary).
使用^ O（按Ctrl+ O）保存，退出编辑器后^ X（CTRL + X）。现在，如果您刷新浏览器，你会看到一个很长的网页，有很多关于你的服务器和PHP的信息。如果没有，检查index.php文件，尝试重新安装PHP或者试着去了解显示的页面错误。必要时baidu或者google。
If both pages were correctly displayed, then you now have a fully functional Apache/PHP server but using nano every time is annoying and not very comfortable. We indeed need to transfer files from your computer to your Raspberry Pi. You may want to install a FTP server but it isn't necessary, you can already transfer files using the SFTP protocol. All you need is an SFTP client on your computer. I'm personally using WinSCP for Windows but there are Cyberduck for mac and Filezilla for Linux. If you try transferring files before reading what's next, you'll probably have issues such as "access refused" or "cannot write here". It's due to the fact that the user pi isn't owning the www directory. Indeed, if you try the "ls -l /var/www" command, you'll see that only root (the super user) is owning the www directory. You can (like I did) use the "sudo chown -R pi /var/www" command to change it or create a group named www-data in which you place the pi user then use the "sudo chown -R www-data /var/www" command. The -R flag is standing for recursive, it means that the user/group isn't owning only the directory itself but also everything inside (index.php as example).
You now have your server ready to work and to receive web pages. Have fun with it if know HTML, CSS and PHP.
遇到问题再来问我。。
Step 4: Controlling the LEDs with PHP
第4步：用PHP控制LED
We now have a web server and a library, let' put them together.
PHP stands for "PHP: Hypertext Preprocessor", It's a server side scripting language. It means that the PHP code is executed once (each time the page is requested) by the server and cannot be seen by the client. I used this language because it's the most popular (and that's the only one I know) but you have to know that they are other server side languages like Python, Ruby, Lua, Perl, ... However, I don't know if the functions we are gonna use have their equivalents in these languages. 我们现在有一个Web服务器和一库，让我们把它们放在一起。 PHP的全称是“PHP：Hypertext Preprocessor”，这是一个服务器端脚本语言。这意味着，PHP代码（页面每次请求）执行一次由服务器进行，不能由客户端可见。我用这种语言，因为它是最流行的（这是唯一一个我知道的）。。。
Executing applications with a PHP code can be done with two different functions: exec (for execute) and system. Firstly, the "system" function. It takes two parameters: "system ( string $command, int $return_var )", as you guessed it, the first parameter is the command to execute and the second one is the returned status of the executed command. The second parameter isn't compulsory. You can use this function if you don't expect an answer from the command executed. Thus, you can use it if you need to execute "gpio mode 0 out" or "gpio write 0 1" commands. Example:
一个PHP代码执行的应用程序可以使用两个不同的功能来完成：exec (for execute) and system。首先，“system”功能。它有两个参数：“system ( string $command, int $return_var )”，第一个参数是要执行的命令，第二个是执行命令的返回状态。第二个参数是不是强制性的。您可以使用此功能，如果你不期望从执行该命令的答案。因此，你可以使用它，如果你需要执行“gpio mode 0 out”或“gpio write 0 1”的命令。 例： <?php system ( "gpio mode 0 out" ); system ( "gpio write 0 1" );?>Then, the "exec" function. This function is making exactly the same work than "system" but it reads and stores what the command printed. It takes three parameters: "exec ( string $command, array $output, int $return_var )", again $command and $return_var are the same parameters and the only difference is the $output array. As it's name says it will store the command's output in an array. Thus, you can use this function if you need what the command prints like with the "gpio read 0" command. Example:
“EXEC”的功能。该功能的使完全和“system”相同，但它读取并存储该输出的信息。它有三个参数：“exec ( string $command, array $output, int $return_var )”，再次命令$command 和 $return_var是相同的参数，唯一的区别是$output输出数组。正如它的名字一样，将存储命令的输出在数组中。因此，你可以，如果你需要什么样的命令输出类似的“gpio read 0”命令使用此功能。 例：
- <?php
- exec ( "gpio read 0", $status );
- print_r ( $status );
- ?>
You can now execute nearly whatever command you want but let's make a little PHP example to practice: We will turn on LEDs 0 to 7, then wait 2 seconds, then turn them off. Just like we did with the bash script. Edit the index.php file with the following code: 现在，您可以执行任何你想要的命令，但让我们做一个小的PHP的例子来练习：我们将开启LED 0到7，然后等待2秒钟，然后将其关闭。就像我们的bash脚本一样。编辑用下面的代码index.php文件 - <?php
- $status = array ( 0 );
- //set pins mode to output
- for ($i = 0; $i <= 7; $i++ ) {
- system ( "gpio mode ".$i." out" );
- }
- //turns on the LEDs
- for ($i = 0; $i <= 7; $i++ ) {
- system ( "gpio write ".$i." 1" );
- }
- //reads and prints the LEDs status
- for ($i = 0; $i <= 7; $i++ ) {
- exec ( "gpio read ".$i, $status );
- echo ( $status[0] );
- }
- //waits 2 seconds
- sleep ( 2 );
- //turns off the LEDs
- for ($i = 0; $i <= 7; $i++ ) {
- system ( "gpio write ".$i." 0" );
- }
- ?>
Step 5: Making the interface 第5步：制作接口
We can now control our Raspberry Pi with simple PHP scripts but there is no interaction with the user and thereby we can't choose the LED to turn on/off. Let's make the interface! 现在，我们可以控制我们的树莓派与简单的PHP脚本，但没有与用户的交互，因此我们无法选择LED的开启/关闭。让我们使界面！
It's composed of pictures I've found on Google images (search for "on/off button"). One was green and the other one red, I just added the number using The Gimp. Each picture/button is corresponding to its LED, so if you click on one of these, the corresponding LED will be turned on/off and the picture will be changed to its green/red version. The page's skeleton will be made with HTML, the server interactions and page's generation with PHP and at last JavaScript to manage interactions with the user and page's animation. If you don't know, JavaScript is a client side language and unlike PHP, it's executed not once, but continuously by your browser. That's why you can change the page's look without reloading it or accessing to an other. If you are wondering why I spoke about CSS before, it's just because we need it for some style and page-layout like the the black background. I didn't make a full .css file because it wasn't necessary here.
We first need an "index.php" file (extension is .php and not .html cause we will use PHP code, it helps the server to know if there is PHP to execute before sending the generated page). This page is the main page containing the 8 buttons. These buttons are first generated with a "exec ( "gpio read ".$i, $output );" in a for loop. Then we need to detect when the user is clicking on one of these buttons. That's where the JavaScript is useful, I put it in a separate file called "script.js" but it's still included in index.php. The script is simply adding an event listener to all of the eight buttons and each time one of these is pressed, it uses a function which is asking for gpio.php, receiving the answer then returning it. Finally, in function of this, the JavaScript changes the button to red (for OFF) or to green (for ON). Now, the last page: gpio.php. It contains the PHP code to turn on/off the LEDs in function of what the JavaScript function sent. The user shouldn't normally ask for this precise page but there is one golden rule when creating websites and you should always remember this one: "NEVER TRUST THE USER". In other words, never think the user is always gonna do what you think he's gonna do. Thus, I added some securities at the begin of the PHP code like making sure the user gave a correct value and not a letter as example. I made a small diagram to sum up all this text.
You can download the full project directly on this website below. 懒得翻译。。用下面连接现在网站的全部内容
Step 6: Conclusion and ideas of improvementsThis small but long explained project was fun and I learned a lot. I hope you did the same. However, controlling LEDs isn't very useful. That's why what we made is rather a tool than a real project. Christmas is soon (about one and a half months from the day I wrote this instructable) so why not replacing LEDs by relays and controlling lights around your house. There are some pretty good relay boards for the Raspberry Pi on Ebay and more generally on the Internet. Alternatively, and if you're not scared about working on your house, you can even control your house's lights, garage door, coffee machine, heating system, ... The only limit is your imagination.
There are also a lot of possible improvements like changing the interface, adding more LEDs via a shift register, using vocal recognition, ... In addition, with PHP, you are not limited to gpio write or read. You can use the full Gpio utility and thus interact with other devices with UART or any other implemented protocol. You can also use PWM (Pulse Width Modification) to control servos, ...
Writing this Instructable and sharing my little knowledge was a great pleasure for me and I hope it was the same for you to read it. I tried to keep it simple but at the same time to teach the most possible. I didn't want to do a simple and dumb step by step: "download this code, run it, you're done". I think that something is useless to learn until you understand how it works or why you do this and not that. Let me know if you think it's the good way or if I should do it otherwise.
自己看把。。作者的一些想法和可行的优化方案。
|
[复制链接]
窥视卡
雷达卡
发表于 2015-12-10 11:22:32
Web 2.0.zip
变色卡
照妖镜
/1 
|小黑屋|开源创客社区
( 沪ICP备14025914号-3 ) 