はじめに

この記事は Slint Advent Calendar 2024 ７日目の記事になります。

昨日は @hermit4 さんによる Slint言語入門(1) 概要でした。

.slint の基礎がまとまっていて必見ですね。

本日は、先月 EdgeTech+ 2024 において合同会社シグナルスロットブースで展示したデモの中から、選挙の投票端末のデモを動かした時の作業をまとめた記事になります。

ハードウェア

Raspberry Pi 5 / 4GB
ラズパイ5に最適なACアダプター 5.1V/5.0A USB-PD Type-Cコネクタ出力
7.9インチタッチスクリーン液晶（Raspberry Pi用）
タッチ液晶
SD カード(128GB くらい)

OS

Raspberry Pi OS (bookworm) 64 bit

初期設定

$ sudo apt update  
$ sudo apt upgrade

デフォルトの GUI を起動しないようにする
日本語のロケールを使えるようにする

$ sudo raspi-config

1 System Options
- S5 Boot / Auto Login
  - B1 Console
5 Localisation Options
- L1 Locale
  - [*] ja_JP.UTF-8 UTF-8
  - ja_JP.UTF-8

$ sudo systemctl disable cups  
$ sudo systemctl disable bluetooth

スワップファイルの設定

Rust のビルド（リンク時）にメモリをたくさん使うのでスワップを増やしておきます。
8GB 版ではこの作業は必要ありませんでしたが、4GB 版では必要でした。

$ sudo vi /etc/dphys-swapfile

CONF\_SWAPSIZE=2000

sudo reboot

フォント

