Can someone tell me how do i get popup like widget using fabric?

[Amaan1234567]

like i have been trying to get a popup for my mpris widget that has more msuic controls that show up when i hover over the mpris widget in my bar following is what i have been able to come up with using WaylandWindow, the problem i have with this is that it dosent position itself below the mpris widget, its either in the center of bar or right corner of bar , both of whnich are not ideal, most of my learning has come from documentation of Fabric and Tsumiki bar by @rubiin, some code is direct copy paste cause i couldnt figure out how to make it myself

import os
import tempfile
import urllib.request
from gi.repository import GdkPixbuf, Gtk

from fabric.widgets.box import Box
from fabric.widgets.eventbox import EventBox
from fabric.widgets.image import Image
from fabric.widgets.label import Label
from fabric.widgets.button import Button
from fabric.widgets.centerbox import CenterBox
from fabric import Fabricator
from fabric.widgets.wayland import WaylandWindow
from fabric.widgets.overlay import Overlay
from fabric.widgets.flowbox import FlowBox

def _truncate(text, max_len=30):
    return text if len(text) <= max_len else text[: max_len - 1] + "…"



class Mpris(Box):
    def __init__(self,window, **kwargs):
        super().__init__(orientation="horizontal", spacing=6, events=['enter-notify','leave-notify'],**kwargs)


        self.content = Box(orientation='h',spacing=10)
        self.content_event_box = EventBox(on_button_release_event = self.toggle_overlay_visibility)
        self.album_art = Image(name="album-art")
        self.album_art.set_size_request(20, 20)

        self.title_label = Label(name="song-title",label="")
        self.artist_label = Label(name="song=artist",label="")
        self.pause_icon = Label(label="", name="pause-icon")  # FontAwesome pause icon
        self.pause_icon.set_visible(False)

        self.content.add(self.album_art)
        self.content.add(self.pause_icon)
        self.content.add(self.title_label)
        self.content_event_box.add(self.content)
        self.add(self.content_event_box)

        self.temp_art_path = None
        self.temp_url_cache=""
        Fabricator(
            poll_from="playerctl metadata --format '{{mpris:artUrl}}|{{title}}|{{artist}}'",
        ).connect("changed", self._on_metadata)

        Fabricator(
            interval=500,
            poll_from="playerctl status"
        ).connect("changed", self._on_status_change)

        self.album_art_overlay= Image(name="album-art-overlay")
        self.album_art_overlay.set_size_request(150, 150)
        self.song_title = Label(name="song-title-overlay")
        self.song_artist = Label(name="song-artist-overlay")
        self.prev_button = Button(label="󰒮",name="prev-button")
        self.prev_button.connect("clicked",self.prev_track)
        self.play_button = Button(label="",name="play-button")
        self.play_button.connect("clicked",self.toggle_play)
        self.next_button = Button(label="󰒭",name="prev-button")
        self.next_button.connect("clicked",self.next_track)
        self.control_row = CenterBox(name="controls",orientation='h',start_children=[self.prev_button],center_children=[self.play_button],end_children=[self.next_button])

        self.column = FlowBox(row_spacing=5,name="mpris-overlay-window",orientation='v',children = [self.album_art_overlay,self.song_title,self.song_artist,self.control_row])
        self.overlay = WaylandWindow(name="mpris-overlay-window",layer="top",type="popup",visible=False,child=self.column,size=[120,170])
        self.overlay.set_transient_for(window)
        window.set_position(Gtk.WindowPosition.CENTER_ON_PARENT)

        # self.overlay.move(1000, 290)
        # self.overlay.set_visible(True)

    def prev_track(self):
        os.system("playerctl previous")
    def next_track(self):
        os.system("playerctl next")
    def toggle_play(self):
        os.system("playerctl play-pause")

    def _position_overlay(self):
        parent = self.get_ancestor(WaylandWindow)  # climb to the top-level WaylandWindow
        if not isinstance(parent, WaylandWindow):
            print("[MPRIS] Could not find parent WaylandWindow for positioning")
            return

        bar_x, bar_y = parent.get_position()  # global position of your bar window
        alloc = self.get_allocation()         # widget allocation inside the bar
        widget_x = alloc.x
        widget_y = alloc.y + alloc.height + 5  # show below the widget

        final_x = bar_x + widget_x
        final_y = bar_y + widget_y

        print(f"[MPRIS] Positioning overlay at {final_x}, {final_y}")
        self.overlay.move(final_x, final_y)

    
    def toggle_overlay_visibility(self, *_):
        print("inside toggle function")
        if self.overlay.get_property("visible"):
            self.overlay.set_visible(False)
        else:
            self.overlay.set_visible(True)


    def _on_metadata(self, _, output: str):
        parts = output.strip().split("|", 2)
        if len(parts) != 3:
            return

        art_url, title, artist = parts
        title = title.strip() or "—"
        artist = artist.strip() or "—"

        self.title_label.set_label(_truncate(title))
        self.song_title.set_label(_truncate(title))
        self.song_artist.set_label(_truncate(artist))
        self.artist_label.set_label(_truncate(artist))

        self._load_art(art_url.strip())

    def _on_status_change(self, _, output: str):
        status = output.strip()
        if status == "Playing":
            self.pause_icon.set_visible(False)
        else:
            self.pause_icon.set_visible(True)

    def _load_art(self, art_url: str):
        try:
            path=""
            if art_url.startswith("file://"):
                path = art_url[7:]
            elif art_url.startswith("http://") or art_url.startswith("https://"):
                # Download to a temporary file
                if(self.temp_url_cache != art_url):
                    self.temp_url_cache = art_url
                    fd, path = tempfile.mkstemp(suffix=".png")
                    os.close(fd)
                    urllib.request.urlretrieve(art_url, path)
                    self._cleanup_temp()  # remove previous if any
                    self.temp_art_path = path
            else:
                return

            if not os.path.exists(path):
                return

            pic1 = GdkPixbuf.Pixbuf.new_from_file_at_scale(path, 20, 20, True)
            pic2 = GdkPixbuf.Pixbuf.new_from_file_at_scale(path,200,200,True)
            self.album_art.set_from_pixbuf(pic1)
            self.album_art_overlay.set_from_pixbuf(pic2)
        except Exception as e:
            print(f"[MPRIS] failed loading album art: {e}")
            self.album_art.clear()

    def _cleanup_temp(self):
        if self.temp_art_path and os.path.isfile(self.temp_art_path):
            try:
                os.remove(self.temp_art_path)
            except Exception:
                pass
        self.temp_art_path = None

