Trying to buil a simple app where i can add notes for poker players

Ask for Help
1

hi
i m trying to create a simple app that adds note for poker players . never used glide before and many things seam complicated . i need to add a colour around the profile picture or near it but i don t manage to do it
app looks curently like this ( created with ai ) and need to do something like i pointed with red

image
image427×873 102 KB

2

Do you have access to CSS? Would be pretty straightforward with CSS on a paid plan.

Your alternative is using Cloudinary to dynamically add the colour border.

3

Another idea is to use a bit of javascript in a javascript column that takes in the image, adds the border, and returns the modified image as a datauri.

4

Thanks dor replyes guys . I m very beginner in this and am just building the app for my self . This stuff you mention is pretty advanced for me

5

Paste the following in a javascript column and set the p1 parameter to your image column. This will crop images to a 1:1 ratio and add the border. Then change your collection image to point to the javascript column. It probably doesn’t cover every situation and may not crop your images properly, but this should more or less be what you are asking for.

async function convertToRoundedBorderedSquare(imageUrl) {
  return new Promise(function(resolve, reject) {
    try {
      var img = new Image();
      img.crossOrigin = "Anonymous"; // Avoid CORS issues if needed

      img.onload = function() {
        // Determine square size
        var size = Math.min(img.width, img.height);

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = size;
        canvas.height = size;

        var radius = size * 0.30; // Corner radius is proportional to size

        // Calculate offset to center the crop
        var offsetX = (img.width - size) / 2;
        var offsetY = (img.height - size) / 2;

        // Create rounded clipping path
        ctx.beginPath();
        ctx.moveTo(radius, 0);
        ctx.lineTo(size - radius, 0);
        ctx.quadraticCurveTo(size, 0, size, radius);
        ctx.lineTo(size, size - radius);
        ctx.quadraticCurveTo(size, size, size - radius, size);
        ctx.lineTo(radius, size);
        ctx.quadraticCurveTo(0, size, 0, size - radius);
        ctx.lineTo(0, radius);
        ctx.quadraticCurveTo(0, 0, radius, 0);
        ctx.closePath();
        ctx.clip();

        // Draw the image centered and cropped
        ctx.drawImage(img, offsetX, offsetY, size, size, 0, 0, size, size);

        // Draw the rounded border
        ctx.lineWidth = size * 0.15; // Border width proportional to size
        ctx.strokeStyle = 'red';
        ctx.beginPath();
        ctx.moveTo(radius, 0);
        ctx.lineTo(size - radius, 0);
        ctx.quadraticCurveTo(size, 0, size, radius);
        ctx.lineTo(size, size - radius);
        ctx.quadraticCurveTo(size, size, size - radius, size);
        ctx.lineTo(radius, size);
        ctx.quadraticCurveTo(0, size, 0, size - radius);
        ctx.lineTo(0, radius);
        ctx.quadraticCurveTo(0, 0, radius, 0);
        ctx.closePath();
        ctx.stroke();

        // Convert to Data URI
        var borderedDataUri = canvas.toDataURL();
        resolve(borderedDataUri);
      };

      img.onerror = function() {
        reject(new Error('Failed to load image'));
      };

      img.src = imageUrl;
    } catch (error) {
      reject(error);
    }
  });
}

return await convertToRoundedBorderedSquare(p1);

image
image318×508 61.6 KB

1 Like