Styling and exporting

10.4. Styling and exporting#

Every element of the Player can be stylized. Let’s load again the tennis serve data, then we will use the properties of the Player to style its elements.

Hide code cell content 
import kineticstoolkit.lab as ktk

# Download and read markers from a sample C3D file
filename = ktk.doc.download("kinematics_tennis_serve_2players.c3d")
markers = ktk.read_c3d(filename)["Points"]
interconnections = dict()  # Will contain all segment definitions
interconnections["LLowerLimb"] = {
    "Color": (0, 0.5, 1),  # In RGB format (here, greenish blue)
    "Links": [  # List of lines that span lists of markers
        ["*LTOE", "*LHEE", "*LANK", "*LTOE"],
        ["*LANK", "*LKNE", "*LASI"],
        ["*LKNE", "*LPSI"],
    ],
}
interconnections["RLowerLimb"] = {
    "Color": (0, 0.5, 1),
    "Links": [
        ["*RTOE", "*RHEE", "*RANK", "*RTOE"],
        ["*RANK", "*RKNE", "*RASI"],
        ["*RKNE", "*RPSI"],
    ],
}
interconnections["LUpperLimb"] = {
    "Color": (0, 0.5, 1),
    "Links": [
        ["*LSHO", "*LELB", "*LWRA", "*LFIN"],
        ["*LELB", "*LWRB", "*LFIN"],
        ["*LWRA", "*LWRB"],
    ],
}
interconnections["RUpperLimb"] = {
    "Color": (1, 0.5, 0),
    "Links": [
        ["*RSHO", "*RELB", "*RWRA", "*RFIN"],
        ["*RELB", "*RWRB", "*RFIN"],
        ["*RWRA", "*RWRB"],
    ],
}
interconnections["Head"] = {
    "Color": (1, 0.5, 1),
    "Links": [
        ["*C7", "*LFHD", "*RFHD", "*C7"],
        ["*C7", "*LBHD", "*RBHD", "*C7"],
        ["*LBHD", "*LFHD"],
        ["*RBHD", "*RFHD"],
    ],
}
interconnections["TrunkPelvis"] = {
    "Color": (0.5, 1, 0.5),
    "Links": [
        ["*LASI", "*STRN", "*RASI"],
        ["*STRN", "*CLAV"],
        ["*LPSI", "*T10", "*RPSI"],
        ["*T10", "*C7"],
        ["*LASI", "*LSHO", "*LPSI"],
        ["*RASI", "*RSHO", "*RPSI"],
        ["*LPSI", "*LASI", "*RASI", "*RPSI", "*LPSI"],
        ["*LSHO", "*CLAV", "*RSHO", "*C7", "*LSHO"],
    ],
}
p = ktk.Player(
    markers,
    interconnections=interconnections,
    up="z",
    anterior="-y",
    target=(0, 0.5, 1),
    azimuth=0.1,
    zoom=1.5, 
)
_images/1ff245f8701fb0d7798760fa7a88a1e79eddf01dec1413fe8e82fab1a73e5fcc.png

10.4.1. Styling the background#

To set a white background:

p.background_color = 'w'

# Equivalent to p.background_color = (1.0, 1.0, 1.0)
_images/bd3d2167ca608d2ef0fbe5ca2edae6b1574dd62c3fe56acfc63b9dc96624cd9c.png

10.4.2. Styling the grid#

10.4.2.1. Grid size and subdivisions#

To have a smaller grid (4x4 meters) with a smaller subdivision size (50x50 cm):

p.grid_size = 4
p.grid_subdivision_size = 0.5
_images/d6b9361feb73957cb077e5d4251800a1ea9007f4d1c353b1e2afb3d7ea36d2fe.png

10.4.2.2. Grid origin#

The grid origin can be put anywhere in the scene, using the grid_origin property. For example:

p.grid_origin = (0.0, 0.5, 0.0)
_images/a3e93614152a9d056e12e780b58aef2d7a2259b8fc4da4d2d1808bdaa747b7fa.png

10.4.2.3. Grid width#

To get a thinner grid:

p.grid_width = 0.5
_images/1ed09d50e75ca4f383e0900476ed5b91b6737975ee3ef3d6732b63f51eaa6a84.png

10.4.2.4. Grid color#

To get a light grey grid:

p.grid_color = (0.75, 0.75, 0.75)
_images/2899fd9092da210160091928091377b07cc998bda56d9b89b5399ad0d233baac.png

10.4.3. Styling points#

10.4.3.1. Point size#

To get bigger points:

p.point_size = 10
_images/67a9b7d18fcfbad3a5fa38eea98cc3c76144698e777ed925344d546bcce0f349.png

10.4.3.2. Point color#

The default point color can be set by the default_point_color property:

p.default_point_color = 'r'

# Equivalent to: p.default_point_color = (1.0, 0.0, 0.0)
_images/56efc518b10b3338539555cc88af6d89bf3095ce3ff75896f8bd7f6f46444e61.png

To assign individual colors, we add a Color info to the TimeSeries’ data. For instance, to show Viktor’s markers in dark green:

markers = p.get_contents()

for key in markers.data:
    if key.startswith("Viktor:"):
        markers = markers.add_data_info(key, "Color", (0.0, 0.75, 0.0))

p.set_contents(markers)
_images/15a3963801cd6681562ef1d8635b6adb0a7a20451d4d89685c44d087d0b3e131.png

10.4.4. Styling interconnections#

10.4.4.1. Interconnection width#

To get ticker interconnections:

p.interconnection_width = 4.0
_images/5dd0c1b0fb17c3187f18fb6020103f96a2469c0b7a692b0eeef17add867655ca.png

10.4.4.2. Interconnection color#

Color is part of the interconnection dictionary. Therefore, we change interconnection color using this dictionary. For instance, to set all interconnections to light grey:

interconnections = p.get_interconnections()

for segment in interconnections:
    interconnections[segment]["Color"] = (0.75, 0.75, 0.75)

p.set_interconnections(interconnections)
_images/0963a1b7f1439e63c575dc8225fbcbd88e660513a4aa468911a1b921cf771eed.png

10.4.5. Styling frames#

10.4.5.1. Frame size#

To get half-meter long frames:

p.frame_size = 0.5
_images/f2cd2da6b6083d9acdc2d70cb153e74a328a2fde73dbed9a9273189b398788e4.png

10.4.5.2. Frame width#

To get thinner frames:

p.frame_width = 1.0
_images/08b5282bd0b658332c5744559e4b568d5af3e1e40b375d35bd5a76ecb0346613.png

10.4.6. Exporting#

10.4.6.1. Exporting to an image#

The Player’s current view can be exported to any file format supported by Matplotlib such as PNG, JPEG, SVG or PDF, using ktk.Player.to_image:

p.to_image("exported_image.png")

10.4.6.2. Exporting to a video#

The whole animation in the current view point can be exported to an MP4 file using ktk.Player.to_video:

p.to_video("exported_video.mp4")

Note

To create videos, the package ffmpeg must be installed on your computer. If you installed Kinetics Toolkit using conda, then it is already installed. If you used pip, you must install it manually.

Contents