New Filmulator feature in progress: Cropping

I was very excited that I reached a milestone in my implementation of cropping for Filmulator, so I recorded a short video even though the feature isn’t done. Only one corner has the full behavior right now, and it can’t even actually crop the image (just draw the guides), and the appearance will change for the final version, but I still wanted to post it.

The goal of Filmulator is to have a minimum number of controls without limiting what you can do. So, to minimize the amount of checkboxes and spinboxes and drop-down boxes needed for cropping, I designed it to let you control everything with just the mouse and two modifier keys.

You can drag around the crop itself by clicking and dragging within the boundaries, you can resize the edges by dragging on each edge, and you can freely resize two edges at once by dragging on a corner.

By holding the Ctrl key while dragging a corner, the aspect ratio will be fixed to what it was when you pressed Ctrl.

But here’s the important part:

By holding the Shift key while dragging a corner, the aspect ratio will snap to one of a variety of common aspect ratios; press Ctrl to hold that one while you resize so you don’t have to be as careful with mouse positioning.

It only has some aspect ratios built-in: 1:1, 5:4, 4:3, 3:2, 16:9, 2:1, 2.35:1, and 3:1. If you have any that you’re burning to have included, let me know, because I’m not really planning on having there be too many built-in.

Let me know what you think!

5 Likes

1.61:1 golden ratio

1 Like

It’s kinda close to 3:2 but I’ll leave it in. After all, you can just lock it to the ratio using ctrl once you select the one you want.

Nice feature to have! :thinking: Does the crop happen inside or outside of the outline? Maybe shade the areas outside of the crop frame.

1 Like

The cropping is inside the frame.

The appearance of the UI is preliminary. Once I figure out exactly what the behaviors are then I’ll make it look nice. I’m leaning towards having the areas outside the image shaded, and the blue and purple handles will only show up when the mouse is over them.

2 Likes

I just added some new features:

In keeping with ctrl holding aspect ratio constant, now dragging the top/bottom and left/right handles while holding ctrl allows for unidirectional adjustment of the crop location, limiting motion to vertically and horizontally, respectively.

For both these dragging and for the omnidirectional drag, I also added snapping that turns on via shift: if the crop is within 5% of the original image width or height of the center, then it’ll snap to the center. For omnidirectional snapping, each direction snaps to center independently.

I think this is it for actual user interaction stuff to program… I may also need to figure out how to split up the Crop button itself for accepting/rejecting the crop, but that’s for another day.

And then I have to do the backend.

1 Like

I got the crop masks working.

Except it actually looks like these, depending on the background color you have set:



The purple and blue grab handles will be hidden unless hovered, but that’s not implemented yet.

Of course, all this will disappear once you actually accept the crop, and you’ll only get to see the cropped area.

2 Likes

I fixed a bug in the edge resize/linear drag; when I would release ctrl during a drag or resize, it would freak out a little and jump back to its original position. Now that’s fixed.

I also changed the behavior a little: now, unless you hold Ctrl when you click in in the crop area, it will simply let you pan around like normal.

Unfortunately, that means I need to get double-click zooming working within the crop area, since users will expect it to work as well if they are able to drag. This is actually fairly tough, but I’ll make sure to get it working before moving on.

Now, double-click zooming works in the crop area.

Next up is another period of thinking, and then I’ll get started on the backend.

The UI might still change more, depending on how things work in the guts of the program.

I’ve implemented cropping in the pipeline and connected it with the UI.

No database yet, so the crops aren’t saved anywhere.

But more importantly, there are off-by-one errors that I have to hammer out, and if the image is resized to be too small (at least for extremely skinny aspect ratios like 4000x1 pixels) the thumbnail writing crashes and the image in question cannot be reopened. I have to do something about these.

And now I’ve fixed both those bugs.

The off-by-one error was caused by an improper conversion of a QML ternary expression to C++, specifically in the code that handles off-by-one. No wonder it was, well, off by one.

And when made ultra skinny, I have made the code that handles resizing to not let the width or height drop to zero.

I made a new video, this time with audio and explanations of all the functionality.

9 Likes

Very impressive, one of the best thought out and helpful crop implementations I’ve seen :crazy_face:
Congrats @CarVac ! I’m really jealous of filmulator’s users right now :nerd_face: :space_invader::stuck_out_tongue:

3 Likes

Audio makes the demo much clearer. Look forward to more demos and tutorials with your voice :wink:.

I think I just finished implementing the database changes needed for cropping! Woo!

I’ll test it on my end for a week or so and then release it.

2 Likes