feat: Show download progress (#608)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/build.yml

@@ -8,6 +8,10 @@ on:
     paths-ignore:
       - '**/*.md'
       - '**/*.yml'
+      - '**/*.js'
+      - '**/*.css'
+      - '**/*.html'
+      - 'web/**'
       - '.gitignore'
       - '.dockerignore'
       - '.github/**'

.github/workflows/hub.yml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v4
     - 
       name: Docker Hub Description
-      uses: peter-evans/dockerhub-description@v3
+      uses: peter-evans/dockerhub-description@v4
       with:
         username: ${{ secrets.DOCKERHUB_USERNAME }}
         password: ${{ secrets.DOCKERHUB_TOKEN }}

readme.md

@@ -17,7 +17,6 @@ Virtual DSM in a docker container.
 
  - Multiple disks
  - KVM acceleration
- - GPU pass-through
  - Upgrades supported
  
 ## Usage
@@ -47,195 +46,193 @@ services:
 Via `docker run`
 
 ```bash
-docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-timeout 60 vdsm/virtual-dsm
+docker run -it --rm -p 5000:5000 --device=/dev/kvm --cap-add NET_ADMIN --stop-timeout 120 vdsm/virtual-dsm
 ```
 
 ## FAQ
 
-  * ### How do I use it?
+* ### How do I use it?
 
-    Very simple! These are the steps:
-    
-    - Start the container and get some coffee.
+  Very simple! These are the steps:
+  
+  - Start the container and connect to [port 5000](http://localhost:5000) using your web browser.
 
-    - Connect to port 5000 of the container in your web browser.
+  - Wait until DSM is ready, choose an username and password, and you will be taken to the desktop.
+  
+  Enjoy your brand new machine, and don't forget to star this repo!
 
-    - Wait until DSM is ready, choose an username and password, and you will be taken to the desktop.
+* ### How do I change the size of the disk?
 
-    - Enjoy your brand new machine, and don't forget to star this repo!
+  To expand the default size of 16 GB, locate the `DISK_SIZE` setting in your compose file and modify it to your preferred capacity:
 
-  * ### How do I change the size of the disk?
+  ```yaml
+  environment:
+    DISK_SIZE: "128G"
+  ```
+  
+  This can also be used to resize the existing disk to a larger capacity without any data loss. 
 
-    To expand the default size of 16 GB, locate the `DISK_SIZE` setting in your compose file and modify it to your preferred capacity:
+* ### How do I change the storage location?
 
-    ```yaml
-    environment:
-      DISK_SIZE: "128G"
-    ```
-    
-    This can also be used to resize the existing disk to a larger capacity without any data loss. 
+  To change the storage location, include the following bind mount in your compose file:
 
-  * ### How do I change the storage location?
+  ```yaml
+  volumes:
+    - /var/dsm:/storage
+  ```
 
-    To change the storage location, include the following bind mount in your compose file:
+  Replace the example path `/var/dsm` with the desired storage folder.
 
-    ```yaml
-    volumes:
-      - /var/dsm:/storage
-    ```
+* ### How do I create a growable disk?
 
-    Replace the example path `/var/dsm` with the desired storage folder.
+  By default, the entire capacity of the disk is reserved in advance.
 
-  * ### How do I create a growable disk?
+  To create a growable disk that only allocates space that is actually used, add the following environment variable:
 
-    By default, the entire capacity of the disk is reserved in advance.
+  ```yaml
+  environment:
+    DISK_FMT: "qcow2"
+  ```
 
-    To create a growable disk that only allocates space that is actually used, add the following environment variable:
-
-    ```yaml
-    environment:
-      DISK_FMT: "qcow2"
-    ```
-
-    Please note that this may reduce the write performance of the disk.
+  Please note that this may reduce the write performance of the disk.
 
 * ### How do I add multiple disks?
 
-    To create additional disks, modify your compose file like this:
-    
-    ```yaml
-    environment:
-      DISK2_SIZE: "32G"
-      DISK3_SIZE: "64G"
-    volumes:
-      - /home/example:/storage2
-      - /mnt/data/example:/storage3
-    ```
+  To create additional disks, modify your compose file like this:
+  
+  ```yaml
+  environment:
+    DISK2_SIZE: "32G"
+    DISK3_SIZE: "64G"
+  volumes:
+    - /home/example:/storage2
+    - /mnt/data/example:/storage3
+  ```
 
-  * ### How do I pass-through a disk?
+* ### How do I pass-through a disk?
 
-    It is possible to pass-through disk devices directly by adding them to your compose file in this way:
+   It is possible to pass-through disk devices directly by adding them to your compose file in this way:
 
-    ```yaml
-    environment:
-      DEVICE2: "/dev/sda"
-      DEVICE3: "/dev/sdb"
-    devices:
-      - /dev/sda
-      - /dev/sdb
-    ```
+  ```yaml
+  environment:
+    DEVICE2: "/dev/sda"
+    DEVICE3: "/dev/sdb"
+  devices:
+    - /dev/sda
+    - /dev/sdb
+  ```
 
-    Please note that the device needs to be totally empty (without any partition table) otherwise DSM does not always format it into a volume.
+  Please note that the device needs to be totally empty (without any partition table) otherwise DSM does not always format it into a volume.
 
-    Do NOT use this feature with the goal of sharing files from the host, they will all be lost without warning when DSM creates the volume.
+  Do NOT use this feature with the goal of sharing files from the host, they will all be lost without warning when DSM creates the volume.
 
-  * ### How do I increase the amount of CPU or RAM?
+* ### How do I increase the amount of CPU or RAM?
 
-    By default, a single CPU core and 1 GB of RAM are allocated to the container.
+  By default, a single CPU core and 1 GB of RAM are allocated to the container.
 
-    To increase this, add the following environment variables:
+  To increase this, add the following environment variables:
 
-    ```yaml
-    environment:
-      RAM_SIZE: "4G"
-      CPU_CORES: "4"
-    ```
+  ```yaml
+  environment:
+    RAM_SIZE: "4G"
+    CPU_CORES: "4"
+  ```
 
-  * ### How do I verify if my system supports KVM?
+* ### How do I verify if my system supports KVM?
 
-    To verify if your system supports KVM, run the following commands:
+  To verify if your system supports KVM, run the following commands:
 
-    ```bash
-    sudo apt install cpu-checker
-    sudo kvm-ok
-    ```
+  ```bash
+  sudo apt install cpu-checker
+  sudo kvm-ok
+  ```
 
-    If you receive an error from `kvm-ok` indicating that KVM acceleration can't be used, check the virtualization settings in the BIOS.
+  If you receive an error from `kvm-ok` indicating that KVM acceleration can't be used, check the virtualization settings in the BIOS.
 
-  * ### How do I assign an individual IP address to the container?
+* ### How do I assign an individual IP address to the container?
 
-    By default, the container uses bridge networking, which shares the IP address with the host. 
+  By default, the container uses bridge networking, which shares the IP address with the host. 
 
-    If you want to assign an individual IP address to the container, you can create a macvlan network as follows:
+  If you want to assign an individual IP address to the container, you can create a macvlan network as follows:
 
-    ```bash
-    docker network create -d macvlan \
-        --subnet=192.168.0.0/24 \
-        --gateway=192.168.0.1 \
-        --ip-range=192.168.0.100/28 \
-        -o parent=eth0 vdsm
-    ```
-    
-    Be sure to modify these values to match your local subnet. 
+  ```bash
+  docker network create -d macvlan \
+      --subnet=192.168.0.0/24 \
+      --gateway=192.168.0.1 \
+      --ip-range=192.168.0.100/28 \
+      -o parent=eth0 vdsm
+  ```
+  
+  Be sure to modify these values to match your local subnet. 
 
-    Once you have created the network, change your compose file to look as follows:
+  Once you have created the network, change your compose file to look as follows:
 
-    ```yaml
-    services:
-      dsm:
-        container_name: dsm
-        ..<snip>..
-        networks:
-          vdsm:
-            ipv4_address: 192.168.0.100
+  ```yaml
+  services:
+    dsm:
+      container_name: dsm
+      ..<snip>..
+      networks:
+        vdsm:
+          ipv4_address: 192.168.0.100
 
-    networks:
-      vdsm:
-        external: true
-    ```
-   
-    An added benefit of this approach is that you won't have to perform any port mapping anymore, since all ports will be exposed by default.
+  networks:
+    vdsm:
+      external: true
+  ```
+ 
+  An added benefit of this approach is that you won't have to perform any port mapping anymore, since all ports will be exposed by default.
 
-    Please note that this IP address won't be accessible from the Docker host due to the design of macvlan, which doesn't permit communication between the two. If this is a concern, you need to create a [second macvlan](https://blog.oddbit.com/post/2018-03-12-using-docker-macvlan-networks/#host-access) as a workaround.
+  Please note that this IP address won't be accessible from the Docker host due to the design of macvlan, which doesn't permit communication between the two. If this is a concern, you need to create a [second macvlan](https://blog.oddbit.com/post/2018-03-12-using-docker-macvlan-networks/#host-access) as a workaround.
 
-  * ### How can DSM acquire an IP address from my router?
+* ### How can DSM acquire an IP address from my router?
 
-    After configuring the container for macvlan (see above), it is possible for DSM to become part of your home network by requesting an IP from your router, just like your other devices.
+  After configuring the container for macvlan (see above), it is possible for DSM to become part of your home network by requesting an IP from your router, just like your other devices.
 
-    To enable this feature, add the following lines to your compose file:
+  To enable this feature, add the following lines to your compose file:
 
-    ```yaml
-    environment:
-      DHCP: "Y"
-    device_cgroup_rules:
-      - 'c *:* rwm'
-    ```
+  ```yaml
+  environment:
+    DHCP: "Y"
+  device_cgroup_rules:
+    - 'c *:* rwm'
+  ```
 
-    Please note that even if you don't want DHCP, it's still recommended to enable this feature, as it prevents NAT issues and increases performance by using a `macvtap` interface. In that case, just set a static IP from the DSM control panel after you enabled this mode.
+  Please note that even if you don't want DHCP, it's still recommended to enable this feature, as it prevents NAT issues and increases performance by using a `macvtap` interface. In that case, just set a static IP from the DSM control panel after you enabled this mode.
 
-  * ### How do I pass-through the GPU?
+* ### How do I pass-through the GPU?
 
-    To pass-through your Intel GPU, add the following lines to your compose file:
+  To pass-through your Intel GPU, add the following lines to your compose file:
 
-    ```yaml
-    environment:
-      GPU: "Y"
-    devices:
-      - /dev/dri
-    ```
+  ```yaml
+  environment:
+    GPU: "Y"
+  devices:
+    - /dev/dri
+  ```
 
-    This can be used to enable the facial recognition function in Synology Photos for example.
+  This can be used to enable the facial recognition function in Synology Photos for example.
 
-  * ### How do I install a specific version of vDSM?
+* ### How do I install a specific version of vDSM?
 
-    By default, version 7.2 will be installed, but if you prefer an older version, you can add its download URL to your compose file as follows:
+  By default, version 7.2 will be installed, but if you prefer an older version, you can add its download URL to your compose file as follows:
 
-    ```yaml
-    environment:
-      URL: "https://global.synologydownload.com/download/DSM/release/7.0.1/42218/DSM_VirtualDSM_42218.pat"
-    ```
+  ```yaml
+  environment:
+    URL: "https://global.synologydownload.com/download/DSM/release/7.0.1/42218/DSM_VirtualDSM_42218.pat"
+  ```
 
-    With this method, it is even possible to switch between different versions while keeping all your file data intact.
+  With this method, it is even possible to switch between different versions while keeping all your file data intact.
 
-  * ### What are the differences compared to the standard DSM?
+* ### What are the differences compared to the standard DSM?
 
-    There are only two minor differences: the Virtual Machine Manager package is not available, and Surveillance Station will not include any free licenses.
-    
-  * ### Is this project legal?
+  There are only two minor differences: the Virtual Machine Manager package is not available, and Surveillance Station will not include any free licenses.
+  
+* ### Is this project legal?
 
-    Yes, this project contains only open-source code and does not distribute any copyrighted material. Neither does it try to circumvent any copyright protection measures. So under all applicable laws, this project would be considered legal. 
-    
-    However, by installing Synology's Virtual DSM, you must accept their end-user license agreement, which does not permit installation on non-Synology hardware. So only run this project on an official Synology NAS, as any other use will be a violation of their terms and conditions.
+  Yes, this project contains only open-source code and does not distribute any copyrighted material. Neither does it try to circumvent any copyright protection measures. So under all applicable laws, this project would be considered legal. 
+  
+  However, by installing Synology's Virtual DSM, you must accept their end-user license agreement, which does not permit installation on non-Synology hardware. So only run this project on an official Synology NAS, as any other use will be a violation of their terms and conditions.
 
 ## Disclaimer
 

src/config.sh

@@ -3,8 +3,8 @@ set -Eeuo pipefail
 
 DEF_OPTS="-nodefaults -boot strict=on"
 RAM_OPTS=$(echo "-m $RAM_SIZE" | sed 's/MB/M/g;s/GB/G/g;s/TB/T/g')
-CPU_OPTS="-cpu $CPU_MODEL -smp $CPU_CORES,sockets=1,dies=1,cores=$CPU_CORES,threads=1"
-MAC_OPTS="-machine type=q35,usb=off,dump-guest-core=off,hpet=off${KVM_OPTS}"
+CPU_OPTS="-cpu $CPU_FLAGS -smp $CPU_CORES,sockets=1,dies=1,cores=$CPU_CORES,threads=1"
+MAC_OPTS="-machine type=q35,usb=off,vmport=off,dump-guest-core=off,hpet=off${KVM_OPTS}"
 DEV_OPTS="-device virtio-balloon-pci,id=balloon0,bus=pcie.0,addr=0x4"
 DEV_OPTS="$DEV_OPTS -object rng-random,id=objrng0,filename=/dev/urandom"
 DEV_OPTS="$DEV_OPTS -device virtio-rng-pci,rng=objrng0,id=rng0,bus=pcie.0,addr=0x1c"

src/disk.sh

@@ -112,8 +112,8 @@ createDisk() {
     fi
   fi
 
-  MSG="Creating a $DISK_TYPE $DISK_DESC image in $DISK_FMT format with a size of $DISK_SPACE..."
-  info "$MSG" && html "$MSG"
+  html "Creating a $DISK_DESC image..."
+  info "Creating a $DISK_SPACE $DISK_TYPE $DISK_DESC image in $DISK_FMT format..."
 
   local FAIL="Could not create a $DISK_TYPE $DISK_FMT $DISK_DESC image of $DISK_SPACE ($DISK_FILE)"
 
@@ -266,8 +266,8 @@ convertDisk() {
     fi
   fi
 
-  MSG="Converting $DISK_DESC to $DST_FMT, please wait until completed..."
-  info "$MSG" && html "$MSG"
+  html "Converting $DISK_DESC to $DST_FMT..."
+  info "Converting $DISK_DESC to $DST_FMT, please wait until completed..."
 
   local CONV_FLAGS="-p"
   local DISK_PARAM="$DISK_ALLOC"
@@ -306,8 +306,8 @@ convertDisk() {
     fi
   fi
 
-  MSG="Conversion of $DISK_DESC to $DST_FMT completed succesfully!"
-  info "$MSG" && html "$MSG"
+  html "Conversion of $DISK_DESC completed..."
+  info "Conversion of $DISK_DESC to $DST_FMT completed succesfully!"
 
   return 0
 }

src/entry.sh

@@ -18,11 +18,13 @@ cd /run
 
 trap - ERR
 
+info "Booting $APP using $VERS..."
+[[ "$DEBUG" == [Yy1]* ]] && echo "Arguments: $ARGS" && echo
+
 if [[ "$CONSOLE" == [Yy]* ]]; then
   exec qemu-system-x86_64 ${ARGS:+ $ARGS}
 fi
 
-[[ "$DEBUG" == [Yy1]* ]] && info "$VERS" && echo "Arguments: $ARGS" && echo
 { qemu-system-x86_64 ${ARGS:+ $ARGS} >"$QEMU_OUT" 2>"$QEMU_LOG"; rc=$?; } || :
 (( rc != 0 )) && error "$(<"$QEMU_LOG")" && exit 15
 

src/install.sh

@@ -105,6 +105,7 @@ RDC="$STORAGE/dsm.rd"
 if [ ! -f "$RDC" ]; then
 
   MSG="Downloading installer..."
+  PRG="Downloading installer ([P])..."
   info "Install: $MSG" && html "$MSG"
 
   RD="$TMP/rd.gz"
@@ -112,7 +113,11 @@ if [ ! -f "$RDC" ]; then
   VERIFY="b4215a4b213ff5154db0488f92c87864"
   LOC="$DL/release/7.0.1/42218/DSM_VirtualDSM_42218.pat"
 
+  rm -f "$RD"
+  /run/progress.sh "$RD" "$PRG" &
   { curl -r "$POS" -sfk -S -o "$RD" "$LOC"; rc=$?; } || :
+
+  fKill "progress.sh"
   (( rc != 0 )) && error "Failed to download $LOC, reason: $rc" && exit 60
 
   SUM=$(md5sum "$RD" | cut -f 1 -d " ")
@@ -123,8 +128,12 @@ if [ ! -f "$RDC" ]; then
     rm "$RD"
     rm -f "$PAT"
 
+    html "$MSG"
+    /run/progress.sh "$PAT" "$PRG" &
     { wget "$LOC" -O "$PAT" -q --no-check-certificate --show-progress "$PROGRESS"; rc=$?; } || :
-    (( rc != 0 )) && error "Failed to download $LOC, reason: $rc" && exit 60
+
+    fKill "progress.sh"
+    (( rc != 0 )) && error "Failed to download $LOC , reason: $rc" && exit 60
 
     tar --extract --file="$PAT" --directory="$(dirname "$RD")"/. "$(basename "$RD")"
     rm "$PAT"
@@ -174,8 +183,11 @@ fi
 
 rm -rf "$TMP" && mkdir -p "$TMP"
 
-MSG="Downloading $BASE.pat..."
-info "Install: $MSG" && html "$MSG"
+info "Install: Downloading $BASE.pat..."
+
+MSG="Downloading DSM..."
+PRG="Downloading DSM ([P])..."
+html "$MSG"
 
 PAT="/$BASE.pat"
 rm -f "$PAT"
@@ -186,8 +198,12 @@ if [[ "$URL" == "file://"* ]]; then
 
 else
 
+  /run/progress.sh "$PAT" "$PRG" &
+
   { wget "$URL" -O "$PAT" -q --no-check-certificate --show-progress "$PROGRESS"; rc=$?; } || :
-  (( rc != 0 )) && error "Failed to download $URL, reason: $rc" && exit 69
+
+  fKill "progress.sh"
+  (( rc != 0 )) && error "Failed to download $URL , reason: $rc" && exit 69
 
 fi
 

src/network.sh

@@ -83,7 +83,9 @@ configureDNS() {
   DNSMASQ_OPTS=$(echo "$DNSMASQ_OPTS" | sed 's/\t/ /g' | tr -s ' ' | sed 's/^ *//')
 
   [[ "$DEBUG" == [Yy1]* ]] && set -x
-  $DNSMASQ ${DNSMASQ_OPTS:+ $DNSMASQ_OPTS}
+  if ! $DNSMASQ ${DNSMASQ_OPTS:+ $DNSMASQ_OPTS}; then
+    error "Failed to start dnsmasq, reason: $?" && exit 29
+  fi
   { set +x; } 2>/dev/null
   [[ "$DEBUG" == [Yy1]* ]] && echo
 
@@ -254,8 +256,8 @@ if [[ "$DHCP" == [Yy1]* ]]; then
   # Configuration for DHCP IP
   configureDHCP
 
-  MSG="Please wait while discovering IP..."
-  html "$MSG" "2000"
+  MSG="Booting DSM instance..."
+  html "$MSG"
 
 else
 

src/power.sh

@@ -98,7 +98,6 @@ terminal() {
 
 _graceful_shutdown() {
 
-  local cnt=0
   local code=$?
   local pid url response
 
@@ -144,6 +143,8 @@ _graceful_shutdown() {
 
   fi
 
+  local cnt=0
+
   while [ "$cnt" -lt "$QEMU_TIMEOUT" ]; do
 
     ! isAlive "$pid" && break

src/print.sh

@@ -7,6 +7,7 @@ info () { printf "%b%s%b" "\E[1;34m❯ \E[1;36m" "$1" "\E[0m\n" >&2; }
 error () { printf "%b%s%b" "\E[1;31m❯ " "ERROR: $1" "\E[0m\n" >&2; }
 
 file="/run/shm/dsm.url"
+info="/run/shm/msg.html"
 page="/run/shm/index.html"
 address="/run/shm/qemu.ip"
 shutdown="/run/shm/qemu.end"
@@ -80,6 +81,7 @@ if [[ "$location" != "20.20"* ]]; then
   HTML="${HTML/\[5\]/}"
 
   echo "$HTML" > "$page"
+  echo "$body" > "$info"
 
 else
 

src/proc.sh

@@ -5,8 +5,8 @@ set -Eeuo pipefail
 
 : "${KVM:="Y"}"
 : "${HOST_CPU:=""}"
+: "${CPU_FLAGS:=""}"
 : "${CPU_MODEL:="host"}"
-: "${CPU_FEATURES:="+ssse3,+sse4.1,+sse4.2"}"
 
 [ "$ARCH" != "amd64" ] && KVM="N"
 
@@ -37,6 +37,7 @@ fi
 
 if [[ "$KVM" != [Nn]* ]]; then
 
+  CPU_FEATURES="kvm=on"
   KVM_OPTS=",accel=kvm -enable-kvm"
 
   if ! grep -qE '^flags.* (sse4_2)' /proc/cpuinfo; then
@@ -48,15 +49,23 @@ if [[ "$KVM" != [Nn]* ]]; then
 else
 
   KVM_OPTS=""
+  CPU_FEATURES="+ssse3,+sse4.1,+sse4.2"
+
+  if [[ "${CPU_MODEL,,}" == "host"* ]]; then
 
-  if [[ "$CPU_MODEL" == "host"* ]]; then
     if [[ "$ARCH" == "amd64" ]]; then
-      CPU_MODEL="max,$CPU_FEATURES"
+      CPU_MODEL="max"
     else
-      CPU_MODEL="qemu64,$CPU_FEATURES"
+      CPU_MODEL="qemu64"
     fi
-  fi
 
+  fi
+fi
+
+if [ -z "$CPU_FLAGS" ]; then
+  CPU_FLAGS="$CPU_MODEL,$CPU_FEATURES"
+else
+  CPU_FLAGS="$CPU_MODEL,$CPU_FEATURES,$CPU_FLAGS"
 fi
 
 if [ -z "$HOST_CPU" ]; then

src/progress.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+set -Eeuo pipefail
+
+escape () {
+    local s
+    s=${1//&/\&}
+    s=${s//</\&lt;}
+    s=${s//>/\&gt;}
+    s=${s//'"'/\&quot;}
+    printf -- %s "$s"
+    return 0
+}
+
+file="$1"
+body=$(escape "$2")
+info="/run/shm/msg.html"
+
+if [[ "$body" == *"..." ]]; then
+  body="<p class=\"loading\">${body/.../}</p>"
+fi
+
+while true
+do
+  if [ -f "$file" ]; then
+    bytes=$(du -sb "$file" | cut -f1)
+    if (( bytes > 1000 )); then
+      size=$(echo "$bytes" | numfmt --to=iec --suffix=B  | sed -r 's/([A-Z])/ \1/')
+      echo "${body//(\[P\])/($size)}"> "$info"
+    fi
+  fi
+  sleep 1
+done

src/reset.sh

@@ -29,6 +29,7 @@ echo
 # Helper variables
 
 STORAGE="/storage"
+INFO="/run/shm/msg.html"
 PAGE="/run/shm/index.html"
 TEMPLATE="/var/www/index.html"
 FOOTER1="$APP for Docker v$(</run/version)"
@@ -39,20 +40,20 @@ MINOR=$(uname -r | cut -d '.' -f2)
 ARCH=$(dpkg --print-architecture)
 VERS=$(qemu-system-x86_64 --version | head -n 1 | cut -d '(' -f 1)
 
+# Check system
+
+if [ ! -d "/dev/shm" ]; then
+  error "Directory /dev/shm not found!" && exit 14
+else
+  [ ! -d "/run/shm" ] && ln -s /dev/shm /run/shm
+fi
+
 # Check folder
 
 if [ ! -d "$STORAGE" ]; then
   error "Storage folder ($STORAGE) not found!" && exit 13
 fi
 
-if [ ! -d "/run/shm" ]; then
-  if [ -d "/dev/shm" ]; then
-    ln -s /dev/shm /run/shm
-  else
-    error "Folder /dev/shm not found!" && exit 14
-  fi
-fi
-
 # Cleanup files
 rm -f /run/shm/qemu.*
 rm -f /run/shm/dsm.url
@@ -118,6 +119,7 @@ html()
 {
     local title
     local body
+    local script
     local footer
 
     title=$(escape "$APP")
@@ -129,10 +131,7 @@ html()
       body="<p class=\"loading\">${body/.../}</p>"
     fi
 
-    local timeout="4999"
-    [ -n "${2:-}" ] && timeout="$2"
-    local script="<script>setTimeout(() => { document.location.reload(); }, $timeout);</script>"
-    [[ "$timeout" == "0" ]] && script=""
+    [ -n "${2:-}" ] && script="$2" || script=""
 
     local HTML
     HTML=$(<"$TEMPLATE")
@@ -143,6 +142,7 @@ html()
     HTML="${HTML/\[5\]/$FOOTER2}"
 
     echo "$HTML" > "$PAGE"
+    echo "$body" > "$INFO"
 
     return 0
 }

web/css/style.css

@@ -0,0 +1,167 @@
+body {
+	color: white;
+	background-color: #125bdb;
+	font-smoothing: antialiased;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-family: Verdana, Geneva, sans-serif;
+}
+
+#info {
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
+}
+
+#content {
+	text-align: center;
+	padding: 20px;
+	margin-top: 50px;
+}
+
+footer {
+	width: 98%;
+	position: fixed;
+	bottom: 0px;
+	height: 40px;
+	text-align: center;
+	color: #0c8aeb;
+	text-shadow: 0 0 1px #0c8aeb;
+}
+
+#empty {
+	height: 40px;
+	/* Same height as footer */
+}
+
+a,
+a:hover,
+a:active,
+a:visited {
+	color: white;
+}
+
+footer a:link,
+footer a:visited,
+footer a:active {
+	color: #0c8aeb;
+}
+
+footer a:hover {
+	color: #73e6ff;
+}
+
+.loading:after {
+	content: " .";
+	animation: dots 1s steps(5, end) infinite;
+}
+
+@keyframes dots {
+
+	0%,
+	20% {
+		color: rgba(0, 0, 0, 0);
+		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+	}
+
+	40% {
+		color: white;
+		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
+	}
+
+	60% {
+		text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
+	}
+
+	80%,
+	100% {
+		text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
+	}
+}
+
+.spinner_LWk7 {
+	animation: spinner_GWy6 1.2s linear infinite, spinner_BNNO 1.2s linear infinite
+}
+
+.spinner_yOMU {
+	animation: spinner_GWy6 1.2s linear infinite, spinner_pVqn 1.2s linear infinite;
+	animation-delay: .15s
+}
+
+.spinner_KS4S {
+	animation: spinner_GWy6 1.2s linear infinite, spinner_6uKB 1.2s linear infinite;
+	animation-delay: .3s
+}
+
+.spinner_zVee {
+	animation: spinner_GWy6 1.2s linear infinite, spinner_Qw4x 1.2s linear infinite;
+	animation-delay: .45s
+}
+
+@keyframes spinner_GWy6 {
+
+	0%,
+	50% {
+		width: 9px;
+		height: 9px
+	}
+
+	10% {
+		width: 11px;
+		height: 11px
+	}
+}
+
+@keyframes spinner_BNNO {
+
+	0%,
+	50% {
+		x: 1.5px;
+		y: 1.5px
+	}
+
+	10% {
+		x: .5px;
+		y: .5px
+	}
+}
+
+@keyframes spinner_pVqn {
+
+	0%,
+	50% {
+		x: 13.5px;
+		y: 1.5px
+	}
+
+	10% {
+		x: 12.5px;
+		y: .5px
+	}
+}
+
+@keyframes spinner_6uKB {
+
+	0%,
+	50% {
+		x: 13.5px;
+		y: 13.5px
+	}
+
+	10% {
+		x: 12.5px;
+		y: 12.5px
+	}
+}
+
+@keyframes spinner_Qw4x {
+
+	0%,
+	50% {
+		x: 1.5px;
+		y: 13.5px
+	}
+
+	10% {
+		x: .5px;
+		y: 12.5px
+	}
+}

web/img/favicon.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 511.962 511.962" height="512" viewBox="0 0 511.962 511.962" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m489.965 120.063c0-5.77-3.31-11.028-8.512-13.524l-218.984-105.063c-4.102-1.967-8.875-1.967-12.977 0l-218.985 105.063c-5.202 2.496-8.511 7.755-8.511 13.524l-.003 271.834c0 5.77 3.31 11.028 8.512 13.524l218.989 105.064c2.051.983 4.27 1.476 6.488 1.476 2.219 0 4.438-.492 6.488-1.476l218.989-105.064c5.202-2.496 8.512-7.755 8.512-13.524z" fill="#4e6ba6"/><path d="m489.965 120.063c0-5.77-3.31-11.028-8.512-13.524l-218.984-105.063c-2.051-.984-4.269-1.476-6.488-1.476v511.962c2.219 0 4.438-.492 6.488-1.476l218.989-105.064c5.202-2.496 8.512-7.755 8.512-13.524z" fill="#28487a"/><path d="m425.812 160.441c0-2.27-.519-4.457-1.457-6.432l-336.701-.095c-.967 1.999-1.504 4.22-1.504 6.526l-.002 191.081c0 5.769 3.31 11.028 8.512 13.524l154.833 74.285c2.051.983 4.27 1.476 6.488 1.476 2.219 0 4.438-.492 6.488-1.476l154.834-74.285c5.202-2.496 8.512-7.755 8.512-13.524z" fill="#8dc2eb"/><path d="m424.354 154.009h-168.373v286.798c2.219 0 4.438-.492 6.488-1.476l154.834-74.285c5.202-2.496 8.512-7.755 8.512-13.524l-.003-191.081c0-2.27-.52-4.458-1.458-6.432z" fill="#5e9ff6"/><path d="m417.3 146.916-154.831-74.284c-4.102-1.967-8.875-1.967-12.977 0l-154.831 74.284c-3.122 1.498-5.555 3.996-7.007 6.998l168.328 80.812 168.374-80.717c-1.448-3.044-3.9-5.579-7.056-7.093z" fill="#ecf9fd"/><path d="m417.3 146.916-154.831-74.284c-2.051-.983-4.27-1.476-6.488-1.476v163.569l168.374-80.717c-1.447-3.043-3.899-5.578-7.055-7.092z" fill="#d9f3fc"/></g></svg>

web/index.html

@@ -5,22 +5,30 @@
         [1]
         <meta http-equiv="Cache-Control" content="no-cache" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="stylesheet" type="text/css" href="style.css" /> 
+        <link rel="stylesheet" type="text/css" href="/css/style.css" />
+        <link rel="icon" href="/img/favicon.svg" type="image/x-icon">
         [2]
     </head>
 
     <body>
-        <div id="page-container">
-            <div id="content-wrap">
-                <h1>[3]</h1>
+        <div id="page">
+            <div id="content">
+                <svg id="spinner" width="64" height="64" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <rect class="spinner_LWk7" fill="#0c8aeb" x="1.5" y="1.5" rx="1" width="9" height="9"/>
+                    <rect class="spinner_yOMU" fill="#0c8aeb" x="13.5" y="1.5" rx="1" width="9" height="9"/>
+                    <rect class="spinner_KS4S" fill="#0c8aeb" x="13.5" y="13.5" rx="1" width="9" height="9"/>
+                    <rect class="spinner_zVee" fill="#0c8aeb" x="1.5" y="13.5" rx="1" width="9" height="9"/>
+                </svg>
+                <h1 id="info">[3]</h1>
             </div>
-            <div id="empty-space">
+            <div id="empty">
             </div>
-            <div id="footer">
+            <footer id="footer">
                 [4]<br />
                 [5]
-            </div>
+            </footer>
         </div>
+        <script type="text/javascript" src="/js/script.js"></script>
     </body>
 
 </html>

web/js/script.js

@@ -0,0 +1,130 @@
+var request;
+var interval = 1000;
+
+function getInfo() {
+
+    var url = "/msg.html";
+
+    try {
+
+        if (window.XMLHttpRequest) {
+            request = new XMLHttpRequest();
+        } else {
+            throw "XMLHttpRequest not available!";
+        }
+
+        request.onreadystatechange = processInfo;
+        request.open("GET", url, true);
+        request.send();
+
+    } catch (e) {
+        var err = "Error: " + e.message;
+        console.log(err);
+        setError(err);
+    }
+}
+
+function processInfo() {
+    try {
+        if (request.readyState != 4) {
+            return true;
+        }
+
+        var msg = request.responseText;
+        if (msg == null || msg.length == 0) {
+            setInfo("Booting DSM instance", true);
+            schedule();
+            return false;
+        }
+
+        var notFound = (request.status == 404);
+
+        if (request.status == 200) {
+            if (msg.toLowerCase().indexOf("<html>") !== -1) {
+                notFound = true;
+            } else {
+                if (msg.toLowerCase().indexOf("href=") !== -1) {
+                    var div = document.createElement("div");
+                    div.innerHTML = msg;
+                    var url = div.querySelector("a").href;
+                    setTimeout(() => {
+                        window.location.assign(url);
+                    }, 3000);
+                    setInfo(msg);
+                    return true;
+                } else {
+                    setInfo(msg);
+                    schedule();
+                    return true;
+                }
+            }
+        }
+
+        if (notFound) {
+            setInfo("Connecting to web portal", true);
+            reload();
+            return true;
+        }
+
+        setError("Error: Received statuscode " + request.status);
+        schedule();
+        return false;
+
+    } catch (e) {
+        var err = "Error: " + e.message;
+        console.log(err);
+        setError(err);
+        return false;
+    }
+}
+
+function setInfo(msg, loading, error) {
+
+    try {
+        if (msg == null || msg.length == 0) {
+            return false;
+        }
+
+        var el = document.getElementById("spinner");
+
+        error = !!error;
+        if (!error) {
+            el.style.visibility = 'visible';
+        } else {
+            el.style.visibility = 'hidden';
+        }
+
+        loading = !!loading;
+        if (loading) {
+            msg = "<p class=\"loading\">" + msg + "</p>";
+        }
+
+        el = document.getElementById("info");
+
+        if (el.innerHTML != msg) {
+            el.innerHTML = msg;
+        }
+
+        return true;
+
+    } catch (e) {
+        console.log("Error: " + e.message);
+        return false;
+    }
+}
+
+function setError(text) {
+    return setInfo(text, false, true);
+}
+
+function schedule() {
+    setTimeout(getInfo, interval);
+}
+
+function reload() {
+    setTimeout(() => {
+        document.location.reload();
+    }, 3000);
+}
+
+schedule();

web/style.css

@@ -1,59 +0,0 @@
-body {
-	color: white;
-	background-color: #125bdb;
-	font-family: Verdana, Arial, sans-serif;
-}
-
-#content-wrap {
-	text-align: center;
-	padding: 20px;
-	margin-top: 100px;
-}
-
-#footer {
-	width: 98%;
-	position: fixed;
-	bottom: 0px;
-	height: 40px;
-  text-align: center;
-}
-
-#empty-space {
-	height: 40px;
-	/* Same height as footer */
-}
-
-a,
-a:hover,
-a:active,
-a:visited {
-	color: white;
-}
-
-.loading:after {
-	content: " .";
-	animation: dots 1s steps(5, end) infinite;
-}
-
-@keyframes dots {
-
-	0%,
-	20% {
-		color: rgba(0, 0, 0, 0);
-		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
-	}
-
-	40% {
-		color: white;
-		text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
-	}
-
-	60% {
-		text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
-	}
-
-	80%,
-	100% {
-		text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
-	}
-}