diff --git a/README.html b/README.html
index 30ce07649ce8f3c3c42c021a59aa44dc886365b6..ba02bfd852f748f2c27384830e4db5b471861fbe 100644
--- a/README.html
+++ b/README.html
@@ -1319,16 +1319,20 @@ body,
<body class="vscode-body vscode-light">
<div class="github-markdown-body github-markdown-auto">
<div class="github-markdown-content"><p align="center"><img width="150" alt="CSS LSD Logo" src="file:///d:\Cours\M2S4\PFE\csslsd\ressources\logo.svg"></p>
-<p align="center">CssLsd is a Chromium Extension which allows for interactively modifying
-the style of web pages using MIDI messages, Keyboard presses or Audio input
-features.
-.</p>
-<h2 id="table-of-contents">Table of contents</h2>
+<p align="center">CssLsd is a Chromium Extension which allows for interactively modifying the style of web pages using MIDI messages, Keyboard presses or Audio input features.</p>
+<h1 id="csslsd-documentation">CSSLSD Documentation</h1>
+<p>Table of contents</p>
+<ul>
+<li><a href="#csslsd-documentation">CSSLSD Documentation</a>
<ul>
-<li><a href="#table-of-contents">Table of contents</a></li>
<li><a href="#setup">Setup</a>
<ul>
-<li><a href="#browser-comatibility-for-audioworklet">Browser comatibility for AudioWorklet</a></li>
+<li><a href="#browser-compatibility">Browser compatibility</a>
+<ul>
+<li><a href="#audioworklet-audio-sound-analyzer">AudioWorklet (audio sound analyzer)</a></li>
+<li><a href="#midi-api">MIDI API</a></li>
+</ul>
+</li>
</ul>
</li>
<li><a href="#usage">Usage</a>
@@ -1341,35 +1345,38 @@ features.
<li><a href="#devtool--deported-devtool">Devtool & deported devtool</a></li>
</ul>
</li>
+</ul>
+</li>
+<li><a href="#csslsd-code">CSSLSD Code</a></li>
+<li><a href="#midi-variables">MIDI Variables</a></li>
+<li><a href="#audio-variables">Audio Variables</a></li>
+<li><a href="#types">Types</a></li>
+<li><a href="#options">Options</a></li>
<li><a href="#start-to-use-functionnalities">Start to use functionnalities</a>
<ul>
<li><a href="#audio">Audio</a></li>
<li><a href="#midi">MIDI</a></li>
-<li><a href="#loops">Loops</a></li>
</ul>
</li>
+<li><a href="#loops">Loops</a></li>
<li><a href="#upload-and-download">Upload and download</a></li>
</ul>
</li>
-<li><a href="#csslsd-code">CSSLSD Code</a></li>
-<li><a href="#midi-variables">MIDI Variables</a></li>
-<li><a href="#audio-variables">Audio Variables</a></li>
-<li><a href="#types">Types</a></li>
-<li><a href="#options">Options</a></li>
<li><a href="#examples">Examples</a></li>
+<li><a href="#ressources">Ressources</a></li>
</ul>
</li>
-<li><a href="#ressources">Ressources</a></li>
</ul>
<h2 id="setup">Setup</h2>
<ul>
<li>Download or Clone CssLsd</li>
-<li>Start Chromium</li>
-<li>Type chrome://extensions in the address bar</li>
+<li>Start Chromium / Chrome / Brave / Edge</li>
+<li>Type <code>chrome://extensions</code> in the address bar</li>
<li>Click "Load unpacked extension" and select the csslsd folder</li>
<li>Now the extension should appear in the menu bar</li>
</ul>
-<h3 id="browser-comatibility-for-audioworklet">Browser comatibility for AudioWorklet</h3>
+<h3 id="browser-compatibility">Browser compatibility</h3>
+<h4 id="audioworklet-audio-sound-analyzer">AudioWorklet (audio sound analyzer)</h4>
<table>
<thead>
<tr>
@@ -1390,6 +1397,27 @@ features.
</tr>
</tbody>
</table>
+<h4 id="midi-api">MIDI API</h4>
+<table>
+<thead>
+<tr>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Opéra</th>
+<th>Brave</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>43</td>
+<td>79</td>
+<td>NO</td>
+<td>30</td>
+<td>43</td>
+</tr>
+</tbody>
+</table>
<h2 id="usage">Usage</h2>
<h3 id="user-interface">User Interface</h3>
<h4 id="open-extension">Open extension</h4>
@@ -1401,24 +1429,16 @@ Pin the extension to get it close to URL bar. CLick on CSSLSD logo to open it.</
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.</p>
-<h4 id="start-to-use-functionnalities">Start to use functionnalities</h4>
-<h5 id="audio">Audio</h5>
-<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\activate_audio.gif" alt="Devtool view"></p>
-<p>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.</p>
-<h5 id="midi">MIDI</h5>
-<p>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.</p>
-<h5 id="loops">Loops</h5>
-<p>When you press record all interactions with the midi device are recorded in a table. When finished recording, press stop. You can then play your loop by pressing play or re-record over the previously created loop. Finally, you can overwrite the created loop. You have 4 slots available to save your loops. You can also map MIDI events to the actions listed above.
-You can't record simultaneously loops, push on record N°X button will overwrite the loop N°X.</p>
-<h4 id="upload-and-download">Upload and download</h4>
-<p>You have the possibility to export all CSS-LSD settings and codes as a JSON file. You can then import a previously exported JSON file from the extension. This can be useful for saving presets according to websites.</p>
<h3 id="csslsd-code">CSSLSD Code</h3>
-<p>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).</p>
+<p>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 <strong>square brackets</strong> you can extend parameter by heritage with a range like bellow (this is not mandatory). You can use multiple parameters in a line. You can also type pure CSS in code editor, this CSS wil be apply on code auto-save (each time your type something in editor).</p>
<p>Code example:</p>
<pre><code class="language-css"><div><span class="hljs-selector-tag">body</span> {
+ <span class="hljs-comment">/* Tip : You can use comments */</span>
+ <span class="hljs-comment">/* Here, we map "couleur" parameter to background-color property extended with a new range between black (hex) and white (hex). */</span>
<span class="hljs-attribute">background-color</span>:[couleur <span class="hljs-number">#000</span>:<span class="hljs-number">#fff</span>];
}
<span class="hljs-selector-tag">h1</span> {
+ <span class="hljs-comment">/* Simple parameter usage */</span>
<span class="hljs-attribute">opacity</span>: [opacité];
}
</div></code></pre>
@@ -1548,7 +1568,18 @@ You can't record simultaneously loops, push on record N°X button will overwrite
</tr>
</tbody>
</table>
-<h3 id="examples">Examples</h3>
+<h3 id="start-to-use-functionnalities">Start to use functionnalities</h3>
+<h4 id="audio">Audio</h4>
+<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\activate_audio.gif" alt="Devtool view"></p>
+<p>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.</p>
+<h4 id="midi">MIDI</h4>
+<p>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.</p>
+<h3 id="loops">Loops</h3>
+<p>When you press record all interactions with the midi device are recorded in a table. When finished recording, press stop. You can then play your loop by pressing play or re-record over the previously created loop. Finally, you can overwrite the created loop. You have 4 slots available to save your loops. You can also map MIDI events to the actions listed above.
+You can't record simultaneously loops, push on record N°X button will overwrite the loop N°X.</p>
+<h3 id="upload-and-download">Upload and download</h3>
+<p>You have the possibility to export all CSS-LSD settings and codes as a JSON file. You can then import a previously exported JSON file from the extension. This can be useful for saving presets according to websites.</p>
+<h2 id="examples">Examples</h2>
<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\parameter_opacity.gif" alt="Devtool view"></p>
<p>This exemple show, how to duplicate parameter, to add "opacité" one. And then add it to CSSLSD code via auto-completition.</p>
<h2 id="ressources">Ressources</h2>
diff --git a/README.md b/README.md
index a2e7039be3452e9f7783b3f8f914603875b37e80..ed876357383c299381d3d81700f64e765d2a23ab 100644
--- a/README.md
+++ b/README.md
@@ -1,46 +1,54 @@
<p align="center"><img width="150" alt="CSS LSD Logo" src="./ressources/logo.svg"></p>
-<p align="center">CssLsd is a Chromium Extension which allows for interactively modifying
-the style of web pages using MIDI messages, Keyboard presses or Audio input
-features.
-.</p>
-
-## Table of contents
-
-- [Table of contents](#table-of-contents)
-- [Setup](#setup)
- - [Browser comatibility for AudioWorklet](#browser-comatibility-for-audioworklet)
-- [Usage](#usage)
- - [User Interface](#user-interface)
- - [Open extension](#open-extension)
- - [Popup](#popup)
- - [Devtool & deported devtool](#devtool--deported-devtool)
+<p align="center">CssLsd is a Chromium Extension which allows for interactively modifying the style of web pages using MIDI messages, Keyboard presses or Audio input features.</p>
+
+# CSSLSD Documentation
+Table of contents
+
+- [CSSLSD Documentation](#csslsd-documentation)
+ - [Setup](#setup)
+ - [Browser compatibility](#browser-compatibility)
+ - [AudioWorklet (audio sound analyzer)](#audioworklet-audio-sound-analyzer)
+ - [MIDI API](#midi-api)
+ - [Usage](#usage)
+ - [User Interface](#user-interface)
+ - [Open extension](#open-extension)
+ - [Popup](#popup)
+ - [Devtool & deported devtool](#devtool--deported-devtool)
+ - [CSSLSD Code](#csslsd-code)
+ - [MIDI Variables](#midi-variables)
+ - [Audio Variables](#audio-variables)
+ - [Types](#types)
+ - [Options](#options)
- [Start to use functionnalities](#start-to-use-functionnalities)
- [Audio](#audio)
- [MIDI](#midi)
- - [Loops](#loops)
+ - [Loops](#loops)
- [Upload and download](#upload-and-download)
- - [CSSLSD Code](#csslsd-code)
- - [MIDI Variables](#midi-variables)
- - [Audio Variables](#audio-variables)
- - [Types](#types)
- - [Options](#options)
- [Examples](#examples)
-- [Ressources](#ressources)
+ - [Ressources](#ressources)
## Setup
- Download or Clone CssLsd
-- Start Chromium
-- Type chrome://extensions in the address bar
+- Start Chromium / Chrome / Brave / Edge
+- Type `chrome://extensions` in the address bar
- Click "Load unpacked extension" and select the csslsd folder
- Now the extension should appear in the menu bar
-### Browser comatibility for AudioWorklet
+### Browser compatibility
+
+#### AudioWorklet (audio sound analyzer)
| Chrome | Edge | Firefox | Opéra | Brave |
|--------|------|---------|-------|-------|
| 64 | 79 | 76 | 51 | 64 |
+#### MIDI API
+
+| Chrome | Edge | Firefox | Opéra | Brave |
+|--------|------|---------|-------|-------|
+| 43 | 79 | NO | 30 | 43 |
+
## Usage
### User Interface
@@ -59,38 +67,20 @@ Open devtool, in "element", "source", "console" bar click on view more arrow, th
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.
-
-##### Loops
-
-When you press record all interactions with the midi device are recorded in a table. When finished recording, press stop. You can then play your loop by pressing play or re-record over the previously created loop. Finally, you can overwrite the created loop. You have 4 slots available to save your loops. You can also map MIDI events to the actions listed above.
-You can't record simultaneously loops, push on record N°X button will overwrite the loop N°X.
-
-#### Upload and download
-
-You have the possibility to export all CSS-LSD settings and codes as a JSON file. You can then import a previously exported JSON file from the extension. This can be useful for saving presets according to websites.
-
### 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).
+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 like bellow (this is not mandatory). You can use multiple parameters in a line. You can also type pure CSS in code editor, this CSS wil be apply on code auto-save (each time your type something in editor).
Code example:
```css
body {
+ /* Tip : You can use comments */
+ /* Here, we map "couleur" parameter to background-color property extended with a new range between black (hex) and white (hex). */
background-color:[couleur #000:#fff];
}
h1 {
+ /* Simple parameter usage */
opacity: [opacité];
}
```
@@ -139,7 +129,28 @@ To ***save*** your template, it's automatic ! Just type, edit what you want. It
| i:1 | Incremental value between type object, increment can be negative|
| d | Linear value between type object |
-### Examples
+### 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.
+
+### Loops
+
+When you press record all interactions with the midi device are recorded in a table. When finished recording, press stop. You can then play your loop by pressing play or re-record over the previously created loop. Finally, you can overwrite the created loop. You have 4 slots available to save your loops. You can also map MIDI events to the actions listed above.
+You can't record simultaneously loops, push on record N°X button will overwrite the loop N°X.
+
+### Upload and download
+
+You have the possibility to export all CSS-LSD settings and codes as a JSON file. You can then import a previously exported JSON file from the extension. This can be useful for saving presets according to websites.
+
+## Examples
