Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
386 lines (232 sloc) 10.9 KB

Introduction

Krusovice is a high quality HTML5 rhythmic photo show creator which you can integrate to your website.

Background

This is a rewrite and clean-up of previous slideshow9000 attempt.

Music rhythm data is extracted using Echo Nest Remix API. Rhythm data must be pregenerated prior real-time photo show run.

Installation

Example:

git clone git@github.com:miohtama/Krusovice.git
git submodule update --init

We will pull remix.js for Echo Nest Javascript access in.

Componets

Timeliner

Timeliner takes in a set of show elements (images, text slides) and puts them on a timeline based on music rhythm data.

Timeline visualization

Timeline visualization is an utility which shows your built timeline, so you can see where slides come in and out.

Player

Player plays the ready show plan in a <canvas>.

Running demos

If you run demos from file:// you need to disable AJAX security checks.

Start Google Chrome with no security from command lin, OSX:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security -–allow-file-access-from-files

Start Google Chrome from command line, Ubuntu/Linux:

chromium-browser --disable-web-security

Alternative run with SimpleHTTPServer in port 8000:

python -m SimpleHTTPServer

Unit tests

Fast tests:

java -jar JsTestDriver-1.3.4-a.jar --port 9876  &
java -jar JsTestDriver-1.3.4-a.jar --config jsTestDriver.conf --tests all --reset

Slow tests:

python -m "SimpleHTTPServer" &
java -Xmx512M -jar JsTestDriver-1.3.4-a.jar --port 9876 --config jsTestDriver-render.conf &
java -Xmx512M -jar JsTestDriver-1.3.4-a.jar --config jsTestDriver-render.conf --reset --tests all

If you get:

Render.testRenderFewFramesWebGL failed (185.00 ms): SECURITY_ERR: SECURITY_ERR: DOM Exception 18

... you did not start Chrome Security disabled (see above).

JsTestDriver brief

JsTestDriver is a Javascript unit testing tool and framework from Google. It will automatically load a set fo static JS files and execute unit test cases for them.

JsTestDriver provides its own unit testing suite, but it can be integrated with other test frameworks (QUnit).

JsTestDriver limitations

Currently JsTestDriver has some limitations which I hope to have as features in the future

  • You still need to Alt-Tab to the browser to check console logs

JS-test-driver command line

wget http://js-test-driver.googlecode.com/files/JsTestDriver-1.3.4-a.jar
java -jar JsTestDriver-1.3.4-a.jar --port 9876

Then visit

http://localhost:9876

Leave the browser running. Put the job JsTestDriver on background.

Now trigger a test run:

java -jar JsTestDriver-1.3.4-a.jar --tests all

Asserts with JsTestDriver

A good guide to different asserts you can make is in the source code itself

Command-line

This setup gives you local, instant, continuous integration of Javascript unit tests using JsTestDriver. JSTestDriver is remote browser controlling and continuous integration framework for JSUnit unit tests.

We use Python Watchdog to monitor Javascript file save events.

Because Javascript lacks static compile time checks, rigirous unit testing is the only way to tame this bastard of Scheme. Especially considering that you have to Microsoft legacy devouring your code and mind.

What we will accomplish

  • Save Javascript file in your favorite editor
  • Tests run automatically, triggered by file system monitoring
  • Alt-tab to browser to see results in the console output

These instructions are for OSX and Linux. Windows users can adapt with necessary skillz0r.

Note

JsTestDriver supports other Javascript unit test frameworks besides JsUnit. For example, QUnit bindings are available.

Install JsTestDriver:

wget http://js-test-driver.googlecode.com/files/JsTestDriver-1.3.2.jar

Install Watchdog (in virtualenv isolated Python):

git clone git://github.com/gorakhargosh/watchdog.git
cd watchdog
python setup.py install

Create JsTestDriver.conf file telling where to load tests and where to load data.

Start JsTestDriver as a background process:

::
java -jar JsTestDriver-1.3.2.jar --port 9876 &

Capture browser(s) by visiting in the URL in a browser opened on the computer running tests (usually your own computer...). These browsers will keep executing unit test until the page is closed:

http://localhost:9876/capture

Warning

The success with new browser versions vary. JsTestDriver uses console exception stack trace text analysis to capture the errors. However, the browser vendors do not have standardized, or even stable, stack trace format. If you get just report "test failed" without further information how it failed try to switch the test browser. I had best luck with Google Chrome version 13 (the exact version number is very important!). Please report further browser problems to JsTestDriver discussion group.