the best i could get it positioned is like this in the corner with anchors on the window

[its-darsh]

Use the Popup snippet from our Discord server.

[Amaan1234567]

class PopupWindow(WaylandWindow):
    def __init__(
        self,
        parent: WaylandWindow,
        pointing_to: Gtk.Widget | None = None,
        margin: tuple[int, ...] | str = "0px 0px 0px 0px",
        **kwargs,
    ):
        super().__init__(**kwargs)
        self.exclusivity = "none"

        self._parent = parent
        self._pointing_widget = pointing_to
        self._base_margin = self.extract_margin(margin)
        self.margin = self._base_margin.values()

        self.connect("notify::visible", self.do_update_handlers)

    def get_coords_for_widget(self, widget: Gtk.Widget) -> tuple[int, int]:
        if not ((toplevel := widget.get_toplevel()) and toplevel.is_toplevel()):  # type: ignore
            return 0, 0
        allocation = widget.get_allocation()
        x, y = widget.translate_coordinates(toplevel, allocation.x, allocation.y) or (
            0,
            0,
        )
        return round(x / 2), round(y / 2)

    def set_pointing_to(self, widget: Gtk.Widget | None):
        if self._pointing_widget:
            try:
                self._pointing_widget.disconnect_by_func(self.do_handle_size_allocate)
            except Exception:
                pass
        self._pointing_widget = widget
        return self.do_update_handlers()

    def do_update_handlers(self, *_):
        if not self._pointing_widget:
            return

        if not self.get_visible():
            try:
                self._pointing_widget.disconnect_by_func(self.do_handle_size_allocate)
                self.disconnect_by_func(self.do_handle_size_allocate)
            except Exception:
                pass
            return

        self._pointing_widget.connect("size-allocate", self.do_handle_size_allocate)
        self.connect("size-allocate", self.do_handle_size_allocate)

        return self.do_handle_size_allocate()

    def do_handle_size_allocate(self, *_):
        return self.do_reposition(self.do_calculate_edges())

    def do_calculate_edges(self):
        move_axe = "x"
        parent_anchor = self._parent.anchor

        if len(parent_anchor) != 3:
            return move_axe

        if (
            GtkLayerShell.Edge.LEFT in parent_anchor
            and GtkLayerShell.Edge.RIGHT in parent_anchor
        ):
            # horizontal -> move on x-axies
            move_axe = "x"
            if GtkLayerShell.Edge.TOP in parent_anchor:
                self.anchor = "left top"
            else:
                self.anchor = "left bottom"
        elif (
            GtkLayerShell.Edge.TOP in parent_anchor
            and GtkLayerShell.Edge.BOTTOM in parent_anchor
        ):
            # vertical -> move on y-axies
            move_axe = "y"
            if GtkLayerShell.Edge.RIGHT in parent_anchor:
                self.anchor = "top right"
            else:
                self.anchor = "top left"

        return move_axe

    def do_reposition(self, move_axe: str):
        parent_margin = self._parent.margin
        parent_x_margin, parent_y_margin = parent_margin[0], parent_margin[3]

        height = self.get_allocated_height()
        width = self.get_allocated_width()

        if self._pointing_widget:
            coords = self.get_coords_for_widget(self._pointing_widget)
            coords_centered = (
                round(coords[0] + self._pointing_widget.get_allocated_width() / 2),
                round(coords[1] + self._pointing_widget.get_allocated_height() / 2),
            )
        else:
            coords_centered = (
                round(self._parent.get_allocated_width() / 2),
                round(self._parent.get_allocated_height() / 2),
            )

        self.margin = tuple(
            a + b
            for a, b in zip(
                (
                    (
                        0,
                        0,
                        0,
                        round((parent_x_margin + coords_centered[0]) - (width / 2)),
                    )
                    if move_axe == "x"
                    else (
                        round((parent_y_margin + coords_centered[1]) - (height / 2)),
                        0,
                        0,
                        0,
                    )
                ),
                self._base_margin.values(),
            )
        )

putting the snippet here if someone else wants it

[its-darsh]

Yeah, I wouldn't do. Get snippets from upstream to avoid outdated snippets and possible malware.

[Amaan1234567]

Can you put the link for upstream? Where this snippet is then?

[its-darsh]

The Discord server's snippets channel.