Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SeedSigner Icons v2 #423

Merged
merged 30 commits into from
Aug 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
40abf59
Icon font update
easyuxd Aug 3, 2023
78683e7
SeedSignerIconConstants
easyuxd Aug 4, 2023
550f576
Define SeedSignerIconConstants
easyuxd Aug 4, 2023
5ffd512
Update view.py
easyuxd Aug 4, 2023
5c90e9e
Update seedsigner-icons.otf
easyuxd Aug 4, 2023
38b5d3b
jdlcdl's modified screenshot_generator
easyuxd Aug 4, 2023
f083d40
Update psbt_views.py
easyuxd Aug 4, 2023
0e196bc
Merge branch 'dev' into seedsigner-icons-v2
easyuxd Aug 4, 2023
da5a7ef
Icon tweaks, Large button size
easyuxd Aug 5, 2023
f7f08ff
Fingerprint icon, color
easyuxd Aug 5, 2023
477a4c8
Update seed_views.py
easyuxd Aug 5, 2023
4bfbcab
Blue icon color
easyuxd Aug 5, 2023
403b386
Blue myself
easyuxd Aug 5, 2023
9ec31a2
tweaks for new easyuxd screenshots
Aug 5, 2023
045f6ca
Edits to enable running in local dev
kdmukai Aug 7, 2023
b269f8f
Update README.md
kdmukai Aug 7, 2023
1ed5560
Merge pull request #1 from jdlcdl/pr_423
easyuxd Aug 7, 2023
f873dc1
Merge pull request #2 from kdmukai/pr_423_with_local_mocks
easyuxd Aug 7, 2023
3c89359
Comments for icon categories
easyuxd Aug 7, 2023
cd65820
Merge branch 'seedsigner-icons-v2' of https://github.com/easyuxd/seed…
easyuxd Aug 7, 2023
2fe0f3f
test suite working
Aug 7, 2023
2690d4d
Merge pull request #3 from jdlcdl/easyuxd_pr3
easyuxd Aug 8, 2023
9368d23
Icons v2.1, color edits
easyuxd Aug 8, 2023
54ae0d7
Update components.py
easyuxd Aug 8, 2023
f6c1152
Update seedsigner-icons.otf
easyuxd Aug 8, 2023
8bb6d25
Color constants clean-up
easyuxd Aug 8, 2023
092445b
More color constants cleanup
easyuxd Aug 8, 2023
10202bd
Update components.py
easyuxd Aug 8, 2023
b16c0ee
Reverted cursor color
easyuxd Aug 8, 2023
d27e9e3
Merge branch 'dev' into seedsigner-icons-v2
easyuxd Aug 8, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ src/seedsigner/models/settings_definition.json
.idea
*.mo
.coverage
seedsigner-screenshots
133 changes: 74 additions & 59 deletions src/seedsigner/gui/components.py
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,19 @@ class GUIConstants:

BACKGROUND_COLOR = "black"
WARNING_COLOR = "#FFD60A"
DIRE_WARNING_COLOR = "red"
SUCCESS_COLOR = "#00dd00"
BITCOIN_ORANGE = "#ff9416"
ACCENT_COLOR = "orange"
TESTNET_COLOR = "#00f100"
REGTEST_COLOR = "#00caf1"
DIRE_WARNING_COLOR = "#FF453A"
SUCCESS_COLOR = "#30D158"
INFO_COLOR = "#0084FF"
ACCENT_COLOR = "#FF9F0A"
BITCOIN_ORANGE = "#FF9416"
TESTNET_COLOR = "#00F100"
REGTEST_COLOR = "#00CAF1"

ICON_FONT_NAME__FONT_AWESOME = "Font_Awesome_6_Free-Solid-900"
ICON_FONT_NAME__SEEDSIGNER = "seedsigner-glyphs"
ICON_FONT_NAME__SEEDSIGNER = "seedsigner-icons"
ICON_FONT_SIZE = 22
ICON_INLINE_FONT_SIZE = 24
ICON_LARGE_BUTTON_SIZE = 36
ICON_LARGE_BUTTON_SIZE = 48
ICON_PRIMARY_SCREEN_SIZE = 50

