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


Forum Jump: