【格安】Raspberry Pi用3.5インチ液晶の実力を徹底検証

git clone https://github.com/sozoraemon/raspberry-pi-spi-lcd-mirror.git

cd raspberry-pi-spi-lcd-mirror

sudo bash install.sh

sudo reboot

mkdir -p ~/.config/labwc

echo '( sleep 3; wlr-randr --output NOOP-1 --custom-mode 960x640 ) &' >> ~/.config/labwc/autostart

sudo reboot

sudo apt install -y fcitx5-mozc

Reboot now? [Y/n]:

sudo spi-rotate 270

sudo apt update

sudo apt install -y fonts-noto-cjk

import pygame
import sys
from pathlib import Path
from datetime import datetime, timedelta

# =========================================================
# 表示データ（サンプルデータ）
# =========================================================

CHANGE_VALUE = 1853.13
OPEN_VALUE = 66339.85
HIGH_VALUE = 66441.77
LOW_VALUE = 63721.55

# 試験用（時間）
TIME_OFFSET_HOURS = 0

# =========================================================
# 画面設定
# =========================================================

pygame.init()

WIDTH = 960
HEIGHT = 640

FULLSCREEN = True

if FULLSCREEN:
    screen = pygame.display.set_mode(
        (WIDTH, HEIGHT),
        pygame.FULLSCREEN
    )
    pygame.mouse.set_visible(False)

else:
    screen = pygame.display.set_mode(
        (WIDTH, HEIGHT)
    )
    pygame.mouse.set_visible(True)

pygame.display.set_caption("日経平均株価")
pygame.mouse.set_visible(False)

clock = pygame.time.Clock()


# =========================================================
# 色設定
# =========================================================

BLACK = (4, 6, 9)
WHITE = (248, 248, 248)

HEADER_BLUE = (0, 77, 178)
MAIN_BLUE_TOP = (16, 110, 219)
MAIN_BLUE_BOTTOM = (0, 71, 172)

VALUE_BLUE_TOP = (7, 80, 183)
VALUE_BLUE_BOTTOM = (5, 52, 137)

POSITIVE_RED_TOP = (255, 78, 71)
POSITIVE_RED_BOTTOM = (224, 43, 40)

NEGATIVE_BLUE_TOP = (54, 126, 230)
NEGATIVE_BLUE_BOTTOM = (20, 74, 167)
NEGATIVE_TEXT = (120, 255, 120)

CURRENT_BOX_TOP = (255, 255, 255)
CURRENT_BOX_BOTTOM = (226, 230, 237)

DARK_BLUE = (8, 55, 145)
SHADOW = (0, 40, 110)

BLINK_BLUE_TOP = (8, 55, 145)
BLINK_BLUE_BOTTOM = (3, 28, 90)

# =========================================================
# フォント設定
# =========================================================

FONT_PATHS = [
    Path("/usr/share/fonts/opentype/noto/NotoSansCJK-Bold.ttc"),
    Path("/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc"),
    Path("/usr/share/fonts/truetype/noto/NotoSansCJK-Bold.ttc"),
    Path("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf"),
]


def find_font_path():
    for path in FONT_PATHS:
        if path.exists():
            return str(path)

    return None


FONT_PATH = find_font_path()


def load_font(size):
    if FONT_PATH:
        return pygame.font.Font(FONT_PATH, size)

    return pygame.font.SysFont(None, size)


font_title_jp = load_font(59)
font_title_en = load_font(43)

font_current_jp = load_font(61)
font_current_en = load_font(32)

font_label_jp = load_font(42)
font_label_en = load_font(29)

font_current_value = load_font(90)
font_change_value = load_font(59)
font_detail_value = load_font(52)


# =========================================================
# 描画用関数
# =========================================================