$ wget https://github.com/adobe-fonts/source-han-sans/releases/download/2.004R/SourceHanSansJ.zip  
$ unzip SourceHanSansJ.zip  
$ mkdir -p ~/.fonts  
$ mv OTF/Japanese/*.otf ~/.fonts/  
$ fc-cache -v -f ~/.fonts  
$ rm -rf SourceHanSansJ.zip OTF/

ソフトウェア

Rust

https://www.rust-lang.org/ja/tools/install

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh  
$ . "$HOME/.cargo/env"

Slint

https://github.com/slint-ui/slint/blob/master/docs/building.md

依存パッケージのインストール

$ sudo apt install libssl-dev  
$ sudo apt install libinput-dev libfontconfig-dev libgbm-dev libxkbcommon-dev libudev-dev libseat-dev git

slint のソースコードをクローン

$ git clone https://github.com/slint-ui/slint
$ cd slint  
$ git show
commit 10de1e664be2d1328b1e5e780897af497d78c077 (HEAD -> master, origin/master, origin/HEAD)
Author: Tobias Hunger <tobias.hunger@slint.dev>
Date:   Tue Oct 22 14:02:16 2024 +0200

    live-preview: Default to "native" as expected (if that is available!)

diff --git a/tools/lsp/preview/ui.rs b/tools/lsp/preview/ui.rs
index e7f5b07c4..330af889b 100644
--- a/tools/lsp/preview/ui.rs
+++ b/tools/lsp/preview/ui.rs
@@ -35,7 +35,12 @@ pub fn create_ui(style: String, experimental: bool) -> Result<PreviewUi, Platfor
     let style = if known_styles.contains(&style.as_str()) {
         style
     } else {
-        known_styles.first().map(|s| s.to_string()).unwrap_or_default()
+        known_styles
+            .iter()
+            .find(|x| **x == "native")
+            .or_else(|| known_styles.first())
+            .map(|s| s.to_string())
+            .unwrap_or_default()
     };

     let style_model = Rc::new({

EdgeTech+ の準備をはじめた１ヶ月半前時点の master で試しています。

X11 や Wayland ではなく、linuxkms で表示をするために雑に以下の変更をしました。

（meta-slint ではもう少しいい方法をとっている気がする）

diff --git a/Cargo.toml b/Cargo.toml
index 4422c7751..28dc9f002 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -70,28 +70,11 @@ members = [
 default-members = [
     'api/rs/build',
     'api/rs/slint',
-    'examples/gallery',
-    'examples/memory',
-    'examples/printerdemo_old/rust',
-    'examples/printerdemo/rust',
-    'examples/slide_puzzle',
-    'examples/todo/rust',
-    'examples/virtual_keyboard/rust',
-    'examples/carousel/rust',
-    'examples/energy-monitor',
-    'internal/backends/winit',
-    'internal/backends/qt',
-    'internal/backends/selector',
+    'internal/backends/linuxkms',
     'internal/compiler',
     'internal/core',
     'internal/interpreter',
-    'tests/doctests',
-    'tests/driver/interpreter',
-    'tests/driver/rust',
-    'tests/screenshots',
     'tools/compiler',
-    'tools/figma_import',
-    'tools/lsp',
     'tools/viewer',
 ]

diff --git a/internal/backends/linuxkms/Cargo.toml b/internal/backends/linuxkms/Cargo.toml
index f0486d085..e31beaf95 100644
--- a/internal/backends/linuxkms/Cargo.toml
+++ b/internal/backends/linuxkms/Cargo.toml
@@ -23,8 +23,7 @@ renderer-femtovg = ["i-slint-renderer-femtovg", "drm", "gbm", "glutin", "raw-win
 renderer-software = ["i-slint-core/software-renderer-systemfonts", "drm", "dep:bytemuck", "dep:memmap2"]
 libseat = ["dep:libseat"]

-#default = ["renderer-skia", "renderer-femtovg"]
-default = []
+default = ["renderer-skia", "renderer-femtovg", "renderer-skia-opengl"]

 [dependencies]
 i-slint-core = { workspace = true, features = ["default", "image-decoders", "svg"] }
diff --git a/internal/backends/selector/Cargo.toml b/internal/backends/selector/Cargo.toml
index 38528ae24..95f493306 100644
--- a/internal/backends/selector/Cargo.toml
+++ b/internal/backends/selector/Cargo.toml
@@ -38,7 +38,7 @@ raw-window-handle-06 = ["i-slint-core/raw-window-handle-06", "i-slint-backend-wi
 system-testing = ["i-slint-backend-testing/system-testing"]

 # note that default enable the i-slint-backend-qt, but not its enable feature
-default = ["i-slint-backend-qt", "backend-winit"]
+default = ["i-slint-backend-linuxkms"]

 [dependencies]
 cfg-if = "1"

slint のビルド

.slint ファイルを表示するのに必要な slint-viewer をビルドします。

$ export SLINT_BACKEND=linuxkms-skia-opengl  
$ cargo build --release --bin slint-viewer

Demo

$ git clone https://github.com/signal-slot/votingmachine.git --branch v1.0.0
$ /home/pi/slint/target/release/slint-viewer ./votingmachine/slint/main.slint

自動起動

$ sudo vi /etc/systemd/system/votingmachine.service

[Unit]
Description="Slint Service"
After=getty@tty1.service

[Service]
Type=simple
User=pi
WorkingDirectory=/home/pi/carpark/slint/
ExecStart=/home/pi/slint/target/release/slint-viewer /home/pi/carpark/slint/main.slint
Environment=SLINT_BACKEND=linuxkms-skia-opengl
Restart=always

[Install]
WantedBy=multi-user.target

$ sudo systemctl daemon-reload  
$ sudo systemctl enable votingmachine.service

おわりに

今回は Raspberry Pi OS 上に Rust をインストールし、Slint をビルドし、.slint ファイルを表示しました。

シンプルな UI なので、X11 も Wayland も使わずに KMS でフルスクリーンで表示しているため描画の負荷が低い設計になっています。

とりあえず試して、こうやったら動いた、というレベルなので、細かいところが怪しいので、それは今後調べることにします。

明日は @hermit4 さんの「Slint言語入門(2)」です。お楽しみにー