In order for people on the Internet to control your Christmas lights, they need to see your lights (through an outdoor webcam) and actually control them (through the Raspberry Pi running Falcon Player). This involves creating webpage that shows the video of your house and buttons that visitors click to control your lights. This involves knowing a little about HTML and PHP programming, but I provide enough examples to get you started.
To create a webpage, you need to purchase a web hosting package. There are many companies on the Internet that do this; I prefer www.1and1.com. The hosting package will provide a place where you create your webpage and a domain name to access it (in my case, www.itwinkle.org). Whichever company that you choose, make sure that it allows creating and running php scripts.
Showing a live video feed from your webcam on the webpage
- Create a file called index.php on your home computer using a text editor such as Windows Notepad. Note: Do not use a word processor such a Microsoft Word as it will add extra characters into the php file that cannot be understood by the website.
- Type the following lines in this file:
<!DOCTYPE html>
<html>
<body>
<img src="http://itwinkle.ddns.net:8080" />
</body>
</html> - Replace "itwinkle.ddns.net" with the Dynamic DNS hostname that you created in the "Setup a Dynamic DNS service so that the Raspberry Pi and webcam can be easily accessed from the Internet" page on this website.
- Save the file, the upload it to your website. The technique for uploading filers can be different for each Internet hosting company. I prefer using FTP to send the index.php file to the website, but there are many other ways. Contact your website hosting company if you are not sure how to do this.
- Open a web browser on your home computer, then go to the website domain name that you created when purchasing the website hosting package. In my case, the website is www.itwinkle.org
- You should see a live video feed from your webcam!
Controlling your lights from a webpage
The first step to controlling your lights from a webpage is configuring Falcon Player that runs on the Raspberry Pi. Normally, you use the Falcon Player web interface to choose which show files that you want to play. You choose a show/sequence file, click the [Play] button, then your lights play the show. For Internet control of your lights, visitors need to play show files without using Falcon Player's web interface. This involves writing "scripts" on Falcon Player to automate how it works.
Creating a script file on the Falcon Player Raspberry Pi
- Create a file called butterfly.sh on your home computer using a text editor such as Windows Notepad. Replace "butterfly" with the name of your show/fseq file. In my case, I named the file "butterfly.sh" because the show/fseq name is "butterfly.fseq". Note: Do not use a word processor such a Microsoft Word as it will add extra characters into the script file that cannot be understood by the website.
- Type the following lines in this file, then save it:
/opt/fpp/bin.pi/fpp -c stop
/opt/fpp/bin.pi/fpp -p "butterfly"
Replace the "butterfly" in the above line with the name of the show file you want to use.
The above lines do two things. The first line tells Falcon Player to stop animating your lights, so that it is ready to play the show that was chosen. The second line tells Falcon Player to play the "butterfly" show/fseq file, which starts animating your lights. - Using your home computer's web browser, open the Falcon Player web interface, then login with the name & password when prompted. In the Falcon Player menu, choose "Content Setup > File Manager", then click the Scripts tab. The "Script Files" section should be empty as you haven't uploaded any scripts yet. Click the blue [Select Files] button, then browse your computer to the folder where you saved the above butterfly.sh file. When you select the script file and then click [Open], the file is immediately uploaded to Falcon Player on the RPi. The Script Files section should show the script file that you uploaded.
Creating a script file on your website
- Create a file called butterfly.php on your home computer using a text editor such as Windows Notepad. Replace "butterfly" with the name of your show/fseq file. In my case, I named the file "butterfly.sh" because the show/fseq name is "butterfly.fseq". Note: Do not use a word processor such a Microsoft Word as it will add extra characters into the php file that cannot be understood by the website.
- Type the following lines in this file, then save it:
<?php
$url = "http://itwinkle.ddns.net/runEventScript.php?scriptName=butterfly.sh";
$headers = @get_headers($url);
?>
Replace "itwinkle.ddns.net" with the Dynamic DNS hostname that you created from the Setup a "Dynamic DNS service so that the Raspberry Pi and webcam can be easily accessed from the Internet" page. Replace the "butterfly" in the above line with the name of the script file that you created above.
The above lines allows website visitors to activate a file called runEventScript on your Raspberry Pi running Falcon Player. This file then runs the script that tells Falcon Player to stop what it is currently doing, then play the show/fseq file that was chosen on your lights. - Save the file, the upload it to your website. The technique for uploading filers can be different for each Internet hosting company. I prefer using FTP to send the butterfly.sh file to the website, but there are many other ways. Contact your website hosting company if you are not sure how to do this.
Creating a website link to activate the website script
The final step is creating a button that website visitors click to play chosen show files, thereby animating your lights.
- If you already created an index.php file to show video from your outdoor webcam, open this file to edit it. Note: Do not use a word processor such a Microsoft Word as it will add extra characters into the php file that cannot be understood by the website.
- Between the <body> and </body> lines in this file, add the following lines then save it:
<iframe style="display:none;" name="target"></iframe>
<a href="/butterfly.php" target="target">Butterfly</a>
Replace the "butterfly" in the above line with the name of the show file you want to use.
The above lines allows website visitors to activate the butterfly.php on your website, which then activates a file called runEventScript on your Raspberry Pi running Falcon Player. This file then runs the script that tells Falcon Player to stop what it is currently doing, then play the show/fseq file that was chosen on your lights. - Save the file, the upload it to your website. The technique for uploading filers can be different for each Internet hosting company. I prefer using FTP to send the butterfly.sh file to the website, but there are many other ways. Contact your website hosting company if you are not sure how to do this.
- Open your home computer's web browser, then go to the domain name that you created when purchasing the website hosting package. You will see a link on the page called "Butterfly". When you click this link your lights should starting animating with the butterfly show.
Protecting your Falcon Player Raspberry Pi from hackers
When website visitors click the "Butterfly" link to control your lights, this link activates the butterfly.php file on your website. This file then activities the RunEventScript file on your Raspberry Pi. The trouble is, RunEventScript can run all sorts of scripts on your Raspberry Pi, possibly scripts that can damage your RPi. If hackers view the contents of the butterfly.sh file on your website, they will see references to RunEventScript and may try to hack your RPi.
The following steps offer basic security by hiding the RunEventScript reference, so that it is not easily seen inside the butterfly.php on your website. As mentioned in earlier instructions, please disconnect your Raspberry Pi from the Internet when Christmas is over; do not leave it connected to the Internet 365 days a year! Otherwise you could be inviting hackers to damage your RPi.
- Open the butterfly.php file that you created in the above steps, then copy its contents to the clipboard (highlight all lines, then press [Ctrl-C].
- With your home computer's web browser, go to the PHP Obfuscator website.
- In the area that says "Insert PHP file contents here...", click your mouse in this area, then paste the contents of the clipboard ([Ctrl-V]).
- The right area of this webpage will show a lot of gibberish. Highlight all of this gibberish (make sure of you have all lines; you may have to scroll down to highlight all of it), then copy it to the clipboard.
- Create a new file called butterfly.php with a text editor, then paste the contents of the clipboard into it.
- Save the file. Important: Do not overwrite the original butterfly.php file from Step 1; save this new file somewhere else. You will need the original file in its "non gibberish" state in case you need to make changes to it in the future.
- Save the file, the upload it to your website, overwriting the butterfly.php file that was there. The technique for uploading filers can be different for each Internet hosting company. I prefer using FTP to send the butterfly.php file to the website, but there are many other ways. Contact your website hosting company if you are not sure how to do this.
Note: If you make changes to the original butterfly.php file in the future, you need to follow the above steps again to create a new "gibberish" version of it, then save it to your website again.