+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: OLD 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:If it is just 2 state they use 2 images for both state.(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? - 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.