Embed interactive matplotlib widgets?

[naquad]

Hello,

Is there any chance that QtConsole will support interactive Matplotlib widgets instead of static image / external window?

In quite a few cases, quick exploration is easier to do in (qt)console, rather than in the notebook, so it would be great to get some interactivity for the plots. Jupyter Lab Console does not support widgets and considering how old the related merge request is, most probably it never will.

I was looking for some option to get it working and found only 8 y.o. and 5 y.o. tasks which don't seem to get much attention.

[wmvanvliet]

The reason it doesn't get much attention is because it's just too difficult. Interactive widgets need a browser with javascript support. The QtConsole is based around a QTextEdit that is a text widget with support for inline images, not a browser. Of course there is the QWebView widget, but how would we go around embedding that inside a QTextEdit? Perhaps there are solutions here I'm not aware of.

[naquad]

Yeah, I get that running not just a browser but a bunch of browsers is a pain.

I've been thinking about an ad-hoc hack for Matplotlib: X11 and Win64 both can do what's called a window embedding. The idea is to add a new matplotlib backend that would render something like MIME embed/window-id with the data = window id and QtConsole would just embed the window using QWidget.createWindowContainer. Actual interaction will be handled by the original process in the kernel. There are still quiet a few unknowns in this (Qt conflicts, potential visual glitches) and limitations (remote interaction will become ridiculously hard) but it is still better than nothing.

Embedding example.

Embedded:

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QLabel, QSlider, QVBoxLayout, QWidget
from PyQt5.QtCore import Qt
import ctypes

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()

        self.setWindowTitle("Slider Example")

        # Create a label to display the slider value
        self.label = QLabel("Slider Value: 0", self)
        self.label.setAlignment(Qt.AlignCenter)

        # Create a horizontal slider
        self.slider = QSlider(Qt.Horizontal, self)
        self.slider.setMinimum(0)
        self.slider.setMaximum(100)
        self.slider.setValue(0)
        self.slider.valueChanged.connect(self.update_label)

        # Set up the layout
        layout = QVBoxLayout()
        layout.addWidget(self.label)
        layout.addWidget(self.slider)

        # Create a central widget and set the layout
        central_widget = QWidget(self)
        central_widget.setLayout(layout)
        self.setCentralWidget(central_widget)

        # Print the native window ID
        window_id = int(self.winId())
        print(f"WinID: {window_id}")

    def update_label(self, value):
        self.label.setText(f"Slider Value: {value}")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

An embedder:

import sys
from PyQt6.QtWidgets import QApplication, QWidget, QVBoxLayout
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QWindow

class EmbedExternalWindow(QWidget):
    def __init__(self, win_id):
        super().__init__()

        # Initialize layout
        layout = QVBoxLayout()
        self.setLayout(layout)

        # Create a QWindow object from the external window ID
        external_window = QWindow.fromWinId(win_id)
        external_window.show()
        external_widget = QWidget.createWindowContainer(external_window, self)

        # Add the external window to the layout
        layout.addWidget(external_widget)

        # Window settings
        self.setWindowTitle('Embed External Window')
        self.setGeometry(100, 100, 400, 300)  # Adjust size and position as needed

if __name__ == '__main__':
    app = QApplication(sys.argv)

    main_window = EmbedExternalWindow(int(sys.argv[1]))
    main_window.show()

    sys.exit(app.exec())

Start the embedded and execute the embedder with the argument = output of an embedded.

[wmvanvliet]

Embedding a window in another window is one thing. But can you embed into a TextEdit widget? It all looks very complicated to me.

[naquad]

Well, a quick and dirty try demonstrates that it is possible. There are still quite a few questions regarding the widget geometry, placing, and so forth, but it is doable.