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

**URL:** <https://community.glideapps.com/t/trying-to-buil-a-simple-app-where-i-can-add-notes-for-poker-players/83737>\
**Category:** Ask for Help\
**Created:** [August 9, 2025, 4:22am UTC](https://community.glideapps.com/t/trying-to-buil-a-simple-app-where-i-can-add-notes-for-poker-players/83737 "2025-08-09T04:22:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nema\_vlad](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nema_vlad/32/88115_2.png) [@nema\_vlad](https://community.glideapps.com/u/nema_vlad)\
**Post date:** [August 9, 2025, 4:22am UTC](https://community.glideapps.com/t/trying-to-buil-a-simple-app-where-i-can-add-notes-for-poker-players/83737/1 "2025-08-09T04:22:52Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6c9f5561ff48b1eed18ebd03cde1b3cb9065aab9.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [August 9, 2025, 4:29am UTC](https://community.glideapps.com/t/trying-to-buil-a-simple-app-where-i-can-add-notes-for-poker-players/83737/2 "2025-08-09T04:29:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [August 9, 2025, 1:49pm UTC](https://community.glideapps.com/t/trying-to-buil-a-simple-app-where-i-can-add-notes-for-poker-players/83737/3 "2025-08-09T13:49:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nema\_vlad](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nema_vlad/32/88115_2.png) [@nema\_vlad](https://community.glideapps.com/u/nema_vlad)\
**Post date:** [August 9, 2025, 7:39pm UTC](https://community.glideapps.com/t/trying-to-buil-a-simple-app-where-i-can-add-notes-for-poker-players/83737/4 "2025-08-09T19:39:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [August 9, 2025, 8:32pm UTC](https://community.glideapps.com/t/trying-to-buil-a-simple-app-where-i-can-add-notes-for-poker-players/83737/5 "2025-08-09T20:32:18Z")

</div>

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.

```auto
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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/8/681fa710471558f70c6200caea4fd479ff4d6329.png)