Krusovice is a high quality HTML5 rhythmic photo show creator which you can integrate to your website.
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.
Example:
git clone git@github.com:miohtama/Krusovice.git
git submodule update --init
We will pull remix.js for Echo Nest Javascript access in.
Timeliner takes in a set of show elements (images, text slides) and puts them on a timeline based on music rhythm data.
Timeline visualization is an utility which shows your built timeline, so you can see where slides come in and out.
Player plays the ready show plan in a <canvas>.
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
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 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).
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
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
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
A good guide to different asserts you can make is in the source code itself
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
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/*
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
- http://groups.google.com/group/js-test-driver
- http://code.google.com/p/js-test-driver/wiki/Assertions
- http://startingonsoftware.blogspot.com/2011/02/javascript-headless-unit-testing_15.html
- http://code.google.com/p/js-test-driver/issues/detail?id=263&start=100
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'
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
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
The out of the box project contains CC licensed music files for testing purposes
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.
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
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
.
Example:
rsync -av --exclude "*.git" * kapsi:~/public_html/krusovice