-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
367 additions
and
285 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,357 @@ | ||
let g_selectedRanges = []; | ||
let g_argControls = {}; | ||
|
||
let g_effectSelector; | ||
let g_speedSlider; | ||
let g_overlayedToggle; | ||
let g_opacityContainer; | ||
let g_opacitySlider; | ||
let g_backButton; | ||
let g_forwardButton; | ||
let g_sendButton; | ||
let g_offButton; | ||
let g_onButton; | ||
|
||
function componentToHex(c) { | ||
let hex = c.toString(16); | ||
return hex.length == 1 ? "0" + hex : hex; | ||
} | ||
|
||
function rgbToHex(rgb) { | ||
return "#" + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]); | ||
} | ||
|
||
|
||
function schemaToComponent(name, schemaElement, argFuncs, colors, colorTypes) { | ||
type = schemaElement.value.type; | ||
mainDiv = $('<div/>', { 'class': 'row' }); | ||
mainDiv.append($('<div/>', {'class': 'col-sm-4'})); | ||
controlDiv = $('<div/>', {'class': 'panel panel-default'}); | ||
controlDiv.append($('<div/>', {'class': 'panel-heading', text: name})); | ||
mainDiv.append($('<div/>', {'class': 'col-sm-4 centered_hor'}).append(controlDiv)); | ||
mainDiv.append($('<div/>', {'class': 'col-sm-4'})); | ||
if (type == 'number') { | ||
slider = $('<input/>', {id: 'input_'+name, type: 'text', 'data-slider-value': schemaElement.value.default, 'data-slider-min': schemaElement.value.min, 'data-slider-max': schemaElement.value.max, 'data-slider-step': 0.1}); | ||
controlDiv.append($('<div/>', {'class': 'panel-body'}).append(slider)); | ||
slider.slider(); | ||
argFuncs[name] = function(s) { | ||
return function() { | ||
return parseInt(s.slider("getValue")) | ||
} | ||
}(slider); | ||
return mainDiv; | ||
} | ||
else if (type == 'color') { | ||
colorTypeSelector = $('<select id="color_type_selector"></select>') | ||
$.each(colorTypes, function() { | ||
colorTypeSelector.append($("<option />").val(JSON.stringify({"name": this.name, "schema": this.schema})).text(this.name)); | ||
}); | ||
colorArgsDiv = $('<div/>'); | ||
controlDiv.append($('<div/>', {'class': 'panel-body'}).append(colorTypeSelector).append(colorArgsDiv)); | ||
|
||
let colorArgFuncs = {}; | ||
|
||
colorTypeSelector.change(function() { | ||
colorArgsDiv.empty(); | ||
colorArgFuncs = {}; | ||
console.log(colorTypeSelector.val()); | ||
let schema = $.parseJSON(colorTypeSelector.val()).schema; | ||
for (i in schema) { | ||
component = schemaToComponent(i, schema[i], colorArgFuncs, colors, colorTypes); | ||
colorArgsDiv.append(component); | ||
} | ||
}); | ||
argFuncs[name] = function (selector){ | ||
return function() { | ||
let args = {}; | ||
for (control in colorArgFuncs) { | ||
args[control] = colorArgFuncs[control](); | ||
} | ||
return {type: $.parseJSON(colorTypeSelector.val()).name, args: args}; | ||
} | ||
}(colorTypeSelector); | ||
colorTypeSelector.trigger('change'); | ||
return mainDiv; | ||
} else if (type == 'rgb') { | ||
let start_color = schemaElement.value.default || [255, 255, 255]; | ||
colorSelector = $('<input/>', {id: 'input_'+name, 'class': 'form-control colorpicker-element', type: 'text', 'data-format': 'hex', 'value': rgbToHex(start_color)}); | ||
colorSelector.colorpicker({ | ||
colorSelectors : colors, | ||
template: '<div class="colorpicker dropdown-menu">' + | ||
'<div class="colorpicker-saturation"><i><b></b></i></div>' + | ||
'<div class="colorpicker-hue"><i></i></div>' + | ||
'<div class="colorpicker-alpha"><i></i></div>' + | ||
'<div class="colorpicker-color"></div></div>' + | ||
'</div>', | ||
}); | ||
argFuncs[name] = function (selector){ | ||
return function() { | ||
let rgba = selector.data('colorpicker').color.toRGB(); | ||
return [rgba['r'], rgba['g'], rgba['b']]; | ||
} | ||
}(colorSelector); | ||
controlDiv.append(colorSelector); | ||
return mainDiv; | ||
} | ||
} | ||
|
||
function getEffects() { | ||
return $.ajax({ | ||
url: "/api/v1/effects", | ||
dataType: "json", | ||
}); | ||
} | ||
|
||
function getColorTypes() { | ||
return $.ajax({ | ||
url: "/api/v1/color_types", | ||
dataType: "json" | ||
}); | ||
} | ||
|
||
function getColors() { | ||
return $.ajax({ | ||
url: "/api/v1/colors", | ||
dataType: "json" | ||
}); | ||
} | ||
|
||
function getPresets() { | ||
return $.ajax({ | ||
url: "/api/v1/presets", | ||
dataType: "json" | ||
}); | ||
} | ||
|
||
function getRanges() { | ||
return $.ajax({ | ||
url: "/api/v1/ranges", | ||
dataType: "json" | ||
}); | ||
} | ||
|
||
function setupDynamicComponents(ranges, effects, presets, colorTypes, colors) { | ||
console.log("Loaded necessary data. Setting up components"); | ||
console.log(effects); | ||
let hex_colors = {}; | ||
|
||
//Populate the color selector | ||
$.each(colors, function() { | ||
hex_colors[this.name] = rgbToHex(this.rgb); | ||
}); | ||
|
||
setupRanges(ranges); | ||
setupEffects(effects, hex_colors, colorTypes); | ||
setupPresets(presets); | ||
} | ||
|
||
function setupEffects(effects, colors, colorTypes) { | ||
$.each(effects, function() { | ||
g_effectSelector.append($("<option />").val(JSON.stringify({'schema': this.schema, 'defaultSpeed': this.default_speed})).text(this.name)); | ||
}); | ||
|
||
//When a different effect is chosen, hide/show appropriate options | ||
g_effectSelector.change(function() { | ||
$('#controls').empty(); | ||
g_argControls = {}; | ||
let effectInfo = $.parseJSON(g_effectSelector.val()); | ||
g_speedSlider.slider('setValue', effectInfo.defaultSpeed) | ||
controls = effectInfo.schema; | ||
for (i in controls) { | ||
component = schemaToComponent(i, controls[i], g_argControls, colors, colorTypes); | ||
$('#controls').append(component); | ||
} | ||
}); | ||
|
||
//Update options for initially selected effect | ||
g_effectSelector.trigger("change"); | ||
} | ||
|
||
function setupPresets(presets) { | ||
$.each(presets, function() { | ||
let button =$("<button />").prop("type", "button").prop("id", "preset_"+this).addClass("btn btn-primary preset-btn").text(this); | ||
$("#presets").append(button); | ||
let preset = this; | ||
button.click(function() { | ||
$.post({ | ||
url: `/api/v1/presets/${preset}`, | ||
data: "{}", | ||
contentType: "application/json", | ||
dataType: 'json' | ||
}).done(function(data) { | ||
if ( $(window).width() > 768) { | ||
$("#result").html("") | ||
$.notify({ | ||
// options | ||
message: data.message | ||
},{ | ||
// settings | ||
type: 'success' | ||
}); | ||
} | ||
else { | ||
$("#result").html(data.message); | ||
} | ||
}); | ||
}); | ||
}); | ||
} | ||
|
||
function setupRanges(ranges) { | ||
$.each(ranges.sections, function() { | ||
let name = this; | ||
range_input = $("<input type='checkbox' data-toggle='toggle' data-off='" + name + "' data-on='" + name + "' data-width='72' data-height='32' checked>"); | ||
g_selectedRanges.push(name); | ||
range_input.change(function(){ | ||
if($(this).prop("checked")) { | ||
g_selectedRanges.push(name); | ||
}else { | ||
g_selectedRanges.splice(g_selectedRanges.indexOf(name), 1); | ||
} | ||
}); | ||
switch_container = $("<div class='toggle_container'></div>"); | ||
range_input.appendTo(switch_container); | ||
switch_container.appendTo("#range_switches"); | ||
range_input.bootstrapToggle(); | ||
}); | ||
} | ||
|
||
$(document).ready(function(){ | ||
g_effectSelector = $("#effect_selector"); | ||
g_speedSlider = $("#speed_slider"); | ||
g_speedSlider.slider(); | ||
g_overlayedToggle = $("#overlayed_toggle"); | ||
g_overlayedToggle.bootstrapToggle("off"); | ||
g_opacityContainer = $("#opacity_container"); | ||
g_opacitySlider = $("#opacity_slider"); | ||
g_opacitySlider.slider(); | ||
g_backButton = $("#back"); | ||
g_forwardButton = $("#forward"); | ||
g_sendButton = $("#send"); | ||
g_offButton = $("#off"); | ||
g_onButton = $("#on"); | ||
|
||
$.when(getRanges(), getEffects(), getPresets(), getColorTypes(), getColors()).done(function (ranges, effects, presets, colorTypes, colors) { | ||
setupDynamicComponents(ranges[0], effects[0].effects, presets[0].presets, colorTypes[0].color_types, colors[0].colors); | ||
$("#main_container").fadeIn(); | ||
}).fail(console.log); | ||
|
||
g_overlayedToggle.change(function(){ | ||
if(g_overlayedToggle.prop("checked")) { | ||
g_opacityContainer.fadeIn(); | ||
}else { | ||
g_opacityContainer.fadeOut(); | ||
} | ||
}); | ||
|
||
//Send the command | ||
g_sendButton.click(function(){ | ||
let effect; | ||
let command; | ||
if(g_selectedRanges.length == 0){ | ||
effect = "off"; | ||
command = { | ||
effect: { | ||
args: {"ranges": "all"}, | ||
properties: {overlayed: false} | ||
} | ||
} | ||
} | ||
else { | ||
let args = {}; | ||
for (control in g_argControls) { | ||
args[control] = g_argControls[control](); | ||
} | ||
let overlayed = g_overlayedToggle.prop('checked'); | ||
let opacity = overlayed? parseFloat(g_opacitySlider.slider('getValue')) : null; | ||
let speed = parseFloat(g_speedSlider.slider('getValue')); | ||
effect = g_effectSelector.children("option").filter(":selected").text(); | ||
command = { | ||
args : args, | ||
properties: { | ||
ranges: g_selectedRanges, | ||
speed: speed, | ||
overlayed: overlayed, | ||
opacity: opacity | ||
} | ||
}; | ||
} | ||
$.post({ | ||
url: `/api/v1/effects/${effect}`, | ||
data: JSON.stringify(command), | ||
contentType: "application/json", | ||
dataType: 'json' | ||
}).done(function(data) { | ||
if ( $(window).width() > 768) { | ||
$("#result").html("") | ||
$.notify({ | ||
// options | ||
message: data.message | ||
},{ | ||
// settings | ||
type: 'success' | ||
}); | ||
} | ||
else { | ||
$("#result").html(data.message) | ||
} | ||
}); | ||
}); | ||
|
||
g_backButton.click(function() { | ||
let request = { | ||
"back": true | ||
}; | ||
$.ajax({ | ||
url: '/api/v1/history', | ||
type: 'post', | ||
data: JSON.stringify(request), | ||
contentType: "application/json", | ||
dataType: 'json', | ||
success: function(data) { | ||
if ( $(window).width() > 768) { | ||
$("#result").html(""); | ||
$.notify({ | ||
// options | ||
message: data.message | ||
},{ | ||
// settings | ||
type: 'success' | ||
}); | ||
} | ||
else { | ||
$("#result").html(data.message) | ||
} | ||
} | ||
}); | ||
}); | ||
|
||
g_forwardButton.click(function() { | ||
let request = { | ||
"forward": true | ||
}; | ||
$.ajax({ | ||
url: '/api/v1/history', | ||
type: 'post', | ||
data: JSON.stringify(request), | ||
contentType: "application/json", | ||
dataType: 'json', | ||
success: function(data) { | ||
if ( $(window).width() > 768) { | ||
$("#result").html("") | ||
$.notify({ | ||
// options | ||
message: data.message | ||
},{ | ||
// settings | ||
type: 'success' | ||
}); | ||
} | ||
else { | ||
$("#result").html(data.message) | ||
} | ||
} | ||
}); | ||
}); | ||
}); | ||
|
Oops, something went wrong.