How to set Invert color in presenter?

Posted by: arulventhan.palanimuthu on 4 October 2018, 11:13 pm EST

  • Posted 4 October 2018, 11:13 pm EST

    Hi,
    How to set invert color in presenter?
    I tried, My code as follows,

    var fontSize = '12px';
    var _backColor = '{{=it.backColor}}';
    var _color = 'invertColor({{=it.backColor}}, true)';
    //var _color = invertColor('{{=it.backColor}}', true); --- Tried to call this function like this. Not working
    var _style = ' style="padding: 4px;min-height:26px;max-height:30px;width: 100%;left: 0;margin: 0 !important;float: right;font-size:' + fontSize + 'px;color:'+_color+';background-color:' + _backColor + '"';

    var invertColor= function (hex, bw) {
    var data = null;

    if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
    }
    var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);
    if (bw) {
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
    ? '#000000'
    : '#FFFFFF';
    }
    // invert color components
    r = (255 - r).toString(16);
    g = (255 - g).toString(16);
    b = (255 - b).toString(16);
    if (r.length == 1) {
    r = "0" + r;
    }
    if (g.length == 1) {
    g = "0" + g;
    }
    if (b.length == 1) {
    b = "0" + b;
    }
    // pad each with zeros and return
    data = "#" + r + g + b;
    return data;
    }


    Thanks,
    Arulventhan NP
  • Replied 4 October 2018, 11:15 pm EST

    arulventhan.palanimuthu said:
    Hi,
    How to set invert color in presenter?
    I tried, My code as follows,

    var fontSize = '12px';
    var _backColor = '{{=it.backColor}}';
    var _color = 'invertColor({{=it.backColor}}, true)';
    //var _color = invertColor('{{=it.backColor}}', true); --- Tried to call this function like this. Not working
    var _style = ' style="padding: 4px;min-height:26px;max-height:30px;width: 100%;left: 0;margin: 0 !important;float: right;font-size:' + fontSize + 'px;color:'+_color+';background-color:' + _backColor + '"';

    var invertColor= function (hex, bw) {
    var data = null;

    if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
    }
    // convert 3-digit hex to 6-digits.
    if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
    }
    var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);
    if (bw) {
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
    ? '#000000'
    : '#FFFFFF';
    }
    // invert color components
    r = (255 - r).toString(16);
    g = (255 - g).toString(16);
    b = (255 - b).toString(16);
    if (r.length == 1) {
    r = "0" + r;
    }
    if (g.length == 1) {
    g = "0" + g;
    }
    if (b.length == 1) {
    b = "0" + b;
    }
    // pad each with zeros and return
    data = "#" + r + g + b;
    return data;
    }

    // Presenter
    presenter: '<span ' + _style + ' >{{=it.' + _ColumnName + '}} </span>',


    Thanks,
    Arulventhan NP
  • Marked as Answer

    Replied 8 October 2018, 1:05 am EST

    Hello,

    Are you getting the inverted color value in '_color' variable?
    I would suggest you to set the color for the column using 'cssClass' property.


    Thanks,
    Deepak Sharma
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels