147 lines
5.0 KiB
JavaScript
147 lines
5.0 KiB
JavaScript
/**
|
|
* Functions related to VU meters.
|
|
* These functions are intimately tied to the markup defined in the
|
|
* VU templates in _vu_meters.html.erb
|
|
*/
|
|
(function(context, $) {
|
|
|
|
"use strict";
|
|
|
|
context.JK = context.JK || {};
|
|
|
|
// As these are helper functions, just have a single
|
|
// static object with functions. Each function should
|
|
// take all necessary arguments to complete its work.
|
|
context.JK.VuHelpers = {
|
|
|
|
/**
|
|
* Render a VU meter into the provided selector.
|
|
* vuType can be either "horizontal" or "vertical"
|
|
*/
|
|
renderVU: function(selector, userOptions) {
|
|
selector = $(selector);
|
|
|
|
|
|
/**
|
|
* The default options for rendering a VU
|
|
*/
|
|
var renderVUDefaults = {
|
|
vuType: "vertical",
|
|
lightCount: 12,
|
|
lightWidth: 3,
|
|
lightHeight: 17
|
|
};
|
|
|
|
var options = $.extend({}, renderVUDefaults, userOptions);
|
|
var templateSelector = "#template-vu-v";
|
|
if (options.vuType === "horizontal") {
|
|
templateSelector = "#template-vu-h";
|
|
}
|
|
var templateSource = $(templateSelector).html();
|
|
|
|
selector.each(function() {
|
|
var $track = $(this);
|
|
$track.empty();
|
|
$track.html(context._.template(templateSource, options, {variable: 'data'}));
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
* Given a selector representing a container for a VU meter and
|
|
* a value between 0.0 and 1.0, light the appropriate lights.
|
|
*/
|
|
updateVU: function ($selector, value) {
|
|
// There are 13 VU lights. Figure out how many to
|
|
// light based on the incoming value.
|
|
$selector.each(function() {
|
|
var $track = $(this)
|
|
var countSelector = 'tr';
|
|
var horizontal = ($track.find('table.horizontal').length);
|
|
if (horizontal) {
|
|
countSelector = 'td';
|
|
}
|
|
|
|
var lightCount = $track.find(countSelector).length;
|
|
var i = 0;
|
|
var state = 'on';
|
|
var lights = Math.round(value * lightCount);
|
|
var redSwitch = Math.round(lightCount * 0.6666667);
|
|
|
|
var $light = null;
|
|
var colorClass = 'vu-green-';
|
|
var lightSelectorPrefix = $track.find('td.vu');
|
|
var thisLightSelector = null;
|
|
|
|
// Remove all light classes from all lights
|
|
var allLightsSelector = $track.find('td.vulight');
|
|
$(allLightsSelector).removeClass('vu-green-off vu-green-on vu-red-off vu-red-on');
|
|
|
|
// Set the lights
|
|
for (i = 0; i < lightCount; i++) {
|
|
colorClass = 'vu-green-';
|
|
state = 'on';
|
|
if (i >= redSwitch) {
|
|
colorClass = 'vu-red-';
|
|
}
|
|
if (i >= lights) {
|
|
state = 'off';
|
|
}
|
|
|
|
var lightIndex = horizontal ? i : lightCount - i - 1;
|
|
allLightsSelector.eq(lightIndex).addClass(colorClass + state);
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
* Given a selector representing a container for a VU meter and
|
|
* a value between 0.0 and 1.0, light the appropriate lights.
|
|
*/
|
|
updateVU2: function (side, mixer, value) {
|
|
// There are 13 VU lights. Figure out how many to
|
|
// light based on the incoming value.
|
|
|
|
var $selector = $('.' + side + '-' + mixer.id)
|
|
|
|
$selector.each(function() {
|
|
var $table = $(this)
|
|
var horizontal = $table.is('.horizontal')
|
|
|
|
var lightCount = Number($table.attr('data-light-count'))
|
|
|
|
var i = 0;
|
|
var state = 'on';
|
|
var lights = Math.round(value * lightCount);
|
|
var redSwitch = Math.round(lightCount * 0.6666667);
|
|
|
|
var $light = null;
|
|
var colorClass = 'vu-green-';
|
|
var thisLightSelector = null;
|
|
|
|
// Remove all light classes from all lights
|
|
var allLightsSelector = $table.find('td');
|
|
$(allLightsSelector).removeClass('vu-green-off vu-green-on vu-red-off vu-red-on');
|
|
|
|
// Set the lights
|
|
for (i = 0; i < lightCount; i++) {
|
|
colorClass = 'vu-green-';
|
|
state = 'on';
|
|
if (i >= redSwitch) {
|
|
colorClass = 'vu-red-';
|
|
}
|
|
if (i >= lights) {
|
|
state = 'off';
|
|
}
|
|
|
|
var lightIndex = horizontal ? i : lightCount - i - 1;
|
|
allLightsSelector.eq(lightIndex).addClass(colorClass + state);
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
};
|
|
|
|
})(window, jQuery); |