Why is my Pressed Button Icon Code So Blurry?

General
#1

To make pictures retina compatible, I used to add them to my project with twice the width and height and then scale them down in the paint event. I’m now converting to use Image Sets and the 2x naming convention for retina.

 Sub Paint(g As Graphics, areas() As REALbasic.Rect) Handles Paint
      dim pic as Picture
  
  if MouseIsOver and MouseIsDown then
    pic = pressedIcon
    
  elseif MouseIsOver then
    pic = rolloverIcon
    
  else
    pic = enabledIcon
    
  end if
 

  // g.DrawPicture(pic, 0, 0, pic.Width/2, pic.Height/2, 0, 0, pic.Width, pic.Height) // This is how I used to do it.
  g.DrawPicture pic, 0, 0 // This works great for the enabledIcon, but the pressedIcon and rolloverIcon look blurry.

End Sub


 Public Function makePressedIcon(enabledIcon as picture) as picture
      dim x,y as integer
      dim thePic as picture
      dim c,white as color
      dim hue,sat,value as double
      
      white = rgb(255,255,255)
      
      thePic = new Picture(enabledIcon.width,enabledIcon.height,32)
      
      thePic.graphics.drawpicture enabledIcon,0,0
      
      for x = 0 to thePic.width -1
        for y = 0 to thePic.height -1
          c = thepic.graphics.pixel(x,y)
          if c <> white then
            hue = c.hue
            sat = c.saturation
            value = c.value
            c = hsv(hue,sat,value-.2)
            thepic.graphics.pixel(x,y) = c
          end if
        next
      next
      
      thePic.transparent = 1
      
      return thePic
    End Function
#2

You should consider using the Window.BitmapForCaching method to get a Picture that properly matches the display.

Also see: https://documentation.xojo.com/topics/graphics/hidpi_support.html

1 Like
#3