Skip to content

Canvas API

skelarm.canvas

Provides a PyQt6 widget for visualizing the robot arm.

SkelarmCanvas

Bases: QWidget

A widget to draw the robot arm skeleton.

Source code in src/skelarm/canvas.py 
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
class SkelarmCanvas(QWidget):
    """A widget to draw the robot arm skeleton."""

    def __init__(self, skeleton: Skeleton, parent: QWidget | None = None) -> None:
        """Initialize the canvas."""
        super().__init__(parent)
        self.skeleton = skeleton
        self.scale_factor = 100.0  # Pixels per meter
        # Set background color to white
        self.setAutoFillBackground(True)
        p = self.palette()
        p.setColor(self.backgroundRole(), QColor("white"))
        self.setPalette(p)

    def paintEvent(self, a0) -> None:  # noqa: ANN001, N802, ARG002
        """Paint the robot arm."""
        painter = QPainter(self)
        painter.setRenderHint(QPainter.RenderHint.Antialiasing)

        # Center of the widget
        center_x = self.width() / 2
        center_y = self.height() / 2

        # Draw Base
        painter.setBrush(QBrush(Qt.GlobalColor.black))
        base_screen = self.world_to_screen(0, 0, center_x, center_y)
        painter.drawEllipse(base_screen, 10, 10)

        # Draw Links
        pen_link = QPen(QColor(0, 100, 200))  # Blue-ish
        pen_link.setWidth(6)
        pen_link.setCapStyle(Qt.PenCapStyle.RoundCap)
        painter.setPen(pen_link)

        # Draw Joints
        brush_joint = QBrush(QColor(200, 0, 0))  # Red

        # Iterate through links
        # Note: We assume compute_forward_kinematics has been called externally
        # or we could call it here, but typically the state is updated elsewhere.

        for link in self.skeleton.links:
            p1 = self.world_to_screen(link.x, link.y, center_x, center_y)
            p2 = self.world_to_screen(link.xe, link.ye, center_x, center_y)

            # Draw link segment
            painter.drawLine(p1, p2)

            # Draw joint at the end of the link (tip or next joint)
            painter.setPen(Qt.PenStyle.NoPen)
            painter.setBrush(brush_joint)
            painter.drawEllipse(p2, 6, 6)

            # Reset pen for next link
            painter.setPen(pen_link)

    def world_to_screen(self, wx: float, wy: float, cx: float, cy: float) -> QPointF:
        """Convert world coordinates (meters) to screen coordinates (pixels)."""
        sx = cx + wx * self.scale_factor
        # Invert Y because screen Y is down
        sy = cy - wy * self.scale_factor
        return QPointF(sx, sy)

    def update_skeleton(self) -> None:
        """Trigger a repaint."""
        self.update()

__init__(skeleton, parent=None)

Initialize the canvas.

Source code in src/skelarm/canvas.py 
29
30
31
32
33
34
35
36
37
38
def __init__(self, skeleton: Skeleton, parent: QWidget | None = None) -> None:
    """Initialize the canvas."""
    super().__init__(parent)
    self.skeleton = skeleton
    self.scale_factor = 100.0  # Pixels per meter
    # Set background color to white
    self.setAutoFillBackground(True)
    p = self.palette()
    p.setColor(self.backgroundRole(), QColor("white"))
    self.setPalette(p)

paintEvent(a0)

Paint the robot arm.

Source code in src/skelarm/canvas.py 
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
def paintEvent(self, a0) -> None:  # noqa: ANN001, N802, ARG002
    """Paint the robot arm."""
    painter = QPainter(self)
    painter.setRenderHint(QPainter.RenderHint.Antialiasing)

    # Center of the widget
    center_x = self.width() / 2
    center_y = self.height() / 2

    # Draw Base
    painter.setBrush(QBrush(Qt.GlobalColor.black))
    base_screen = self.world_to_screen(0, 0, center_x, center_y)
    painter.drawEllipse(base_screen, 10, 10)

    # Draw Links
    pen_link = QPen(QColor(0, 100, 200))  # Blue-ish
    pen_link.setWidth(6)
    pen_link.setCapStyle(Qt.PenCapStyle.RoundCap)
    painter.setPen(pen_link)

    # Draw Joints
    brush_joint = QBrush(QColor(200, 0, 0))  # Red

    # Iterate through links
    # Note: We assume compute_forward_kinematics has been called externally
    # or we could call it here, but typically the state is updated elsewhere.

    for link in self.skeleton.links:
        p1 = self.world_to_screen(link.x, link.y, center_x, center_y)
        p2 = self.world_to_screen(link.xe, link.ye, center_x, center_y)

        # Draw link segment
        painter.drawLine(p1, p2)

        # Draw joint at the end of the link (tip or next joint)
        painter.setPen(Qt.PenStyle.NoPen)
        painter.setBrush(brush_joint)
        painter.drawEllipse(p2, 6, 6)

        # Reset pen for next link
        painter.setPen(pen_link)

update_skeleton()

Trigger a repaint.

Source code in src/skelarm/canvas.py 
89
90
91
def update_skeleton(self) -> None:
    """Trigger a repaint."""
    self.update()

world_to_screen(wx, wy, cx, cy)

Convert world coordinates (meters) to screen coordinates (pixels).

Source code in src/skelarm/canvas.py 
82
83
84
85
86
87
def world_to_screen(self, wx: float, wy: float, cx: float, cy: float) -> QPointF:
    """Convert world coordinates (meters) to screen coordinates (pixels)."""
    sx = cx + wx * self.scale_factor
    # Invert Y because screen Y is down
    sy = cy - wy * self.scale_factor
    return QPointF(sx, sy)

