Need help enabling FGSourceList Badge for Retina with Retina Kit (or without)

Add-Ons
1

I want to enable Retina for one of my apps that uses FGSourceList with Retina Kit (or without)
I’ve got the icons in the list to be Retina enabled just fine but the Badge is giving me headaches.
As you can see on this image it looks terrible.

To begin with, I’m no good at drawing graphics so please bare with me here :slight_smile:

In FGSourceList DrawBadge method I would think the following code is the code that needs to be altered somehow?
Don’t know where to start…

  // ################################### Bubble picture ##################################### \\\\
  // Work out how long and wide the bubble needs to be to fit the number in and define the bubble picture to be 10 pixels wider
  // and 6 pixels taller
  g.TextSize = 11
  g.Bold = true
  bubble = new Picture( item.BadgeWidth, g.TextHeight + 1, 32 )
  
  if selected = false then
    
    bubble.Graphics.ForeColor = item.BadgeColor
    bubble.Graphics.FillRect( 0, 0, bubble.Graphics.Width, bubble.Graphics.Height)
    
  end if
  
  // ##################################### Bubble mask ####################################### \\\\
  // Fill the mask white
  bubble.Mask.Graphics.ForeColor = &cFFFFFF
  bubble.Mask.Graphics.FillRect(0, 0, bubble.Width, bubble.Height)
  // Now draw the black rounded rectangle (that will allow the gradient to show through behind)
  bubble.Mask.Graphics.ForeColor = &c000000
  bubble.Mask.Graphics.FillRoundRect( 0, 0, bubble.Width, bubble.Height, 13, 13 )
  
  // ##################################### Draw the number ##################################### \\\\
  bubble.Graphics.Bold = true
  bubble.Graphics.TextSize = 11
  bubble.Graphics.TextFont = "Arial Bold"

………Irrelevant part skipped………

  // Need to work out the width of the string
  stringWidth = bubble.Graphics.StringWidth( str(numberToDraw) )
  
  // Draw the number (we need to change the offset slightly when using Cocoa) - NEW 1.0.6
  #if TargetCocoa
    bubble.Graphics.DrawString( str(numberToDraw), (bubble.Width / 2) -  ( stringWidth / 2 ), (bubble.Height/2) + (bubble.Graphics.TextSize/2) - 1 )
  #else
    bubble.Graphics.DrawString( str(numberToDraw), (bubble.Width / 2) -  ( stringWidth / 2 ), bubble.Graphics.TextSize )
  #endif
  
  // ############################ Draw the bubble onto the passed Graphics object ##################### \\\\
  g.DrawPicture( bubble, g.Width - bubble.Width - 5, (g.Height / 2) - (bubble.Height / 2) )

Any help appreciated! :slight_smile:

2

We won’t need to bare you - I hope. Let me check my code when I’m at home. I don’t remember if I retinized this code or now. And the picture isn’t visible.

3

Thick fingers: “or not” and not “or now”.

4

New image, might work :slight_smile:

5

The problem is that the picture is only 72 dpi, not 144 dpi. The simplest solution is not to use a picture and draw straight into the graphics class, however it will be hard to make the number (2) hollow.

6

That was it Sam, thanks.
I ended up drawing my own totally ignoring the DrawBadge method :stuck_out_tongue_winking_eye:

Retina result:

7

@Albin : Could you share the code modification ?

8

Sure :slight_smile:
Far from perfect as I said above, I never do much graphics…can probably be improved…a lot. But it works for me in this project.
Out commented everything in the DrawBadge method and used this in CellTextPaint.

EDIT: Fixed it so that selecting multiple rows sets the colors right.

  // Rita en badge med antalet projekt i mappen.
  Dim item as FGSourceListItem = me.ItemAtRowNumber(row)
  Dim stringWidth as Integer
  Dim numberToDraw as Integer
  
  if item.Expanded then
    numberToDraw = item.BadgeCount
  else
    numberToDraw = item.TotalBadgeCount
  end if
  
  If numberToDraw > 0 Then
    
    g.TextSize = 11
    g.Bold = True
    g.TextFont = "Arial Bold"
    stringWidth = g.StringWidth(str(numberToDraw))
    
    // Rita bubblan.
    If me.Selected(row) Then
      g.ForeColor = &cffffff
    else
      g.ForeColor = &c8296B6
    End If
    g.FillRoundRect((g.Width - stringWidth/2) - (stringWidth/2) - 24, 3, (item.BadgeWidth/2) + (stringWidth/2)+10, 14, 13, 13)
    
    // Rita siffran.
    If me.Selected(row) Then
      If mainWindow.appActive = False Then
        g.ForeColor = &cA8A8A8
      else
        g.ForeColor = &c4580C8
      end if
    else
      g.ForeColor=&cffffff
    end if
    g.DrawString( str(numberToDraw), (g.Width - stringWidth/2) - (stringWidth/2) - 15, (g.Height/2) + (g.TextSize/2) - 1)
    
  End If