Skip to content

Tigerwen/Krusovice

 
 

Repository files navigation

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.

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

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).

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

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

About

Rhymic photo shows with HTML5 and <canvas>

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.2%
  • HTML 4.8%
  • Python 2.5%
  • Other 0.5%