TOP_NAV_TITLE_FONT_NAME = "OpenSans-SemiBold"
Expand All @@ -43,23 +44,23 @@ class GUIConstants:
BODY_FONT_SIZE = 17
BODY_FONT_MAX_SIZE = TOP_NAV_TITLE_FONT_SIZE
BODY_FONT_MIN_SIZE = 15
BODY_FONT_COLOR = "#f8f8f8"
BODY_FONT_COLOR = "#FCFCFC"
BODY_LINE_SPACING = COMPONENT_PADDING

FIXED_WIDTH_FONT_NAME = "Inconsolata-Regular"
FIXED_WIDTH_EMPHASIS_FONT_NAME = "Inconsolata-SemiBold"

LABEL_FONT_SIZE = BODY_FONT_MIN_SIZE
LABEL_FONT_COLOR = "#777"
LABEL_FONT_COLOR = "#B3B3B3"

BUTTON_FONT_NAME = "OpenSans-SemiBold"
BUTTON_FONT_SIZE = 18
BUTTON_FONT_COLOR = "#e8e8e8"
BUTTON_BACKGROUND_COLOR = "#2c2c2c"
BUTTON_FONT_COLOR = "#FCFCFC"
BUTTON_BACKGROUND_COLOR = "#2C2C2C"
BUTTON_HEIGHT = 32
BUTTON_SELECTED_FONT_COLOR = "black"
BUTTON_SELECTED_FONT_COLOR = BACKGROUND_COLOR

NOTIFICATION_COLOR = "#00f100"
NOTIFICATION_COLOR = "#00F100"



Expand All @@ -69,13 +70,8 @@ class FontAwesomeIconConstants:
ANGLE_RIGHT = "\uf105"
ANGLE_UP = "\uf106"
CAMERA = "\uf030"
CARET_DOWN = "\uf0d7"
CARET_LEFT = "\uf0d9"
CARET_RIGHT = "\uf0da"
CARET_UP = "\uf0d8"
CHEVRON_UP = "\uf077"
CHEVRON_DOWN = "\uf078"
SOLID_CIRCLE_CHECK = "\uf058"
CIRCLE = "\uf111"
CIRCLE_CHEVRON_RIGHT = "\uf138"
DICE = "\uf522"
Expand All @@ -85,46 +81,65 @@ class FontAwesomeIconConstants:
DICE_FOUR = "\uf524"
DICE_FIVE = "\uf523"
DICE_SIX = "\uf526"
GEAR = "\uf013"
KEY = "\uf084"
KEYBOARD = "\uf11c"
LOCK = "\uf023"
MAP = "\uf279"
PAPER_PLANE = "\uf1d8"
PEN = "\uf304"
PLUS = "+"
POWER_OFF = "\uf011"
ROTATE_RIGHT = "\uf2f9"
SCREWDRIVER_WRENCH = "\uf7d9"
SQUARE = "\uf0c8"
SQUARE_CARET_DOWN = "\uf150"
SQUARE_CARET_LEFT = "\uf191"
SQUARE_CARET_RIGHT = "\uf152"
SQUARE_CARET_UP = "\uf151"
SQUARE_CHECK = "\uf14a"
TRIANGLE_EXCLAMATION = "\uf071"
UNLOCK = "\uf09c"
QRCODE = "\uf029"
X = "\u0058"
SDCARD = "\uf7c2"


class SeedSignerCustomIconConstants:
LARGE_CHEVRON_LEFT = "\ue900"
SMALL_CHEVRON_RIGHT = "\ue901"
PAGE_UP = "\ue903"
PAGE_DOWN = "\ue902"
PLUS = "\ue904"
CIRCLE_CHECK = "\ue907"
CIRCLE_EXCLAMATION = "\ue908"
CIRCLE_X = "\ue909"
FINGERPRINT = "\ue90a"
PATH = "\ue90b"
BITCOIN_LOGO_STRAIGHT = "\ue90c"
BITCOIN_LOGO_TILTED = "\ue90d"

MIN_VALUE = LARGE_CHEVRON_LEFT
MAX_VALUE = BITCOIN_LOGO_TILTED
class SeedSignerIconConstants:
# Menu icons
SCAN = "\ue900"
SEEDS = "\ue901"
SETTINGS = "\ue902"
TOOLS = "\ue903"

