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
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
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.
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.
Note
Disable Chrome automatic update: http://www.sitepoint.com/how-to-disable-google-chrome-updates/
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
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
Note
All JS files must terminate with newline or the compressor will complain.
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