This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

How change objects color at visu
#1
Hi,

I need change object color at visu depending on values. I use as example 14 type of data. If my value is 100.002 - I want to show it by red color, if 30.05 - green, if zero - blue, etc... Is it possible? Is it possible to do for different objects independently? ( not for all objects 100.002 = red color)..??

Also is possible to change value background such way and show/hide object background (if possible - I want make object flashing such way)

Alex
Reply
#2
Please check this post (or whole thread)
https://forum.logicmachine.net/showthrea...08#pid2108

The best option is when you add custom class to this element e.g. "color-by-value" and in Custom Javascript you can then add such code:

Code:
const colorByValue = (obj, type) => {
  const {value} = obj;
  const className = "color-by-value";
  const element = document.querySelector(`.${className}`);
  
  if (value <= 100.002) element.style.color = "red";
  else if (value <= 30.05) element.style.color = "green";
  else if (value === 0) element.style.color = "blue";
};

grp.listen("1/1/1", colorByValue);

You must change "1/1/1" to this GA which should change a value.

Instead of "<=" you can change to "==" if you really want value to be equal not a threshold.

Instead of element.style.color you can changing classes e.g. ".red", ".green", ".blue".
Done is better than perfect
Reply
#3
Big thanks,

will try today to play with such settings.

By the way, is somewhere full documentation of LM internal elements and possibilities for them?

Alex
Reply
#4
Since LM uses HTML for visualization the only limit is what browser can do, it's not possible to document this Smile
Reply
#5
(18.03.2019, 14:17)admin Wrote: Since LM uses HTML for visualization the only limit is what browser can do, it's not possible to document this Smile

Good to hear, just mean we can do all we want Smile unfortunately  for me I see I just in 1st class at HTML LM school Smile

@buuuudzik
just try your recommendations, something not OK. So some questions appear:
1. For my element at visu I should simply put class name as color-by-value or "color-by-value"???
2. I put this class name to "Additional classes:" of my element, is this right way?
3. At additional classes I used many different scripts, but how divide them? Or just put next one after another??
Below all I have at my custom scripts, I think something not correctly done...:

$(function(){
$('.control-slider').slider().on('update', controlValueChange);
// your code here

});
$(function(){
const colorByValue = (obj, type) => {
const {value} = obj;
const className = "color-by-value";
const element = document.querySelector(`.${className}`);

if (value >= 0 and value <= 6) element.style.color = "red";
else if (value > 6) element.style.color = "green";
else if (value < 0) element.style.color = "blue";
};

grp.listen("1/1/0", colorByValue);
};
$(function(){
var btn = $('.camera'), win = btn.next();
btn.on('vclick', function() {
if (!win.hasClass('hide')) {
win.css({ top: 300, left: 800 });
}
});
$(function(){
// Fullscreen function
function fullScreen() {
if (!document.fullscreenElement &&
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen();
}
}
}
(function() {
var StartUserInput = function (e) {
fullScreen();
// Check if document is loaded in iframe
if (window.frameElement){
// Remove event listeners from parent
var thisparent = window.parent;
thisparent.document.removeEventListener('touchend', StartUserInput);
thisparent.document.removeEventListener('click', StartUserInput);
}
// Remove events
document.removeEventListener('touchend', StartUserInput);
document.removeEventListener('click', StartUserInput);
};
// Check if document is loaded in iframe
if (window.frameElement){
// Add event listeners to parent
var thisparent = window.parent;
// Event listener for iOS 9+ (is now touchend event)
thisparent.document.addEventListener('touchend', StartUserInput);
thisparent.document.addEventListener('click', StartUserInput);
}
// Event listener for iOS 9+ (is now touchend event)
document.addEventListener('touchend', StartUserInput);
document.addEventListener('click', StartUserInput);
})();
});
});
Reply
#6
You've added not appropriate word "and" in condition where in JS you have to use "&&" and there was no ")" at the end of $(function(){});

1. Simple class name withot any other signs.
2. Yes.
3. Every function is in another jQuery wrapper. You can add some comments/title like:
// 1. Coloring value by object________________________________________________

*Use console in browser, and when something strange happen, please console.log(someStrangeVariable) Smile

This is full version in jQuery wrapper:

