display qr code + description when not running GUI v1

victronenergy · Sep 10, 2024 · a89790d · a89790d
1 parent 736f704
commit a89790d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 12 deletions.
diff --git a/src/app/Marine2/components/ui/RemoteConsole/RemoteConsole.tsx b/src/app/Marine2/components/ui/RemoteConsole/RemoteConsole.tsx
@@ -1,13 +1,66 @@
+import { useEffect, useRef, useState } from "react"
 import { observer } from "mobx-react-lite"
-import { translate } from "react-i18nify"
+import classnames from "classnames"
+import { translate, Translate } from "react-i18nify"
+import useSize from "@react-hook/size"
+import { useApp } from "@victronenergy/mfd-modules"
 import { QRCode } from "react-qrcode-logo"
-import Paginator from "../Paginator"
 
 const RemoteConsole = ({ host, width, height }: Props) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const [iframeWidth, iframeHeight] = useSize(iframeRef)
+
+  const [iframeLoaded, setIframeLoaded] = useState(false)
+  const loading = !iframeLoaded
+  const protocol = (typeof window !== "undefined" && window.location.protocol) || "http:"
+  const url = protocol + "//" + host
+  const app = useApp()
+
+  useEffect(() => {
+    iframeRef.current?.focus()
+  }, [iframeLoaded])
+
+  console.log(`Venus Running GUI version: ${app.guiVersion}`)
+
+  const consoleUrl = `${window.location.protocol}://venus.local/`
+
+  if (app.guiVersion !== 1) {
+    return (
+      <div className="flex flex-col items-center w-2/3 md:w-1/3 space-y-4">
+        <QRCode value={consoleUrl} />
+        <label className="text-xs text-victron-gray-400 sm-l:text-sm dark:text-victron-gray-500">{consoleUrl}</label>
+        <label className="text-xs text-victron-gray-400 sm-l:text-sm dark:text-victron-gray-500 text-center">
+          <Translate value={"error.remoteConsole.qrCodeMessage"} />
+        </label>
+      </div>
+    )
+  }
+
   return (
     <>
-      <div>
-        <QRCode value={window.location.origin} />
+      {
+        <iframe
+          ref={iframeRef}
+          className={classnames("max-w-screen-md flex-grow h-96 py-3.5 block hide-remote-console:hidden", {
+            hidden: loading,
+            "scale-110": iframeWidth * 1.1 < width && iframeHeight * 1.1 < height,
+            "scale-125": iframeWidth * 1.25 < width && iframeHeight * 1.25 < height,
+            "scale-150": iframeWidth * 1.5 < width && iframeHeight * 1.5 < height,
+          })}
+          src={url}
+          title={translate("pages.remoteConsole")}
+          onLoad={() => setIframeLoaded(true)}
+        />
+      }
+
+      {loading && (
+        <div className={"text-center text-base p-4 block hide-remote-console:hidden"}>
+          <Translate value={"common.loading"} />…
+        </div>
+      )}
+
+      <div className={"text-center text-base p-4 hidden hide-remote-console:block"}>
+        <Translate value={"error.remoteConsole.screenTooSmall"} />
       </div>
     </>
   )

diff --git a/src/app/Marine2/components/ui/SettingsMenu/SettingsMenu.tsx b/src/app/Marine2/components/ui/SettingsMenu/SettingsMenu.tsx
@@ -10,7 +10,6 @@ import RadioButton from "../RadioButton"
 import { AppViews, useAppViewsStore } from "../../../modules/AppViews"
 import Button from "../Button"
 import classNames from "classnames"
-import { QRCode } from "react-qrcode-logo"
 
 const SettingsMenu = () => {
   const { locked, toggleLocked } = useAppStore()
@@ -114,11 +113,6 @@ const SettingsMenu = () => {
                 </span>
                 <ToggleSwitch id="Toggle2" onChange={setAutoMode} />
               </label>
-              <label className="flex justify-between items-center pb-4 sm-m:pb-6 sm-l:pb-8">
-                <span className="mr-1 text-sm sm-m:mr-2 sm-l:text-base text-black dark:text-white">
-                  <QRCode value={window.location.origin} />
-                </span>
-              </label>
               <Button onClick={openRemoteConsole} className="w-full" size="md">
                 {translate("header.remoteConsole")}
               </Button>

diff --git a/src/app/locales/languages/en.json b/src/app/locales/languages/en.json
@@ -143,8 +143,9 @@
         "queryParams": "Query params: %{queryParams}",
         "remoteConsole": {
             "connectionFailed": "Unable to connect to the GX device",
-            "screenTooSmall": "Open in a larger screen to view remote console"
-        },
+            "screenTooSmall": "Open in a larger screen to view remote console",
+            "qrCodeMessage": "To access the GX Remote Console, make sure your phone is on the same WiFi network as the GX device and then scan this QR code."
+          },
         "userAgent": "User agent: %{userAgent}",
         "windowSize": "Window: %{width} x %{height}"
     },