Getting Started

Here are the tools we’re going to use in this tutorial:

I’m not going into details about how to install these tools, but I am going to tell you how to configure them.

There are a lot of IDEs out there that support Python, but for this tutorial I’m going to use my personal favorite, Aptana Studio. First start Aptana Studio, go to File>New>Project and from the list select PyDev and click on Next. Enter a project name, like “player”, select Python as the project type 2.7 as the grammar version and if your interpreter is not configured click to configure it. Finally select the option to create ‘src’ folder.

You should see in the package explorer tab the project “player”. Left-click on the ‘src’ folder and select new>PyDev module then in the window that appears enter the name ‘player’ and select the template <Empty>. Click Finish and save your project.

Now I want you to go in the folder in which you have your project and create 3 new folders: ‘dist’, ‘res’ and ‘ui’. The first one will contain your compiled app, ‘res’ will contain resource files like images and docs, and in ‘ui’ we’ll save our GUI.

Now open QtCreator, from the menu select File>New File or Project> from the list select a Qt file, then choose the “Widget” template, name the Form file MainForm.ui. Save MainForm.ui in the ‘player/ui’ folder.

If you want some icons for play, stop, open, save, shuffle, delete and clear playlist buttons, create a new folder in ‘res’ called ‘images’ and save your icons there. I use this site for free icons: http://findicons.com/  but there are a lot of sites where you can get the icons you like.

In your ‘/res’ folder create a new folder ‘docs’. In this folder save the folowing as ‘index.html’

<!DOCTYPE html>
 <html>
 <head>
 <title>Tick Player</title>
 <script type="text/javascript" src="http://www.youtube.com/player_api"></script>
 <script type="text/javascript">
 var player;
 function onYouTubePlayerAPIReady(){
 player = new YT.Player('embDiv', {
 height: '390',
 width: '640',
 playerVars: { 'autoplay': 1 },
 events: {
 'onStateChange': onPlayerStateChange,
 'onError' : onPlayerError
 }
 });
 }
 function showVideo(vid){
 player.cueVideoById(vid);
 player.playVideo();
 }
 function onPlayerError(event){
 main.video_over();
 }
 function onPlayerStateChange(event) {
 if (event.data == YT.PlayerState.ENDED) {
 main.video_over();
 }
}
 function stopVideo() {
 player.stopVideo();
}
 </script>
</head>
 <body>
 <div id="embDiv">
 </div>
</body>
 </html>

In your ‘/res’ folder create a new file res.qrc. This is an XML file that will contain a list of all your resources. Here’s mine as an example:


<RCC>
 <qresource prefix="/res">
 <file>images/edit_clear.png</file>
 <file>images/delete.png</file>
 <file>images/youtube_ico.ico</file>
 <file>images/open.png</file>
 <file>images/play.jpg</file>
 <file>images/save.png</file>
 <file>images/shuffle.jpg</file>
 <file>images/stop.jpg</file>
 </qresource>
 <qresource prefix="/res">
 <file>docs/index.html</file>
 </qresource>
</RCC>

PySide uses 2 scripts to compile the resources and GUI into python files.
You need to run these from a terminal in your ‘/player’ folder:

pyside-uic ui/MainForm.ui > src/MainForm.py
pyside-rcc res/res.qrc > src/res_rc.py

In Linux I’ve made a script witch i can double click and does the job for me so I don’t have to open a terminal every time. If you use linux save this in ‘/player’ in a file called ‘genScript’ (you can name it anything you like)

#!/bin/bash
clear
pyside-uic ui/MainForm.ui > src/MainForm.py
pyside-rcc res/res.qrc > src/res_rc.py

The project in Aptana should look like this:

I’ve uploaded all the files you should have by now here: https://sourceforge.net/projects/playertutorial/files/player%200.1/

I made a video: http://youtu.be/UBPLUxrCPzc

Feel free to ask questions or post other comments.

Next Part of the totorial: GUI

Advertisements
This entry was posted in PySide, Python, TubePlayer and tagged , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

3 Responses to Getting Started

  1. Pingback: Intro | CodeForce

  2. toto says:

    don’t undertstand what you mean with Pyside ?
    have we to open QtDesigner and make a Mianwindow file for do it?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s