diff --git a/background.js b/background.js index 3157d2db875fb1945efe527d6505b2b21f3c377d..2cd06189bb3716e990d3613719d6573a3b5f8468 100644 --- a/background.js +++ b/background.js @@ -1,4 +1,4 @@ -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 }); }); /** diff --git a/content.js b/content.js index f08180afe2f7d68c9d5576f4ed85e07108ac2ba2..d0be03c4933bc301262eba916bcfad69a5b176ff 100644 --- a/content.js +++ b/content.js @@ -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]; - } - 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]; - } - 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); - }); - } - } - - }); - }); - }); +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 { + 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 { + 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 => { - 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 - }); - } - 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 == 'pitchbend' && template['eventType'] == 'pb') { - value = event['value'].replace('[' + template['templateFull'] + ']', midiValue); - let els = document.querySelectorAll(event['selector']); + + chrome.storage.sync.get(['all'], function (result) { + result.all.forEach(element => { + value = element.value; + midiValue = data.value; + 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 = element.value.replace('[' + template.templateFull + ']', midiValue); + eventIn = true; + } + if (type == 'pitchbend' && template.eventType == 'pb') { + value = element.value.replace('[' + template.templateFull + ']', midiValue); + eventIn = true; + } + } + }); + 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,46 +468,43 @@ function audioEvent() { audioSample.shift(); audioSample.push(meter.volume); - - // allParametersAudio.forEach(param => { - - // }); - - audioEvents.forEach(event => { - templates = event['templates']; - value = event['value']; - eventIn = false; - templates.forEach(template => { - Object.keys(presets).forEach(preset => { - if (template['eventType'] == preset) { - eventIn = true; - value = value.replace('[' + template['templateFull'] + ']', range((template['min']), (template['max']), energies[preset])); + chrome.storage.sync.get(['all'], function (result) { + result.all.forEach(element => { + value = element.value; + eventIn = false; + element.templates.forEach(template => { + if (template.type == 'audio') { + Object.keys(presets).forEach(preset => { + if (template.eventType == preset) { + eventIn = true; + value = value.replace('[' + template.templateFull + ']', range(template, energies[preset])); + } + }); + if (template.eventType == 'loud') { + eventIn = true; + volume = meter.volume * 1.4; + value = value.replace('[' + template.templateFull + ']', (meter.volume * 1.4 < 1 ? range(template, volume) : 0)); + } + if (template.eventType == 'onset' && template.eventName == noteStrings[note % 12]) { + eventIn = true; + value = value.replace('[' + template.templateFull + ']', range(template, 1)); + } + if (attack && template.eventType == 'attack') { + console.log('Attack'); + eventIn = true; + value = value.replace('[' + template.templateFull + ']', ''); + } } }); - 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)); - } - if (template['eventType'] == 'onset' && template['eventName'] == noteStrings[note % 12]) { - eventIn = true; - value = value.replace('[' + template['templateFull'] + ']', ''); - } - if (attack && template['eventType'] == 'attack') { - console.log('Attack'); - eventIn = true; - value = value.replace('[' + template['templateFull'] + ']', ''); + if (eventIn) { + let els = document.querySelectorAll(element.element); + els.forEach(e => { + e.style[element.property] = value; + }); } }); - if (eventIn) { - let els = document.querySelectorAll(event['selector']); - els.forEach(e => { - e.style[event['property']] = value; - }); - } }); - var newTime = new Date().getTime(); bpm = ((1 / ((newTime - time) / 1000)) * 60); time = newTime; @@ -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(); } }); diff --git a/main.js b/main.js index b1ac6a0cba5066f785ea1c1fa77058ad2d54bdba..049175fd9fa8b10e3150e45406a3ef44acd8a92a 100644 --- a/main.js +++ b/main.js @@ -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(); @@ -380,4 +476,5 @@ chrome.runtime.connect({ name: "popup" }); // Load the editor loadEditor(); // Initialize the settings UI -initUi(); \ No newline at end of file +initUi(); + diff --git a/popup.html b/popup.html index db05a68eed503129d05276f94ab611f5076d7332..750533f807279cb344a7caae1ef3227dd1d2d4ec 100644 --- a/popup.html +++ b/popup.html @@ -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>