---
# System prepended metadata

title: 'Solution: Digital Signage'
tags: [SPX]

---

# 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)
![](https://hackmd.io/_uploads/BJhev1fLo.png)

### 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