Note

Google doesn't provide old Chrome downloads. Niiice.

Specifically the following browsers failed to produce useable stack traces with JsTestDriver 1.3.2: Firefox 6, Chrome 14, Safari 5.1, Opera 11.50. Pass/fail output still works.

This magic spell will make Watchdog to rerun tests on file-system changes:

watchmedo shell-command --patterns="*.js" --recursive  --command='java -jar JsTestDriver-1.3.2.jar --captureConsole --tests all'

To run a single test case (e.g. Timeliner):

java -jar JsTestDriver-1.3.2.jar --captureConsole --tests Timeliner

To run a single test:

java -jar JsTestDriver-1.3.2.jar --tests Timeliner.testBasicNoMusic

Save any .js file, watchmedo notices and runs the tests.

Use --captureConsole to control whether you want to see console output in the terminal (only text) or browser (object explorer enabled).

Note

You can normally insert debug breakpoints in the web browser Javascript debugger. The test execution will pause.

Sometimes JsTestDriver daemon process gets stuck. Kill it and restart with the following terminal commands:

# hit CTRL+C to stop Watchdog
fg # Bring JsTestDriver process to foreground
# hit CTRL+C

You might need to also increase the default Java heap site if you get out of memory errors:

java -Xmx512M -jar JsTestDriver-1.3.2.jar --port 9876 --config jsTestDriver-render.conf &
java -Xmx512M -jar JsTestDriver-1.3.2.jar --config jsTestDriver-render.conf --tests all

Static data

Image files etc. which are exposed to unit tests do not follow the same relative paths as they would on the file system, because the test runner URL is clunky.

You use serve directive in JsTestDriver.conf to specify the location of static media files:

serve:
  - testdata/*

Async tests

These tests are runned separately because the JsTestDriver server cannot serve images and running the tests are slow.

We use Python SimpleHTTPServer to serve data,.

How to run:

python -m SimpleHTTPServer &
java -Xmx512M -jar JsTestDriver-1.3.4-a.jar --config jsTestDriver-render.conf --port 9876 &
# Capture browser in this point
java -Xmx512M -jar JsTestDriver-1.3.4-a.jar --config jsTestDriver-render.conf --tests all

More info

More info

Available test sets

Fast (no images, canvas stressing):

watchmedo shell-command --patterns="*.js" --recursive  --command='java -jar JsTestDriver-1.3.2.jar --captureConsole --tests all'

Render (loads images, renders several frames, async):

watchmedo shell-command --patterns="*.js" --recursive  --command='java -jar JsTestDriver-1.3.2.jar --config jsTestDriver-render.conf --tests all'

Documentation

Building API documentation

Installing prerequisitements (OSX):

sudo gem install rdiscount json parallel rspec

Installing JSDuck:

# --pre installs 2.0 beta version
sudo gem install --pre jsduck

Building docs with JSDuck:

bin/build-docs.sh

More info

Release

To run the most fucked up release script ever:

wget http://yui.zenfs.com/releases/yuicompressor/yuicompressor-2.4.6.zip
unzip yuicompressor-2.4.6.zip
bin/release.py -d build trunk

Note

All JS files must terminate with newline or the compressor will complain.

Music

The out of the box project contains CC licensed music files for testing purposes

Echo Nest REMIX

Echo Nest Remix API works by uploading data to Echo Nest servers for audio analysis. First MP3 is decoded with ffmpeg and then raw data is uploaded(?).

Echo Nest remix API Python bindings can be installed:

source pyramid/bin/activate
svn checkout http://echo-nest-remix.googlecode.com/svn/trunk/ echo-nest-remix
cd echo-nest-remix
# Apparently this puts some crap to /usr/local and /usr/local/bin
sudo python setup.py install
sudo ln -s `which ffmpeg` /usr/local/bin/en-ffmpeg

TODO: How to build rhythm .json data files by hand.

Loudness data generation

Generate loudness .json info for MP3 files:

python virtualenv.py --system-site-packages -p /opt/local/bin/python2.7 venv
source venv/bin/activate
pip install plac

Updating Three.js

Clone Three.js git trunk.

Then:

python build.py --include common --include webgl --include extras --output ../build/three.js

Copy three.js to src/thirdparty.

Upload samples

Example:

rsync -av --exclude "*.git" * kapsi:~/public_html/krusovice
You can’t perform that action at this time.