diff --git a/README.md b/README.md index 0d7f6ee39cc54d1ce245df1a4cd74a035db1c125..addeb4dd0646f20e5c3bda3e630fc75760becb21 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,7 @@ CssLsd is a Chromium Extension which allows for interactively modifying the style of web pages using MIDI messages, Keyboard presses or Audio input features. - -## Setup +## Setup - Download or Clone CssLsd - Start Chromium @@ -13,15 +12,39 @@ features. - Click "Load unpacked extension" and select the csslsd folder - Now the extension should appear in the menu bar - ## Usage -TODO +You need to use a CSS template, like below to map your audio or MIDI events to some CSS properties. + +```css +body { + background-color:rgba(0,0,0,[audio.meter.volume]); +} +h1 { + opacity: [midi.noteon.C]; +} +``` +### MIDI Variables +- midi + - noteon + - name (ex: C, D, E, F, G, A, B) + - controlchange + - name -## Ressources +### Audio Variables + +- audio + - energy + - bass + - mid + - treble + - meter + - volume + +## Ressources - Chrome extensions : https://developer.chrome.com/docs/extensions/mv3/getstarted/ - WebMIDI : https://webmidijs.org/ - +- CSSParser : http://glazman.org/JSCSSP/index.html \ No newline at end of file