def draw_vertical_gradient(surface, rect, top_color, bottom_color):
    """縦方向のグラデーションを描画します。"""

    x, y, width, height = rect

    for line_y in range(height):
        ratio = line_y / max(height - 1, 1)

        red = int(
            top_color[0]
            + (bottom_color[0] - top_color[0]) * ratio
        )
        green = int(
            top_color[1]
            + (bottom_color[1] - top_color[1]) * ratio
        )
        blue = int(
            top_color[2]
            + (bottom_color[2] - top_color[2]) * ratio
        )

        pygame.draw.line(
            surface,
            (red, green, blue),
            (x, y + line_y),
            (x + width - 1, y + line_y)
        )


def draw_gradient_box(
    surface,
    rect,
    top_color,
    bottom_color,
    border_color=None,
    border_width=0,
    radius=0
):
    """枠付きのグラデーションボックスを描画します。"""

    x, y, width, height = rect

    box_surface = pygame.Surface(
        (width, height),
        pygame.SRCALPHA
    )

    draw_vertical_gradient(
        box_surface,
        (0, 0, width, height),
        top_color,
        bottom_color
    )

    if radius > 0:
        mask = pygame.Surface(
            (width, height),
            pygame.SRCALPHA
        )

        pygame.draw.rect(
            mask,
            (255, 255, 255, 255),
            (0, 0, width, height),
            border_radius=radius
        )

        box_surface.blit(
            mask,
            (0, 0),
            special_flags=pygame.BLEND_RGBA_MULT
        )

    surface.blit(box_surface, (x, y))

    if border_color and border_width > 0:
        pygame.draw.rect(
            surface,
            border_color,
            rect,
            width=border_width,
            border_radius=radius
        )


def draw_text(
    text,
    font,
    color,
    position,
    anchor="topleft"
):
    """指定位置に文字を描画します。"""

    text_surface = font.render(
        text,
        True,
        color
    )

    text_rect = text_surface.get_rect()

    setattr(text_rect, anchor, position)

    screen.blit(
        text_surface,
        text_rect
    )

    return text_rect


def draw_shadow_text(
    text,
    font,
    color,
    position,
    anchor="topleft",
    shadow_offset=2
):
    """影付き文字を描画します。"""

    shadow_position = (
        position[0] + shadow_offset,
        position[1] + shadow_offset
    )

    draw_text(
        text,
        font,
        (0, 35, 95),
        shadow_position,
        anchor
    )

    return draw_text(
        text,
        font,
        color,
        position,
        anchor
    )


def format_value(value):
    return f"{value:.2f}"


def format_change(value):
    if value > 0:
        return f"+{value:.2f}"

    return f"{value:.2f}"


# =========================================================
# メイン画面
# =========================================================

