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 that you accept 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
#17
(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);
      });
    }
  });
});

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.
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#18
This is not CSS but custom JavaScript (Scripting > Tools > Edit custom JavaScript).
Reply
#19
(10.06.2021, 06:02)admin Wrote: 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.
There are 10 kinds of people in the world; those who can read binary and those who don't  Cool
Reply
#20
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);
      });
    }
  });
});
Reply


Forum Jump: