Logic Machine Forum
How change objects color at visu - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: How change objects color at visu (/showthread.php?tid=1976)

Pages: 1 2

How change objects color at visu - AlexLV - 17.03.2019

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

RE: How change objects color at visu - buuuudzik - 18.03.2019

Please check this post (or whole thread)
https://forum.logicmachine.net/showthread.php?tid=275&pid=2108#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".

RE: How change objects color at visu - AlexLV - 18.03.2019

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

RE: How change objects color at visu - admin - 18.03.2019

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

RE: How change objects color at visu - AlexLV - 18.03.2019

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

RE: How change objects color at visu - buuuudzik - 19.03.2019

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


RE: How change objects color at visu - AlexLV - 19.03.2019

Thank you very much,

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

All works perfectly, now I have more possibilities Smile

RE: How change objects color at visu - khalil - 27.01.2021

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

RE: How change objects color at visu - admin - 28.01.2021

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


RE: How change objects color at visu - khalil - 28.01.2021

(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

RE: How change objects color at visu - admin - 28.01.2021

What is the object data type?

RE: How change objects color at visu - khalil - 28.01.2021

(28.01.2021, 15:21)admin Wrote: What is the object data type?

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

RE: How change objects color at visu - admin - 29.01.2021

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


RE: How change objects color at visu - khalil - 30.01.2021

(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


RE: How change objects color at visu - davidchispas - 10.02.2021

(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

RE: How change objects color at visu - admin - 10.02.2021

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


RE: How change objects color at visu - Trond Hoyem - 10.06.2021

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

RE: How change objects color at visu - admin - 10.06.2021

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

RE: How change objects color at visu - Trond Hoyem - 10.06.2021

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

RE: How change objects color at visu - admin - 10.06.2021

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