Howto make a row of buttons scrollable on a touch display?

[chess-levin]

Hello,

I've developed this webradio-interface-app for VLC.

Now I like to run this app on a raspi 4 with a attached lcd-touch-display and I like to allow the user to scroll thru the list of radio station by swiping the row instead of using the '<<' or '>>' button. I don't want to have a visible scrollbar attached to the frame containing the station-buttons. Any ideas, how to achieve this?

This is my code for this CTkFrame:

class FrameStations(customtkinter.CTkFrame):

    def __init__(self, master, fr_head, station_data, logos, media_player, VlcInstance):
        super().__init__(master)

        self.fr_head = fr_head
        self.station_data = station_data
        self.logos = logos
        self.scrollbtn_inactive = (len(self.station_data) <= _station_slots)
        self.media_player = media_player
        self.now_playing_idx = -1
        self.VlcInstance = VlcInstance
        self.Media = None
        self.slot_first_sta = 0
        self.btn_station_slot = []
        self.prev = ""

        # self.fr_stations = customtkinter.CTkFrame(self)
        self.grid(row=2, column=0, padx=10, pady=10, sticky="ew")

        # create scroll-left button
        self.btn_scroll_r = customtkinter.CTkButton(master=self, text="<<", width=_scroll_btn_width, height=_station_btn_size, state = self.scrollbtn_inactive, command=partial(self.btn_stations_scroll, -1))
        self.btn_scroll_r.grid(row=0, column=0, sticky="e")

        # create scroll-right button
        self.btn_scroll_l = customtkinter.CTkButton(master=self, text=">>", width=_scroll_btn_width, height=_station_btn_size, state = self.scrollbtn_inactive, command=partial(self.btn_stations_scroll, 1))
        self.btn_scroll_l.grid(row=0, column=6, padx=0, pady=0, sticky="w")

        self.setup_station_slots(0)

        self.update_meta()

    def setup_station_slots(self, start_idx):
        # create station slot buttons
        slot_idx = 0
        for i in range(start_idx, start_idx + _station_slots):
                logo_fn = self.logos[self.station_data[i]["logo"]]
                btn_station_slot = customtkinter.CTkButton(master=self, text="", image=logo_fn, command=partial(self.btn_play_station, i))
                btn_station_slot.grid(row=0, column=slot_idx+1, padx=2, pady=0)
                slot_idx += 1

        if (len(self.station_data) <= _station_slots):
            self.btn_scroll_l.configure(state="disabled")
            self.btn_scroll_r.configure(state="disabled")
        else:
            self.btn_scroll_l.configure(state="normal")
            self.btn_scroll_r.configure(state="normal")

    def btn_play_station(self, i):
        print(f'selected i={i}, station={self.station_data[i]["name"]}')
        if (_station_empty != self.station_data[i]["name"]):
            self.media_player.stop()
            self.Media = self.VlcInstance.media_new(self.station_data[i]["url"])
            self.Media.get_mrl()
            self.media_player.set_media(self.Media)
            self.media_player.play()
            self.now_playing_idx = i
            self.prev = ""

    def btn_stations_scroll(self, inc):
        '''value of inc can be on of {-1, +1} depending on which button was pressed'''
        t = self.slot_first_sta + inc 
        if (t >= 0) and (t <= len(self.station_data) - _station_slots):
            self.slot_first_sta = t
            self.setup_station_slots(self.slot_first_sta)

        #todo: change of state does not work, is always active/normal
        #self.btn_scroll_l.configure(state=(t==0))
        #self.btn_scroll_l.configure(state=(t!=0))
        #self.btn_scroll_r.configure(state=(t == len(self.station_data) - _station_slots))
        #self.btn_scroll_r.configure(state=(t != len(self.station_data) - _station_slots))

    # https://stackoverflow.com/questions/70509728/how-to-get-audiostream-metadata-using-vlc-py
    def update_meta(self):
        '''Update GUI meta data (e.g. title-info) that comes with the stream'''

        if self.Media is None:
            print(f"Variable 'self.Media' is not set: {self.Media}")
        else:
            m = self.Media.get_meta(12) # vlc.Meta 12: 'NowPlaying',
            if m != self.prev:
                station_name = self.station_data[self.now_playing_idx]["name"]
                print(f"Now playing {station_name}: {m}")
                self.fr_head.update_media(station_name, m)
                self.prev = m

        self.after(ms = 1000, func=self.update_meta)

[Anonymous6598]

Unfortunately, this is impossible as customtkinter is desktop framework, therefore you won't have .bind() parameters for swipe. You can try using kivy framework for this purpose.

[chess-levin]

Thx for the quick reply

[dipeshSam]

@chess-levin Did you try binding "B1-Motion" ???

Although you've closed the issue but please try .bind("<B1-Motion>") it may work.

Best regards.