JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<h1>Rainmeter Audio Spectrogram Skin Generator</h1>

<p>Spectrum.ini:</p>
<textarea id="main"></textarea>
<p>Gradient/Gradient.ini:</p>
<textarea id="gradient"></textarea>
<p>Ideal Rainmeter setup information for Spectrum.ini:</p>
<textarea class="setup" id="specs"></textarea>
<p>Ideal Rainmeter setup information for Gradient.ini:</p>
<textarea class="setup" id="grads"></textarea>

SCSS

body, html {
    width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}
#main {
    width:90%;
    border:none;
    box-shadow:inset 0 0 0 1px #000;
    font-size:8pt;
    height:80px;
}
#gradient {
    @extend #main;
    left:50%;
}
.setup {
    @extend #main;
}

JavaScript

//Config

var mode = "bottom"; //top, right, bottom, or left
var screenWidth = 1920; //Your screen width in pixels
var screenHeight = 1080; //Your screen height in pixels
var bands = 400; //How detailed the spectrum is
var stereo = true; //Show L and R channels individually?  Doubles CPU usage (twice as many bands)

//Gradient
var backface = true; //Generate code for a gradient background?
var backfaceColor = "25,25,25,150"; //Gradient fade background

//Bars
var barThickness = 1; //How fat each bar is
var barLength = 50; //How long each bar is
var padding = 1; //Space between bars
var background = false; //Generate code for bar backgrounds?
var backColor = "25,25,25,200"; //Bar background color (R,G,B,A)
var barColor = "255,255,255"; //Bar colour (R,G,B)
var dynamicOpacity = true; //Bars' opacity is determined by how loud it's band is
var barOpacity = "200"; //Bar  opacity (if not dynamic)

//End config

//Disclaimer: I wrote this code for myself to work quickly.  I know it sucks and could be greatly optimized.
//Clean "r" or "R" off string
function c(s) {
    return ("" + s).replace(/r/gi, "");
}

mode = mode.toLowerCase();
var x = "0R";
var y = "0r";
var orientation = "Horizontal";
if (mode == "top" || mode == "bottom") {
    orientation = "Vertical";
    x = padding + "R";
    y = 0;
} else {
    var temp = barLength;
    barLength = barThickness;
    barThickness = temp;
    x = 0;
    y = padding * 2 + "r";
    y = parseInt(y) > 0 ? y : "1r";
}

var o = "";
var g = "Enable backface to generate a background gradient";
var s = "";
var s2 = "";

o += "[Rainmeter]\n";
o += "Update=10\n";
o += "DynamicWindowSize=1\n";
o += "AccurateText=1\n";
o += "\n";

o += "[MeasureAudio]\n";
o += "Measure=Plugin\n";
o += "Plugin=AudioLevel\n";
o += "Port=Output\n";
o += "FFTSize=1024\n";
o += "FFTAttack=1\n";
o += "FFTDecay=50\n";
o += "Sensitivity=50\n";
o += "Bands=" + bands + "\n";

o += "\n;\n;Begin generated code\n;\n\n";

if (stereo) {
    o += ";Measures\n";
   ...