# Utility icons
BACK = "\ue904"
CHECK = "\ue905"
CHECKBOX = "\ue906"
CHECKBOX_SELECTED = "\ue907"
CHEVRON_DOWN = "\ue908"
CHEVRON_LEFT = "\ue909"
CHEVRON_RIGHT = "\ue90a"
CHEVRON_UP = "\ue90b"
CLOSE = "\ue90c"
PAGE_DOWN = "\ue90d"
PAGE_UP = "\ue90e"
PLUS = "\ue90f"
POWER = "\ue910"
RESTART = "\ue911"

# Messaging icons
ERROR = "\ue912"
SUCCESS = "\ue913"
WARNING = "\ue914"

# Informational icons
ADDRESS = "\ue915"
CHANGE = "\ue916"
DERIVATION = "\ue917"
FEE = "\ue918"
FINGERPRINT = "\ue919"
PASSPHRASE = "\ue91a"

# Misc icons
BITCOIN = "\ue91b"
BITCOIN_ALT = "\ue91c"
BRIGHTNESS = "\ue91d"
MICROSD = "\ue91e"
QRCODE = "\ue91f"
SDCARD = "\ue920"

MIN_VALUE = SCAN
MAX_VALUE = QRCODE



Expand Down Expand Up @@ -425,14 +440,14 @@ def render(self):
class Icon(BaseComponent):
screen_x: int = 0
screen_y: int = 0
icon_name: str = SeedSignerCustomIconConstants.BITCOIN_LOGO_TILTED
icon_name: str = SeedSignerIconConstants.BITCOIN_ALT
icon_size: int = GUIConstants.ICON_FONT_SIZE
icon_color: str = GUIConstants.BODY_FONT_COLOR

def __post_init__(self):
super().__post_init__()

