diff --git a/README.md b/README.md
index 59604649cfb18c352fa104ce89e2b1239c9e57c2..3766457b1848b3ff674cc0c6a206448a876d4a00 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,23 @@ the style of web pages using MIDI messages, Keyboard presses or Audio input
features.
.</p>
+- [Setup](#setup)
+- [Usage](#usage)
+ - [User Interface](#user-interface)
+ - [Open extension](#open-extension)
+ - [Popup](#popup)
+ - [Devtool & deported devtool](#devtool--deported-devtool)
+ - [Start to use functionnalities](#start-to-use-functionnalities)
+ - [Audio](#audio)
+ - [MIDI](#midi)
+ - [CSSLSD Code](#csslsd-code)
+ - [MIDI Variables](#midi-variables)
+ - [Audio Variables](#audio-variables)
+ - [Types](#types)
+ - [Options](#options)
+ - [Examples](#examples)
+- [Ressources](#ressources)
+
## Setup
- Download or Clone CssLsd
@@ -14,76 +31,98 @@ features.
## Usage
-You need to use a custom CSS template, like below to map your audio or MIDI events to some CSS properties.
+### User Interface
+
+#### Open extension
+
+##### Popup
+
+
+Pin the extension to get it close to URL bar. CLick on CSSLSD logo to open it.
+
+##### Devtool & deported devtool
+
+
+Open devtool, in "element", "source", "console" bar click on view more arrow, then drag-and-drop "CSSLSD" button.
+You can put "element" tab to bottom by right-clicking on it.
+For deported devtool, click on more (top-right) and then click on separate devtool dock.
+
+#### Start to use functionnalities
+
+##### Audio
+
+
+
+Click on activate button, right top. When it becomes green you can click on audio one. If audio well started it's become green too. Don't forget to authorize the tab to get access to your microphone.
+
+##### MIDI
+
+Click on activate button, then on MIDI button. If this one becomes green, the MIDI is operationnal to use. Your device is displayed on top left. On control change on your MIDI device and if the extension pop-up is open the control ID will be displayed on top center. And if you focus text MIDI column parameter, control will be add to the list.
+
+### CSSLSD Code
+
+You need to use a custom CSS template, like below to map your audio or MIDI events to some CSSLSD properties. All parameters are between square brackets you can extend parameter by heritage with a range (this is not mandatory).
+
+Code example:
```css
body {
- background-color:rgba(0,[mid 0:255],0,[loud 0:1]);
+ background-color:[couleur #000:#fff];
}
h1 {
- opacity: [note:C];
+ opacity: [opacité];
}
```
+
+Parameters example:
+
<p align="center">
<img width="600" alt="Settings" src="./doc/settings.png">
</p>
-To ***save*** your template, it's automatic or use keybind `CTRL`+`S`. To activate the extension, you can use `CTRL`+`O`.
+To ***save*** your template, it's automatic ! Just type, edit what you want. It will be saved.
### MIDI Variables
| Midi Event | Parameter | Informations |
|-------------|-----------|------------------------------------------|
-| note | id | Note on, use case : [note:21] |
-| cc | id, range | Control change, use case : [cc:10,0,100] |
-| pb | range | Pitchbend, use case : [pb,0,100] |
+| note | id | Note on, use case : note:21 |
+| cc | id | Control change, use case : cc:10 |
+| pb | | Pitchbend, use case : pb |
### Audio Variables
| Audio Event | Parameter | Informations |
|-------------|-----------|------------------------------------------|
-| low | range | low energy, use case : [low,0,100] |
-| lomi | range | lomi energy, use case : [lomi,0,100] |
-| low | range | mid energy, use case : [mid,0,100] |
-| mihi | range | mihi energy, use case : [mihi,0,100] |
-| hi | range | High energy, use case : [hi,0,100] |
-| loud | range | Volume meter, use case : [loud,0,100] |
-| onset | note | Note, use case : [onset:A] |
-| attack | | Attack, use case : [attack] |
-
-## Range
-
-For some audio or midi events, you can specify a range value. Just add `,<min>,<max>` after the midi or audio variable. For example, you can use the code bellow, to adapt the treble value for a percentage range between zero and one hundred. (Dont forget `%`, `px` or something else after your variable)
-
-```css
-a {
- width: [hi 0:100]%;
-}
-```
-
-## User Interface
-
-### Popup
-
-
-
-### Devtool
-
-
+| low | | low energy, use case : low |
+| lomi | | lomi energy, use case : lomi |
+| low | | mid energy, use case : mid |
+| mihi | | mihi energy, use case : mihi |
+| hi | | High energy, use case : hi |
+| loud | | Volume meter, use case : loud |
+| onset | note | Note, use case : onset:A |
+| attack | | Attack, use case : attack |
-### Devtool deporté
+### Types
-
+| Option | Informations |
+|-------------|------------------------------------------------------|
+| min:max | Decimal or hexadecimal min and max splited by ":" |
+| A;B;C | Array splited by ";" |
-## Looping
+### Options
-***- - WIP FEATURE - -***
+| Option | Informations |
+|-------------|------------------------------------------------------|
+| r | Random value between type object |
+| i:1 | Incremental value between type object, increment can be negative|
+| d | Linear value between type object |
-Click record button, play on MIDI device then stop recording.
+### Examples
-On click, all tick defined buy a BPM, save midi envent in a disctionnary with a timestamp.
+
-On loop play, execute CSS style in relation with loop.
+This exemple show, how to duplicate parameter, to add "opacité" one. And then add it to CSSLSD code via auto-completition.
## Ressources
diff --git a/background.js b/background.js
index acf178f1aea11de9ee744c1c766ac43569281676..f9042d609396251edebc1ab978a9a56e5332c69d 100644
--- a/background.js
+++ b/background.js
@@ -2,7 +2,8 @@ let css = `body {
background-color: [couleur];
}
h1, h2 {
- opacity: [opacité];
+ opacity: 1;
+ // opacity: [opacité];
font-family: [typo];
font-size: [chiffre2 20:100]px;
color: rgb([chiffre 0:255],255,255);
@@ -23,9 +24,14 @@ let records = [
type: 'controlchange'
},
{
- time: 200,
+ time: 2000,
data: { value: 1, controller: { number: 1 } },
type: 'controlchange'
+ },
+ {
+ time: 3000,
+ data: { value: 0, controller: { number: 1 } },
+ type: 'controlchange'
}
],
[],
diff --git a/doc/activate_audio.gif b/doc/activate_audio.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3a46f8271be508fc44fec95b22d1decc8fec2f75
Binary files /dev/null and b/doc/activate_audio.gif differ
diff --git a/doc/devtool.gif b/doc/devtool.gif
new file mode 100644
index 0000000000000000000000000000000000000000..0a8bfc5b14ac76bfca0b8aa442bf8477be86f6cb
Binary files /dev/null and b/doc/devtool.gif differ
diff --git a/doc/parameter_opacity.gif b/doc/parameter_opacity.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7c462e8d57d663aa67abc1754a1a696a7a3b4d01
Binary files /dev/null and b/doc/parameter_opacity.gif differ
diff --git a/main.js b/main.js
index 23445caaba2af6d84897316ce2acc6169d443837..5dc1230986dd30eeffbd9721770571334d5a0401 100644
--- a/main.js
+++ b/main.js
@@ -65,7 +65,7 @@ function loadEditor() {
});
chrome.storage.sync.get(['css'], function (result) {
- editor.setValue(result.css)
+ editor.getSession().setValue(result.css)
});
setAutocompleteParameters();
@@ -118,18 +118,13 @@ function initUi() {
chrome.storage.sync.get(['parameters'], function (result) {
parameters = JSON.parse(result.parameters);
var tbl_body = "";
- var odd_even = false;
-
parameters.forEach(p => {
var tbl_row = "";
for (let index = 1; index < p.length; index++) {
tbl_row += "<td contenteditable>" + p[index] + "</td>";
-
}
- tbl_body += "<tr class=\"" + (odd_even ? "odd" : "even") + "\"><td>" + icon + plus + minus + "</td>" + tbl_row + "</tr>";
- odd_even = !odd_even;
+ tbl_body += "<tr><td>" + icon + plus + minus + "</td>" + tbl_row + "</tr>";
});
- $("#parameters").html('');
$("#parameters").html(tbl_body);
});
$(function () {
@@ -338,6 +333,8 @@ function onMessage({ type, data }) {
case 'midiEvent': {
if (dataMidi != data) {
$('#midiEvent').text(data);
+ $('#midiEvent').parent().animate({'background-color': 'red'}, 'slow');
+ $('#midiEvent').parent().animate({'background-color': 'transparent'}, 'slow');
var focusedTd = $('[contenteditable]:focus');
var focusedCol = $(focusedTd).index('#parameters tr:eq(' + $(focusedTd).parent().index('#parameters tr') + ') td');
if (focusedTd.length > 0 && focusedCol == 4) {
diff --git a/popup.html b/popup.html
index 585c846379dfef2d81d0ab56d033b7cd5c33f40f..c64cd9f012942acb6329f02633ce8cccd0dfc7d4 100644
--- a/popup.html
+++ b/popup.html
@@ -44,52 +44,18 @@
<tr>
<th><a title="Glisser-deposer, dupliquer et supprimer la ligne.">Actions</a></th>
<th><a title="Nom de votre parametre a utiliser avec des crochets dans le code CSS-LSD">Nom</a></th>
- <th><a title="0:1 (plage decimale) #000:#fff (plage hexadecimale) A;B;C (liste)">Type</a></th>
+ <th><a title="0:1 (plage decimale) #000:#fff (plage hexadecimale) A;B;C (liste)">Type</a>
+ </th>
<th><a title="r (aleatoire) d (decimal) i:1 (increment de 1)">Options</a></th>
<th><a title="cc:1 (control change 1) note:1 (note 1) pb (pitch bend)">MIDI</a></th>
- <th><a title="loud (volume) low|lomi|mid|mihi|hi (puissance plage de frequence) onset:E (note de type E) attack (attaque d'un son)">Audio</a></th>
+ <th><a
+ title="loud (volume) low|lomi|mid|mihi|hi (puissance plage de frequence) onset:E (note de type E) attack (attaque d'un son)">Audio</a>
+ </th>
</tr>
</thead>
- <tbody id="parameters">
-
- </tbody>
+ <tbody id="parameters"></tbody>
</table>
</details>
- <details>
- <summary>
- <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="12"
- height="12" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
- stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
- <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
- <line x1="9" y1="9" x2="10" y2="9"></line>
- <line x1="9" y1="13" x2="15" y2="13"></line>
- <line x1="9" y1="17" x2="15" y2="17"></line>
- </svg> CHARGER / TELECHARGER
- </summary>
- <input id="upload" type="file" />
- <label for="upload">
- <svg title="Chargez votre fichier .json" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-upload" width="24"
- height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
- stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
- <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
- <line x1="12" y1="11" x2="12" y2="17"></line>
- <polyline points="9 14 12 11 15 14"></polyline>
- </svg>
- </label>
- <svg title="Telechargez votre fichier .json" id="download" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-download"
- width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
- stroke-linecap="round" stroke-linejoin="round">
- <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
- <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
- <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
- <line x1="12" y1="11" x2="12" y2="17"></line>
- <polyline points="9 14 12 17 15 14"></polyline>
- </svg>
- </details>
<details>
<summary>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="12" height="12"
@@ -109,9 +75,54 @@
<th>Actions</th>
</tr>
</thead>
- <tbody id="loopList">
-
- </tbody>
+ <tbody id="loopList"></tbody>
+ </table>
+ </details>
+ <details>
+ <summary>
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="12"
+ height="12" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
+ stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+ <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
+ <line x1="9" y1="9" x2="10" y2="9"></line>
+ <line x1="9" y1="13" x2="15" y2="13"></line>
+ <line x1="9" y1="17" x2="15" y2="17"></line>
+ </svg> CHARGER / TELECHARGER
+ </summary>
+ <table>
+ <tr>
+ <td>
+ <input id="upload" type="file" />
+ <label for="upload">
+ <svg title="Chargez votre fichier .json" xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-file-upload" width="24" height="24" viewBox="0 0 24 24"
+ stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+ stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+ <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
+ <line x1="12" y1="11" x2="12" y2="17"></line>
+ <polyline points="9 14 12 11 15 14"></polyline>
+ </svg>
+ </label>
+ <span>Charger</span>
+ </td>
+ <td>
+ <svg title="Telechargez votre fichier .json" id="download" xmlns="http://www.w3.org/2000/svg"
+ class="icon icon-tabler icon-tabler-file-download" width="24" height="24" viewBox="0 0 24 24"
+ stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+ stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+ <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
+ <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
+ <line x1="12" y1="11" x2="12" y2="17"></line>
+ <polyline points="9 14 12 17 15 14"></polyline>
+ </svg>
+ <span>Telecharger</span>
+ </td>
+ </tr>
</table>
</details>
diff --git a/style.css b/style.css
index 4341b95097d2a2462fc536f084f4337e43fcdf20..925493b1905cbef796813f4ba7477d715ef9da5e 100644
--- a/style.css
+++ b/style.css
@@ -237,4 +237,8 @@ a[title]:hover {
}
.ui-helper-hidden-accessible {
display: none;
+}
+
+td span, td svg, td label {
+ vertical-align: middle;
}
\ No newline at end of file