# Solution: Digital Signage
:::success
**Evaluation Objectives**
* Vertial display ++as default++?
* Multiple Layouts (Fullscreen, 2 rows, etc.)
* Content Scheduler
* Content interrupt (fire、vehicle identification)
* Power control TV over ... ?
* HDMI (HDMI-CEC, libcec, cec-utils)
* RS232
* WOL: Wake On LAN
* 中文內容顯示? (跑馬燈): 目前 Ubuntu core 作業系統可顯示中文 (C.UTF-8)。
* 解法 1: TB Dashboard 透過 CSS，嵌入線上字型
* 另一可能解法: embedded browser 直接支援中文字型?
* 車辨插播 Issue ( 使用 group 切換時會有短暫延遲 )
:::
[toc]
## Ubuntu Core
* An operating system designed for the edge
* Ubuntu Core is completely snap-based
* Ubuntu Core mostly targets headless or ++kiosk-type++ devices
```bash!
$ cat /etc/issue
Ubuntu Core 22 on \4 (\l)
5giotlead-service@ubuntu:~$ cat /etc/os-release
NAME="Ubuntu Core"
VERSION="22"
ID=ubuntu-core
PRETTY_NAME="Ubuntu Core 22"
VERSION_ID="22"
HOME_URL="https://snapcraft.io/"
BUG_REPORT_URL="https://bugs.launchpad.net/snappy/"
5giotlead-service@ubuntu:~$ locale -a
C
C.utf8
POSIX
5giotlead-service@ubuntu:~$ cat /etc/default/locale
LANG="C.UTF-8"
```
## SSO (Single Sign On)
* Hardware: Media Player (**plz run ssh from the host:apr env**)
```
ssh 5giotlead-service@192.168.1.127
```
## Server (Dashkiosk CMS, Proxmox > VM: apr 192.168.1.204)
:::info
Dashkiosk is a solution to manage dashboards on multiple screens.
The server has three browser endpoints:
* ++/unassigned++ which is the default dashboard for unassigned displays,
* ++/admin++ which is the administration interface,
* ++/receiver++ which is the receiver part that a display should load.
:::
```
sudo snap install dashkiosk
```
* node process
```
star@apr:~$ sudo netstat -tupln | grep 9400
[sudo] password for star:
tcp6 0 0 :::9400 :::* LISTEN 168309/node
star@apr:~$ sudo netstat -tupln | grep 9400
tcp6 0 0 :::9400 :::* LISTEN 168309/node
star@apr:~$ ps aux | grep node
root 168309 0.0 0.4 949704 77264 ? Ssl Nov15 0:12 /snap/dashkiosk/10/bin/node /snap/dashkiosk/10/dist/server.js --configuration /var/snap/dashkiosk/10/config.json
```
* http://192.168.1.204:9400/admin
* build directory path: ``star@apr:/snap/dashkiosk/10/dist/build$``
* config file: /var/snap/dashkiosk/10/config.json
:::spoiler config.json
```
{
"environment": "production",
"port": "9400",
"db": {
"options": {
"database": "dashkiosk",
"storage": "/var/snap/dashkiosk/10/db/dashkiosk.sqlite",
"dialect": "sqlite"
}
},
"log": {
"file": "/var/snap/dashkiosk/10/dashkiosk.log"
}
}
```
:::
* log file: /var/snap/dashkiosk/10/dashkiosk.log
* [documentation](https://dashkiosk.readthedocs.io/en/latest/index.html)
* Display **name**: alphanumeric string, e.g Y27KA5, it is generated by Dashkiosk as I know.
* Display **description**: In order to do easy display management (User Naming)
### API call hands-on
> [API Docs](https://dashkiosk.readthedocs.io/en/latest/api.html)
> 可以彈性新增、刪除 Group。
> 單一 Group，可以有多個 Dashboard(s)，多個 Dashboards 輪播，可設定間隔時間。
> Display 可以彈性套用特定單一 Group。
> Displays
* GET api/display ``//list all known displays``
```
curl -X GET localhost:9400/api/display | jq .
{
"Y27KA5": {
"id": 1,
"name": "Y27KA5",
"description": "Edge MP",
"viewport": "1080x1920",
"ip": "::ffff:192.168.1.127",
"chromecast": null,
"group": 4,
"connected": true
},
"ZESI78": {
"id": 2,
"name": "ZESI78",
"description": null,
"viewport": null,
"ip": "::ffff:192.168.1.125",
"chromecast": null,
"group": 1,
"connected": false
}
}
```
## Layout service (dashboard framework)
* [smashing](https://github.com/Smashing/smashing)
* or ThingsBoard built-in ==dashboard==
## Edge Hardware (the renderer, signage player)
* ==ubuntu-frame==: A fullscreen shell based on Wayland used for embedded devices and digital signage.
* ==wpe-webkit-mir-kiosk==: In order to have a web browser running fullscreen on a display
:::info
There are three snap configuration options:
* daemon=[true|false] enables the daemon (defaults to true on Ubuntu Core and false on classic systems)
* config=<contents for frame.config>
* display=<contents for frame.display>
:::
> Install Ubuntu Frame (Debian 11)
```
$ sudo apt install snapd
$ sudo snap install core
$ sudo snap install ubuntu-frame
$ sudo snap set ubuntu-frame daemon=true
$ sudo snap get ubuntu-frame daemon
```
> Install a Web Kiosk in Ubuntu Core
```
$ sudo snap install wpe-webkit-mir-kiosk
$ sudo snap set wpe-webkit-mir-kiosk daemon=true
$ sudo snap get wpe-webkit-mir-kiosk daemon
$ sudo snap logs wpe-webkit-mir-kiosk
$ snap info wpe-webkit-mir-kiosk
name: wpe-webkit-mir-kiosk
summary: WPE Webkit in kiosk mode. Intended for mir-kiosk on embedded devices.
publisher: GLANCR labs (glancr)
store-url: https://snapcraft.io/wpe-webkit-mir-kiosk
contact: kontakt@glancr.de
license: unset
description: |
WPE Webkit [1] is an official port of the WebKit project.
This snap packages WPE, backend libraries and the cog web app container [2] in kiosk mode.
Requires the `ubuntu-frame` snap (formerly `mir-kiosk`) on Ubuntu Core, or a compatible Wayland
compositor on desktop systems. See the README [3] for limitations and options.
On Core systems, the browser is running as a service, and will be automatically restarted after
`ubuntu-frame` (or `mir-kiosk`) refreshes.
On desktop systems, the application `wpe-webkit-mir-kiosk.cog` starts the launcher in windowed
mode, suitable for testing.
From the WPE website: “WPE WebKit allows embedders to create simple and performant
systems based on Web platform technologies. It is designed with hardware
acceleration in mind, leveraging common 3D graphics APIs for best
performance.”
1: https://wpewebkit.org
2: https://github.com/Igalia/cog
3: https://gitlab.com/glancr/wpe-webkit-snap/-/blob/main/README.md
commands:
- wpe-webkit-mir-kiosk.cog
- wpe-webkit-mir-kiosk.list-websettings
services:
wpe-webkit-mir-kiosk.daemon: simple, enabled, inactive
wpe-webkit-mir-kiosk.restart-watcher: simple, enabled, active
snap-id: 01sV9tv4UTUQTU3jYsAF1gJ5qv7ZqGls
tracking: latest/stable
refresh-date: today at 16:32 CST
channels:
latest/stable: 2.38.2 2023-01-11 (90) 136MB -
latest/candidate: 2.38.5 2023-02-17 (92) 178MB -
latest/beta: 2.38.5 2023-02-17 (92) 178MB -
latest/edge: 2.38.5 2023-02-17 (92) 178MB -
installed: 2.38.2 (90) 136MB -
```
> Config (cfg file: /var/snap/ubuntu-frame/current/frame.config)
```
sudo snap set ubuntu-frame config="cursor=null"
```
> Display your website / dashboard
```
sudo snap set wpe-webkit-mir-kiosk url=http://192.168.1.204:9400/receiver
or
sudo snap set wpe-webkit-mir-kiosk url=http://192.168.1.137:4200/?username=display@5giotlead.com\&password=display
sudo snap set wpe-webkit-mir-kiosk url="http://192.168.1.111:8080/?username=display@5giotlead.com&password=display"
```
:::spoiler frame.config
```
# DO NOT EDIT THIS FILE BY HAND -- YOUR CHANGES WILL BE OVERWRITTEN
# USE 'snap set ubuntu-frame config=...' INSTEAD
# ** Options supplied through config (begin) **
# (none)
# ** Options supplied through config (end) **
# Required to run as daemon
console-provider=vt
# Virtual terminal to use for display (0 to use current)
vt=4
# Mouse pointer to use (auto|null|software)
cursor=auto
# As Frame HAS to run mesa-kms we can safely override the probe for KMS everywhere
env-hacks=MIR_MESA_KMS_DISABLE_MODESET_PROBE
# Default window title when run as Mir on X
x11-window-title=Ubuntu Frame
# System has AppArmor, try to use it
authorise-without-apparmor=false
```
:::
## FAQ & Troubleshooting
> check the ubuntu-frame log
```
sudo snap logs -n 80 ubuntu-frame
```
> Vertical display (please update display interface below accordingly)
:::spoiler (click me) show current display outputs
```!
sudo snap logs -n 200 ubuntu-frame | cut -d ' ' -f 3- | awk '/^8></{flag=1; next}; /^\[/{flag=0} flag'
```
:::
```
sudo snap set ubuntu-frame display="
layouts:
default:
cards:
- card-id: 0
VGA-1:
orientation: left"
sudo snap set ubuntu-frame display="
layouts:
default:
cards:
- card-id: 0
HDMI-A-1:
orientation: left"
```
* 因不明原因，螢幕會抓取到兩個輸出源 ( 實際連結的 HDMI 及不存在的 VGA )，導致一部分螢幕畫面被 VGA 輸入源佔據，故需將 VGA 關閉，才能正常呈現全螢幕畫面。
```
sudo snap set ubuntu-frame display="
layouts:
default:
cards:
- card-id: 0
VGA-1:
state: disabled
HDMI-A-1:
orientation: right"
```
> snap connections
```
star@gateway:~$ sudo snap list
Name Version Rev Tracking Publisher Notes
core 16-2.58.2 14784 latest/stable canonical✓ core
core20 20230126 1822 latest/stable canonical✓ base
mesa-core20 21.2.6 125 latest/stable canonical✓ -
ubuntu-frame 92-mir2.12.0 4719 latest/stable canonical✓ -
wpe-webkit-mir-kiosk 2.38.2 90 latest/stable glancr -
star@gateway:~$ sudo snap connections
Interface Plug Slot Notes
audio-playback wpe-webkit-mir-kiosk:audio-playback :audio-playback -
content[graphics-core20] ubuntu-frame:graphics-core20 mesa-core20:graphics-core20 -
content[graphics-core20] wpe-webkit-mir-kiosk:graphics-core20 mesa-core20:graphics-core20 -
hardware-observe ubuntu-frame:hardware-observe :hardware-observe -
network wpe-webkit-mir-kiosk:network :network -
network-bind ubuntu-frame:network-bind :network-bind -
network-bind wpe-webkit-mir-kiosk:network-bind :network-bind -
opengl ubuntu-frame:opengl :opengl -
opengl wpe-webkit-mir-kiosk:opengl :opengl -
upower-observe wpe-webkit-mir-kiosk:upower-observe :upower-observe -
wayland wpe-webkit-mir-kiosk:wayland :wayland manual
x11 ubuntu-frame:x11 :x11 -
```
## References
* [How to set up digital signage on Ubuntu Frame](https://discourse.ubuntu.com/t/how-to-set-up-digital-signage-on-ubuntu-frame/31068)
* [ubuntu frame configuration options](https://discourse.ubuntu.com/t/ubuntu-frame-configuration-options/28935)
* [dashkiosk usage](https://github.com/vincentbernat/dashkiosk/blob/master/docs/usage.rst)
* https://snapcraft.io/install/ubuntu-frame/debian
* https://discourse.ubuntu.com/t/how-to-configure-ubuntu-frame-for-multiple-outputs/33012
* https://mir-server.io/docs/reference
* https://gitlab.com/glancr/wpe-webkit-snap
Sign in with Wallet
Connect another wallet