Make Webview Zoom Changeable from Home Assistant (#52)

* Add Page Zoom Control

Adds MQTT discovery for a "Page Zoom" input to control the `WEBVIEW.viewZoom` parameter.

The MQTT value has been configured to be in % which is then converted to a scale factor when assigned or read from `WEBVIEW.viewZoom`.

* Correct Type for page_zoom publishConfig

Accidentally replaced "number" with "zoom" when changing paramters.

* Add updateZoom Functionality to webview

Add a setter function for the viewZoom property that updates the zoom factor for all views when the property is changed.

js/integration.js

@@ -67,6 +67,7 @@ const init = async () => {
       initDisplay();
       initKeyboard();
       initPageNumber();
+      initPageZoom();
       initPageUrl();
 
       // Init client sensors
@@ -130,6 +131,7 @@ const update = async () => {
   // Update client sensors
   updateKiosk();
   updatePageNumber();
+  updatePageZoom();
   updatePageUrl();
   updateUpTime();
   updateLastActive();
@@ -453,6 +455,44 @@ const updatePageNumber = () => {
   publishState("page_number", pageNumber);
 };
 
+/**
+ * Initializes the page zoom and handles the execute logic.
+ */
+const initPageZoom = () => {
+  const root = `${INTEGRATION.root}/page_zoom`;
+  const config = {
+    name: "Page Zoom",
+    unique_id: `${INTEGRATION.node}_page_zoom`,
+    command_topic: `${root}/set`,
+    state_topic: `${root}/state`,
+    value_template: "{{ value | int }}",
+    mode: "slider",
+    min: 10,
+    max: 400,
+    unit_of_measurement: "%",
+    icon: "mdi:magnify-plus-outline",
+    device: INTEGRATION.device,
+  };
+  publishConfig("number", config)
+    .on("message", (topic, message) => {
+      if (topic === config.command_topic) {
+        const zoom = parseInt(message, 10);
+        console.log("Set Page Zoom:", zoom);
+        WEBVIEW.viewZoom = zoom / 100.0;
+      }
+    })
+    .subscribe(config.command_topic);
+  updatePageZoom();
+};
+
+/**
+ * Updates the page zoom via the mqtt connection.
+ */
+const updatePageZoom = () => {
+  const pageZoom = Math.round(WEBVIEW.viewZoom * 100.0);
+  publishState("page_zoom", pageZoom);
+};
+
 /**
  * Initializes the page url and handles the execute logic.
  */

js/webview.js

@@ -38,7 +38,15 @@ const init = async () => {
 
   // Init global properties
   WEBVIEW.viewUrls = urls;
-  WEBVIEW.viewZoom = zoom;
+  Object.defineProperty(WEBVIEW, "viewZoom", {
+    get() {
+      return this._viewZoom || zoom;
+    },
+    set(v) {
+      this._viewZoom = Math.max(0, v);
+      updateZoom();
+    },
+  });
   WEBVIEW.viewTheme = theme;
   WEBVIEW.widgetTheme = theme;
   WEBVIEW.widgetEnabled = widget;
@@ -315,6 +323,17 @@ const resizeView = () => {
   }
 };
 
+/**
+ * Updates zoom level for all webviews.
+ */
+const updateZoom = () => {
+  // And apply to all views
+  WEBVIEW.views.forEach((view) => {
+    view.webContents.setZoomFactor(WEBVIEW.viewZoom);
+  });
+
+};
+
 /**
  * Register window events and handler.
  */