Creating controls for visually controlling the TimeLine start and end frames number in Blender

In general, gizmos looks like arrows and circles on a 3D object with which we can move, rotate and scale the mesh. However, in Blender, the gizmo object is more versatile and can be used to suit our needs in different workspaces. For example, we can create a gizmo to adjust the start and end points of the timeline.

.blend file on Patreon

Source code author: Yann Lanthony (yann-lty).

First, we need to create a gizmo object. Let’s define a class for this and inherit it from bpy.types.Gizmo.

In the class define the “setup” function. Here we define the external shape of our gizmo – a rectangle consisting of two triangles. We set the coordinates for each gizmo point as if we were creating a mesh in the 3D viewport area.

In order for the gizmo to be drawn at the given coordinates, define the “draw” function.

We also need to check if the mouse cursor is over our gizmo controller, in order to process the user interaction with it. To do this, we define the “test_select function”.

First, we define the top left and bottom right corners of our gizmo-element, and then check if the current mouse coordinates passed through the “c0” function parameter fall inside this area. If they hit, we return 0, if not, -1.

Now, create a GizmoGroup object to interact with the operators that will process our control.

Define the TIMELINE_GGT_Handlers class, inheriting it from GizmoGroup.

Let’s write the “setup” function, in which we will actually define the gizmo for our controls.

Here we have created two controls: the left one is for the beginning of the timeline, and the right one is for its end. For each of them we set the color, transparency, highlighting when hovering, the ability to be rendered modally and transform with the Blender UI.

We also assigned a control operator with the ‘scene.range_adjust’ idname to each element. This operator will be responsible for the actual operation of the controller.

To distinguish between left and right control elements when controlling them with the operator, we added the ‘START’ property to the left one, and the ‘END’ property to the right one.

Now define the “draw_prepare” function, which will be responsible for drawing our controls in the TimeLine area.

Here we get the actual position of the timeine start and end points in screen coordinates. Adjusting size to our control elements so that they correspond to the overall scale of the Blender UI, and also set their own dimensions to 10 x 35. And apply the resulting coordinates to the left and right elements.

Now define an operator that will work in modal mode and implement control functions for our gizmo-controls.

Add two input parameters for the operator: “mode” and “offset”. The “mode” parameter is necessary to understand which of the controllers is currently being processed, left or right, and the “offset” indicates the value of the current offset of the control element by the user.

Define the common operator functions: “invoke”, “execute”, “modal”, “cancel”.

In the “invoke” function, we define the starting point of the operator.

Here, we save the coordinates of the initial mouse click, set the current start and end values of the timeline, and switch the operator to the modal mode.

In the “modal” function, we define what an operator should do when certain events occur.

Here we handle three events: “cancel” – if the user cancels his action by pressing the right mouse button or ESC key, “completion” – if the user left-clicks the mouse button, and “update” – called every time the user moves the gizmo controller.

When “cancel” occurs, we return the timeline values to their original state.

When “updating” occurs, we update the current cursor position and recalculate the offset of the control element.

When “completion” occurs, we set the current offset of the control element from its original position.

The “execute” function executes after the “completion” event occurs.

Here we set the new values for the timeline. If the left control element was moving (‘START’) – for its beginning, and if the right one (‘END’) – for its end.

All we have to do is register all the classes we have defined in the “register” function and execute the code.

After running the code, two additional rectangles appear in the TimeLine area. These are our control gizmo elements. If we hold down any of them and move the mouse, the start or end point of the timeline will visually change.