iOS Style Notification Numbers

Here is some code that will create a picture object that looks like the Red Number Bubble in OSX Mail etc.
you can make it as large as you want, and over-ride the “red” to create other colors as required.

simplest implementation is

dim p as picture
p=Make_Badge(14) ' create a red badge with the # 14 on it

Note the returned picture will be slightly larger that the height specified to allow for the shadow… this way the body of the “bubble” is the size requested.

here is the code

FUNCTION MAKE_BADGE(number as integer,height as integer=20,color1 as color=&cff9b9b,color2 as color=&cff0000)
  ' Syntax
  '   p=MAKE_BADGE(number, [new height],[gradient color1],[gradient color2])
  Const fontname="Helvetica"
  Dim p As picture
  Dim g As Graphics
  Dim s As String
  Dim width As Integer
  Dim cx As Integer
  Dim cy As Integer
  Dim bw As Integer
  Dim fs As Single
  Dim x As Integer
  Dim y As Integer
  Dim val_r As Double
  Dim val_g As Double
  Dim val_b As Double
  Dim inc_r As Double
  Dim inc_g As Double
  Dim inc_b As Double
  Dim rs As RGBSurface
  Dim new_clr As Color
  s=Str(number)
  //
  // Figure out how big an picture we really need
  //
  p=New picture(height,height,32)
  g=p.Graphics
  g.TextFont=fontname
  fs=height
  g.textsize=fs
  //
  While g.StringHeight(s,999)>height-6
    fs=fs-1
    g.textsize=fs
  Wend
  
  width=Max(height,g.StringWidth(s)*1.5)
  
  bw=Max(1,height/20)
  
  cx=Ceil(x+(width-g.StringWidth(s))/2)
  cy=y+(height/2)+(g.TextAscent/2)
  
  p=New picture(width+bw,height+bw,32)
  g=p.Graphics
  g.ForeColor=&cffffff
  g.fillrect 0,0,g.Width,g.height
  g.TextFont=fontname
  g.TextSize=fs
  //
  // Shadow
  //
  g.ForeColor=&c000000
  g.FillRoundRect x+bw,y+bw,width,height,height,height
  //
  // Outer Ring
  //
  g.ForeColor=&cc0c0c0
  g.fillRoundRect x,y,width,height,height,height
  //
  // Inner Ring
  //
  x=x+bw
  y=y+bw
  width=width-bw
  height=height-bw
  g.ForeColor=&cfefefe
  g.fillRoundRect x,y,width,height,height,height
  //
  // Fill with a "known" Center Color
  //
  bw=bw*2
  x=x+bw
  y=y+bw
  bw=bw*2
  width=width-bw
  height=height-bw
  g.AntiAlias=False
  g.ForeColor=&cff0000
  g.FillRoundRect x,y,width,height,height,height
  g.AntiAlias=True
  //
  // Apply Gradient
  //
  height=p.height
  width=p.width
  val_r=color1.red
  val_g=color1.Green
  val_b=color1.Blue
  inc_r=(color2.Red-val_r)/height
  inc_g=(color2.Green-val_g)/height
  inc_b=(color2.Blue-val_b)/height
  rs=p.RGBSurface
  For y=0 To height-1
    new_clr=RGB(val_r,val_g,val_b)
    For x=0 To width-1
      If rs.Pixel(x,y)=&cff0000 Then 
        rs.Pixel(x,y)=new_clr
      End If
    Next x
    val_r=val_r+inc_r
    val_g=val_g+inc_g
    val_b=val_b+inc_b
  Next y
  //
  // Place Number
  //
  g.ForeColor=&cfefefe ' non transparent "white"
  g.drawstring s,cx,cy
  
  p.Transparent=1
  
  Return p
  
END FUNCTION

Cool. These are called NSDockTiles in Cocoa - with MacOSLib installed, this will also do the job:

nsd = New NSDockTile nsd.BadgeValue = "1"