Code:
$(function(){
 const colorByValue = (obj, type) => {
   const {value} = obj;
   const className = "color-by-value";
   const element = document.querySelector(`.${className}`);
   
        if (!element) return console.log(`You must add custom class "${className}" to some element.`);

   if (value >= 0 && value <= 6) element.style.color = "red";
   else if (value > 6) element.style.color = "green";
   else if (value < 0) element.style.color = "blue";
 };

 grp.listen("1/1/0", colorByValue);
});
Done is better than perfect
Reply
#7
Thank you very much,

now I am more experienced Smile Will correct my errors...

All works perfectly, now I have more possibilities Smile
Reply
#8
[quote="buuuudzik" pid="12351" dateline="1552977637"]
You've added not appropriate word "and" in condition where in JS you have to use "&&" and there was no ")" at the end of $(function(){});

1. Simple class name withot any other signs.
2. Yes.
3. Every function is in another jQuery wrapper. You can add some comments/title like:
// 1. Coloring value by object________________________________________________

*Use console in browser, and when something strange happen, please console.log(someStrangeVariable) Smile

This is full version in jQuery wrapper:

[code]$(function(){
 const colorByValue = (obj, type) => {
   const {value} = obj;
   const className = "color-by-value";
   const element = document.querySelector(`.${className}`);
   
if (!element) return console.log(`You must add custom class "${className}" to some element.`);

   if (value >= 0 && value <= 6) element.style.color = "red";
   else if (value > 6) element.style.color = "green";
   else if (value < 0) element.style.color = "blue";
 };

 grp.listen("1/1/0", colorByValue);
});

hello buuuudzik
ho to make the color changed depend on the object value itself instead of grp.listen("1/1/0", colorByValue);


regards,
Reply
#9
You need grp.listen in any case but you can access the address that is mapped to each element with a certain class like this:
Code:
$(function(){
  $('.my_custom_class').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      log(addr);
    }
  });
});
Reply
#10
(28.01.2021, 09:36)admin Wrote: You need grp.listen in any case but you can access the address that is mapped to each element with a certain class like this:
Code:
$(function(){
  $('.my_custom_class').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      log(addr);
    }
  });
});
hello admin
I still beginer in JS
your script will detect the GA
but how to change the color depend on GA's value
Reply
#11
What is the object data type?
Reply
#12
(28.01.2021, 15:21)admin Wrote: What is the object data type?

Could it be independent on data type?
If not choose floating
Reply
#13
Full example, additional class is color-by-value. It changes text color depending on current value but any other CSS property can be changed this way.
Code:
$(function() {
  $('.color-by-value').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var value = obj.value
          , color = 'blue'; // default color

        if (value >= 0 && value <= 6) {
          color = 'red';
        }
        else if (value > 6) {
          color = 'green';
        }

        $(el).css('color', color);
      });
    }
  });
});
Reply
#14
(29.01.2021, 08:03)admin Wrote: Full example, additional class is color-by-value. It changes text color depending on current value but any other CSS property can be changed this way.
Code:
$(function() {
  $('.color-by-value').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var value = obj.value
          , color = 'blue'; // default color

        if (value >= 0 && value <= 6) {
          color = 'red';
        }
        else if (value > 6) {
          color = 'green';
        }

        $(el).css('color', color);
      });
    }
  });
});



thank you admin.
great job
Reply
#15
(30.01.2021, 11:07)khalil Wrote:
(29.01.2021, 08:03)admin Wrote: Full example, additional class is color-by-value. It changes text color depending on current value but any other CSS property can be changed this way.
Code:
$(function() {
  $('.color-by-value').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var value = obj.value
          , color = 'blue'; // default color

        if (value >= 0 && value <= 6) {
          color = 'red';
        }
        else if (value > 6) {
          color = 'green';
        }

        $(el).css('color', color);
      });
    }
  });
});



thank you admin.
great job

Hello, I would like to use this example so that when a specific address is TRUE or FALSE
Reply
#16
Like this:
Code:
$(function() {
  $('.color-by-value').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var color;

        if (obj.value) {
          color = 'green';
        }
        else  {
          color = 'red';
        }

        $(el).css('color', color);
      });
    }
  });
});
Reply


Forum Jump: