Focus Rings

  • Hi,

    Is there a *good* example of drawing a rectangular focus ring on a
    view correctly? The only real complete example I've found (it was on
    cocoadev.com) has several problems with it. It either is ridiculously
    inefficient in drawing, keeps redrawing the focus ring ontop of
    itself so it gets thick and ugly, or doesn't maintain the focus ring
    correctly when switching windows, however I modify it. It seems like
    one of those simple things, but it's apparently not simple.

    --
    Seth Willits
  • On Oct 22, 2006, at 4:28 PM, Seth Willits wrote:

    > Is there a *good* example of drawing a rectangular focus ring on a
    > view correctly? The only real complete example I've found (it was
    > on cocoadev.com) has several problems with it. It either is
    > ridiculously inefficient in drawing, keeps redrawing the focus ring
    > ontop of itself so it gets thick and ugly, or doesn't maintain the
    > focus ring correctly when switching windows, however I modify it.
    > It seems like one of those simple things, but it's apparently not
    > simple.

    Check out /Developer/Examples/AppKit/ClockControl/

    ___________________________________________________________
    Ricky A. Sharp        mailto:<rsharp...>
    Instant Interactive(tm)  http://www.instantinteractive.com
  • On Oct 22, 2006, at 2:44 PM, Ricky Sharp wrote:

    >> Is there a *good* example of drawing a rectangular focus ring on a
    >> view correctly? The only real complete example I've found (it was
    >> on cocoadev.com) has several problems with it. It either is
    >> ridiculously inefficient in drawing, keeps redrawing the focus
    >> ring ontop of itself so it gets thick and ugly, or doesn't
    >> maintain the focus ring correctly when switching windows, however
    >> I modify it. It seems like one of those simple things, but it's
    >> apparently not simple.
    >
    > Check out /Developer/Examples/AppKit/ClockControl/

    Hmm... Well, I see that they acheived this by using a view larger
    than the clock and just drawing the focus rect entirely within the
    view, which is kind of cheating, really. :)

    --
    Seth Willits
  • On Oct 22, 2006, at 4:01 PM, Seth Willits wrote:

    >>> Is there a *good* example of drawing a rectangular focus ring on
    >>> a view correctly? The only real complete example I've found (it
    >>> was on cocoadev.com) has several problems with it. It either is
    >>> ridiculously inefficient in drawing, keeps redrawing the focus
    >>> ring ontop of itself so it gets thick and ugly, or doesn't
    >>> maintain the focus ring correctly when switching windows, however
    >>> I modify it. It seems like one of those simple things, but it's
    >>> apparently not simple.
    >>
    >> Check out /Developer/Examples/AppKit/ClockControl/
    >
    > Hmm... Well, I see that they acheived this by using a view larger
    > than the clock and just drawing the focus rect entirely within the
    > view, which is kind of cheating, really. :)

    In other words, how do you do it without simply making the view larger?

    --
    Seth Willits
  • On 2006-10-22 14:28, Seth Willits said:

    > Is there a *good* example of drawing a rectangular focus ring on a
    > view correctly? The only real complete example I've found (it was on
    > cocoadev.com) has several problems with it. It either is ridiculously
    > inefficient in drawing, keeps redrawing the focus ring ontop of
    > itself so it gets thick and ugly, or doesn't maintain the focus ring
    > correctly when switching windows, however I modify it. It seems like
    > one of those simple things, but it's apparently not simple.

    I use this at the end of my drawRect: method:

    // Draw focus ring if this view is the first responder
    if ([self isFirstResponder]) {
      [NSGraphicsContext saveGraphicsState];
      NSSetFocusRingStyle (NSFocusRingOnly);
      [[NSBezierPath bezierPathWithRect:[self bounds]] fill];
      [NSGraphicsContext restoreGraphicsState];
    }

    --
    ____________________________________________________________
    Sean McBride, B. Eng                <sean...>
    Rogue Research                        www.rogue-research.com
    Mac Software Developer              Montréal, Québec, Canada
  • On Oct 22, 2006, at 7:11 PM, Seth Willits wrote:

    > On Oct 22, 2006, at 4:01 PM, Seth Willits wrote:
    >
    >>>> Is there a *good* example of drawing a rectangular focus ring on
    >>>> a view correctly? The only real complete example I've found (it
    >>>> was on cocoadev.com) has several problems with it. It either is
    >>>> ridiculously inefficient in drawing, keeps redrawing the focus
    >>>> ring ontop of itself so it gets thick and ugly, or doesn't
    >>>> maintain the focus ring correctly when switching windows, however
    >>>> I modify it. It seems like one of those simple things, but it's
    >>>> apparently not simple.
    >>>
    >>> Check out /Developer/Examples/AppKit/ClockControl/
    >>
    >> Hmm... Well, I see that they acheived this by using a view larger
    >> than the clock and just drawing the focus rect entirely within the
    >> view, which is kind of cheating, really. :)
    >
    > In other words, how do you do it without simply making the view
    > larger?
    >

    well, I'd say this falls into the ridiculously inefficient category..
    but

    what I've been told (by engineering) is that you have to basically
    use the NSView method setKeyboardFocusRingNeedsDisplayInRect: and pass
    the view's bounds. that'll handle the invalidation correctly.. but you
    basically can't use the usual display invalidation methods in that
    view at all.
  • that draws it.. but the invalidation is the tricky (and picky) part.

    you may also want to check to see if the view is the current key view
    as well.

    On Oct 23, 2006, at 2:31 PM, Sean McBride wrote:

    > On 2006-10-22 14:28, Seth Willits said:
    >
    >> Is there a *good* example of drawing a rectangular focus ring on a
    >> view correctly? The only real complete example I've found (it was on
    >> cocoadev.com) has several problems with it. It either is ridiculously
    >> inefficient in drawing, keeps redrawing the focus ring ontop of
    >> itself so it gets thick and ugly, or doesn't maintain the focus ring
    >> correctly when switching windows, however I modify it. It seems like
    >> one of those simple things, but it's apparently not simple.
    >
    > I use this at the end of my drawRect: method:
    >
    > // Draw focus ring if this view is the first responder
    > if ([self isFirstResponder]) {
    > [NSGraphicsContext saveGraphicsState];
    > NSSetFocusRingStyle (NSFocusRingOnly);
    > [[NSBezierPath bezierPathWithRect:[self bounds]] fill];
    > [NSGraphicsContext restoreGraphicsState];
    > }
    >
  • Here's a small project with a custom control with the focus drawing
    code I'm using.
    http://www.freaksw.com/temp/FocusedViewExample.zip

    Ignore that fact that it looks and acts like a text field (IOW, don't
    suggest using one ;)

    The problem with this code is that calling setNeedsDisplay:YES causes
    the focus ring to get darker and thicker when typing.

    --
    Seth Willits
  • yep.  you can't use that.. you have to do the focus ring needs display
    in rect method instead.

    that fixes it.

    On Oct 23, 2006, at 9:56 PM, Seth Willits wrote:

    > The problem with this code is that calling setNeedsDisplay:YES
    > causes the focus ring to get darker and thicker when typing.
  • On Oct 23, 2006, at 11:11 PM, Scott Anguish wrote:

    > yep.  you can't use that.. you have to do the focus ring needs
    > display in rect method instead.
    >
    > that fixes it.

    AHhhhhhh..... You're right. Okay cool. I have working code, then. :)

    It's ugly, and I feel there's a better way, but it works. :)

    --
    Seth Willits
  • An interesting question is how to effectively draw a focus ring
    around non-rectangular area as Cocoa does for transparent buttons
    with images. The main problem here is creating a NSBezierPath from
    arbitrary bounds the image can have.

    All the best,
    Aleksandr Skobelev

    On Oct 24, 2006, at 10:53 , Seth Willits wrote:

    > On Oct 23, 2006, at 11:11 PM, Scott Anguish wrote:
    >
    >> yep.  you can't use that.. you have to do the focus ring needs
    >> display in rect method instead.
    >>
    >> that fixes it.
    >
    >
    > AHhhhhhh..... You're right. Okay cool. I have working code, then. :)
    >
    > It's ugly, and I feel there's a better way, but it works. :)
    >
    >
    >
    > --
    > Seth Willits
    >
    >
    >
    > _______________________________________________
    > Do not post admin requests to the list. They will be ignored.
    > Cocoa-dev mailing list      (<Cocoa-dev...>)
    > Help/Unsubscribe/Update your Subscription:
    > http://lists.apple.com/mailman/options/cocoa-dev/asko%
    > 40envionsoftware.com
    >
    > This email sent to <asko...>
  • On Tuesday, October 24, 2006, at 03:52AM, Aleksandr Skobelev <asko...> wrote:

    > An interesting question is how to effectively draw a focus ring
    > around non-rectangular area as Cocoa does for transparent buttons
    > with images. The main problem here is creating a NSBezierPath from
    > arbitrary bounds the image can have.

    For my kiosk framework, focus rings always occupy space within the control (view) itself.  This allows me to more easily render custom focus rings.  I use either bezier paths (for rectangular, rounded-rect, etc.) rings or custom images representing irregular shaped paths.

    --
    Rick Sharp
    Instant Interactive(tm)
  • On Oct 24, 2006, at 15:39 , Ricky Sharp wrote:

    >
    > On Tuesday, October 24, 2006, at 03:52AM, Aleksandr Skobelev
    > <asko...> wrote:
    >
    >> An interesting question is how to effectively draw a focus ring
    >> around non-rectangular area as Cocoa does for transparent buttons
    >> with images. The main problem here is creating a NSBezierPath from
    >> arbitrary bounds the image can have.
    >
    > For my kiosk framework, focus rings always occupy space within the
    > control (view) itself.  This allows me to more easily render custom
    > focus rings.  I use either bezier paths (for rectangular, rounded-
    > rect, etc.) rings or custom images representing irregular shaped
    > paths.

    Couldn't you please elaborate on how to make an irregular shaped path
    basing on arbitrary image with transparency? I believe it could save
    my poor soul. :)

    Thanks in advance,
    Aleksandr Skobelev
  • On Tuesday, October 24, 2006, at 06:44AM, Aleksandr Skobelev <asko...> wrote:

    >
    > On Oct 24, 2006, at 15:39 , Ricky Sharp wrote:
    >
    >>
    >> On Tuesday, October 24, 2006, at 03:52AM, Aleksandr Skobelev
    >> <asko...> wrote:
    >>
    >>> An interesting question is how to effectively draw a focus ring
    >>> around non-rectangular area as Cocoa does for transparent buttons
    >>> with images. The main problem here is creating a NSBezierPath from
    >>> arbitrary bounds the image can have.
    >>
    >> For my kiosk framework, focus rings always occupy space within the
    >> control (view) itself.  This allows me to more easily render custom
    >> focus rings.  I use either bezier paths (for rectangular, rounded-
    >> rect, etc.) rings or custom images representing irregular shaped
    >> paths.
    >
    > Couldn't you please elaborate on how to make an irregular shaped path
    > basing on arbitrary image with transparency? I believe it could save
    > my poor soul. :)

    Use a tool such as Adobe Illustrator.

    --
    Rick Sharp
    Instant Interactive(tm)
  • On Oct 24, 2006, at 15:59 , Ricky Sharp wrote:

    >
    > On Tuesday, October 24, 2006, at 06:44AM, Aleksandr Skobelev
    > <asko...> wrote:
    >
    >>
    >> On Oct 24, 2006, at 15:39 , Ricky Sharp wrote:
    >>
    >>> For my kiosk framework, focus rings always occupy space within the
    >>> control (view) itself.  This allows me to more easily render custom
    >>> focus rings.  I use either bezier paths (for rectangular, rounded-
    >>> rect, etc.) rings or custom images representing irregular shaped
    >>> paths.
    >>
    >> Couldn't you please elaborate on how to make an irregular shaped path
    >> basing on arbitrary image with transparency? I believe it could save
    >> my poor soul. :)
    >
    > Use a tool such as Adobe Illustrator.

    Unfortunately I need to do it in run time. I saw that Cocoa can do
    this and thought I missed something.
  • On Oct 24, 2006, at 7:44 AM, Aleksandr Skobelev wrote:

    > Couldn't you please elaborate on how to make an irregular shaped
    > path basing on arbitrary image with transparency? I believe it
    > could save my poor soul. :)

    http://developer.apple.com/documentation/Cocoa/Reference/
    ApplicationKit/Miscellaneous/AppKit_Functions/Reference/
    reference.html#//apple_ref/c/func/NSSetFocusRingStyle

    Jim
  • On Oct 24, 2006, at 16:46 , Jim Correia wrote:

    > On Oct 24, 2006, at 7:44 AM, Aleksandr Skobelev wrote:
    >
    >> Couldn't you please elaborate on how to make an irregular shaped
    >> path basing on arbitrary image with transparency? I believe it
    >> could save my poor soul. :)
    >
    > http://developer.apple.com/documentation/Cocoa/Reference/
    > ApplicationKit/Miscellaneous/AppKit_Functions/Reference/
    > reference.html#//apple_ref/c/func/NSSetFocusRingStyle

    Thanks a lot!
    It seems that the following tricky sequence does the right thing:

      [NSGraphicsContext saveGraphicsState];
      NSSetFocusRingStyle(NSFocusRingAbove);

      NSPoint p = cellFrame.origin;
      if ([cellFrame isflipped]) p.y += NSHeight(cellFrame);

      [img compositeToPoint: p
                  operation: NSCompositeSourceOver];

      [NSGraphicsContext restoreGraphicsState];

    Thanks to all,
    Aleksandr Skobelev
previous month october 2006 next month
MTWTFSS
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Go to today