How change objects color at visu

[AlexLV]

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

[buuuudzik]

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".

[AlexLV]

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

[admin]

Since LM uses HTML for visualization the only limit is what browser can do, it's not possible to document this

[AlexLV]

Since LM uses HTML for visualization the only limit is what browser can do, it's not possible to document this

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

---

@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);
})();
});
});

[buuuudzik]

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)

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);
});

[AlexLV]

Thank you very much,

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

All works perfectly, now I have more possibilities

[khalil]

[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)

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,

[admin]

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);
    }
  });
});

[khalil]

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

[admin]

What is the object data type?

[khalil]

What is the object data type?

Could it be independent on data type?
If not choose floating

[admin]

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);
      });
    }
  });
});

[khalil]

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

[davidchispas]

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

[admin]

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);
      });
    }
  });
});

[Trond Hoyem]

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);
      });
    }
  });
});

I am trying this solution too, but with no luck.

I have copied the code above to CSS and added the additional class to the object, but the color of the text does not change. If I change the text in the browser console, it changes in the visualisation as well.

Any idea what other things one might need to do? I have created a temperature object with this additional class as my first test.

[admin]

This is not CSS but custom JavaScript (Scripting > Tools > Edit custom JavaScript).

[Trond Hoyem]

This is not CSS but custom JavaScript (Scripting > Tools > Edit custom JavaScript).

Indeed... works very well when I add it in JS instead of CSS :-)

So then my next question:
The limits in this JS is hard coded. Is there any way to have the limits linked to addresses as well? 
Example; 
Main object is called "Room 1 ACTUAL_TEMP"
Lower limit is called "Room 1 LOWER_LIMIT"
Upper limit is called "Room 1 UPPER_LIMIT"

What I want to do is make a visu-page showing the freezer rooms with large temperature number that is coloured depending on the temperature in each room, and the limits should be adjustable for each room by the staff.

[admin]

Use this, make sure that all lower/upper limit objects are defined and they all follow the naming scheme as you've posted.

Code:

$(function() {
  $('.color-by-value').each(function(_, el) {
    var addr = $(el).data('object');
    if (addr) {
      grp.listen(addr, function(obj) {
        var value = obj.value;
        var name = obj.name;
        var color = 'green';
        var lname = name.replace('ACTUAL_TEMP', 'LOWER_LIMIT');
        var uname = name.replace('ACTUAL_TEMP', 'UPPER_LIMIT');
        var llimit = grp.getvalue(lname);
        var ulimit = grp.getvalue(uname);

        if (value < llimit) {
          color = 'blue';
        }
        else if (value > ulimit) {
          color = 'red';
        }

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