I’ve tried adding a container with 100% Radius
If the User has a profile pic in the DB, display it.
If User doesn’t have a profile pic in the DB, show text with users initials and set the background colour.
For some reason my images won’t populate into the table.
With regards to the background colours, I was going to assign a unique colour to each user when their profile is created but I came across this which would be good to integrate if possible.
Thanks @Joyce, that’s a very nice solution and I also learned new formulas today
Unfortunately, for some reason my images aren’t coming through. I’m not sure what I’ve done wrong.
Is there anything that might prevent them from rendering?
Also, is there a way to change the Avatar’s background color dynamically so a list of users can be distinguished from each other?
I tried using some Javascript but I don’t know how to get it to work.
I’ve tested it in my browser’s console and it is returning a hex value.
It’s probably not the most practical way to do this as it doesn’t consider legibility but here’s the original code. It’s supposed to change based on the user email context.item.data?.[‘email’].
function generateHexColor(itemName) {
// Generate a hash code based on the input item's name
let hashCode = 0;
for (let i = 0; i < itemName.length; i++) {
hashCode = itemName.charCodeAt(i) + ((hashCode << 5) - hashCode);
}
// Convert the hash code to a 6-digit hex color
let hexColor = (hashCode & 0x00ffffff).toString(16);
hexColor = "00000".substring(0, 6 - hexColor.length) + hexColor; // Pad with zeros if necessary
return "#" + hexColor; // Return the hex color with a '#' prefix
}
// Example usage
const itemName = "context.item.data?.['email']";
const color = generateHexColor(itemName);
console.log(color);
you need to add return color at the end.
Also in your code itemName is a static string. If you want to make it dynamic select the variable/item from the panel under the code, it will add automatically the right code to retrieve it.
If anyone else is interesed, I used the following JS to change the background color which takes legibility into account.
No doubt there’s a more elegant approach but this is what chatGPT gave me
function generateHexColor(itemName) {
// Generate a hash code based on the input item's name
let hashCode = 0;
for (let i = 0; i < itemName.length; i++) {
hashCode = itemName.charCodeAt(i) + ((hashCode << 5) - hashCode);
}
// Convert the hash code to a 6-digit hex color
let hexColor = (hashCode & 0x00ffffff).toString(16);
hexColor = "00000".substring(0, 6 - hexColor.length) + hexColor; // Pad with zeros if necessary
// Calculate the brightness of the generated color
const red = parseInt(hexColor.substr(0, 2), 16);
const green = parseInt(hexColor.substr(2, 2), 16);
const blue = parseInt(hexColor.substr(4, 2), 16);
const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
// Adjust the color if it doesn't have sufficient contrast with black
if (brightness < 80) {
// Make the color lighter by reducing each RGB component by 50%
const newRed = Math.floor((red + 255) / 2);
const newGreen = Math.floor((green + 255) / 2);
const newBlue = Math.floor((blue + 255) / 2);
hexColor = (newRed << 16 | newGreen << 8 | newBlue).toString(16);
hexColor = "000000".substring(0, 6 - hexColor.length) + hexColor; // Pad with zeros if necessary
}
return "#" + hexColor; // Return the hex color with a '#' prefix
}
// Example usage
const itemName = context.item.data?.['email']; // Replace with your input item's name
const color = generateHexColor(itemName);
console.log(color);
return color;
Mmmm if you use the file upload to WeWeb’s CDN, I don’t think so BUT you could show an error message when the file size is bigger than you want it to be so the user knows to upload a smaller file.
To compress it automatically, I think you’d need to upload it directly to your database or CDN and have the compression happen there. We’re currently working on new file storage integration so this can be done more intuitively in the future.
