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

:art: improve: parser in main.js

parent 40fb8523
No related branches found
No related tags found
1 merge request!1✨ feat: CSSLSD V2
Show whitespace changes
Inline Side-by-side
background.js
+ 3
− 1
View file @ 6d6a9503
let css = "body {\n\tbackground-color:lightcoral[color,onset:E];\n\tbackground-color:lightgreen[color,onset:A];\n\tbackground-color:lightblue[onset:D];\n}\nh1, h2 {\n\tcolor: white[color,onset:B];\n\tcolor: lightslategray[color,onset:A];\n\tfont-size:[opacité]pxpx;\n}";
let css = "body {\n\tbackground-color:lightcoral[color,onset:E];\n\tbackground-color:lightgreen[color,onset:A];\n\tbackground-color:lightblue[onset:D];\n}\nh1, h2 {\n\tcolor: white[color,onset:B];\n\tcolor: lightslategray[color,onset:A];\n\tfont-size:[opacité]px;\n}";
let activate = false;
let activateFav = "ressources/icon256.png";
let audioB = false;
......@@ -8,6 +8,7 @@ let midiI = false;
let popup = false;
let loopPlay = false;
let parameters = '[["","chiffre","10:100","i:10","note:10",""],["","opacité","0:1","d","cc:60","loud"]]';
let all = "";
//Initialize the CSS storage on startup
chrome.runtime.onInstalled.addListener(() => {
......@@ -21,6 +22,7 @@ chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ popup });
chrome.storage.sync.set({ loopPlay });
chrome.storage.sync.set({ parameters });
chrome.storage.sync.set({ all });
});
/**
......
content.js
+ 88
− 174
View file @ 6d6a9503
......@@ -21,88 +21,35 @@ var recording = {
var time;
var playLoop = false;
function parseCSS2(cssObj, parameters) {
var parser = new CSSParser();
// chrome.runtime.sendMessage({ type: 'updateUi', data: true });
var sheet = parser.parse(cssObj, false, true);
JSON.parse(parameters).forEach(p => {
sheet.cssRules.forEach(element => {
let els = document.querySelectorAll(element.mSelectorText);
element.declarations.forEach(css => {
var count = css.valueText.split("[").length - 1;
for (let index = 0; index < count; index++) {
template = css.valueText.substring(
css.valueText.indexOf("[") + 1,
css.valueText.indexOf("]")
);
templateAll = template.split(",");
if (templateAll[0] == p[1]) {
p[4].split(' ').forEach(midiE => {
if(midiE.includes(':')){
eventType = midiE.split(':')[0];
eventName = midiE.split(':')[1];
function range(template, value) {
if (template.options == 'r') {
console.log(template);
if (template.array != '') {
console.log(template.array[Math.floor(Math.random() * template.array.length)]);
return template.array[Math.floor(Math.random() * template.array.length)];
} else {
if (template.min[0] == '#') {
template.min = parseInt(template.min.replace('#', ''), 16);
template.max = parseInt(template.max.replace('#', ''), 16);
return '#' + ((Math.random() * (template.max - template.min) + template.min).toString(16)).split('.')[0];
}
else {
eventType = midiE;
eventName = '';
}
var templateObj = {
'name': templateAll[0],
'eventType': eventType,
'eventName': eventName,
'templateFull': template,
'options': p[3],
'array': (p[2].includes(';'))? p[2].split(';') : '',
'min': (templateAll.length > 1)?templateAll[1].split(':')[0]:((p[2].includes(':'))? p[2].split(':')[0] : '0'),
'max': (templateAll.length > 1)?templateAll[1].split(':')[1]:((p[2].includes(':'))? p[2].split(':')[1] : '1'),
};
var property = {
'selector': element.mSelectorText,
'property': css.property,
'value': css.valueText,
'templates': [templateObj]
};
midiEvents.push(property);
});
p[5].split(' ').forEach(audioE => {
if(audioE.includes(':')){
eventType = audioE.split(':')[0];
eventName = audioE.split(':')[1];
return (Math.random() * (parseInt(template.max) - parseInt(template.min)) + parseInt(template.min));
}
}
}
if (template.options == 'd') {
if (template.min[0] == '#') {
template.min = parseInt(template.min.replace('#', ''), 16);
template.max = parseInt(template.max.replace('#', ''), 16);
return '#' + ((template.min + Math.round(template.max - template.min) * value).toString(16)).split('.')[0];
}
else {
eventType = audioE;
eventName = '';
}
var templateObj = {
'name': templateAll[0],
'eventType': eventType,
'eventName': eventName,
'templateFull': template,
'options': p[3],
'array': (p[2].includes(';'))? p[2].split(';') : '',
'min': (templateAll.length > 1)?templateAll[1].split(':')[0]:((p[2].includes(':'))? p[2].split(':')[0] : '0'),
'max': (templateAll.length > 1)?templateAll[1].split(':')[1]:((p[2].includes(':'))? p[2].split(':')[1] : '1'),
};
var property = {
'selector': element.mSelectorText,
'property': css.property,
'value': css.valueText,
'templates': [templateObj]
};
audioEvents.push(property);
});
return (parseInt(template.min) + Math.round(parseInt(template.max) - parseInt(template.min)) * value);
}
}
});
});
});
}
/**
* Initialize Midi
*/
......@@ -174,35 +121,39 @@ function midiEvent(type, data) {
}
}
});
midiEvents.forEach(event => {
chrome.storage.sync.get(['all'], function (result) {
result.all.forEach(element => {
value = element.value;
midiValue = data.value;
templates = event['templates'];
templates.forEach(template => {
midiValue = (template['min'] + ((template['max'] - template['min']) * midiValue));
if (type == 'noteon' && template['eventType'] == 'note' && template['eventName'] == data.note.number) {
value = event['value'].replace('[' + template['templateFull'] + ']', midiValue);
let els = document.querySelectorAll(event['selector']);
els.forEach(e => {
e.style[event['property']] = value; // Note velocity
});
eventIn = false;
element.templates.forEach(template => {
if (template.type == 'midi') {
midiValue = range(template, midiValue);
if (type == 'noteon' && template.eventType == 'note' && template.eventName == data.note.number) {
value = element.value.replace('[' + template.templateFull + ']', midiValue);
eventIn = true;
}
if (type == 'controlchange' && template['eventType'] == 'cc' && template['eventName'] == data.controller.number) {
value = event['value'].replace('[' + template['templateFull'] + ']', midiValue);
let els = document.querySelectorAll(event['selector']);
els.forEach(e => {
e.style[event['property']] = value; // Control value
});
if (type == 'controlchange' && template.eventType == 'cc' && template.eventName == data.controller.number) {
value = element.value.replace('[' + template.templateFull + ']', midiValue);
eventIn = true;
}
if (type == 'pitchbend' && template.eventType == 'pb') {
value = element.value.replace('[' + template.templateFull + ']', midiValue);
eventIn = true;
}
if (type == 'pitchbend' && template['eventType'] == 'pb') {
value = event['value'].replace('[' + template['templateFull'] + ']', midiValue);
let els = document.querySelectorAll(event['selector']);
}
});
if (eventIn) {
let els = document.querySelectorAll(element.element);
els.forEach(e => {
e.style[event['property']] = value; // Pitchbend value
e.style[element.property] = value;
});
}
});
});
var newTime = new Date().getTime();
bpm = ((1 / ((newTime - time) / 1000)) * 60);
time = newTime;
......@@ -465,37 +416,13 @@ function freqToBin(freq, rounding = 'round') {
return bin < max ? bin : max;
}
function range(min, max, value) {
if (value == 'random') {
if (min[0] == '#') {
min = parseInt(min.replace('#', ''), 16);
max = parseInt(max.replace('#', ''), 16);
return '#' + ((Math.random() * (max - min) + min).toString(16)).split('.')[0];
}
else {
return (Math.random() * (parseInt(max) - parseInt(min)) + parseInt(min));
}
}
else {
if (min[0] == '#') {
min = parseInt(min.replace('#', ''), 16);
max = parseInt(max.replace('#', ''), 16);
return '#' + ((min + Math.round(max - min) * value).toString(16)).split('.')[0];
}
else {
return (parseInt(min) + Math.round(parseInt(max) - parseInt(min)) * value);
}
}
}
function audioEvent() {
analyser.getFloatTimeDomainData(buf);
var ac = autoCorrelate(buf, audioContext.sampleRate);
if (ac == -1) {
a = 5;
// $('#analyser1').text("--");
// $('#analyser2').text("-");
// $('#analyser3').text("--");
} else {
// $('#analyser1').text(Math.round(ac));
var note = noteFromPitch(ac);
......@@ -541,45 +468,42 @@ function audioEvent() {
audioSample.shift();
audioSample.push(meter.volume);
// allParametersAudio.forEach(param => {
// });
audioEvents.forEach(event => {
templates = event['templates'];
value = event['value'];
chrome.storage.sync.get(['all'], function (result) {
result.all.forEach(element => {
value = element.value;
eventIn = false;
templates.forEach(template => {
element.templates.forEach(template => {
if (template.type == 'audio') {
Object.keys(presets).forEach(preset => {
if (template['eventType'] == preset) {
if (template.eventType == preset) {
eventIn = true;
value = value.replace('[' + template['templateFull'] + ']', range((template['min']), (template['max']), energies[preset]));
value = value.replace('[' + template.templateFull + ']', range(template, energies[preset]));
}
});
if (template['eventType'] == 'loud') {
if (template.eventType == 'loud') {
eventIn = true;
volume = meter.volume * 1.4;
value = value.replace('[' + template['templateFull'] + ']', (meter.volume * 1.4 < 1 ? range((template['min']), (template['max']), volume) : 0));
value = value.replace('[' + template.templateFull + ']', (meter.volume * 1.4 < 1 ? range(template, volume) : 0));
}
if (template['eventType'] == 'onset' && template['eventName'] == noteStrings[note % 12]) {
if (template.eventType == 'onset' && template.eventName == noteStrings[note % 12]) {
eventIn = true;
value = value.replace('[' + template['templateFull'] + ']', '');
value = value.replace('[' + template.templateFull + ']', range(template, 1));
}
if (attack && template['eventType'] == 'attack') {
if (attack && template.eventType == 'attack') {
console.log('Attack');
eventIn = true;
value = value.replace('[' + template['templateFull'] + ']', '');
value = value.replace('[' + template.templateFull + ']', '');
}
}
});
if (eventIn) {
let els = document.querySelectorAll(event['selector']);
let els = document.querySelectorAll(element.element);
els.forEach(e => {
e.style[event['property']] = value;
e.style[element.property] = value;
});
}
});
});
var newTime = new Date().getTime();
bpm = ((1 / ((newTime - time) / 1000)) * 60);
......@@ -605,9 +529,6 @@ function onMessage({ type, data }) {
audioEvents = [];
midiEvents = [];
// parseCSS(css)
chrome.storage.sync.get(['parameters', 'css'], function (result) {
parseCSS2(result.css, result.parameters);
});
break;
}
case 'updateP': {
......@@ -618,17 +539,13 @@ function onMessage({ type, data }) {
audioEvents = [];
midiEvents = [];
// parseCSS(css)
chrome.storage.sync.get(['parameters', 'css'], function (result) {
parseCSS2(result.css, result.parameters);
});
break;
}
case 'start': {
chrome.storage.sync.get(['activate'], function (result) {
if (result.activate) {
chrome.storage.sync.get(['parameters', 'css'], function (result) {
parseCSS2(result.css, result.parameters);
});
// zzz
}
else {
audioApi();
......@@ -681,9 +598,6 @@ chrome.storage.sync.set({ popup: true });
chrome.runtime.onMessage.addListener(onMessage);
chrome.storage.sync.get(['activate'], function (result) {
if (result.activate) {
chrome.storage.sync.get(['parameters', 'css'], function (result) {
parseCSS2(result.css, result.parameters);
});
audioApi();
}
});
main.js
+ 98
− 1
View file @ 6d6a9503
......@@ -155,11 +155,107 @@ document.getElementById("parameters").addEventListener("input", function () {
}, false);
function analyseAll() {
chrome.storage.sync.get(['parameters', 'css'], function (result) {
var all = [];
var parser = new CSSParser();
var sheet = parser.parse(result.css, false, true);
sheet.cssRules.forEach(element => {
element.declarations.forEach(css => {
var templates = [];
cssValue = css.valueText;
for (let index = 0; index < css.valueText.split("[").length - 1; index++) {
template = cssValue.substring(
cssValue.indexOf("[") + 1,
cssValue.indexOf("]")
);
cssValue = cssValue.replace("[" + template + "]", "");
var parameters = JSON.parse(result.parameters);
parameters.forEach(p => {
templateSplited = template.split(' ');
if (p[1] == templateSplited[0]) {
if (p[4] != "") {
p[4].split(' ').forEach(midiE => {
var obj = {
type: '',
name: templateSplited[0],
templateFull: template,
eventType: '',
eventName: '',
options: '',
array: templateSplited.length > 1 ? (templateSplited[1].includes(';') ? templateSplited[1].split(';') : '') : '',
min: templateSplited.length > 1 ? (templateSplited[1].includes(':') ? templateSplited[1].split(':')[0] : '') : '',
max: templateSplited.length > 1 ? (templateSplited[1].includes(':') ? templateSplited[1].split(':')[1] : '') : '',
}
obj.type = 'midi';
if (midiE.includes(':')) {
obj.eventType = midiE.split(':')[0];
obj.eventName = midiE.split(':')[1];
}
else {
obj.eventType = midiE;
obj.eventName = '';
}
obj.options = p[3];
obj.array = ((obj.array == '') ? (p[2].includes(';') ? p[2].split(';') : '') : obj.array);
obj.min = ((obj.min == '') ? (p[2].includes(':') ? p[2].split(':')[0] : 0) : obj.min);
obj.max = ((obj.max == '') ? (p[2].includes(':') ? p[2].split(':')[1] : 1) : obj.max);
templates.push(obj);
});
}
if (p[5] != "") {
p[5].split(' ').forEach(audioE => {
var obj = {
type: '',
name: templateSplited[0],
templateFull: template,
eventType: '',
eventName: '',
options: '',
array: templateSplited.length > 1 ? (templateSplited[1].includes(';') ? templateSplited[1].split(';') : '') : '',
min: templateSplited.length > 1 ? (templateSplited[1].includes(':') ? templateSplited[1].split(':')[0] : '') : '',
max: templateSplited.length > 1 ? (templateSplited[1].includes(':') ? templateSplited[1].split(':')[1] : '') : '',
}
obj.type = 'audio';
if (audioE.includes(':')) {
obj.eventType = audioE.split(':')[0];
obj.eventName = audioE.split(':')[1];
}
else {
obj.eventType = audioE;
obj.eventName = '';
}
obj.options = p[3];
obj.array = ((obj.array == '') ? (p[2].includes(';') ? p[2].split(';') : '') : obj.array);
obj.min = ((obj.min == '') ? (p[2].includes(':') ? p[2].split(':')[0] : 0) : obj.min);
obj.max = ((obj.max == '') ? (p[2].includes(':') ? p[2].split(':')[1] : 1) : obj.max);
templates.push(obj);
});
}
}
});
}
all.push({
element: element.mSelectorText,
property: css.property,
value: css.valueText,
templates: templates
});
});
});
chrome.storage.sync.set({ all: all });
});
}
/**
* Save CSS in editor via save button
*/
function updateCss() {
console.log('updateCss');
analyseAll();
chrome.tabs.query({ active: true, currentWindow: true },
function (tabs) {
let cssStr = editor.getValue();
......@@ -381,3 +477,4 @@ chrome.runtime.connect({ name: "popup" });
loadEditor();
// Initialize the settings UI
initUi();
popup.html
+ 1
− 0
View file @ 6d6a9503
......@@ -86,6 +86,7 @@
</table>
</details>
<script src="cssParser.js" type="text/javascript" charset="utf-8"></script>
<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment