audio-vis/js/visualGUI.js

function generateRotationSliders() {
    let group = $('#rotate');
    generateSlider(["X", "Y", "Z", "X-Inc", "Y-Inc", "Z-Inc"], 0, 360, 0, group, "rotate");
    generateCheckBox(["by Beat"], true, group, "rotate");
}

function generateTranslateSliders() {
    let group = $('#translate');
    generateSlider(["X", "Y", "Z"], -1, 1, 0, group, "translate");
}

function generateColorSliders() {
    let group = $('#color');
    generateSlider(["R", "G", "B"], 0, 255, 125, group, "color");
    generateCheckBox(["by Beat"], true, group, "color");
}

function generateWorldSliders() {
    let group = $('#world');
    generateSlider(["LightPos-X", "LightPos-Y", "LightPos-Z"], -100, 100, 0, group, "light");
    generateSlider(["Light"], 0, 1, 0.3, group, "light");
}

function generateDrawSliders() {
    let group = $('#draw'),
        g = "drawMode"
    generateSlider(["DrawMode"], 0, 6, 0, group, g);
    generateSlider(["Form"], 0, 4, 0, group, g);
    generateSlider(["Radius"], 20, 1500, 500, group, g);
    generateSlider(["Total"], 20, 250, 50, group, g);
    generateSlider(["PointSize"], 1, 10, 2, group, g, .2);
    generateSlider(["Smoothing"], 0, 100, 80, group, g, 1);
    generateSlider(["Steps"], 256, 2048, 512, group, g, 16);
    generateCheckBox(["Dirty"], false, group, g)
}

function setRotations(changedEl) {
    let group = $('#rotate');
    let items = ["#X", "#Y", "#Z"];
    for (let i in items) {
        let el = $(items[i], group);
        if (el === changedEl) {
            sphereObject.rotationRaw[i] = getValue(el)
        }
    }
    items = ["#X-Inc", "#Y-Inc", "#Z-Inc"];
    for (let i in items) {
        let el = $(items[i], group);
        if (el === changedEl) {
            sphereObject.rotateInc[i] = getValue(el) / 360;
        }
    }

    sphereObject.rotateByBeat = $('#rotateby-Beat', group).checked;
}

function setColors() {
    let group = $('#color');
    sphereObject.color.r = getValue($('#R', group)) / 255;
    sphereObject.color.g = getValue($('#G', group)) / 255;
    sphereObject.color.b = getValue($('#B', group)) / 255;

    sphereObject.colorByBeat = $('#colorby-Beat', group).checked;
}

function setWorld() {
    let group = $('#world');
    sphereObject.lightPos[0] = getValue($('#LightPos-X', group));
    sphereObject.lightPos[1] = getValue($('#LightPos-Y', group));
    sphereObject.lightPos[2] = getValue($('#LightPos-Z', group));
    sphereObject.light = getValue($('#Light', group));
}

function setDraw() {
    let group = $('#draw');
    sphereObject.drawMode = getValue($('#DrawMode', group));
    sphereObject.sphereMode = getValue($('#Form', group));
    sphereObject.radius = getValue($('#Radius', group));
    sphereObject.total = getValue($('#Total', group));
    sphereObject.pointSize = getValue($('#PointSize', group));
    sphereObject.steps = getValue($('#Steps', group));
    sphereObject.dirtyMode = $('#drawModeDirty', group).checked;
    analyser.smoothingTimeConstant = getValue($('#Smoothing', group)) / 100;
}

function setTranslate() {
    let group = $('#translate');
    let items = ["#X", "#Y", "#Z"];
    for (let i in items) {
        sphereObject.translate[i] = getValue($(items[i], group))
    }
}

function generateSlider(fromList, min, max, value, appendTo, group, stepSize) {
    for (let i = 0; i < fromList.length; i++) {
        let label = create("label", fromList[i]);
        let reset = create("button", "d");
        let range = create("input");
        range.type = "range";
        range.min = min;
        range.max = max;
        range.value = value;
        range.id = fromList[i];
        range.step = max === 1 ? .01 : (stepSize || 1);
        range.dataset.group = group;
        range.dataset.value = value;
        let item = create("group-input");
        append(item, [label, range, reset])
        appendTo.appendChild(item);
    }
}

function generateCheckBox(fromList, defaultValue, appendTo, group) {
    for (let i = 0; i < fromList.length; i++) {
        let label = create("label", fromList[i])
        let checkbox = create("input");
        checkbox.type = "checkbox";
        checkbox.checked = defaultValue === true;
        checkbox.dataset.group = group;
        checkbox.id = group + fromList[i].split(" ").join("-");
        let item = create("group-input");
        append(item, [label, createSwitch(checkbox)])
        appendTo.appendChild(item);
    }
}

function createSwitch(checkbox) {
    let swi = create("switch");
    let label = create("label");
    label.setAttribute("for", checkbox.id);
    append(swi, [checkbox, label]);
    return swi;
}

function changeHandler(el) {
    let d = el.dataset.group;
    if (d === "rotate") {
        setRotations(el);
    } else if (d === "translate") {
        setTranslate();
    } else if (d === "color") {
        setColors();
    } else if (d === "light") {
        setWorld();
    } else if (d === "drawMode") {
        setDraw();
    }
    saveConfig();
}

document.body.addDelegatedEventListener('input', 'group-input input', (ev, el) => {
    changeHandler(el);
})

document.body.addDelegatedEventListener('click', 'group-input button', (ev, el) => {
    let input = $('input', el.parentNode);
    input.value = input.dataset.value;
    changeHandler(input);
});

function getValue(slider) {
    try {
        return parseFloat(slider.value);
    } catch (e) {
        return 0;
    }
}

$('.settings-icon').addEventListener('click', function () {
    $('.off-can').classList.toggle("closed");
    $('.settings-icon').classList.toggle("open");
})

window.addEventListener('keyup', e => {
    if (e.key === 'F11') {
        c.requestFullscreen();
        return;
    }
    if (e.key === 'Escape') {
        if (document.fullscreenElement) {
            document.exitFullscreen().then(console.log);
        }
    }
    if (e.key === 'p') {
        audioFile.play();
    }
    if (e.key === 's') {
        audioFile.pause();
    }
});

function saveConfig() {
    localStorage.setItem('config-sphere', JSON.stringify(sphereObject));
}

function loadConfig() {
    let item = localStorage.getItem('config-sphere');
    if (item && item !== "") {
        sphereObject = JSON.parse(item);
    }
}

let uploadField = $('#upload');
let audioFile = new Audio();
let lastSong = null;
uploadField.addEventListener('change', e => {
    let file = uploadField.files[0];
    if (file && file.type.indexOf('audio') !== -1 && file.name.match(".m3u") === null && file.name.match(".wma") === null) {
        if (lastSong) {
            URL.revokeObjectURL(lastSong);
        }
        audioFile.src = URL.createObjectURL(file);
        document.title = file.name;
        lastSong = audioFile.src;
        createView();
    }
})

$('#play').addEventListener('click', e => {
    if (audioFile.src !== "") {
        c.requestFullscreen().then(r => {
            setTimeout(x => {
                audioFile.play();
            }, 1000)
        });
    }
})