def draw_screen():
    screen.fill(BLACK)
    
    global last_minute
    global blink_start

    now = datetime.now() + timedelta(hours=TIME_OFFSET_HOURS)

    # 分が変わった瞬間
    if now.minute != last_minute:
        last_minute = now.minute
        blink_start = pygame.time.get_ticks()

    # 点滅するか判定（5秒間だけ）
    blinking = (
        blink_start is not None
        and pygame.time.get_ticks() - blink_start < 5000
    )

    # 点滅状態（500msごと）
    blink_on = (
        not blinking
        or (pygame.time.get_ticks() // 500) % 2 == 0
    )
    
    # -----------------------------------------------------
    # 上部タイトル
    # -----------------------------------------------------

    draw_text(
        "日経平均株価",
        font_title_jp,
        WHITE,
        (42, -11)
    )

    draw_text(
        "Nikkei 225",
        font_title_en,
        WHITE,
        (450, 11)
    )

    # -----------------------------------------------------
    # 青い背景
    # -----------------------------------------------------

    main_rect = (0, 85, 960, 555)

    draw_gradient_box(
        screen,
        main_rect,
        MAIN_BLUE_TOP,
        MAIN_BLUE_BOTTOM,
        radius=5
    )

    # -----------------------------------------------------
    # 現在値ラベル
    # -----------------------------------------------------

    draw_shadow_text(
        "現在値",
        font_current_jp,
        WHITE,
        (40, 93)
    )

    draw_text(
        "Current",
        font_current_en,
        WHITE,
        (42, 170)
    )

    # -----------------------------------------------------
    # 現在値ボックス
    # -----------------------------------------------------

    current_rect = (414, 121, 504, 144)

    pygame.draw.rect(
        screen,
        SHADOW,
        (
            current_rect[0] + 4,
            current_rect[1] + 5,
            current_rect[2],
            current_rect[3]
        )
    )

    if blink_on:
        current_top = CURRENT_BOX_TOP
        current_bottom = CURRENT_BOX_BOTTOM
        current_text_color = DARK_BLUE
    else:
        current_top = BLINK_BLUE_TOP
        current_bottom = BLINK_BLUE_BOTTOM
        current_text_color = WHITE

    draw_gradient_box(
        screen,
        current_rect,
        current_top,
        current_bottom,
        border_color=DARK_BLUE,
        border_width=3
    )

    current_time = (
        datetime.now()
        + timedelta(hours=TIME_OFFSET_HOURS)
    ).strftime("%H:%M.%S")

    draw_text(
        current_time,
        font_current_value,
        current_text_color,
        (898, 193),
        anchor="midright"
    )

    # -----------------------------------------------------
    # 左側ラベル
    # -----------------------------------------------------

    rows = [
        ("前日比", "Change", 329),
        ("始値", "Open", 421),
        ("高値", "High", 511),
        ("安値", "Low", 599),
    ]

    for japanese, english, center_y in rows:
        draw_shadow_text(
            japanese,
            font_label_jp,
            WHITE,
            (54, center_y),
            anchor="midleft"
        )

        draw_text(
            english,
            font_label_en,
            WHITE,
            (217, center_y + 4),
            anchor="midleft"
        )

    # -----------------------------------------------------
    # 前日比ボックス
    # -----------------------------------------------------

    change_rect = (530, 281, 388, 96)

    if blink_on:

        if CHANGE_VALUE >= 0:
            change_top = POSITIVE_RED_TOP
            change_bottom = POSITIVE_RED_BOTTOM
        else:
            change_top = NEGATIVE_BLUE_TOP
            change_bottom = NEGATIVE_BLUE_BOTTOM

    else:
        change_top = BLINK_BLUE_TOP
        change_bottom = BLINK_BLUE_BOTTOM

    pygame.draw.rect(
        screen,
        SHADOW,
        (
            change_rect[0] + 4,
            change_rect[1] + 5,
            change_rect[2],
            change_rect[3]
        )
    )

    draw_gradient_box(
        screen,
        change_rect,
        change_top,
        change_bottom,
        border_color=DARK_BLUE,
        border_width=3
    )

    if CHANGE_VALUE >= 0:
        change_text_color = WHITE
    else:
        change_text_color = NEGATIVE_TEXT

    draw_text(
        format_change(CHANGE_VALUE),
        font_change_value,
        change_text_color,
        (899, 329),
        anchor="midright"
    )

    # -----------------------------------------------------
    # 始値・高値・安値ボックス
    # -----------------------------------------------------

    detail_rect = (530, 388, 388, 241)

    draw_gradient_box(
        screen,
        detail_rect,
        VALUE_BLUE_TOP,
        VALUE_BLUE_BOTTOM
    )

    detail_values = [
        (OPEN_VALUE, 421),
        (HIGH_VALUE, 511),
        (LOW_VALUE, 599),
    ]

    for value, center_y in detail_values:
        draw_text(
            format_value(value),
            font_detail_value,
            WHITE,
            (900, center_y),
            anchor="midright"
        )


# =========================================================
# メインループ
# =========================================================
last_minute = datetime.now().minute
blink_start = None

while True:

    for event in pygame.event.get():

        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

        if event.type == pygame.KEYDOWN:

            if event.key == pygame.K_ESCAPE:
                pygame.quit()
                sys.exit()

    draw_screen()

    pygame.display.flip()
    clock.tick(20)