SkelarmViewer

Bases: QMainWindow

Main window for the Skelarm visualizer.

Source code in src/skelarm/canvas.py 
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
class SkelarmViewer(QMainWindow):
    """Main window for the Skelarm visualizer."""

    def __init__(self, skeleton: Skeleton) -> None:
        """Initialize the viewer."""
        super().__init__()
        self.skeleton = skeleton

        # Ensure kinematics are computed initially
        compute_forward_kinematics(self.skeleton)

        self.canvas = SkelarmCanvas(skeleton)

        self.setWindowTitle("Skelarm Viewer")
        self.resize(1024, 768)

        # Main layout container
        central_widget = QWidget()
        self.setCentralWidget(central_widget)
        main_layout = QHBoxLayout(central_widget)

        # Add canvas
        main_layout.addWidget(self.canvas, stretch=3)

        # Controls panel
        controls_panel = QWidget()
        controls_layout = QVBoxLayout(controls_panel)

        controls_label = QLabel("<b>Joint Controls</b>")
        controls_layout.addWidget(controls_label)

        self.sliders: list[QSlider] = []
        self.angle_labels: list[QLabel] = []

        for i, link in enumerate(skeleton.links):
            row_layout = QVBoxLayout()

            header_layout = QHBoxLayout()
            label = QLabel(f"Joint {i + 1}")
            value_label = QLabel("0.0°")
            header_layout.addWidget(label)
            header_layout.addStretch()
            header_layout.addWidget(value_label)

            slider = QSlider(Qt.Orientation.Horizontal)
            # Map -180..180 degrees to slider values
            # Using link limits if available would be better, but fixed for now
            slider.setRange(-180, 180)
            # Set initial value
            initial_deg = int(math.degrees(link.q))
            slider.setValue(initial_deg)
            slider.valueChanged.connect(self.on_slider_change)

            row_layout.addLayout(header_layout)
            row_layout.addWidget(slider)

            controls_layout.addLayout(row_layout)
            controls_layout.addSpacing(10)

            self.sliders.append(slider)
            self.angle_labels.append(value_label)

            # Initialize label text
            value_label.setText(f"{initial_deg}°")

        controls_layout.addStretch()
        main_layout.addWidget(controls_panel, stretch=1)

    def on_slider_change(self) -> None:
        """Handle slider value changes."""
        new_q = []
        for i, slider in enumerate(self.sliders):
            angle_deg = slider.value()
            self.angle_labels[i].setText(f"{angle_deg}°")
            new_q.append(math.radians(angle_deg))

        self.skeleton.q = np.array(new_q)
        compute_forward_kinematics(self.skeleton)
        self.canvas.update_skeleton()

__init__(skeleton)

Initialize the viewer.

Source code in src/skelarm/canvas.py 
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
def __init__(self, skeleton: Skeleton) -> None:
    """Initialize the viewer."""
    super().__init__()
    self.skeleton = skeleton

    # Ensure kinematics are computed initially
    compute_forward_kinematics(self.skeleton)

    self.canvas = SkelarmCanvas(skeleton)

    self.setWindowTitle("Skelarm Viewer")
    self.resize(1024, 768)

    # Main layout container
    central_widget = QWidget()
    self.setCentralWidget(central_widget)
    main_layout = QHBoxLayout(central_widget)

    # Add canvas
    main_layout.addWidget(self.canvas, stretch=3)

    # Controls panel
    controls_panel = QWidget()
    controls_layout = QVBoxLayout(controls_panel)

    controls_label = QLabel("<b>Joint Controls</b>")
    controls_layout.addWidget(controls_label)

    self.sliders: list[QSlider] = []
    self.angle_labels: list[QLabel] = []

    for i, link in enumerate(skeleton.links):
        row_layout = QVBoxLayout()

        header_layout = QHBoxLayout()
        label = QLabel(f"Joint {i + 1}")
        value_label = QLabel("0.0°")
        header_layout.addWidget(label)
        header_layout.addStretch()
        header_layout.addWidget(value_label)

        slider = QSlider(Qt.Orientation.Horizontal)
        # Map -180..180 degrees to slider values
        # Using link limits if available would be better, but fixed for now
        slider.setRange(-180, 180)
        # Set initial value
        initial_deg = int(math.degrees(link.q))
        slider.setValue(initial_deg)
        slider.valueChanged.connect(self.on_slider_change)

        row_layout.addLayout(header_layout)
        row_layout.addWidget(slider)

        controls_layout.addLayout(row_layout)
        controls_layout.addSpacing(10)

        self.sliders.append(slider)
        self.angle_labels.append(value_label)

        # Initialize label text
        value_label.setText(f"{initial_deg}°")

    controls_layout.addStretch()
    main_layout.addWidget(controls_panel, stretch=1)

on_slider_change()

Handle slider value changes.

Source code in src/skelarm/canvas.py 
162
163
164
165
166
167
168
169
170
171
172
def on_slider_change(self) -> None:
    """Handle slider value changes."""
    new_q = []
    for i, slider in enumerate(self.sliders):
        angle_deg = slider.value()
        self.angle_labels[i].setText(f"{angle_deg}°")
        new_q.append(math.radians(angle_deg))

    self.skeleton.q = np.array(new_q)
    compute_forward_kinematics(self.skeleton)
    self.canvas.update_skeleton()