延續上一篇的內容，要接著說明控制端的 GUI app 如何編譯執行。

在開始之前，先用 ssh 連到 Raspberry Pi，然後安裝 mDNS 的套件包與修改主機名稱。

$ ssh pi@<Raspberry Pi's IP address>
$ sudo apt -y install avahi-daemon
$ sudo raspi-config

執行 sudo raspi-config 後，會看到一個文字介面的選單，選擇 System Options => Hostname，然後把 Hostname 改成 spotifypi (或是你喜歡的名字)。改完後請重新開幾。

Raspberry Pi 開啟 mDNS 的服務後，我們就可以透過 <hostname>.local 這個網址來取代 IP 位址，例如：假設 Raspberry Pi 的 IP 位址是 192.168.1.110，那我們透過 WebSocket 去控制時的 URL 是 ws://192.168.1.110:9487，現在有了 mDNS，可以把 URL 改成 ws://spotifypi.local:9487。

不過，如果控制端的電腦不是 macOS (macOS 內建 mDNS 的支持)，那還需要安裝一些軟體。在 Linux 上，需要安裝 avahi。Windows 則比較麻煩，以前在 Windows 上安裝 Apple 的 Bonjour Print Services 就可以開始用 mDNS，後來在某次的 Windows 10 更新後， Bonjour 就不能用了，還需要修改 Windows 登錄機碼才行，有興趣的人可以參考這裡。

開始來說明控制端的 GUI app。我這個 app 是用 Rust 寫的，GUI 的部分使用 gtk-rs，WebSocket 的部分使用 tokio-tungstenite。

編譯之前需要先設定開發環境，首先，先安裝 rustup。然後需要安裝 GTK 3 的開發套件包。

在 macOS 上安裝 GTK 3 的開發套件包：

$ brew install gtk+3
$ brew install gnome-icon-theme

在 Debian / Ubuntu 上安裝 GTK 3 的開發套件包：

$ sudo apt install libgtk-3-dev build-essential

在 Windows 上安裝 GTK 3 的開發環境：請參考這篇。

下載控制端 GUI app 的程式碼，並且編譯：

$ git clone https://github.com/wlelab/SpotifyPi-Control-Panel.git
$ cd SpotifyPi-Control-Panel
$ cargo build --release

編譯需要一段時間。編譯完成後，執行檔會放在 SpotifyPi-Control-Panel/target/release 目錄下。

在 Windows 上，直接執行 SpotifyPi-Control-Panel\target\release 目錄下的 spotifypi-control-panel.exe 即可，在 Linux / macOS 上，可以透過終端機執行：

$ ./target/release/spotifypi-control-panel

Windows 上的執行畫面：

Demo 影片：