XEP-0392: Consistent Color Generation

[stevenroose]

Tracking issue for XEP-0392 compliance

• make MUC nicks use the XEP-compliant color
• (bonus: make them bold)
• give users without avatar a XEP-compliant colored default avatar
• (precondition: add avatars to the MUC list)
• give MUCs without avatar a XEP-compliant colored default avatar

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[stevenroose]

I think @deleolajide (correct username?) has a plugin that partially implements the colored avatars

[deleolajide]

The plugin does many other non standard requested things for Pàdé. For reference, the avatar creation is done by the function below that uses a canvas element to create a data URI.

function createAvatar(nickname, width, height, font)
{
    if (!width) width = 32;
    if (!height) height = 32;
    if (!font) font = "16px Arial";

    var canvas = document.createElement('canvas');
    canvas.style.display = 'none';
    canvas.width = width;
    canvas.height = height;
    document.body.appendChild(canvas);
    var context = canvas.getContext('2d');
    context.fillStyle = getRandomColor(nickname);
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.font = font;
    context.fillStyle = "#fff";

    var first, last;
    var name = nickname.split(" ");
    var l = name.length - 1;

    if (name && name[0] && name.first != '')
    {
        first = name[0][0];
        last = name[l] && name[l] != '' && l > 0 ? name[l][0] : null;

        if (last) {
            var initials = first + last;
            context.fillText(initials.toUpperCase(), 3, 23);
        } else {
            var initials = first;
            context.fillText(initials.toUpperCase(), 10, 23);
        }
        var data = canvas.toDataURL();
        document.body.removeChild(canvas);
    }

    return canvas.toDataURL();
}

var nickColors = {}

function getRandomColor(nickname)
{
    if (nickColors[nickname])
    {
        return nickColors[nickname];
    }
    else {
        var letters = '0123456789ABCDEF';
        var color = '#';

        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        nickColors[nickname] = color;
        return color;
    }
}

[Nyco]

Doesn't this present ticket include this other ticket #1350 ?

[licaon-kter]

+1 on bold, see #1350

[deleolajide]

Since I had the createAvatar function and custom CSS working in Pade, I decided to see how the Slack roster UI with deterministic color fit with the Converse UI.

[licaon-kter]

@deleolajide Niiice

[deleolajide]

(precondition: add avatars to the MUC list)

Once this is implemented, it would be very useful to attach a click handler to the avatar that opens a chat window with the JID of the listed occupant.

[stevenroose]

@deleolajide I was talking about the list of MUCs on the left...

[deleolajide]

I was talking about the list of MUCs on the left.

oops!