Skip to content
Snippets Groups Projects
Commit d2952eaa authored by RANWEZ Pierre's avatar RANWEZ Pierre :anchor:
Browse files

:pencil: doc: update

parent 66f92ce4
Branches
Tags
1 merge request!1✨ feat: CSSLSD V2
Hide whitespace changes
Inline Side-by-side
README.html
+ 15
− 12
View file @ d2952eaa
......@@ -1422,13 +1422,13 @@ body,
<h3 id="user-interface">User Interface</h3>
<h4 id="open-extension">Open extension</h4>
<h5 id="popup">Popup</h5>
<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\popup.png" alt="Popup view">
Pin the extension to get it close to URL bar. CLick on CSSLSD logo to open it.</p>
<p>Pin the extension to get it close to URL bar. CLick on CSSLSD logo to open it.</p>
<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\popup.png" alt="Popup view"></p>
<h5 id="devtool--deported-devtool">Devtool &amp; deported devtool</h5>
<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\devtool.gif" alt="Devtool view">
Open devtool, in &quot;element&quot;, &quot;source&quot;, &quot;console&quot; bar click on view more arrow, then drag-and-drop &quot;CSSLSD&quot; button.
<p>Open devtool, in &quot;element&quot;, &quot;source&quot;, &quot;console&quot; bar click on view more arrow, then drag-and-drop &quot;CSSLSD&quot; button.
You can put &quot;element&quot; tab to bottom by right-clicking on it.
For deported devtool, click on more (top-right) and then click on separate devtool dock.</p>
<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\devtool.gif" alt="Devtool view"></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 <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>
......@@ -1440,6 +1440,7 @@ For deported devtool, click on more (top-right) and then click on separate devto
<span class="hljs-selector-tag">h1</span> {
<span class="hljs-comment">/* Simple parameter usage */</span>
<span class="hljs-attribute">opacity</span>: [opacité];
<span class="hljs-attribute">color</span>: <span class="hljs-number">#000000</span>;
}
</div></code></pre>
<p>Parameters example:</p>
......@@ -1448,6 +1449,7 @@ For deported devtool, click on more (top-right) and then click on separate devto
</p>
<p>To <em><strong>save</strong></em> your template, it's automatic ! Just type, edit what you want. It will be saved.</p>
<h3 id="midi-variables">MIDI Variables</h3>
<p>With WebMidiAPI all events will be monitored. Note is when you push a button or a keyboard key, control change is like a fader or potentiometer change.</p>
<table>
<thead>
<tr>
......@@ -1475,6 +1477,7 @@ For deported devtool, click on more (top-right) and then click on separate devto
</tbody>
</table>
<h3 id="audio-variables">Audio Variables</h3>
<p>When audio is on, some audio events are mapped on variables bellow. AudioWorklet is used to get loud information. All others parameters are based on frequency analysing. Energy will output the average of a range of frequency. Onset is an audio correlate, to find to wich note the frequency is similar. Attack is analysing changes on loud parameter and if the audio loud is upscaling too much this event will take place.</p>
<table>
<thead>
<tr>
......@@ -1487,27 +1490,27 @@ For deported devtool, click on more (top-right) and then click on separate devto
<tr>
<td>low</td>
<td></td>
<td>low energy, use case : low</td>
<td>low energy (20-250Hz), use case : low</td>
</tr>
<tr>
<td>lomi</td>
<td></td>
<td>lomi energy, use case : lomi</td>
<td>lomi energy (250-500Hz), use case : lomi</td>
</tr>
<tr>
<td>low</td>
<td>mid</td>
<td></td>
<td>mid energy, use case : mid</td>
<td>mid energy (500-2e3Hz), use case : mid</td>
</tr>
<tr>
<td>mihi</td>
<td></td>
<td>mihi energy, use case : mihi</td>
<td>mihi energy (2e3-4e3Hz), use case : mihi</td>
</tr>
<tr>
<td>hi</td>
<td></td>
<td>High energy, use case : hi</td>
<td>High energy (4e3-16e3Hz), use case : hi</td>
</tr>
<tr>
<td>loud</td>
......@@ -1570,8 +1573,8 @@ For deported devtool, click on more (top-right) and then click on separate devto
</table>
<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>
<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\activate_audio.gif" alt="Devtool view"></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>
......@@ -1580,8 +1583,8 @@ You can't record simultaneously loops, push on record N°X button will overwrite
<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 &quot;opacité&quot; one. And then add it to CSSLSD code via auto-completition.</p>
<p><img src="file:///d:\Cours\M2S4\PFE\csslsd\doc\parameter_opacity.gif" alt="Devtool view"></p>
<h2 id="ressources">Ressources</h2>
<ul>
<li>Chrome extensions : <a href="https://developer.chrome.com/docs/extensions/mv3/getstarted/">https://developer.chrome.com/docs/extensions/mv3/getstarted/</a></li>
......
README.md
+ 18
− 11
View file @ d2952eaa
......@@ -57,16 +57,18 @@ Table of contents
##### Popup
![Popup view](doc/popup.png)
Pin the extension to get it close to URL bar. CLick on CSSLSD logo to open it.
![Popup view](doc/popup.png)
##### Devtool & deported devtool
![Devtool view](doc/devtool.gif)
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.
![Devtool view](doc/devtool.gif)
### 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 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).
......@@ -82,6 +84,7 @@ body {
h1 {
/* Simple parameter usage */
opacity: [opacité];
color: #000000;
}
```
......@@ -95,6 +98,8 @@ To ***save*** your template, it's automatic ! Just type, edit what you want. It
### MIDI Variables
With WebMidiAPI all events will be monitored. Note is when you push a button or a keyboard key, control change is like a fader or potentiometer change.
| Midi Event | Parameter | Informations |
|-------------|-----------|-----------------------------------------------------|
| note | id | Note on, use case : note:21 |
......@@ -103,13 +108,15 @@ To ***save*** your template, it's automatic ! Just type, edit what you want. It
### Audio Variables
When audio is on, some audio events are mapped on variables bellow. AudioWorklet is used to get loud information. All others parameters are based on frequency analysing. Energy will output the average of a range of frequency. Onset is an audio correlate, to find to wich note the frequency is similar. Attack is analysing changes on loud parameter and if the audio loud is upscaling too much this event will take place.
| Audio Event | Parameter | Informations |
|-------------|-----------|-----------------------------------------------------|
| 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 |
| low | | low energy (20-250Hz), use case : low |
| lomi | | lomi energy (250-500Hz), use case : lomi |
| mid | | mid energy (500-2e3Hz), use case : mid |
| mihi | | mihi energy (2e3-4e3Hz), use case : mihi |
| hi | | High energy (4e3-16e3Hz), use case : hi |
| loud | | Volume meter, use case : loud |
| onset | note | Note, use case : onset:A |
| attack | | Attack, use case : attack |
......@@ -133,10 +140,10 @@ To ***save*** your template, it's automatic ! Just type, edit what you want. It
#### Audio
![Devtool view](doc/activate_audio.gif)
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.
![Devtool view](doc/activate_audio.gif)
#### 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.
......@@ -152,10 +159,10 @@ You have the possibility to export all CSS-LSD settings and codes as a JSON file
## Examples
![Devtool view](doc/parameter_opacity.gif)
This exemple show, how to duplicate parameter, to add "opacité" one. And then add it to CSSLSD code via auto-completition.
![Devtool view](doc/parameter_opacity.gif)
## Ressources
- Chrome extensions : <https://developer.chrome.com/docs/extensions/mv3/getstarted/>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment