From c9dbf97649a27117be6d5955a49e2d4253337288 Mon Sep 17 00:00:00 2001 From: Jimmy <9859727+Quantizr@users.noreply.github.com> Date: Thu, 11 Sep 2025 20:31:32 -1000 Subject: [PATCH] jotpluggler: add icons, use monospace font, and fix ui quirks (#36141) * use play/pause icons * use monospace font * x button for delete * add icons for splitting * many scaling + scrollbar fixes and niceties * simplify texture loading code --- tools/jotpluggler/assets/pause.png | 3 +++ tools/jotpluggler/assets/play.png | 3 +++ tools/jotpluggler/assets/split_h.png | 3 +++ tools/jotpluggler/assets/split_v.png | 3 +++ tools/jotpluggler/assets/x.png | 3 +++ tools/jotpluggler/datatree.py | 31 +++++++++++---------------- tools/jotpluggler/layout.py | 32 ++++++++++++++++++---------- tools/jotpluggler/pluggle.py | 25 +++++++++++++--------- 8 files changed, 64 insertions(+), 39 deletions(-) create mode 100644 tools/jotpluggler/assets/pause.png create mode 100644 tools/jotpluggler/assets/play.png create mode 100644 tools/jotpluggler/assets/split_h.png create mode 100644 tools/jotpluggler/assets/split_v.png create mode 100644 tools/jotpluggler/assets/x.png diff --git a/tools/jotpluggler/assets/pause.png b/tools/jotpluggler/assets/pause.png new file mode 100644 index 0000000000..8040099831 --- /dev/null +++ b/tools/jotpluggler/assets/pause.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:3ea96d8193eb9067a5efdc5d88a3099730ecafa40efcd09d7402bb3efd723603 +size 2305 diff --git a/tools/jotpluggler/assets/play.png b/tools/jotpluggler/assets/play.png new file mode 100644 index 0000000000..b1556cf0ab --- /dev/null +++ b/tools/jotpluggler/assets/play.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:53097ac5403b725ff1841dfa186ea770b4bb3714205824bde36ec3c2a0fb5dba +size 2758 diff --git a/tools/jotpluggler/assets/split_h.png b/tools/jotpluggler/assets/split_h.png new file mode 100644 index 0000000000..4fd88806e1 --- /dev/null +++ b/tools/jotpluggler/assets/split_h.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:54dd035ff898d881509fa686c402a61af8ef5fb408b92414722da01f773b0d33 +size 2900 diff --git a/tools/jotpluggler/assets/split_v.png b/tools/jotpluggler/assets/split_v.png new file mode 100644 index 0000000000..752e62a4ae --- /dev/null +++ b/tools/jotpluggler/assets/split_v.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:adbd4e5df1f58694dca9dde46d1d95b4e7471684e42e6bca9f41ea5d346e67c5 +size 3669 diff --git a/tools/jotpluggler/assets/x.png b/tools/jotpluggler/assets/x.png new file mode 100644 index 0000000000..3b2eabd447 --- /dev/null +++ b/tools/jotpluggler/assets/x.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a6d9c90cb0dd906e0b15e1f7f3fd9f0dfad3c3b0b34eeed7a7882768dc5f3961 +size 2053 diff --git a/tools/jotpluggler/datatree.py b/tools/jotpluggler/datatree.py index c18ab61892..3390fed2e1 100644 --- a/tools/jotpluggler/datatree.py +++ b/tools/jotpluggler/datatree.py @@ -34,7 +34,7 @@ class DataTree: self._path_to_node: dict[str, DataTreeNode] = {} # full_path -> node self._expanded_tags: set[str] = set() self._item_handlers: dict[str, str] = {} # ui_tag -> handler_tag - self._avg_char_width = None + self._char_width = None self._queued_search = None self._new_data = False self._ui_lock = threading.RLock() @@ -43,12 +43,13 @@ class DataTree: def create_ui(self, parent_tag: str): with dpg.child_window(parent=parent_tag, border=False, width=-1, height=-1): - dpg.add_text("Available Data") + dpg.add_text("Timeseries List") dpg.add_separator() dpg.add_input_text(tag="search_input", width=-1, hint="Search fields...", callback=self.search_data) dpg.add_separator() - with dpg.group(tag="data_tree_container"): - pass + with dpg.child_window(border=False, width=-1, height=-1): + with dpg.group(tag="data_tree_container"): + pass def _on_data_loaded(self, data: dict): with self._ui_lock: @@ -64,8 +65,9 @@ class DataTree: self._handlers_to_delete.clear() with self._ui_lock: - if self._avg_char_width is None and dpg.is_dearpygui_running(): - self._avg_char_width = self.calculate_avg_char_width(font) + if self._char_width is None: + if size := dpg.get_text_size(" ", font=font): + self._char_width = size[0] if self._new_data: self._process_path_change() @@ -256,10 +258,10 @@ class DataTree: value_tag = f"value_{path}" if not dpg.does_item_exist(value_tag): return - value_column_width = dpg.get_item_rect_size("sidebar_window")[0] // 2 + value_column_width = dpg.get_item_rect_size(f"leaf_{path}")[0] // 2 value = self.data_manager.get_value_at(path, self.playback_manager.current_time_s) if value is not None: - formatted_value = self.format_and_truncate(value, value_column_width, self._avg_char_width) + formatted_value = self.format_and_truncate(value, value_column_width, self._char_width) dpg.set_value(value_tag, formatted_value) else: dpg.set_value(value_tag, "N/A") @@ -305,16 +307,9 @@ class DataTree: yield f"{child_name_lower}/{path}" @staticmethod - def calculate_avg_char_width(font): - sample_text = "abcdefghijklmnopqrstuvwxyz0123456789" - if size := dpg.get_text_size(sample_text, font=font): - return size[0] / len(sample_text) - return None - - @staticmethod - def format_and_truncate(value, available_width: float, avg_char_width: float) -> str: + def format_and_truncate(value, available_width: float, char_width: float) -> str: s = f"{value:.5f}" if np.issubdtype(type(value), np.floating) else str(value) - max_chars = int(available_width / avg_char_width) - 3 + max_chars = int(available_width / char_width) if len(s) > max_chars: - return s[: max(0, max_chars)] + "..." + return s[: max(0, max_chars - 3)] + "..." return s diff --git a/tools/jotpluggler/layout.py b/tools/jotpluggler/layout.py index 0c40116e66..917c156f9f 100644 --- a/tools/jotpluggler/layout.py +++ b/tools/jotpluggler/layout.py @@ -25,29 +25,33 @@ class PlotLayoutManager: if dpg.does_item_exist(self.container_tag): dpg.delete_item(self.container_tag) - with dpg.child_window(tag=self.container_tag, parent=parent_tag, border=False, width=-1, height=-1, no_scrollbar=True): + with dpg.child_window(tag=self.container_tag, parent=parent_tag, border=False, width=-1, height=-1, no_scrollbar=True, no_scroll_with_mouse=True): container_width, container_height = dpg.get_item_rect_size(self.container_tag) self._create_ui_recursive(self.layout, self.container_tag, [], container_width, container_height) def _create_ui_recursive(self, layout: dict, parent_tag: str, path: list[int], width: int, height: int): if layout["type"] == "panel": - self._create_panel_ui(layout, parent_tag, path) + self._create_panel_ui(layout, parent_tag, path, width, height) else: self._create_split_ui(layout, parent_tag, path, width, height) - def _create_panel_ui(self, layout: dict, parent_tag: str, path: list[int]): + def _create_panel_ui(self, layout: dict, parent_tag: str, path: list[int], width: int, height:int): panel_tag = self._path_to_tag(path, "panel") panel = layout["panel"] self.active_panels.append(panel) + text_size = int(13 * self.scale) + bar_height = (text_size+24) if width < int(279 * self.scale + 80) else (text_size+8) # adjust height to allow for scrollbar - with dpg.child_window(tag=panel_tag, parent=parent_tag, border=True, width=-1, height=-1, no_scrollbar=True): + with dpg.child_window(parent=parent_tag, border=True, width=-1, height=-1, no_scrollbar=True): with dpg.group(horizontal=True): - dpg.add_input_text(default_value=panel.title, width=int(100 * self.scale), callback=lambda s, v: setattr(panel, "title", v)) - dpg.add_combo(items=["Time Series"], default_value="Time Series", width=int(100 * self.scale)) - dpg.add_button(label="Clear", callback=lambda: self.clear_panel(panel), width=int(40 * self.scale)) - dpg.add_button(label="Delete", callback=lambda: self.delete_panel(path), width=int(40 * self.scale)) - dpg.add_button(label="Split H", callback=lambda: self.split_panel(path, 0), width=int(40 * self.scale)) - dpg.add_button(label="Split V", callback=lambda: self.split_panel(path, 1), width=int(40 * self.scale)) + with dpg.child_window(tag=panel_tag, width=-(text_size + 16), height=bar_height, horizontal_scrollbar=True, no_scroll_with_mouse=True, border=False): + with dpg.group(horizontal=True): + dpg.add_input_text(default_value=panel.title, width=int(100 * self.scale), callback=lambda s, v: setattr(panel, "title", v)) + dpg.add_combo(items=["Time Series"], default_value="Time Series", width=int(100 * self.scale)) + dpg.add_button(label="Clear", callback=lambda: self.clear_panel(panel), width=int(40 * self.scale)) + dpg.add_image_button(texture_tag="split_h_texture", callback=lambda: self.split_panel(path, 0), width=text_size, height=text_size) + dpg.add_image_button(texture_tag="split_v_texture", callback=lambda: self.split_panel(path, 1), width=text_size, height=text_size) + dpg.add_image_button(texture_tag="x_texture", callback=lambda: self.delete_panel(path), width=text_size, height=text_size) dpg.add_separator() @@ -177,11 +181,17 @@ class PlotLayoutManager: dpg.configure_item(container_tag, **{size_properties[orientation]: pane_sizes[i]}) child_width, child_height = [(pane_sizes[i], available_sizes[1]), (available_sizes[0], pane_sizes[i])][orientation] self._resize_splits_recursive(child_layout, child_path, child_width, child_height) + else: # leaf node/panel - adjust bar height to allow for scrollbar + panel_tag = self._path_to_tag(path, "panel") + if width is not None and width < int(279 * self.scale + 80): # scaled widths of the elements in top bar + fixed 8 padding on left and right of each item + dpg.configure_item(panel_tag, height=(int(13*self.scale) + 24)) + else: + dpg.configure_item(panel_tag, height=(int(13*self.scale) + 8)) def _get_split_geometry(self, layout: dict, available_size: tuple[int, int]) -> tuple[int, int, list[int]]: orientation = layout["orientation"] num_grips = len(layout["children"]) - 1 - usable_size = max(self.min_pane_size, available_size[orientation] - (num_grips * self.grip_size)) + usable_size = max(self.min_pane_size, available_size[orientation] - (num_grips * (self.grip_size + 8 * (2-orientation)))) # approximate, scaling is weird pane_sizes = [max(self.min_pane_size, int(usable_size * prop)) for prop in layout["proportions"]] return orientation, usable_size, pane_sizes diff --git a/tools/jotpluggler/pluggle.py b/tools/jotpluggler/pluggle.py index 9868b998ed..582a44454e 100755 --- a/tools/jotpluggler/pluggle.py +++ b/tools/jotpluggler/pluggle.py @@ -73,9 +73,10 @@ class PlaybackManager: if not self.is_playing and self.current_time_s >= self.duration_s: self.seek(0.0) self.is_playing = not self.is_playing + texture_tag = "pause_texture" if self.is_playing else "play_texture" + dpg.configure_item("play_pause_button", texture_tag=texture_tag) def seek(self, time_s: float): - self.is_playing = False self.current_time_s = max(0.0, min(time_s, self.duration_s)) def update_time(self, delta_t: float): @@ -83,6 +84,7 @@ class PlaybackManager: self.current_time_s = min(self.current_time_s + delta_t, self.duration_s) if self.current_time_s >= self.duration_s: self.is_playing = False + dpg.configure_item("play_pause_button", texture_tag="play_texture") return self.current_time_s @@ -109,7 +111,6 @@ class MainController: dpg.add_theme_style(dpg.mvPlotStyleVar_LineWeight, scaled_thickness, category=dpg.mvThemeCat_Plots) dpg.add_theme_color(dpg.mvPlotCol_Line, (255, 0, 0, 128), category=dpg.mvThemeCat_Plots) - def on_data_loaded(self, data: dict): duration = data.get('duration', 0.0) self.playback_manager.set_route_duration(duration) @@ -121,7 +122,7 @@ class MainController: dpg.set_value("load_status", "Loading...") dpg.set_value("timeline_slider", 0.0) dpg.configure_item("timeline_slider", max_value=0.0) - dpg.configure_item("play_pause_button", label="Play") + dpg.configure_item("play_pause_button", texture_tag="play_texture") dpg.configure_item("load_button", enabled=True) elif data.get('loading_complete'): num_paths = len(self.data_manager.get_all_paths()) @@ -134,6 +135,12 @@ class MainController: dpg.configure_item("timeline_slider", max_value=duration) def setup_ui(self): + with dpg.texture_registry(): + script_dir = os.path.dirname(os.path.realpath(__file__)) + for image in ["play", "pause", "x", "split_h", "split_v"]: + texture = dpg.load_image(os.path.join(script_dir, "assets", f"{image}.png")) + dpg.add_static_texture(width=texture[0], height=texture[1], default_value=texture[3], tag=f"{image}_texture") + with dpg.window(tag="Primary Window"): with dpg.group(horizontal=True): # Left panel - Data tree @@ -147,16 +154,17 @@ class MainController: # Right panel - Plots and timeline with dpg.group(tag="right_panel"): - with dpg.child_window(label="Plot Window", border=True, height=-(30 + 13 * self.scale), tag="main_plot_area"): + with dpg.child_window(label="Plot Window", border=True, height=-(32 + 13 * self.scale), tag="main_plot_area"): self.plot_layout_manager.create_ui("main_plot_area") with dpg.child_window(label="Timeline", border=True): with dpg.table(header_row=False, borders_innerH=False, borders_innerV=False, borders_outerH=False, borders_outerV=False): - dpg.add_table_column(width_fixed=True, init_width_or_weight=int(50 * self.scale)) # Play button + btn_size = int(13 * self.scale) + dpg.add_table_column(width_fixed=True, init_width_or_weight=(btn_size + 8)) # Play button dpg.add_table_column(width_stretch=True) # Timeline slider dpg.add_table_column(width_fixed=True, init_width_or_weight=int(50 * self.scale)) # FPS counter with dpg.table_row(): - dpg.add_button(label="Play", tag="play_pause_button", callback=self.toggle_play_pause, width=int(50 * self.scale)) + dpg.add_image_button(texture_tag="play_texture", tag="play_pause_button", callback=self.toggle_play_pause, width=btn_size, height=btn_size) dpg.add_slider_float(tag="timeline_slider", default_value=0.0, label="", width=-1, callback=self.timeline_drag) dpg.add_text("", tag="fps_counter") with dpg.item_handler_registry(tag="plot_resize_handler"): @@ -177,12 +185,9 @@ class MainController: def toggle_play_pause(self, sender): self.playback_manager.toggle_play_pause() - label = "Pause" if self.playback_manager.is_playing else "Play" - dpg.configure_item(sender, label=label) def timeline_drag(self, sender, app_data): self.playback_manager.seek(app_data) - dpg.configure_item("play_pause_button", label="Play") def update_frame(self, font): self.data_tree.update_frame(font) @@ -210,7 +215,7 @@ def main(route_to_load=None): scale = 1 with dpg.font_registry(): - default_font = dpg.add_font(os.path.join(BASEDIR, "selfdrive/assets/fonts/Inter-Regular.ttf"), int(13 * scale)) + default_font = dpg.add_font(os.path.join(BASEDIR, "selfdrive/assets/fonts/JetBrainsMono-Medium.ttf"), int(13 * scale)) dpg.bind_font(default_font) viewport_width, viewport_height = int(1200 * scale), int(800 * scale)