+- 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: Symbol gradient (/showthread.php?tid=5012)
Symbol gradient - tomnord - 09.10.2023
Hi, I want to show colorshift with gradient from GA(0-100%) in visu. As an example, i want a rectangle to go from white to green depending on the input from GA.
I guess I need custom CSS and Javascript? But I have never used this before.
RE: Symbol gradient - admin - 09.10.2023
Set element's Additional classes to colorize and display mode to either Icon or Icon and value.
Add to Custom CSS to hide the icon image.
Code:
.colorize .icon img {
visibility: hidden;
}Add to Custom JavaScript:
Code:
$(function(){
$('.colorize').each(function(_, el) {
var $el = $(el), addr = $el.data('object'), icon = $el.find('.icon');
grp.listen(addr, function(obj) {
var val = obj.value || 0;
val = Math.round(2.55 * (100 - val));
icon.css('background-color', 'rgb(' + val + ', 255, ' + val + ')');
});
});
});RE: Symbol gradient - tomnord - 10.10.2023
(09.10.2023, 11:37)admin Wrote: Set element's Additional classes to colorize and display mode to either Icon or Icon and value.
Add to Custom CSS to hide the icon image.
Code:.colorize .icon img {
visibility: hidden;
}
Add to Custom JavaScript:
Code:$(function(){
$('.colorize').each(function(_, el) {
var $el = $(el), addr = $el.data('object'), icon = $el.find('.icon');
grp.listen(addr, function(obj) {
var val = obj.value || 0;
val = Math.round(2.55 * (100 - val));
icon.css('background-color', 'rgb(' + val + ', 255, ' + val + ')');
});
});
});
Hov do I make the square that will show the gradient?
RE: Symbol gradient - admin - 10.10.2023
Create an object in the visualization. Set main object to the address that will be used to change the color (do not use status object). Use any icon, it will be hidden in the viewer.