Logic Machine Forum
Line lamp , light strip ,How to display with SVG or CSS? - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Line lamp , light strip ,How to display with SVG or CSS? (/showthread.php?tid=1935)



Line lamp , light strip ,How to display with SVG or CSS? - newspaper - 28.02.2019

Line lamp , light strip ,How to display with SVG or CSS?


RE: Line lamp , light strip ,How to display with SVG or CSS? - admin - 04.03.2019

First, create visuzalization elements for strip display. Set Display mode to icon and Additional classes to lights

Add this code to Custom JavaScript, change 32/1/1 to your color object value. It will remove icons from strip display elements and use current object color value as background fill with 50% opacity. You can change opacity from 0.5 to any other value between 1 and 0 if needed.

Code:
$(function(){
  if (typeof grp === 'object') {
    var lights = $('.lights');
        
    $.each(lights, function(_, el) {
      var light = $(el);

      light
        .css('width', light.width())
        .css('height', light.height())
        .css('opacity', 0.5)
        .find('.icon').remove();
    });
    
    grp.listen('32/1/1', function(obj) {
      lights.css('background-color', Scada.getRgbHex(obj.value));
    }, true);
  }
});



RE: Line lamp , light strip ,How to display with SVG or CSS? - admin - 07.03.2019

Custom JavaScript will not work in the editor, try viewing visualization separately.


RE: Line lamp , light strip ,How to display with SVG or CSS? - Daniel - 08.03.2019

I tried it and it works fine, probably your group 1/1/1 is not 3byte RGB


RE: Line lamp , light strip ,How to display with SVG or CSS? - admin - 08.03.2019

Yes, 1/1/1 is boolean since there are on and off icons in visualization element settings.


RE: Line lamp , light strip ,How to display with SVG or CSS? - newspaper - 08.03.2019

(08.03.2019, 10:31)admin Wrote: Yes, 1/1/1 is boolean since there are on and off icons in visualization element settings.

Yes, my light bar is not RGB. group address Only open and close, but I also want to use CSS to show.


Looking at the yellow lines above my background image? I use the effect of wanting CSS.


RE: Line lamp , light strip ,How to display with SVG or CSS? - Daniel - 08.03.2019

(08.03.2019, 13:47)newspaper Wrote:
(08.03.2019, 10:31)admin Wrote: Yes, 1/1/1 is boolean since there are on and off icons in visualization element settings.

Yes, my light bar is not RGB. group address Only open and close, but I also want to use CSS to show.


Looking at the yellow lines above my background image? I use the effect of wanting CSS.
If it is just 2 state they use 2 images for both state.


RE: Line lamp , light strip ,How to display with SVG or CSS? - newspaper - 09.03.2019

(04.03.2019, 08:41)admin Wrote: First, create visuzalization elements for strip display. Set Display mode to icon and Additional classes to lights

Add this code to Custom JavaScript, change 32/1/1 to your color object value. It will remove icons from strip display elements and use current object color value as background fill with 50% opacity. You can change opacity from 0.5 to any other value between 1 and 0 if needed.

Code:
$(function(){
 if (typeof grp === 'object') {
   var lights = $('.lights');
        
   $.each(lights, function(_, el) {
     var light = $(el);

     light
       .css('width', light.width())
       .css('height', light.height())
       .css('opacity', 0.5)
       .find('.icon').remove();
   });
   
   grp.listen('32/1/1', function(obj) {
     lights.css('background-color', Scada.getRgbHex(obj.value));
   }, true);
 }
});

My light strip are not RGB, only on and off. How to define the two colors on and off in the aboveCustom JavaScript , The group address is one bit.