소개

이것은 Maya Advent Calendar 2018 의 12월 1일 기사입니다.

(잠깐 시간이 걸리지 않고, 스쿠쇼가 적어서 미안해. 나중에 갱신합니다)

4K 모니터 사용합시다. 그리고 DPI를 올리자.



이번 사용 환경
* Windows10
* Maya2018
* PySide2

비트맵 이미지 문제

PySide (Qt)는 (기본적으로) 자동으로 DPI를 판단하고 버튼과 문자의 크기를 변경합니다.

다만 비트맵 이미지를 표시한 경우는 당연히 확대해 버리면 점이 보입니다.
충분한 해상도로 비트맵 이미지를 만들어 두는 것도 해결책의 하나입니다만, 앞으로도 4K, 8K와 DPI는 계속 올라갈 것입니다. 현시점에서는 충분한 해상도라고 해도 장래에는 부족해질 가능성이 있습니다.

알기 쉽게 아이콘 표시하고 싶네요.
아름답게 표시하기 위해 이미지 데이터는 벡터 데이터로 변경하는 시대가되었습니다.

친숙한 벡터 데이터의 대표격 "폰트"

이미지를 벡터 데이터로 변경하려고 하면 SVG로 준비할까 생각합니다. 귀찮네요.

벡터 데이터 ... 벡터 데이터 ... 아! 폰트는 벡터 데이터군요・・・확대할 수 있고.

FontAwesome이란?

웹 애플리케이션에서 자주 사용하는 아이콘이 저장된 글꼴입니다.

물론 Qt나 Maya는 표준적인 아이콘은 준비해 주고 있습니다만, 충실도가 너무 다릅니다. 감사.


Free판과 Pro판이 존재합니다만, Free판은 폰트 그 자체를 단독으로 판매하지 않는 한은 자유롭게 사용할 수 있는 라이센스가 되고 있습니다. 자세한 내용은 본가를 참조하십시오.

예

메뉴, 라디오 버튼, 체크 박스 버튼에 아이콘을 표시하려고합니다.

QtDesigner로 리소스에 포함

바탕 화면에서 사용하기 위해 글꼴 파일을 다운로드합니다.
htps : ///후타타우우소메. 코 m / 호 w - 토우 세 / 온 - 테 - sk와 p / 세츠 p / 갓찐 gs r d

리소스 편집기에서 글꼴 파일을 로드합니다. 지정하기 쉽도록 별칭을 붙여 둡시다.

글꼴 사용

여기서부터는 Python입니다.

미리 ui나 qrc를 python 파일로 변환한다든가는 이번에 생략해, 폰트의 초기화를 합니다.

리소스를 지정하여 글꼴 데이터베이스에 등록합니다.

FONT_AWESOME_SOLID = u"Font Awesome 5 Free Solid"
FONT_AWESOME_REGULAR = u"Font Awesome 5 Free Regular"
FONT_AWESOME_FAMILY_NAMES = {
    FONT_AWESOME_SOLID: u":/main/FontAwesomeSolid.otf",
    FONT_AWESOME_REGULAR: u":/main/FontAwesomeRegular.otf",
}

def main():
    for family, resource in FONT_AWESOME_FAMILY_NAMES.items():
        _font_id = QtGui.QFontDatabase.addApplicationFont(resource)
        if _font_id < 0:
            raise FontAwesomeError(
                u"Can't load FontAwesome font. ({0})".format(family))
        _family_name = QtGui.QFontDatabase.applicationFontFamilies(_font_id)[0]
        if _family_name != family:
            raise FontAwesomeError(
                u"Invalid FontAwesome family name. ({0})".format(_family_name))

각 위젯의 라벨에 할당

파이썬에서 레이블을 지정합니다.

그 때 캐릭터 코드를 직접 지정합니다. 문자 코드는 fontawesome 사이트에서 쉽게 확인할 수 있습니다.

FONT_AWESOME_CHAR_FILE_IMAGE = u"\uf1c5"
FONT_AWESOME_CHAR_ALIGN_LEFT = u"\uf036"
FONT_AWESOME_CHAR_ALIGN_CENTER = u"\uf037"
FONT_AWESOME_CHAR_ALIGN_RIGHT = u"\uf038"
FONT_AWESOME_CHAR_THUMBTACK = u"\uf08d"
FONT_AWESOME_CHAR_COGS = u"\uf085"
FONT_AWESOME_CHAR_ARROW_ALT_CIRCLE_RIGHT = u"\uf35a"

class MainWindow(MayaQWidgetBaseMixin, QtWidgets.QMainWindow, ui_main.Ui_MainWindow):
    def __init__(self, *args, **kwargs):
        super(MainWindow, self).__init__(*args, **kwargs)
        self.setupUi(self)

        # フォントアイコンを設定
        font = QtGui.QFont()
        font.setFamily(FONT_AWESOME_SOLID)

        self.action_open.setFont(font)
        self.action_open.setText(FONT_AWESOME_CHAR_FILE_IMAGE + u" 開く")

        self.radio_left.setFont(font)
        self.radio_left.setText(FONT_AWESOME_CHAR_ALIGN_LEFT)

        self.radio_center.setFont(font)
        self.radio_center.setText(FONT_AWESOME_CHAR_ALIGN_CENTER)

        self.radio_right.setFont(font)
        self.radio_right.setText(FONT_AWESOME_CHAR_ALIGN_RIGHT)

        self.check_flag.setFont(font)
        self.check_flag.setText(FONT_AWESOME_CHAR_THUMBTACK)

        self.button_execute.setFont(font)
        self.button_execute.setText(FONT_AWESOME_CHAR_COGS + u" " + self.button_execute.text())

완성

원래 창은 이런 낯선 상태입니다.



이런 느낌이 들었습니다. 뭔가 귀엽다.



메뉴에도 지정 가능합니다만, Maya는 메뉴에 아이콘을 표시하는 구조를 가지고 있기 때문에 그에 준하는 것이 좋을 것 같네요.

끝에

라벨에 지정할 뿐이므로, 단색으로의 표시만 생각하고 있습니다. 화려하게 하고 싶은 경우는 다른 방법으로 확실히 대응합시다.

이 방법은 간편함과 사용자에게주는 좋은 인상의 균형이 좋다고 생각합니다.

반복하지만 4K 모니터 사용합시다.