change manifest url

main.go

@@ -59,6 +59,7 @@ func main() {
 	actions = createActions()
 
 	e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", assetHandler)))
+	e.GET("/manifest.webmanifest", manifestController)
 	e.GET("/", homeController)
 	e.GET("/ws", wsController)
 

manifest_controller.go

@@ -0,0 +1,46 @@
+package main
+
+import (
+	"github.com/labstack/echo/v4"
+	"net/http"
+)
+
+type ManifestIcon struct {
+	Src   string `json:"src"`
+	Type  string `json:"type"`
+	Sizes string `json:"sizes"`
+}
+
+type Manifest struct {
+	ShortName       string         `json:"short_name"`
+	Name            string         `json:"name"`
+	ThemeColor      string         `json:"theme_color"`
+	BackgroundColor string         `json:"background_color"`
+	Display         string         `json:"display"`
+	Orientation     string         `json:"orientation"`
+	Scope           string         `json:"scope"`
+	StartUrl        string         `json:"start_url"`
+	Icons           []ManifestIcon `json:"icons"`
+}
+
+func manifestController(c echo.Context) error {
+	manifest := &Manifest{
+		ShortName:       "RWM",
+		Name:            "Remote i3WM",
+		ThemeColor:      "#1e3650",
+		BackgroundColor: "#ffffff",
+		Display:         "standalone",
+		Orientation:     "portrait-primary",
+		Scope:           "/",
+		StartUrl:        "/",
+		Icons: []ManifestIcon{
+			ManifestIcon{
+				Src:   "/static/img/icon.png",
+				Type:  "image/png",
+				Sizes: "96x96",
+			},
+		},
+	}
+
+	return c.JSONPretty(http.StatusOK, manifest, "  ")
+}

static/css/main.css

@@ -97,6 +97,8 @@ a {
     z-index: 110;
     position: fixed;
     bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 #pointer-buttons .btn {

static/js/main.js

@@ -32,7 +32,7 @@ function createWebSocketConnection() {
       }, 2500)
     } else if (data.type === 'screenshot') {
       isScreenshotWaiting = false
-      screenshotImg.setAttribute('src', 'data:image/pngbase64, ' + data.value)
+      screenshotImg.setAttribute('src', 'data:image/png;base64, ' + data.value)
     }
   }
 }
@@ -199,15 +199,15 @@ function liveClickHandler(e, quality) {
   if (isLive) {
     isLive = false
     isScreenshotWaiting = false
-    document.querySelector('#live-hq').innerText(`Live HQ`)
-    document.querySelector('#live-lq').innerText(`Live LQ`)
+    document.querySelector('#live-hq').innerText = 'Live HQ'
+    document.querySelector('#live-lq').innerText = 'Live LQ'
 
     return
   }
 
   isLive = true
 
-  e.target.innerText('Stop live')
+  e.target.innerText = 'Stop live'
 
   let doScreenshot = function() {
     if (isLive) {

static/manifest.json

@@ -1,17 +0,0 @@
-{
-  "short_name": "RWM",
-  "name": "Remote i3-wm",
-  "theme_color": "#1e3650",
-  "background_color": "#ffffff",
-  "display": "fullscreen",
-  "Scope": "/",
-  "orientation": "portrait",
-  "icons": [
-    {
-      "src": "/static/img/icon.png",
-      "type": "image/png",
-      "sizes": "96x96"
-    }
-  ],
-  "start_url": "/"
-}

views/layout/base.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <link rel="stylesheet" href="/static/css/bootstrap.min.css" type="text/css">
     <link rel="stylesheet" href="/static/css/main.css" type="text/css">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="manifest" href="/manifest.webmanifest">
     <link rel="icon" type="image/png" href="/static/img/icon.png">
     <title>Remote i3-wm</title>
 </head>

views/page/home.html

@@ -62,19 +62,19 @@
 
                         {{if eq $value.Type "shortcuts"}}
                             <div class="col-9" id="shortcuts_special_keys">
-                                <label class="btn btn-secondary" for="shortcuts_special_key_ctrl">
+                                <label class="btn btn-secondary mb-1" for="shortcuts_special_key_ctrl">
                                     <input type="checkbox" value="ctrl" id="shortcuts_special_key_ctrl">
                                     ctrl
                                 </label>
-                                <label class="btn btn-secondary" for="shortcuts_special_key_shift">
+                                <label class="btn btn-secondary mb-1" for="shortcuts_special_key_shift">
                                     <input type="checkbox" value="shift" id="shortcuts_special_key_shift">
                                     shift
                                 </label>
-                                <label class="btn btn-secondary" for="shortcuts_special_key_alt">
+                                <label class="btn btn-secondary mb-1" for="shortcuts_special_key_alt">
                                     <input type="checkbox" value="alt" id="shortcuts_special_key_alt">
                                     alt
                                 </label>
-                                <label class="btn btn-secondary" for="shortcuts_special_key_win">
+                                <label class="btn btn-secondary mb-1" for="shortcuts_special_key_win">
                                     <input type="checkbox" value="win" id="shortcuts_special_key_win">
                                     win
                                 </label>