remove custom size for custom style so that text can scale, scale the remaining node icons from the node picker, scale node's name

This commit is contained in:
Huy Pham 2020-02-12 14:13:28 -08:00
parent 7fbbfa8c63
commit 3a466fd463
5 changed files with 50 additions and 56 deletions

View file

@ -23,6 +23,7 @@ class Application(tk.Frame):
NodeUtils.setup() NodeUtils.setup()
self.fonts_size = {name: font.nametofont(name)["size"] for name in font.names()} self.fonts_size = {name: font.nametofont(name)["size"] for name in font.names()}
self.icon_text_font = font.Font(family="TkIconFont", size=12)
# widgets # widgets
self.menubar = None self.menubar = None

View file

@ -81,7 +81,6 @@ class PreferencesDialog(Dialog):
value=1, value=1,
orient=tk.HORIZONTAL, orient=tk.HORIZONTAL,
variable=self.gui_scale, variable=self.gui_scale,
command=self.scale_adjust,
) )
scale.grid(row=0, column=0, sticky="ew") scale.grid(row=0, column=0, sticky="ew")
entry = ttk.Entry( entry = ttk.Entry(
@ -113,19 +112,28 @@ class PreferencesDialog(Dialog):
preferences["gui3d"] = self.gui3d.get() preferences["gui3d"] = self.gui3d.get()
preferences["theme"] = self.theme.get() preferences["theme"] = self.theme.get()
self.app.save_config() self.app.save_config()
self.scale_adjust()
self.destroy() self.destroy()
def scale_adjust(self, scale: str): def scale_adjust(self):
self.gui_scale.set(round(self.gui_scale.get(), 2)) self.gui_scale.set(round(self.gui_scale.get(), 2))
app_scale = self.gui_scale.get() app_scale = self.gui_scale.get()
self.app.canvas.app_scale = app_scale self.app.canvas.app_scale = app_scale
self.app.master.tk.call("tk", "scaling", app_scale)
# scale fonts
scale_fonts(self.app.fonts_size, app_scale) scale_fonts(self.app.fonts_size, app_scale)
# screen_width = self.app.master.winfo_screenwidth() self.app.icon_text_font.config(size=int(12 * app_scale))
# screen_height = self.app.master.winfo_screenheight()
# scaled_width = WIDTH * app_scale # scale application widow size
# scaled_height = HEIGHT * app_scale screen_width = self.app.master.winfo_screenwidth()
# x = int(screen_width / 2 - scaled_width / 2) screen_height = self.app.master.winfo_screenheight()
# y = int(screen_height / 2 - scaled_height / 2) scaled_width = WIDTH * app_scale
# self.app.master.geometry(f"{int(scaled_width)}x{int(scaled_height)}+{x}+{y}") scaled_height = HEIGHT * app_scale
# x = int(screen_width / 2 - scaled_width / 2)
# self.app.toolbar.scale(app_scale) y = int(screen_height / 2 - scaled_height / 2)
self.app.master.geometry(f"{int(scaled_width)}x{int(scaled_height)}+{x}+{y}")
# scale toolbar icons and picker icons
self.app.toolbar.scale()

View file

@ -1,6 +1,5 @@
import logging import logging
import tkinter as tk import tkinter as tk
from tkinter import font
from typing import TYPE_CHECKING from typing import TYPE_CHECKING
import grpc import grpc
@ -42,14 +41,13 @@ class CanvasNode:
self.id = self.canvas.create_image( self.id = self.canvas.create_image(
x, y, anchor=tk.CENTER, image=self.image, tags=tags.NODE x, y, anchor=tk.CENTER, image=self.image, tags=tags.NODE
) )
text_font = font.Font(family="TkIconFont", size=12)
label_y = self._get_label_y() label_y = self._get_label_y()
self.text_id = self.canvas.create_text( self.text_id = self.canvas.create_text(
x, x,
label_y, label_y,
text=self.core_node.name, text=self.core_node.name,
tags=tags.NODE_NAME, tags=tags.NODE_NAME,
font=text_font, font=self.app.icon_text_font,
fill="#0000CD", fill="#0000CD",
) )
self.tooltip = CanvasTooltip(self.canvas) self.tooltip = CanvasTooltip(self.canvas)

View file

@ -176,27 +176,27 @@ def style_listbox(widget: tk.Widget):
def theme_change(event: tk.Event): def theme_change(event: tk.Event):
style = ttk.Style() style = ttk.Style()
style.configure(Styles.picker_button, font=("TkDefaultFont", 8, "normal")) style.configure(Styles.picker_button, font="TkSmallCaptionFont")
style.configure( style.configure(
Styles.green_alert, Styles.green_alert,
background="green", background="green",
padding=0, padding=0,
relief=tk.NONE, relief=tk.NONE,
font=("TkDefaultFont", 8, "normal"), font="TkSmallCaptionFont",
) )
style.configure( style.configure(
Styles.yellow_alert, Styles.yellow_alert,
background="yellow", background="yellow",
padding=0, padding=0,
relief=tk.NONE, relief=tk.NONE,
font=("TkDefaultFont", 8, "normal"), font="TkSmallCaptionFont",
) )
style.configure( style.configure(
Styles.red_alert, Styles.red_alert,
background="red", background="red",
padding=0, padding=0,
relief=tk.NONE, relief=tk.NONE,
font=("TkDefaultFont", 8, "normal"), font="TkSmallCaptionFont",
) )
@ -204,4 +204,7 @@ def scale_fonts(fonts_size, scale):
for name in font.names(): for name in font.names():
f = font.nametofont(name) f = font.nametofont(name)
if name in fonts_size: if name in fonts_size:
f.config(size=int(fonts_size[name] * scale)) if name == "TkSmallCaptionFont":
f.config(size=int(fonts_size[name] * scale * 8 / 9))
else:
f.config(size=int(fonts_size[name] * scale))

View file

@ -4,7 +4,6 @@ import tkinter as tk
from enum import Enum from enum import Enum
from functools import partial from functools import partial
from tkinter import messagebox, ttk from tkinter import messagebox, ttk
from tkinter.font import Font
from typing import TYPE_CHECKING, Callable from typing import TYPE_CHECKING, Callable
from core.api.grpc import core_pb2 from core.api.grpc import core_pb2
@ -50,9 +49,6 @@ class Toolbar(ttk.Frame):
self.master = app.master self.master = app.master
self.time = None self.time = None
# picker data
self.picker_font = Font(size=8)
# design buttons # design buttons
self.play_button = None self.play_button = None
self.select_button = None self.select_button = None
@ -198,9 +194,7 @@ class Toolbar(ttk.Frame):
for node_draw in NodeUtils.NODES: for node_draw in NodeUtils.NODES:
toolbar_image = icon(node_draw.image_enum) toolbar_image = icon(node_draw.image_enum)
# image = icon(node_draw.image_enum, PICKER_SIZE) # image = icon(node_draw.image_enum, PICKER_SIZE)
image = self.get_icon( image = self.get_icon(node_draw.image_enum, PICKER_SIZE)
node_draw.image_enum, PICKER_SIZE * self.app.canvas.app_scale
)
func = partial( func = partial(
self.update_button, self.update_button,
self.node_button, self.node_button,
@ -214,9 +208,7 @@ class Toolbar(ttk.Frame):
for name in sorted(self.app.core.custom_nodes): for name in sorted(self.app.core.custom_nodes):
node_draw = self.app.core.custom_nodes[name] node_draw = self.app.core.custom_nodes[name]
toolbar_image = Images.get_custom(node_draw.image_file, TOOLBAR_SIZE) toolbar_image = Images.get_custom(node_draw.image_file, TOOLBAR_SIZE)
image = Images.get_custom( image = Images.get_custom(node_draw.image_file, PICKER_SIZE)
node_draw.image_file, int(PICKER_SIZE * self.app.canvas.app_scale)
)
func = partial( func = partial(
self.update_button, self.update_button,
self.node_button, self.node_button,
@ -228,9 +220,7 @@ class Toolbar(ttk.Frame):
self.create_picker_button(image, func, self.node_picker, name) self.create_picker_button(image, func, self.node_picker, name)
# draw edit node # draw edit node
# image = icon(ImageEnum.EDITNODE, PICKER_SIZE) # image = icon(ImageEnum.EDITNODE, PICKER_SIZE)
image = self.get_icon( image = self.get_icon(ImageEnum.EDITNODE, PICKER_SIZE)
ImageEnum.EDITNODE, PICKER_SIZE * self.app.canvas.app_scale
)
self.create_picker_button( self.create_picker_button(
image, self.click_edit_node, self.node_picker, "Custom" image, self.click_edit_node, self.node_picker, "Custom"
) )
@ -386,7 +376,7 @@ class Toolbar(ttk.Frame):
self.network_picker = ttk.Frame(self.master) self.network_picker = ttk.Frame(self.master)
for node_draw in NodeUtils.NETWORK_NODES: for node_draw in NodeUtils.NETWORK_NODES:
toolbar_image = icon(node_draw.image_enum) toolbar_image = icon(node_draw.image_enum)
image = icon(node_draw.image_enum, PICKER_SIZE) image = self.get_icon(node_draw.image_enum, PICKER_SIZE)
self.create_picker_button( self.create_picker_button(
image, image,
partial( partial(
@ -433,7 +423,7 @@ class Toolbar(ttk.Frame):
] ]
for image_enum, shape_type in nodes: for image_enum, shape_type in nodes:
toolbar_image = icon(image_enum) toolbar_image = icon(image_enum)
image = icon(image_enum, PICKER_SIZE) image = self.get_icon(image_enum, PICKER_SIZE)
self.create_picker_button( self.create_picker_button(
image, image,
partial(self.update_annotation, toolbar_image, shape_type, image_enum), partial(self.update_annotation, toolbar_image, shape_type, image_enum),
@ -538,29 +528,23 @@ class Toolbar(ttk.Frame):
def click_two_node_button(self): def click_two_node_button(self):
logging.debug("Click TWONODE button") logging.debug("Click TWONODE button")
@classmethod # def scale_button(cls, button, image_enum, scale):
def scale_button(cls, button, image_enum, scale): def scale_button(self, button, image_enum):
image = icon(image_enum, int(TOOLBAR_SIZE * scale)) image = icon(image_enum, int(TOOLBAR_SIZE * self.app.canvas.app_scale))
button.config(image=image) button.config(image=image)
button.image = image button.image = image
def scale(self, scale): def scale(self):
self.scale_button(self.play_button, ImageEnum.START, scale) self.scale_button(self.play_button, ImageEnum.START)
self.scale_button(self.select_button, ImageEnum.SELECT, scale) self.scale_button(self.select_button, ImageEnum.SELECT)
self.scale_button(self.link_button, ImageEnum.LINK, scale) self.scale_button(self.link_button, ImageEnum.LINK)
self.scale_button(self.node_button, self.node_enum, scale) self.scale_button(self.node_button, self.node_enum)
self.scale_button(self.network_button, self.network_enum, scale) self.scale_button(self.network_button, self.network_enum)
self.scale_button(self.annotation_button, self.annotation_enum, scale) self.scale_button(self.annotation_button, self.annotation_enum)
self.scale_button(self.runtime_select_button, ImageEnum.SELECT, scale) self.scale_button(self.runtime_select_button, ImageEnum.SELECT)
self.scale_button(self.stop_button, ImageEnum.STOP, scale) self.scale_button(self.stop_button, ImageEnum.STOP)
self.scale_button(self.plot_button, ImageEnum.PLOT, scale) self.scale_button(self.plot_button, ImageEnum.PLOT)
self.scale_button(self.runtime_marker_button, ImageEnum.MARKER, scale) self.scale_button(self.runtime_marker_button, ImageEnum.MARKER)
self.scale_button(self.node_command_button, ImageEnum.TWONODE, scale) self.scale_button(self.node_command_button, ImageEnum.TWONODE)
self.scale_button(self.run_command_button, ImageEnum.RUN, scale) self.scale_button(self.run_command_button, ImageEnum.RUN)
# self.stop_button = None
# self.plot_button = None
# self.runtime_marker_button = None
# self.node_command_button = None
# self.run_command_button = None