How can I draw something on top of AVPlayer video in Cocoa? - macos

In my app I want to be able to draw rectangles on top of the playing video. I already implemented the drawing canvas which is a NSView, and I have a player implemented as well.
However, when I place my drawing canvas on top of my player view, player view is still showing up on top.
I was thinking that my drawing canvas wasn't on top of the player view, but it is. When I change the size of the window, I can see that on the area of the window that is not covered by the video I can draw. However, magically my drawing is not showing up on top of the playing video.
I really don't know where to find the problem.
Any help is highly appreciated!

i also had a problem where one NSView that i add to a superView was layer backed and the last NSView wasn't, and always the layer backed NSView would be on top, so i'd recommend you to enable the layer for any NSView that would come on top of the AVPlayer,
[yourCanvasView setWantsLayer : YES];
...
i think this would do the job,

There's a solution for iOS, as answered here, and it works in OS X too (I tested on OS X 10.10.2).
Basically, set the zPosition of the view you want on top:
topView.layer.zPosition = 1;

Related

JavaFX animations are flickering

I have a window displaying a video stream with a twitter feed as an overlay.
When a new tweet is displayed, the current tweet animates out using a rotate animation and the next tweet is rotated into view. The animations are performed using a RotateTransition.
The app also switches between different cameras to display different streams. To give an indication of when the app switches to the next camera, I have a progressbar that fills using a Timeline object.
This works well, until I resize the window. The rotate animations start to flicker, along with the progressbars as they gradually fill.
As a test, I disabled the video stream, to see what's happening. The 'artifact' doesn't occur then and I can resize as much as I want. If I play the stream and don't resize, everything works well.
The video player is based on VLCJ, but the actual pixels are drawn on a WritableImage in an Imageview.
See the following images that illustrate the problem.
At the bottom right you can see 2 different progress bars (a ProgresBar and a ProgressIndicator).
A part of the flickering result is still visible below the second image. It somehow stays visible, probably because the area doesn't get redrawn.
Any idea what makes the flickering happen? Is there anything I can do to fix or avoid this?
I tried some VM options in IntelliJ: -Dsun.java2d.d3d=true -Dprism.forceGPU=true to somehow enable hardware acceleration, but that doesn't seem to help.
Disabling the progressbar fill animation doesn't help either.
I had a similar problem with some arcs and shapes that would flicker when its attributes / sizes were changed.
The solution to my problem was to make sure that the methods used to change the shapes were called from inside the JavaFX thread.
Platform.runLater(() -> {
arc.setStartAngle(30);
arc.setLength(45);
}

How to animate horizontal bar with right cap, by UIView animation in iPhone

I got wiered but unsurprising animation from call UIView animation, I don't know if it works the same by using CALayer animation. I guess it is.
please see this picture: what I want is to animate a horizontal bar growing horizontally, what I do is:
Subclass a UIView, called UIViewBar, and in its drawRect:rect method, I draw the shape of rectangle and a right cap, it's done by
CGContextMoveToPoint A
CGcontextAddLineToPoint B
CGContextAddArcToPoint D
CGContextAddLineToPoint C
//then close the path and fill the context
Then I call this UIViewBar (initWithFrame:rect) in my UIViewController, and the shape is what I want, looks fine. BUT when I perform [UIView animation] say from original rect to rectGrew it does not perform nicely. Instead, it perform as the picture says.
Well, after thinking, it's not totally unreasonable because when the UIView horizontally stretches itself, it does not know the cap will not be changed. So is there another way to do this?
Actually, I'm very new to drawing, graphic, and animation. What I know is that (if wrong please kindly correct me):
If I want to "draw something", I should override the UIView's drawRect method, and this is done by initing the UIView, should not or better not to be called outside. Say I drew a rectangle in a UIView by CGContextFillRect.....
But what if I want to animate this rectangle? I cannot make animation based on Quartz2D, but from UIView animation or CALayer(deeper tech), so What I have to do is to make the rectangle itself as a seperate UIViewRect seperately, so I can call the [UIViewRect animation] method, AM I RIGHT ON THIS
If so, I have to make every rectangle that I want to animate to be UIView respectively. Doesn't it affect performance? Or it is just the way apple prefers to do ?
Any suggestion will be much helpful, GREAT thanks.
Wow, it's the first time that no answer posted at all! TO answer my question: it requires to consider animate custom property of CALayer. The custom property is the AB width (the width without cap width, that should work). If someone wants detailed code. Please google custom property animate in CALayer.

How to pan a zoomed out UIImageView inside an UIScrollView?

I have an UIScrollView which contains one UIImageView. Everything is working correctly, I can zoom in and out, when zoomed in I can pan around, etc.
The problem that I am unable to solve is how to pan a zoomed out image around the screen. The user needs to be able to zoom the image out until it's small, and then move that small image to any point on the screen. Sadly, it's stuck in the center of the screen (usually, it would be stuck in the top left corner but I did fix that problem).
There are a couple of things you need to do here. I suggest doing them in viewWillAppear rather than viewDidLoad because if you're using storyboards, it doesn't work quite right in viewDidLoad.
First, you need to set the content size property of your scroll view to be the size of the photo itself because you want the entire area of your photo to be scrollable.
self.scrollView.contentSize=self.photoShown.size;
photoShown is UIImage. scrollView is a UIScrollView
Second, you need to set the frame of your UIImageView that houses your image to be the size of your image:
self.imageView.frame=CGRectMake(0,0, self.photoShown.size.width, self.photoShown.size.height);
if you haven't done this, then the frame of the UIImageView is the size of the screen itself and there is simply nowhere to pan. That's why it needs to be bigger, so you can pan to the regions not currently shown on screen.

Blurry NSImageView

I have an NSImageView in a view that utilizes Core Animation. Prior to using Core Animation the image looks fine but now its blurry and low quality. If I let NSImageView have a bezel border the issue goes away but I need it to have no border. Had this happened to anyone else?
Imgae in the background with no border, same image in the front with a border.
Thanks
EDIT: I forgot to mention that the image is an icon file (ICNS) so it has various sizes. The bordered view loads the correct size and the transparent one loads the smallest and stretches it.
Although not the way I wanted to, I managed to create a fix for the issue. The issue seemed to be the way that NSImageView was drawing the image so I created a custom NSView subclass with support for the same bindings I used in my original image view. Im not sure why the blurry-ness happend in the beginning, but drawing the image by hand in an NSView seems to do the trick.
Your image may be drawing in a non-pixel-aligned way. Have you tried shifting it by a half pixel?
Apple has a good demonstration of this in the BlurryView app in their "Cocoa Tips and Tricks" sample code.
Cocoa Tips and Tricks

Padding at top of NSView in an NSScrollView

I have an NSView as the document of an NSScrollView. I would like to have a few pixels of padding at the top and bottom of the visible part of the view, regardless of where the scroller is positioned (not just at the top and bottom of the document as described here). For an example of an app that does this, look at Terminal.app. Regardless of the background color of the text, the top two visible rows of pixels are always the default background color.
I know I could simply draw everything two pixels lower and draw a rectangle at the top and bottom of the document-visible rect, but that will require changing a lot of complex code that I didn't write. Simpler ideas are welcomed!
The answer to the question you linked is actually a good solution for this problem too. In fact if your view is anything but an NSTextView, I'd say it's easier to implement.
Specifically: make your actual document view a subview of some other view, leaving room around the edges and make that view the scroll view's document view. If your content view (the one you wish to pad) changes sizes, have your "padding view" observe it for frame changes and resize to maintain the padding.
2015 Update
Content inset has been added to NSScrollView as of 10.10, making my older answer obsolete.

Resources