Create a temporary HUD popup notification in Cocoa App

Question

Im trying to have a window pop up to notify the user of an action, kind of like how the Flutter app shows a play/pause notification when a gesture is received.

This comes up for about two seconds and vanishes. The app itself is run from the menu bar so this pop up doesn't take control from whatever application is currently in focus but rather just shows on top of it and cannot be interacted with. I basically want to recreate exactly this. Say in the body of - (void)popup:(id)sender {}

This is essentially very similar to a toast on android.

Edit: I looked closer at the flutter app and all it does is display two images (.png) one for the huge pause and another to indicate what application its in (in this case iTunes). Question now is how do I display an image like this.

Answer 1

You should take a look at this: https://github.com/Foxnolds/MBProgressHUD-OSX

or Growl: http://growl.info/documentation/developer/

Answer 2

To replicate this I added a 'HUD Window" from the interface builder which is just an NSPanel. I then added a image view to the panel and set the panel's colour to clear. I was then able to position the panel where I wanted and overlay the appropriate image.

Answer 3

I'm using this code:

static void showHud(NSString* text, int width, int height, CGFloat duration, int fontSize) {

    NSWindow* window = [NSWindow new];
    [window setFrame:NSMakeRect(0,0,width,height) display:NO];
    [window center];

    window.titleVisibility = NSWindowTitleHidden;
    window.styleMask = NSWindowStyleMaskBorderless;
    window.alphaValue = 0.9;
    window.movableByWindowBackground = YES;

    [window setLevel: NSStatusWindowLevel];
    [window setBackgroundColor: [NSColor clearColor]];
    [window setOpaque:NO];
    //[window setHasShadow:NO];

    [window makeKeyAndOrderFront:NSApp];

    NSVisualEffectView *view = [[NSVisualEffectView new] initWithFrame:window.contentView.bounds];;

    view.translatesAutoresizingMaskIntoConstraints = NO;

    [view setBlendingMode:NSVisualEffectBlendingModeBehindWindow];
    [view setMaterial:NSVisualEffectMaterialDark];
    [view setState:NSVisualEffectStateActive];

    //[view setAppearance:[NSAppearance appearanceNamed:NSAppearanceNameVibrantDark]];

    //[view setWantsLayer:NO];
    [view setWantsLayer:YES];
    view.layer.cornerRadius = 16.;
    //view.layer.shouldRasterize = YES;
    //view.layer.rasterizationScale = 0.45;
    view.layer.shadowOpacity = 0.1; //0.01;
    view.layer.edgeAntialiasingMask = kCALayerTopEdge | kCALayerBottomEdge | kCALayerRightEdge | kCALayerLeftEdge;

    [window.contentView addSubview:view];
    //window.contentView = view;

    NSTextField *label = [[NSTextField alloc] initWithFrame:view.bounds];

    [label setBezeled:NO];
    [label setDrawsBackground:NO];
    [label setEditable:NO];
    [label setSelectable:NO];
    
    label.stringValue = text;
    label.alignment = NSTextAlignmentCenter;
    label.textColor = [NSColor whiteColor];
    label.backgroundColor = [NSColor clearColor];
    label.font = [NSFont fontWithName:@"Arial-BoldMT" size:fontSize];

    //NSRect titleRect = [label titleRectForBounds:view.bounds];
    NSSize cellSize = [label.cell cellSizeForBounds:view.bounds];
    NSSize strSize = cellSize; // [label.attributedStringValue size];
    NSRect frame = view.frame;
    frame.origin.y = frame.size.height / 2 -  strSize.height / 2;
    frame.size.height = strSize.height;
    label.frame = frame;
 
    [view addSubview:label];

    [NSAnimationContext runAnimationGroup:^(NSAnimationContext *context) {
        context.duration = duration;
        window.animator.alphaValue = 0.;
    } completionHandler:^{
        [window close];
    }];

}