Update webui (#301)

* update

* update

* fix

* implement opt groups

* spaces

[skip ci]

* page wrapper adjust

[skip ci]

* implement optgroups for remote, adjust effect schemas

* lost id

[skip ci]
This commit is contained in:
brindosch
2016-11-30 17:32:12 +01:00
committed by redPanther
parent 81dea1583d
commit 3e5ca4601d
25 changed files with 892 additions and 4736 deletions

View File

@@ -27,6 +27,13 @@ function validateText(){
return true
}
function round(number) {
var factor = Math.pow(10, 4);
var tempNumber = number * factor;
var roundedTempNumber = Math.round(tempNumber);
return roundedTempNumber / factor;
};
function createLedPreview(leds, origin){
if (origin == "classic"){
@@ -59,12 +66,15 @@ function createLedPreview(leds, origin){
"top:"+(led.vscan.minimum * canvas_height)+"px;"+
"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+
"height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;";
leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_num">'+idx+'</span></div>';
leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_prev_num">'+idx+'</span></div>';
}
$('#leds_preview').html(leds_html);
$('#ledc_0').css({"background-color":"black","z-index":"10"});
$('#ledc_1').css({"background-color":"grey","z-index":"10"});
$('#ledc_0').css({"background-color":"black","z-index":"12"});
$('#ledc_1').css({"background-color":"grey","z-index":"11"});
$('#ledc_2').css({"background-color":"#A9A9A9","z-index":"10"});
if($('#leds_prev_toggle_num').hasClass('btn-success'))
$('.led_prev_num').css("display", "inline");
}
function createClassicLeds(){
@@ -82,13 +92,19 @@ function createClassicLeds(){
var rawledsVDepth = parseInt($("#ip_cl_ledsvdepth").val());
var rawledsHDepth = parseInt($("#ip_cl_ledshdepth").val());
var rawedgeGap = parseInt($("#ip_cl_ledsedgegap").val());
var rawcornerGap = parseInt($("#ip_cl_ledscornergap").val());
//helper
var ledsVDepth = rawledsVDepth / 100;
var ledsHDepth = rawledsHDepth / 100;
var edgeGap = rawedgeGap / 100 /2;
var min = 0.0 + edgeGap;
var max = 1.0 - edgeGap;
var ledsVDepth = rawledsVDepth /100;
var ledsHDepth = rawledsHDepth /100;
var edgeVGap = rawedgeGap /100/2;
var edgeHGap = edgeVGap/(16/9);
var cornerVGap = rawcornerGap /100/2;
var cornerHGap = cornerVGap/(16/9);
var Vmin = 0.0 + edgeVGap;
var Vmax = 1.0 - edgeVGap;
var Hmin = 0.0 + edgeHGap;
var Hmax = 1.0 - edgeHGap;
var ledArray = [];
createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
@@ -143,15 +159,23 @@ function createClassicLeds(){
}
function createLedArray(hmin, hmax, vmin, vmax){
hmin = round(hmin);
hmax = round(hmax);
vmin = round(vmin);
vmax = round(vmax);
ledArray.push( { "hscan" : { "minimum" : hmin, "maximum" : hmax }, "vscan": { "minimum": vmin, "maximum": vmax }} );
}
function createTopLeds(){
step=(max-min)/ledsTop;
vmin=min
step=(Hmax-Hmin)/ledsTop;
hmin=Hmin
if(cornerVGap != '0'){
step=(Hmax-Hmin-(cornerHGap*2))/ledsTop;
hmin=Hmin+(cornerHGap);
}
vmin=Vmin
vmax=vmin+ledsHDepth;
hmin=min
hmax=min+step
hmax=hmin+step
for (var i = 0; i<ledsTop; i++){
createLedArray(hmin, hmax, vmin, vmax);
hmin += step
@@ -160,11 +184,15 @@ function createClassicLeds(){
}
function createLeftLeds(){
step=(max-min)/ledsLeft;
hmin=min;
hmax=min+ledsVDepth;
vmin=max-step
vmax=max
step=(Vmax-Vmin)/ledsLeft;
vmax=Vmax
if(cornerVGap != '0'){
step=(Vmax-Vmin-(cornerVGap*2))/ledsLeft;
vmax=Vmax-(cornerVGap);
}
hmin=Hmin;
hmax=hmin+ledsVDepth;
vmin=vmax-step
for (var i = ledsLeft; i>0; i--){
createLedArray(hmin, hmax, vmin, vmax);
vmin -= step
@@ -173,11 +201,15 @@ function createClassicLeds(){
}
function createRightLeds(){
step=(max-min)/ledsRight;
hmax=max;
step=(Vmax-Vmin)/ledsRight;
vmin=Vmin
if(cornerVGap != '0'){
step=(Vmax-Vmin-(cornerVGap*2))/ledsRight;
vmin=Vmin+(cornerVGap);
}
hmax=Hmax;
hmin=hmax-ledsVDepth;
vmin=min
vmax=min+step
vmax=vmin+step
for (var i = 0; i<ledsRight; i++){
createLedArray(hmin, hmax, vmin, vmax);
vmin += step
@@ -186,15 +218,19 @@ function createClassicLeds(){
}
function createBottomLeds(){
step=(max-min)/ledsBottom;
vmax=max;
step=(Hmax-Hmin)/ledsBottom;
hmax=Hmax
if(cornerVGap != '0'){
step=(Hmax-Hmin-(cornerHGap*2))/ledsBottom;
hmax=Hmax-(cornerHGap);
}
vmax=Vmax;
vmin=vmax-ledsHDepth;
hmin=max-step
hmax=max
hmin=hmax-step
for (var i = ledsBottom; i>0; i--){
createLedArray(hmin, hmax, vmin, vmax);
hmin -= step
hmax -= step
hmin -= step;
hmax -= step;
}
}
}
@@ -232,6 +268,11 @@ function createMatrixLeds(){
var vscanMin = y * vblock
var vscanMax = (y + 1) * vblock
hscanMin = round(hscanMin);
hscanMax = round(hscanMax);
vscanMin = round(vscanMin);
vscanMax = round(vscanMax);
leds.push({
index: index,
hscan: {
@@ -239,8 +280,8 @@ function createMatrixLeds(){
maximum: hscanMax
},
vscan: {
minimum: vscanMin,
maximum: vscanMax
minimum: vscanMin,
maximum: vscanMax
}
})
}
@@ -329,13 +370,42 @@ $(document).ready(function() {
$(hyperion).one("cmd-serverinfo",function(event){
server = event.response;
ledDevices = server.info.ledDevices.available
ledDevicesHtml = "";
devRPiSPI = ['apa102', 'ws2801', 'lpd6803', 'lpd8806', 'p9813', 'sk6812spi', 'ws2812spi'];
devRPiPWM = ['ws281x'];
devRPiGPIO = ['piblaster'];
devNET = ['atmoorb', 'dmx', 'fadecandy', 'philipshue', 'tinkerforge', 'tpm2net', 'udpe131', 'udph801', 'udpraw'];
devUSB = ['adalight', 'adalightapa102', 'atmo', 'hyperionusbasp', 'lightpack', 'multilightpack', 'paintpack', 'rawhid', 'sedu', 'tpm2'];
var optArr = [[]];
optArr[1]=[];
optArr[2]=[];
optArr[3]=[];
optArr[4]=[];
optArr[5]=[];
for (idx=0; idx<ledDevices.length; idx++)
{
ledDevicesHtml += '<option value="'+ledDevices[idx]+'">'+ledDevices[idx]+'</option>';
if($.inArray(ledDevices[idx], devRPiSPI) != -1)
optArr[0].push(ledDevices[idx]);
else if($.inArray(ledDevices[idx], devRPiPWM) != -1)
optArr[1].push(ledDevices[idx]);
else if($.inArray(ledDevices[idx], devRPiGPIO) != -1)
optArr[2].push(ledDevices[idx]);
else if($.inArray(ledDevices[idx], devNET) != -1)
optArr[3].push(ledDevices[idx]);
else if($.inArray(ledDevices[idx], devUSB) != -1)
optArr[4].push(ledDevices[idx]);
else
optArr[5].push(ledDevices[idx]);
}
$("#leddevices").html(ledDevicesHtml);
$("#leddevices").append(createSel(optArr[0], "RPi SPI"));
$("#leddevices").append(createSel(optArr[1], "RPi PWM"));
$("#leddevices").append(createSel(optArr[2], "RPi GPIO"));
$("#leddevices").append(createSel(optArr[3], "Network"));
$("#leddevices").append(createSel(optArr[4], "USB"));
$("#leddevices").append(createSel(optArr[5], "Debug"));
$("#leddevices").val(server.info.ledDevices.active);
$("#leddevices").trigger("change");
});
@@ -409,6 +479,11 @@ $(document).ready(function() {
requestWriteConfig(JSON.parse(createLedConfig()));
});
// ------------------------------------------------------------------
$('#leds_prev_toggle_num').off().on("click", function() {
$('.led_prev_num').toggle();
toggleClass('#leds_prev_toggle_num', "btn-danger", "btn-success");
});
// -------------------------------------------------------------
$('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
@@ -492,8 +567,6 @@ $(document).ready(function() {
requestWriteConfig(result)
});
// ------------------------------------------------------------------
requestServerConfig();
});