if SeedSignerCustomIconConstants.MIN_VALUE <= self.icon_name and self.icon_name <= SeedSignerCustomIconConstants.MAX_VALUE:
if SeedSignerIconConstants.MIN_VALUE <= self.icon_name and self.icon_name <= SeedSignerIconConstants.MAX_VALUE:
self.icon_font = Fonts.get_font(GUIConstants.ICON_FONT_NAME__SEEDSIGNER, self.icon_size, file_extension="otf")
else:
self.icon_font = Fonts.get_font(GUIConstants.ICON_FONT_NAME__FONT_AWESOME, self.icon_size, file_extension="otf")
Expand Down Expand Up @@ -501,7 +516,7 @@ def __post_init__(self):
canvas=self.canvas,
text=self.label_text,
font_size=GUIConstants.BODY_FONT_SIZE - 2,
font_color="#666",
font_color=GUIConstants.LABEL_FONT_COLOR,
edge_padding=0,
is_text_centered=self.is_text_centered if not self.icon_name else False,
auto_line_break=False,
Expand Down Expand Up @@ -863,7 +878,7 @@ def __post_init__(self):
btc_icon = Icon(
image_draw=draw,
canvas=self.paste_image,
icon_name=SeedSignerCustomIconConstants.BITCOIN_LOGO_TILTED,
icon_name=SeedSignerIconConstants.BITCOIN_ALT,
icon_color=btc_color,
icon_size=self.icon_size,
screen_x=0,
Expand Down Expand Up @@ -951,7 +966,7 @@ def __post_init__(self):
btc_icon = Icon(
image_draw=draw,
canvas=self.paste_image,
icon_name=SeedSignerCustomIconConstants.BITCOIN_LOGO_TILTED,
icon_name=SeedSignerIconConstants.BITCOIN_ALT,
icon_color=btc_color,
icon_size=self.icon_size,
screen_x=0,
Expand Down Expand Up @@ -1207,8 +1222,8 @@ class CheckedSelectionButton(Button):

def __post_init__(self):
self.is_text_centered = False
self.icon_name = FontAwesomeIconConstants.SOLID_CIRCLE_CHECK
self.icon_color = "#00dd00"
self.icon_name = SeedSignerIconConstants.CHECK
self.icon_color = GUIConstants.SUCCESS_COLOR
super().__post_init__()

if not self.is_checked:
Expand All @@ -1226,10 +1241,10 @@ class CheckboxButton(Button):
def __post_init__(self):
self.is_text_centered = False
if self.is_checked:
self.icon_name = FontAwesomeIconConstants.SQUARE_CHECK
self.icon_color = "#00dd00"
self.icon_name = SeedSignerIconConstants.CHECKBOX_SELECTED
self.icon_color = GUIConstants.SUCCESS_COLOR
else:
self.icon_name = FontAwesomeIconConstants.SQUARE
self.icon_name = SeedSignerIconConstants.CHECKBOX
self.icon_color = GUIConstants.BODY_FONT_COLOR
super().__post_init__()

Expand Down Expand Up @@ -1268,7 +1283,7 @@ class TopNav(BaseComponent):
icon_color: str = GUIConstants.BODY_FONT_COLOR
font_name: str = GUIConstants.TOP_NAV_TITLE_FONT_NAME
font_size: int = GUIConstants.TOP_NAV_TITLE_FONT_SIZE
font_color: str = "#fcfcfc"
font_color: str = GUIConstants.BODY_FONT_COLOR
show_back_button: bool = True
show_power_button: bool = False
is_selected: bool = False
Expand All @@ -1283,7 +1298,7 @@ def __post_init__(self):

if self.show_back_button:
self.left_button = IconButton(
icon_name=SeedSignerCustomIconConstants.LARGE_CHEVRON_LEFT,
icon_name=SeedSignerIconConstants.BACK,
icon_size=GUIConstants.ICON_INLINE_FONT_SIZE,
screen_x=GUIConstants.EDGE_PADDING,
screen_y=GUIConstants.EDGE_PADDING,
Expand All @@ -1293,7 +1308,7 @@ def __post_init__(self):

if self.show_power_button:
self.right_button = IconButton(
icon_name=FontAwesomeIconConstants.POWER_OFF,
icon_name=SeedSignerIconConstants.POWER,
icon_size=GUIConstants.ICON_INLINE_FONT_SIZE,
screen_x=self.width - GUIConstants.TOP_NAV_BUTTON_SIZE - GUIConstants.EDGE_PADDING,
screen_y=GUIConstants.EDGE_PADDING,
Expand Down
12 changes: 6 additions & 6 deletions src/seedsigner/gui/screens/psbt_screens.py
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
from seedsigner.models.threads import BaseThread

from .screen import ButtonListScreen, WarningScreen
from ..components import (BtcAmount, Button, Icon, FontAwesomeIconConstants, IconTextLine, FormattedAddress, GUIConstants, Fonts, SeedSignerCustomIconConstants, TextArea,
from ..components import (BtcAmount, Button, Icon, FontAwesomeIconConstants, IconTextLine, FormattedAddress, GUIConstants, Fonts, SeedSignerIconConstants, TextArea,
calc_bezier_curve, linear_interp)


Expand Down Expand Up @@ -655,8 +655,8 @@ def __post_init__(self):
# Adjust the vertical spacing
screen_y -= GUIConstants.COMPONENT_PADDING
self.components.append(IconTextLine(
icon_name=SeedSignerCustomIconConstants.FINGERPRINT,
icon_color="blue",
icon_name=SeedSignerIconConstants.FINGERPRINT,
icon_color=GUIConstants.INFO_COLOR,
value_text=f"""{"Multisig" if self.is_multisig else self.fingerprint}: {"Change" if self.is_change_derivation_path else "Addr"} #{self.derivation_path_addr_index}""",
is_text_centered=False,
screen_x=GUIConstants.EDGE_PADDING,
Expand All @@ -665,8 +665,8 @@ def __post_init__(self):

if self.is_change_addr_verified:
self.components.append(IconTextLine(
icon_name=SeedSignerCustomIconConstants.CIRCLE_CHECK,
icon_color="#00dd00",
icon_name=SeedSignerIconConstants.SUCCESS,
icon_color=GUIConstants.SUCCESS_COLOR,
value_text="Address verified!",
is_text_centered=False,
screen_x=GUIConstants.EDGE_PADDING,
Expand All @@ -685,7 +685,7 @@ def __post_init__(self):

icon = Icon(
icon_name=FontAwesomeIconConstants.PAPER_PLANE,
icon_color=GUIConstants.SUCCESS_COLOR,
icon_color=GUIConstants.INFO_COLOR,
icon_size=GUIConstants.ICON_LARGE_BUTTON_SIZE,
screen_y=self.top_nav.height + GUIConstants.COMPONENT_PADDING
)
Expand Down
17 changes: 9 additions & 8 deletions src/seedsigner/gui/screens/screen.py
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
from seedsigner.models.settings import SettingsConstants

from ..components import (FontAwesomeIconConstants, GUIConstants, BaseComponent, Button, Icon, IconButton,
LargeIconButton, SeedSignerCustomIconConstants, TopNav, TextArea, load_image, ToastOverlay)
LargeIconButton, SeedSignerIconConstants, TopNav, TextArea, load_image, ToastOverlay,
Fonts)

from seedsigner.hardware.buttons import HardwareButtonsConstants, HardwareButtons

Expand Down Expand Up @@ -690,7 +691,7 @@ def add_brightness_tips(self, image: Image.Image) -> None:
canvas=rectangle,
screen_x=GUIConstants.EDGE_PADDING*2 + 1,
screen_y=GUIConstants.COMPONENT_PADDING + 4, # +4 fudge factor to account for where the chevron is drawn relative to baseline
icon_name=FontAwesomeIconConstants.CHEVRON_UP,
icon_name=SeedSignerIconConstants.CHEVRON_UP,
icon_size=GUIConstants.BODY_FONT_SIZE,
)
chevron_up_icon.render()
Expand All @@ -700,7 +701,7 @@ def add_brightness_tips(self, image: Image.Image) -> None:
canvas=rectangle,
screen_x=chevron_up_icon.screen_x,
screen_y=chevron_up_icon.screen_y + chevron_up_icon.icon_size + GUIConstants.BODY_LINE_SPACING,
icon_name=FontAwesomeIconConstants.CHEVRON_DOWN,
icon_name=SeedSignerIconConstants.CHEVRON_DOWN,
icon_size=chevron_up_icon.icon_size,
)
chevron_down_icon.render()
Expand Down Expand Up @@ -822,7 +823,7 @@ def _run(self):
@dataclass
class LargeIconStatusScreen(ButtonListScreen):
title: str = "Success!"
status_icon_name: str = SeedSignerCustomIconConstants.CIRCLE_CHECK
status_icon_name: str = SeedSignerIconConstants.SUCCESS
status_icon_size: int = GUIConstants.ICON_PRIMARY_SCREEN_SIZE
status_color: str = GUIConstants.SUCCESS_COLOR
status_headline: str = "Success!" # The colored text under the large icon
Expand Down Expand Up @@ -946,7 +947,7 @@ def __post_init__(self):
@dataclass
class WarningScreen(WarningEdgesMixin, LargeIconStatusScreen):
title: str = "Caution"
status_icon_name: str = SeedSignerCustomIconConstants.CIRCLE_EXCLAMATION
status_icon_name: str = SeedSignerIconConstants.WARNING
status_color: str = "yellow"
status_headline: str = "Privacy Leak!" # The colored text under the alert icon

Expand Down Expand Up @@ -1057,7 +1058,7 @@ def __post_init__(self):

# Render the right button panel (only has a Key3 "Save" button)
self.save_button = IconButton(
icon_name=FontAwesomeIconConstants.SOLID_CIRCLE_CHECK,
icon_name=SeedSignerIconConstants.CHECK,
icon_color=GUIConstants.SUCCESS_COLOR,
width=right_panel_buttons_width,
screen_x=hw_button_x,
Expand Down Expand Up @@ -1240,15 +1241,15 @@ def _render(self):
if self.action == MicroSD.ACTION__REMOVED:

self.toast = ToastOverlay(
icon_name=FontAwesomeIconConstants.SDCARD,
icon_name=SeedSignerIconConstants.MICROSD,
color=GUIConstants.NOTIFICATION_COLOR,
label_text="MicroSD removed"
)

elif self.action == MicroSD.ACTION__INSERTED:

self.toast = ToastOverlay(
icon_name=FontAwesomeIconConstants.SDCARD,
icon_name=SeedSignerIconConstants.MICROSD,
color=GUIConstants.NOTIFICATION_COLOR,
label_text="MicroSD inserted"
)
Expand Down
Loading