From 4c02b15f65bee461b7b74e5ffdc41c1d745181f9 Mon Sep 17 00:00:00 2001 From: Paulchen Panther Date: Thu, 20 Dec 2018 14:33:28 +0100 Subject: [PATCH] speed improvements for live visualization --- assets/webconfig/js/ledsim.js | 201 +++++++++++++++++++++++++--------- 1 file changed, 149 insertions(+), 52 deletions(-) diff --git a/assets/webconfig/js/ledsim.js b/assets/webconfig/js/ledsim.js index 92bd1383..698fc92c 100644 --- a/assets/webconfig/js/ledsim.js +++ b/assets/webconfig/js/ledsim.js @@ -5,23 +5,91 @@ $(document).ready(function() { var dialog; var leds; var lC = false; - + var imageCanvasNodeCtx; + var ledsCanvasNodeCtx; + var canvas_height; + var canvas_width; + var twoDPaths = []; + var toggleLeds = false; + + /// add prototype for simple canvas clear() method + CanvasRenderingContext2D.prototype.clear = function(){ + this.clearRect(0, 0, this.canvas.width, this.canvas.height) + }; + + function create2dPaths(){ + twoDPaths = []; + for(var idx=0; idx'+led.index+''; - } - $('#leds_canvas').html(leds_html); - - if($('#leds_toggle_num').hasClass('btn-success')) - $('.led_num').toggle(true); - - if($('#leds_toggle').hasClass('btn-danger')) - $('.led').toggle(false); - - $('#image_preview').attr("width" , canvas_width-1); - $('#image_preview').attr("height", canvas_height-1); - } - // ------------------------------------------------------------------ - $('#leds_toggle_num').off().on("click", function() { - $('.led_num').toggle(); - toggleClass('#leds_toggle_num', "btn-danger", "btn-success"); - }); + canvas_height = $('#ledsim_dialog').outerHeight()-$('#ledsim_text').outerHeight()-$('[data-role=footer]').outerHeight()-$('[data-role=header]').outerHeight()-40; + canvas_width = $('#ledsim_dialog').outerWidth()-30; + $('#leds_canvas').html(""); + leds_html = ''; + leds_html += ''; + + $('#leds_canvas').html(leds_html); + + imageCanvasNodeCtx = document.getElementById("image_preview_canv").getContext("2d"); + ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d"); + create2dPaths(); + printLedsToCanvas(); + resetImage() + } + + // -----------------------FIX THIS------------------------- // ------------------------------------------------------------------ + // $('#leds_toggle_num').off().on("click", function() { + // $('.led_num').toggle(); + // toggleClass('#leds_toggle_num', "btn-danger", "btn-success"); + //}); + // ------------------------------------------------------------------ + $('#leds_toggle').off().on("click", function() { - $('.led').toggle(); + toggleLeds = !toggleLeds + ledsCanvasNodeCtx.clear(); toggleClass('#leds_toggle', "btn-success", "btn-danger"); }); @@ -106,14 +193,14 @@ $(document).ready(function() { if ( imageStreamActive ) { requestLedImageStop(); - $('#image_preview').removeAttr("src"); + resetImage(); } else { requestLedImageStart(); } }); - + // ------------------------------------------------------------------ $(hyperion).on("cmd-ledcolors-ledstream-update",function(event){ if (!modalOpened) @@ -122,15 +209,10 @@ $(document).ready(function() { } else { - ledColors = (event.response.result.leds); - for(var idx=0; idx