Dashboard Studio 1.14.1: Android app, phone menu button, install fix

- Android app (android/, built with build.sh): signs in to Home Assistant once, opens Dashboard Studio full screen, renews the ingress session; downloadable from Install as an app - Phone dashboards: a round menu button brings back the top bar with Edit, Kiosk and Install as an app - Install as an app explains what works per device (Android app, https for browser install, iPhone limits) - Fixed: browser install failed because the manifest was fetched without the Home Assistant sign-in Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-26 22:34:52 +01:00
parent 79d4a0f011
commit 297fb2a7a0
24 changed files with 561 additions and 26 deletions
@@ -0,0 +1 @@
+build/
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="nl.melvanveen.dashboardstudio"
+    android:versionCode="1"
+    android:versionName="1.14.1">
+
+    <uses-sdk android:minSdkVersion="24" android:targetSdkVersion="34" />
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.VIBRATE" />
+
+    <application
+        android:label="@string/app_name"
+        android:icon="@mipmap/ic_launcher"
+        android:theme="@style/AppTheme"
+        android:usesCleartextTraffic="true"
+        android:allowBackup="true">
+        <activity
+            android:name=".MainActivity"
+            android:exported="true"
+            android:launchMode="singleTask"
+            android:configChanges="orientation|screenSize|screenLayout|smallestScreenSize|keyboardHidden|uiMode|density"
+            android:windowSoftInputMode="adjustResize">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+            <!-- "Open in the app" in Dashboard Studio: dashboardstudio://open?url=<the app's address> -->
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+                <data android:scheme="dashboardstudio" android:host="open" />
+            </intent-filter>
+        </activity>
+    </application>
+</manifest>
@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+  :root { color-scheme: dark; }
+  body { margin: 0; min-height: 100vh; background: #0f1526; color: #f2f2f7; font: 16px/1.45 system-ui, sans-serif; display: flex; align-items: center; justify-content: center; }
+  main { width: 100%; max-width: 420px; padding: 28px 22px; box-sizing: border-box; }
+  img { width: 72px; height: 72px; border-radius: 18px; display: block; margin-bottom: 18px; }
+  h1 { font-size: 24px; margin: 0 0 8px; }
+  p { margin: 0 0 18px; color: #a1a8bb; }
+  .msg { background: rgba(255, 69, 58, .15); color: #ffb4ae; padding: 10px 14px; border-radius: 12px; }
+  .msg:empty { display: none; }
+  label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
+  input { width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: #1c2438; border: 1px solid #2f3a57; border-radius: 12px; padding: 12px 14px; }
+  input:focus { outline: 2px solid #0a84ff; border-color: transparent; }
+  .hint { font-size: 13px; margin: 8px 0 22px; }
+  button { width: 100%; font: inherit; font-weight: 600; color: #fff; background: #0a84ff; border: 0; border-radius: 12px; padding: 13px; }
+  button:active { opacity: .8; }
+</style>
+</head>
+<body>
+<main>
+  <img src="icon.png" alt="">
+  <h1 data-t="title">Connect to Home Assistant</h1>
+  <p data-t="intro">Enter the address you use to open Home Assistant. You sign in once; the app remembers it.</p>
+  <p class="msg" id="msg"></p>
+  <form id="f">
+    <label for="addr" data-t="label">Home Assistant address</label>
+    <input id="addr" type="text" inputmode="url" autocomplete="url" autocapitalize="off" spellcheck="false" placeholder="http://homeassistant.local:8123" required>
+    <p class="hint" data-t="hint">You can also paste the link from Dashboard Studio: Install as an app, Open in the app.</p>
+    <button type="submit" data-t="go">Connect</button>
+  </form>
+</main>
+<script>
+  const NL = {
+    title: "Verbinden met Home Assistant",
+    intro: "Vul het adres in waarmee je Home Assistant opent. Je logt één keer in; de app onthoudt het.",
+    label: "Adres van Home Assistant",
+    hint: "Je kunt ook de link uit Dashboard Studio plakken: Installeren als app, Openen in de app.",
+    go: "Verbinden",
+    offline: "Home Assistant is niet bereikbaar op dit adres. Controleer het adres en je verbinding.",
+    notfound: "Dashboard Studio staat niet in Home Assistant. Installeer de app daar eerst, of plak de link uit Dashboard Studio.",
+    noaddress: "Dashboard Studio is gevonden, maar alleen een beheerder kan het adres opvragen. Plak de link uit Dashboard Studio: Installeren als app, Openen in de app.",
+    error: "Verbinden lukte niet: {0}",
+  };
+  const EN = {
+    offline: "Home Assistant can't be reached at this address. Check the address and your connection.",
+    notfound: "Dashboard Studio isn't installed in Home Assistant. Install it there first, or paste the link from Dashboard Studio.",
+    noaddress: "Dashboard Studio was found, but only an administrator can look up its address. Paste the link from Dashboard Studio: Install as an app, Open in the app.",
+    error: "Couldn't connect: {0}",
+  };
+  const T = navigator.language.startsWith("nl") ? NL : EN;
+  if (T === NL) document.querySelectorAll("[data-t]").forEach((el) => { el.textContent = NL[el.dataset.t] || el.textContent; });
+  const why = window.DSApp ? DSApp.message() : "", detail = window.DSApp ? DSApp.detail() : "";
+  if (why) document.getElementById("msg").textContent = (T[why] || T.error).replace("{0}", detail || why);
+  const addr = document.getElementById("addr");
+  addr.value = window.DSApp ? DSApp.address() : "";
+  document.getElementById("f").onsubmit = (e) => { e.preventDefault(); DSApp.setup(addr.value.trim()); };
+</script>
+</body>
+</html>
@@ -0,0 +1,38 @@
+#!/bin/sh
+# Builds the Android app without Gradle, with the Android SDK's own tools, and copies it into the
+# Home Assistant app, which offers it for download (Install as an app on an Android phone).
+#   ./build.sh          the release build, signed with ~/.android/dashboard-studio.jks (made the first time)
+#   ./build.sh debug    a debuggable build, for testing in the emulator (Chrome can inspect its pages)
+# Keep the key: Android only installs an update that is signed with the same key as the installed app.
+set -e
+cd "$(dirname "$0")"
+SDK="${ANDROID_HOME:-$HOME/Library/Android/sdk}"
+BT="$SDK/build-tools/$(ls "$SDK/build-tools" | sort -V | tail -1)"
+JAR="$SDK/platforms/$(ls "$SDK/platforms" | sort -V | tail -1)/android.jar"
+KEY="${DS_KEYSTORE:-$HOME/.android/dashboard-studio.jks}"
+OUT=build
+rm -rf "$OUT" && mkdir -p "$OUT/res" "$OUT/classes" "$OUT/gen"
+
+DEBUG=""
+[ "$1" = "debug" ] && DEBUG="--debug-mode"
+"$BT/aapt2" compile --dir res -o "$OUT/res"
+"$BT/aapt2" link -o "$OUT/app.unsigned.apk" -I "$JAR" --manifest AndroidManifest.xml -A assets \
+  --java "$OUT/gen" $DEBUG "$OUT"/res/*.flat
+javac -nowarn --release 17 -classpath "$JAR" -d "$OUT/classes" $(find src "$OUT/gen" -name '*.java')
+"$BT/d8" --release --min-api 24 --lib "$JAR" --output "$OUT" $(find "$OUT/classes" -name '*.class')
+(cd "$OUT" && zip -q app.unsigned.apk classes.dex)
+"$BT/zipalign" -f -p 4 "$OUT/app.unsigned.apk" "$OUT/app.aligned.apk"
+
+if [ ! -f "$KEY" ]; then
+  mkdir -p "$(dirname "$KEY")"
+  keytool -genkeypair -keystore "$KEY" -storepass dashboard-studio -keypass dashboard-studio -alias app \
+    -keyalg RSA -keysize 4096 -validity 36500 -dname "CN=Dashboard Studio" >/dev/null
+  echo "Made a new signing key: $KEY (keep it, updates need the same key)"
+fi
+"$BT/apksigner" sign --ks "$KEY" --ks-pass pass:dashboard-studio --ks-key-alias app --out "$OUT/dashboard-studio.apk" "$OUT/app.aligned.apk"
+if [ -z "$DEBUG" ]; then
+  cp "$OUT/dashboard-studio.apk" ../dashboard_studio/web/dashboard-studio.apk
+  echo "Built and copied to dashboard_studio/web/dashboard-studio.apk"
+else
+  echo "Built $OUT/dashboard-studio.apk (debug)"
+fi
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient android:angle="270" android:startColor="#24304f" android:endColor="#0f1526" />
+</shape>
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/ic_bg" />
+    <foreground android:drawable="@drawable/ic_fg" />
+</adaptive-icon>
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="app_name">Dashboards</string>
+    <style name="AppTheme" parent="android:Theme.Material.NoActionBar">
+        <item name="android:windowBackground">@color/bg</item>
+        <item name="android:statusBarColor">@color/bg</item>
+        <item name="android:navigationBarColor">@color/bg</item>
+        <item name="android:colorAccent">#0a84ff</item>
+    </style>
+    <color name="bg">#0f1526</color>
+</resources>
@@ -0,0 +1,299 @@
+package nl.melvanveen.dashboardstudio;
+
+import android.app.Activity;
+import android.content.ActivityNotFoundException;
+import android.content.Intent;
+import android.content.SharedPreferences;
+import android.content.pm.ApplicationInfo;
+import android.graphics.Color;
+import android.net.Uri;
+import android.os.Bundle;
+import android.view.View;
+import android.view.WindowManager;
+import android.webkit.CookieManager;
+import android.webkit.JavascriptInterface;
+import android.webkit.ValueCallback;
+import android.webkit.WebChromeClient;
+import android.webkit.WebResourceError;
+import android.webkit.WebResourceRequest;
+import android.webkit.WebResourceResponse;
+import android.webkit.WebSettings;
+import android.webkit.WebView;
+import android.webkit.WebViewClient;
+
+/**
+ * Dashboard Studio as an Android app: a full-screen window on the Dashboard Studio app inside Home Assistant.
+ *
+ * Home Assistant only lets a signed-in browser into an app's page (its "ingress"). So the app first opens
+ * Home Assistant itself, where you sign in once; then, on Home Assistant's page, it asks for an ingress
+ * session the way Home Assistant's own page does, and opens Dashboard Studio. From then on Dashboard Studio
+ * renews that session itself, with the login Home Assistant kept in this app.
+ */
+public class MainActivity extends Activity {
+    private static final String SETUP = "file:///android_asset/setup.html";
+    private static final int PICK_FILE = 1;
+
+    private WebView web;
+    private SharedPreferences prefs;
+    private String message = "", detail = "";
+    private long connectedAt = 0;
+    private ValueCallback<Uri[]> fileCallback;
+
+    /** Runs on Home Assistant's own page: wait until it's signed in, open an ingress session, then go to Dashboard Studio. */
+    private static final String CONNECT_JS = """
+        (function () {
+          if (window.__dsConnect) return;
+          window.__dsConnect = true;
+          const known = DSApp.appUrl();
+          let tries = 0;
+          const tick = async () => {
+            const hass = document.querySelector("home-assistant")?.hass;
+            if (!hass?.connected || !hass.panels || !Object.keys(hass.panels).length) {
+              if (++tries < 1200) setTimeout(tick, 250);
+              return;
+            }
+            try {
+              // keep the login (as "Keep me logged in" does), so Dashboard Studio can renew its session later
+              if (!localStorage.getItem("hassTokens") && hass.auth?.data) localStorage.setItem("hassTokens", JSON.stringify(hass.auth.data));
+              let url = known;
+              if (!url) {
+                const panel = Object.values(hass.panels).find((p) => /(^|_)dashboard_studio$/.test(p.config?.ingress || ""));
+                if (!panel) return DSApp.fail("notfound", "");
+                let info;
+                try { info = await hass.callWS({ type: "supervisor/api", endpoint: `/addons/${panel.config.ingress}/info`, method: "get" }); }
+                catch { info = (await hass.callApi("GET", `hassio/addons/${panel.config.ingress}/info`).catch(() => null))?.data; }
+                if (!info?.ingress_url) return DSApp.fail("noaddress", "");
+                url = location.origin + info.ingress_url;
+              }
+              const res = await hass.callApi("POST", "hassio/ingress/session");
+              const session = res?.data?.session || res?.session;
+              document.cookie = `ingress_session=${session};path=/api/hassio_ingress/;SameSite=Strict${location.protocol === "https:" ? ";Secure" : ""}`;
+              DSApp.open(url);
+            } catch (e) {
+              DSApp.fail("error", String(e?.message || e?.body?.message || e?.code || e));
+            }
+          };
+          tick();
+        })();
+        """;
+
+    @Override
+    protected void onCreate(Bundle state) {
+        super.onCreate(state);
+        prefs = getSharedPreferences("app", MODE_PRIVATE);
+        if ((getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE) != 0) WebView.setWebContentsDebuggingEnabled(true);
+
+        web = new WebView(this);
+        web.setBackgroundColor(Color.parseColor("#0f1526"));
+        setContentView(web);
+        WebSettings s = web.getSettings();
+        s.setJavaScriptEnabled(true);
+        s.setDomStorageEnabled(true);
+        s.setDatabaseEnabled(true);
+        s.setMediaPlaybackRequiresUserGesture(false); // camera streams and the doorbell sound
+        s.setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
+        s.setUserAgentString(s.getUserAgentString() + " DashboardStudioApp/1.0");
+        CookieManager.getInstance().setAcceptCookie(true);
+        web.addJavascriptInterface(new Bridge(), "DSApp");
+        web.setWebViewClient(new Client());
+        web.setWebChromeClient(new Chrome());
+
+        if (!fromLink(getIntent()) && state == null) start();
+    }
+
+    @Override
+    protected void onNewIntent(Intent intent) {
+        super.onNewIntent(intent);
+        fromLink(intent);
+    }
+
+    /** "Open in the app" in Dashboard Studio: dashboardstudio://open?url=... */
+    private boolean fromLink(Intent intent) {
+        Uri data = intent == null ? null : intent.getData();
+        if (data == null || !"dashboardstudio".equals(data.getScheme())) return false;
+        String url = data.getQueryParameter("url");
+        if (url == null || !url.matches("(?i)https?://.+")) return false;
+        save(origin(Uri.parse(url)), url);
+        start();
+        return true;
+    }
+
+    private String ha() { return prefs.getString("ha", ""); }
+    private String app() { return prefs.getString("app", ""); }
+    private void save(String ha, String app) { prefs.edit().putString("ha", ha).putString("app", app).apply(); }
+
+    private static String origin(Uri u) {
+        return u.getScheme() + "://" + u.getHost() + (u.getPort() > 0 ? ":" + u.getPort() : "");
+    }
+    private static boolean isIngress(String url) { return url != null && url.contains("/api/hassio_ingress/"); }
+
+    private void start() {
+        message = ""; detail = "";
+        if (ha().isEmpty()) { web.loadUrl(SETUP); return; }
+        // With the address known, try it straight away: a session may still be valid, or the page is cached for offline use.
+        web.loadUrl(app().isEmpty() ? ha() + "/" : app());
+    }
+
+    private void connect() {
+        connectedAt = System.currentTimeMillis();
+        web.loadUrl(ha() + "/");
+    }
+
+    private void showSetup(String why, String more) {
+        message = why; detail = more == null ? "" : more;
+        web.loadUrl(SETUP);
+    }
+
+    private class Client extends WebViewClient {
+        @Override
+        public void onPageFinished(WebView view, String url) {
+            if (url == null || ha().isEmpty() || !url.startsWith(ha())) return;
+            String page = app().replaceAll("[?#].*", "");
+            if (isIngress(url) || (!page.isEmpty() && url.startsWith(page))) view.clearHistory(); // back leaves the app instead of going to Home Assistant
+            else view.evaluateJavascript(CONNECT_JS, null);
+        }
+
+        @Override
+        public void onReceivedHttpError(WebView view, WebResourceRequest req, WebResourceResponse res) {
+            if (!req.isForMainFrame() || !isIngress(req.getUrl().toString())) return;
+            int code = res.getStatusCode();
+            if (code != 401 && code != 403) return;
+            // The ingress session ran out: get a new one from Home Assistant's page, unless that just failed.
+            if (System.currentTimeMillis() - connectedAt < 20000) showSetup("error", "Home Assistant refused the session (" + code + ")");
+            else connect();
+        }
+
+        @Override
+        public void onReceivedError(WebView view, WebResourceRequest req, WebResourceError err) {
+            if (req.isForMainFrame() && !req.getUrl().toString().startsWith("file:")) showSetup("offline", "");
+        }
+
+        @Override
+        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest req) {
+            Uri u = req.getUrl();
+            String scheme = u.getScheme() == null ? "" : u.getScheme();
+            if ((scheme.equals("http") || scheme.equals("https")) && !ha().isEmpty() && origin(u).equalsIgnoreCase(ha())) return false;
+            if (scheme.equals("file")) return false;
+            // other sites and apps: the browser or the app they belong to
+            try {
+                Intent i = scheme.equals("intent") ? Intent.parseUri(u.toString(), Intent.URI_INTENT_SCHEME) : new Intent(Intent.ACTION_VIEW, u);
+                i.addCategory(Intent.CATEGORY_BROWSABLE);
+                i.setComponent(null);
+                startActivity(i);
+            } catch (Exception ignored) { /* nothing to open it with */ }
+            return true;
+        }
+    }
+
+    private class Chrome extends WebChromeClient {
+        @Override
+        public boolean onShowFileChooser(WebView view, ValueCallback<Uri[]> callback, FileChooserParams params) {
+            if (fileCallback != null) fileCallback.onReceiveValue(null);
+            fileCallback = callback;
+            try {
+                startActivityForResult(params.createIntent(), PICK_FILE);
+            } catch (ActivityNotFoundException e) {
+                fileCallback = null;
+                return false;
+            }
+            return true;
+        }
+    }
+
+    @Override
+    protected void onActivityResult(int request, int result, Intent data) {
+        if (request == PICK_FILE && fileCallback != null) {
+            fileCallback.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(result, data));
+            fileCallback = null;
+        } else super.onActivityResult(request, result, data);
+    }
+
+    @Override
+    public void onBackPressed() {
+        if (web.canGoBack()) web.goBack();
+        else super.onBackPressed();
+    }
+
+    @Override
+    protected void onPause() { super.onPause(); web.onPause(); CookieManager.getInstance().flush(); }
+
+    @Override
+    protected void onResume() { super.onResume(); web.onResume(); }
+
+    @Override
+    protected void onSaveInstanceState(Bundle out) { super.onSaveInstanceState(out); web.saveState(out); }
+
+    @Override
+    protected void onRestoreInstanceState(Bundle state) {
+        super.onRestoreInstanceState(state);
+        if (web.restoreState(state) == null) start();
+    }
+
+    /** What the pages can call, as window.DSApp. */
+    private class Bridge {
+        @JavascriptInterface public String address() { return ha(); }
+        @JavascriptInterface public String appUrl() { return app(); }
+        @JavascriptInterface public String message() { return message; }
+        @JavascriptInterface public String detail() { return detail; }
+
+        /** The setup page: a Home Assistant address, or the link from Dashboard Studio. */
+        @JavascriptInterface public void setup(String input) {
+            runOnUiThread(() -> {
+                String text = input == null ? "" : input.trim();
+                if (text.isEmpty()) return;
+                if (!text.matches("(?i)https?://.*")) text = "http://" + text;
+                Uri u = Uri.parse(text);
+                if (u.getHost() == null || u.getHost().isEmpty()) { showSetup("offline", ""); return; }
+                save(origin(u), isIngress(text) ? text : "");
+                start();
+            });
+        }
+
+        @JavascriptInterface public void open(String url) {
+            runOnUiThread(() -> {
+                if (url == null || !url.startsWith(ha())) return;
+                save(ha(), url);
+                web.loadUrl(url);
+            });
+        }
+
+        @JavascriptInterface public void fail(String why, String more) { runOnUiThread(() -> showSetup(why, more)); }
+
+        /** Dashboard Studio: Install as an app, Change address. */
+        @JavascriptInterface public void reset() { runOnUiThread(() -> { message = ""; detail = ""; web.loadUrl(SETUP); }); }
+
+        /** Kiosk mode: keep the screen on and hide the system bars. */
+        @JavascriptInterface public void keepAwake(boolean on) {
+            runOnUiThread(() -> {
+                View decor = getWindow().getDecorView();
+                if (on) {
+                    getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
+                    decor.setSystemUiVisibility(View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
+                        | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION);
+                } else {
+                    getWindow().clearFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
+                    decor.setSystemUiVisibility(0);
+                }
+            });
+        }
+
+        /** The status and navigation bars take the dashboard's background color. */
+        @JavascriptInterface public void setBarColor(String css) {
+            runOnUiThread(() -> {
+                try {
+                    String c = css.trim();
+                    if (c.matches("#[0-9a-fA-F]{3}")) c = "#" + c.charAt(1) + c.charAt(1) + c.charAt(2) + c.charAt(2) + c.charAt(3) + c.charAt(3);
+                    if (c.matches("#[0-9a-fA-F]{8}")) c = "#" + c.substring(7) + c.substring(1, 7); // CSS #rrggbbaa, Android #aarrggbb
+                    int color = Color.parseColor(c) | 0xff000000;
+                    getWindow().setStatusBarColor(color);
+                    getWindow().setNavigationBarColor(color);
+                    double light = 0.299 * Color.red(color) + 0.587 * Color.green(color) + 0.114 * Color.blue(color);
+                    View decor = getWindow().getDecorView();
+                    int flags = decor.getSystemUiVisibility() & ~(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR | View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);
+                    if (light > 150) flags |= View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR | View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR;
+                    decor.setSystemUiVisibility(flags);
+                } catch (IllegalArgumentException ignored) { /* not a color Android knows */ }
+            });
+        }
+    }
+}