Introduction: Public Window With HTML5
Public Window
The objective of the Public Window is to promote interactive art in public spaces. Artists get the opportunity to develop interactive work for the audience on the street and the internet user at a distance. The shop windows have been transferred into software windows. The viewer can control the works through the use of touch-screens fitted to the window. The occasional passer-by can change form, movement and / or lighting of the works.
Public Window 001 and Public Window 002, both in Leiden, are the first in a series. Amsterdam, Delft, The Hague, Brussels, Basle, Dublin, Sydney and many other cities will follow. Artists will be able to reach new audiences throughout the world through this new social medium. Cameras will take the art beyond it’s local setting and the whole world will become it’s platform for communication.
Quoted from http://www.publicwinow.net
Simply said, a public window is a collaboration of interactive art, software and hardware in a window which allows artists to display their creations and have people from all around the world to interact with it. At the end we want to see Public Windows all across the world to make one big social platform for audiences and artists.
(Public Window before we started with this Intstructable)
How this project started
This project (the making of an instructable for making a Public Window) is an initiative from the University Leiden of applied Science. We intend to motivate people to make Public Windows themselves so that, eventually, Public Windows exist all around the world. And what better way to do this than by providing a step-by-step guide to help others set-up their own public window.
Who we are
We are Swing Concepting, a group of students of the Bachelor of Information, Communication & Technology from the University Leiden of applied Science. This project is in line with our Major: Media Technology. Besides making this step-by-step guide, we analysed the techniques that were used in the first version of Public Window and came with a new version where a number of bugs were fixed, and where HTML5 was implemented!. More about this further on in the guide. Let’s start!
Note
We are from a Dutch school of computer science. Most of the screen-shots taken during the installation show Dutch language. Please don't worry as the guide is written in English. You will not have any problems going through the steps.
Step 1: Required Skills and Hardware
What you need to know
Before you start with this guide you need to know that you are expected to have knowledge of:
• Basic HTML & CSS knowledge (for editing your own Public Window website)
• Basic HTML5 knowledge or interest in learning about it
• Basic Programming Knowledge (Arduino)
Overall you really don’t need to know that much. If you feel that you do not “qualify” you can always try to set up a public window by using the example code.
What you need
In this instructable we are only going to explain how to setup the Public Window itself. But we do not mention the part about the interactive art. So if you want to have a guide regarding the programming of a LED-cube, like in our example, or any other Arduino interactive art pieces than we will need to redirect you to other instructables.
For setting up the Public Window (PW) you will need to following items:
• A window
• A computer (Windows/Mac)
• An internet connection
• An account on PublicWindow.net
• The Public Window software, downloadable at:
http://swing.nderuijter.nl/wp-content/uploads/2011/07/PublicWindow_Install_Files.zip
• An Arduino dev board
• Sensors for controlling the Arduino (your choice)
• Idea for interactive art to place in the PW and to control with the Arduino
All software we used is Open Source, the only items that come with a cost are the Arduino and the equipment/items that are required for making your own interactive art, the choice is yours.
Let’s move on to setting up the first part the Computer
Step 2: The Software Setup
For your own Public window, you’ll need to have a couple of things installed before we start. (All files can be found in the zipfile found on this page)
http://swing.nderuijter.nl/wp-content/uploads/2011/07/PublicWindow_Install_Files.zip
Windows
1. Install Python. Run python-2.7.msi windows installer and follow the on screen instructions.
2. Install Pythons Serial, Run pyserial-2.5.win32.exe, Select Python Version 2.7 when prompted for "select python installation to use:"
3. Install USB drivers, Plug in the Arduino board, point the Windows Add Hardware wizard to the "FTDI USB Drivers" directory.
a. NOTE: With arduino's older than the uno and mega, the normal drivers will probably not work, this is normal . For that purpose we included a folder named 'drivers alternative'. You will have to install this driver twice.
4. Install the Arduino software on your PC. (files can be found at http://arduino.cc/en/Main/Software ) Save the install file, open it and follow the instructions.
5. Install the latest version of Java. You can find the download here: http://javadl.sun.com/webapps/download/AutoDL?BundleId=48358 . Save the executable file, double click it and follow the instructions.
6. Make sure you have the latest version of Flashplayer installed on your computer webbrowser.
*We highly recommend you use "Windows" and "Google Chrome" because flash works the best with those two.
Mac OSx
1. As Mac OS has Python installed by default, you can skip the Pyhton install and start right away with PySerial.
2. Install pyserial, open a terminal window, navigate to the 'pyserial-2.5' folder where you found this file. You can also choose to just change the directory where you’re working from in your terminal by using de “cd” command. After using the right directory use the following command in your terminal:
a. sudo python setup.py install
i. NOTE: you will be asked for the administrator password of the computer you are installing on.
3. Install the Arduino software on your Mac. (files can be found at http://arduino.cc/en/Main/Software ) Save the install file, open it and follow the instructions. (Here you can find a detailed tutorial: http://www.arduino.cc/en/Guide/MacOSX )
4. Install USB drivers by double clicking on the FTDIUSBSerialDriver_10_4_10_5_10_6.dmg file. And thereby installing the USB driver.
5. You will not need to install java, because Mac OS comes with java installed by default. You might want to check for updates to verify you’re running the latest version.
6. Make sure you have the latest version of Flashplayer installed on your mac webbrowser.
The main reason for installing all of the above is that the public window consists of a lot of different parts that need to work together.
• Python is used to send a new program to the Arduino that is controlling your interactive art piece.
• PySerial is used to activate Python by sending serial data.
• USB drivers speak for themselves
• The Arduino software is used as a IDE for making your Arduino programme
• Flash is needed for displaying the webcam streams.
• Java is necessary because the media server that we’re running is Java based.
A web-browser is needed to display the Public Window. We recommend you use Google Chrome since we've optimized the PW for Google Chrome browser usage.
Now that you’ve installed the most important components for starting up your own Public window, let us move on to the Red5 server part so that we can start our webcam-streams and receive other streams.
Step 3: Setting Up the Webcam Stream
How it works
You might have already noticed in our example screen of the Public Window that all Public Windows will have 2 webcam-streams. One for viewing yourself standing at the Public Window and one webcam-stream for viewing someone else at any other Public Window. With the streams we would like to get a kind of Chatroulette-effect with the difference that you will be able to choose which Public Window you would like to view.
For the broadcasting of the webcam-stream you will need a media server. Luckily, the Public Window foundation will provide you with your own webcam-stream slot on our own Red5 Media Server.
The Stream
Setting up the webcam stream is quite easy. We have provided you with a complete Software Package for setting up your own Public Window in Step 2. One big advantage of this is that you'll only need to edit 2 lines of code in the "index.html"-file of the website to make your webcam stream work. In Step 6 you'll read how.
Tweaking
For this step we want you to connect a webcam to your computer and have it running. For testing you can use your laptop webcam. But for the Window we recommend to have a webcam with a long cable so that you can easily position it in your Window. ( NOTE: if you want to mess around with the webcam, you can use a programme like ManyCam to add effects to the stream).
Step 4: Setting Up the Webpage
The website
Every Public Window is, in fact, a local webpage on a computer that is viewable in a window that is open for public. It’s up to you how you let people interact with the Public Window. But for the web-template that we provide we used a touch screen in combination with buttons on the webpage to let people interact with the Public Window. NOTE: Remember this is a basic template, we encourage you to customize it to your own needs. Eventually, we want every Public Window to be unique.
Running the website
If you have the webpage you’ll have 3 options to display it in your Public Window.
1. Run locally on your own web browser (highly recommended! Just double click the index.html file)
2. Run locally with local servers like XAMP/WAMP etc..
3. Run online with a web server.
We recommend you run the website locally because it’s safer and it’s free of cost!
Since we're running our websites with HTML/CSS/JS only, it's not necessary to run a server locally (XAMPP etc) or on the internet. We prefer that you run your website locally (double click the index.html) because of potential safety issues. If you're not familiar with HTML/CSS/JS, we recommend you read some tutorials on website building at http://www.w3schools.com.
The zipfile containing the files for the web-template is found in Step 1 of this guide.
Step 5: Testing the Arduino Connection
The Window
At every Public Window you'll need a Arduino dev board which will interact with the public. And like we said before it's all about being creative and open-minded. The picture of a Public Window in this step shows a Public Window with a Touchscreen on the Glass. Behind the glass you see a black and white wooden construction. At this Public Window you'll be able to tilt the big black wooden plate as you desire with the touchscreen. This is all powered and done by an Arduino that is hooked up to the computer and website that sends the commands to the Arduino.
Thinking ahead
You'll need to think of a good concept on how to let people interact with your Public Window and how you can implement that concept with the Arduino. After you've figured out you can move on to the next step.
Testing
You'll first want to hook up your Arduino to you computer and test it. If you go to File->Examples->Basics->Blink you'll find an example of a piece of code that will help you test your Arduino. The code should look like this:
void setup(){
pinMode(13,OUTPUT);
}
void loop(){
digitalWrite(13,HIGH);
delay(1000);
digitalWrite(13,LOW);
delay(1000);
}
If you want to check if the connection works you will have to change the delay, because this script might already be programmed on the arduino. If you change the delay to "100" it will blink slower etc.Now hit the upload button, so that we can test the Arduino connection.
Troubleshooting
This example will blink your LED that is placed at PIN 13 or will blink the small LED that is placed on the Arduino standardly for testing the connection. If it doesn't work, than go troubleshoot (check com-ports, check selected board, check software etc....). If you still can't find the problem, reinstall the Arduino software and follow this guide http://arduino.cc/en/Guide/Windows
Website Connection
Next we'll want to test the connection between the website and the Arduino. The website communicates with the Arduino with Python and a HTML5 websocket in combination with PySerial. For the testing you'll need to alter the action of the Arduino, by sending serial data through the website.
Example Code:
int incomingByte = 0;
void setup(){
Serial.begin(9600);
pinMode(13,OUTPUT);
}
void loop(){
if (Serial.available() > 0) {
incomingByte = Serial.read();
if( incomingByte = 1)
{
digitalWrite(13,HIGH);
delay(5000);
digitalWrite(13,LOW);
delay(5000);
)
if( incomingByte = 2)
{
digitalWrite(13,HIGH);
delay(200);
digitalWrite(13,LOW);
delay(200);
}
}
}
With this script you'll alter the time for the Blink. If you open the serial monitor you will be able to send a 1 or a 2 to the Arduino so that you can switch between a fast or a slow blink.
This is just the basics. At our website it will be a little different, we'll use PySerial to send the Serial data to the Arduino..
Now you're on your own
The next step is building your Arduino piece. We'll not provide you with "ready to build" examples of Arduino pieces. For that we recommend you to search https://www.instructables.com since that is the place to be when searching for information regarding Arduino based projects. Make sure you have interaction with the Public Window by sensors or by using the website.
Step 6: Making the HTML5 Webpage Work at Your Project
This is the hardest part. You need to change the website to make it work properly for your project. In this step we will try to make you understand more from the code so that you will be able to edit it to your needs. If we open the index.html file we'll see a lot of code. There are 2 important pieces in this code for now.
Flashvars & CamIN & CamOut
The first important bit of code is the flashvars and the Flash objects. The flashvars is a variable value where you can declare the id of which webcam stream you would like to broadcast or would like to see. You will see a couple of Flasvars looking like this:
<param name="FlashVars" value="localID=pw2_2" />
pw2_2 stands for Public Window number 2 and cam number 2. (Normally every Public Window will have 1 or 2 cams depending on need of the maker/owner of the Public Window.)
The flashvar is always declared at the end of every camin.swf or camout.swf statement. These two cam.swf objects function like they are named, they will show a webcam stream on the webpage depending on the retrieved id and they will send out a webcam stream with the given id. So that other Public Windows can embed your stream on their webpage. The only thing that you'll need to edit here is id.
After you've registered at http://www.publicwindow.net, you'll receive a Public Window name and a Public Window number. Your webcam stream will be "pw11_1" when you have Public Window number 11 and you want to send a stream from webcam 1. (This function is not yet implemented, you can just use pw6_1 for example)
The next bit of code is the buttons.
Buttons and Serial data
If you scroll down the code you'll see the part where the 3 buttons are declared. In this bit of code we make 3 buttons with a .PNG picture to give them their own look and feel. Here is the code that you'll see.
<div id="knoppen" class="fltrt">
<div onClick="ws.send('0');"><img src="img/snake_button.png"></img></div>
<div onClick="ws.send('R');"><img src="img/wolk_button.png"></img></div>
<div onClick="ws.send('L');"><img src="img/lol_button.png"></img></div>
</div>
As you can see the images also function as links and therefore as a button. If you click on one of the buttons they will send a message with "ws" function which is a function that can be found in the java-script files. The <div onClick="ws.send('0');"> statement will send a 0 with javascript to python which will then send a byte to the Arduino. The "0" is interpreted by the Arduino and will result in a change of the actions done by the Arduino.
In this example we've got 3 buttons: a Snake, a Cloud and a LOL-button. The template was used in combination with a LED-cube. If we hook up the LED-cube with a Arduino to the Website. You'll be able to change the animation in the LED-cube by clicking on the buttons.
Summary
If you want to edit the webcam streams you change the id at the flash objects.
If you want to change the buttons, change the byte that you want to send to the Arduino. (And for exterior just change the image or CSS files)
NOTE: Our tests indicated that it is possible to send 1 byte only.
Now that you know how the system works you'll be able to start it up. Proceed to the next step.
Step 7: Starting Up the Public Window
We're almost done, just 2 steps left.
Starting Up
Plug in your Arduino system.
Verify if Python is running. To do that, go to website folder locally and go to "Proxy"-folder and start up "main.py" (open "main.py" and hit tihe "f5"button. This will start up the Python websocket server.
Troubleshooting the COM port
There is a possibility that the file won't start or give an error. The most likely error will be that the COM port is not set right. To solve this problem you'll need to open the "wsthread.py" file ( located in the same folder as main.py). You'll need to open it with IDLE (right click-> open with IDLE). IDLE is installed with the python install.
You'll see this part of code:
def __init__ ( self, channel, details, websocket ):
self.channel = channel
self.details = details
self.websocket = websocket
self.arduino = ArduinoGateway("COM6")
self.poke_count = 0
self.last_val = ""
threading.Thread.__init__ ( self )
You'll need to change the ArduinoGateway corresponding with the right COM port that your Arduino uses on your computer. You can check this by going to you window control panel->system->hardware->device manager -> Ports(com & ltp). There you can see which ports are available at your computer. Normally, the Arduino will use the latest and highest COM port. (probably COM5 or COM6 ). Change if so required, save and close the file and restart "main.py".
Launching and Flash settings
After you have the Python part up-and-running, start the website. Double click on "index.html" to launch it. What you'll notice is that both the webcam streams won't work. This is because we need to set the security settings right for Adobe Flash.
• Right-Click on the webcam stream and go to settings.
• Enable the hardware acceleration
• Allow and remember the privacy regarding the Mic and Webcam
• After you'll get a pop-up of Flash regarding : Adobe Flash Player Security
• Click on settings
• Go to advanced
• Go to properties/options for trusted location
• Click on add
• Add the entire folder where your "index.html" file is located.
• Confirm it
• Refresh the webpage
You are now ready to go, you're the proud owner of a Public Window. Let's promote it.
Step 8: Promote Your Window
Now you're done making your own Public Window, you're ready to promoteit. Tell you friends, family and colleagues about your Public Window and let them be amazed. Try to get others to also start a Public Window so that we eventually get one big network of Public Windows where you can connect to eachother.
Question and Suggestions
You are invited to post your questions and suggestions regarding the guide and the Public Window foundation below, or let us know us know on the Public Window forum for developers/artists, available via http://www.forum.publicwindow.net
