HACS Browser_Mod

[scw2wi]

Den Tipp für diese Integration hab ich schon vor langem hier erhalten, mir aber jetzt erst die Zeit genommen, in dieses Thema einzusteigen.

Auf Browser_mod - turn your browser into a controllable device, and a media_player
wird in über 2.500 Posts viel dazu geschrieben und die Möglichkeiten sind echt nicht schlecht.

Solange ich mit HA nur herumspiele wie jetzt sind die Möglichkeiten dieser Integration für mich nur mal zum Lernen gedacht. Irgendwann werde ich im Haus aber 1 bis 3 Wandtablets haben, und dann wäre es schön, wenn ich die Anzeige gezielt auf bestimmten Geräten individuell steuern kann. Browser_Mod kann aber noch viel mehr.

Nach der Installation bekommt man im Menü einen neuen Eintrag und kann darüber dann neue Browser registrieren. Verwirrend ist für mich hier die Bezeichnung browser_id, da es ja eigentlich eine Geräte_ID ist, denn wenn ich bei meinem PC in 2 Fenstern 2 Browser öffne, dann haben beide dieselbe browser_id.

Die Frontend Settings im unteren Bereich zeigen schon mal viele Möglichkeiten auf und sind auch sehr gut dokumentiert, ich werde auf diese Möglichkeiten daher hier gar nicht im Detail weiter eingehen.

Die für mich wichtigsten Funktionen dort sind wohl: Hide sidebar, Hide header und Default dashboard. Damit kann ich dann die Tablets anders aussehen lassen als die Anzeige auf meinem PC. Browser_mod kann diese Einstellungen anhand der browser_id und der user_id vornehmen, HA selbst könnte es nur sehr rudimentär anhand der user_id. Den Hinweis, dass man den HA-Support nicht belästigen soll, wenn man sich mit Hide sidebar selbst ausgesperrt hat, würde ich ernst nehmen. In diesem Fall geht man einfach manuell auf die Seite /browser_mod und aktiviert die Sidebar wieder.

Jetzt möchte ich aber zu den für mich viel spannenderen Möglichkeiten kommen.
Mein Browser wurde unter der folgenden ID registriert: browser_mod_0402ba9b_8c5e629b
Wer lieber einen sprechenden Namen möchte, der kann auch einen Alias dafür vergeben.

Für jedes registrierte Gerät werden auch mehrere browser_mod Entitäten erstellt und diese werde ich zu Testzwecken mal im Dashboard anzeigen.
Ich habe für browser_mod insgesamt 3 Dummy-Buttons auf einem Test-Dashboard erstellt, die ich hier alle der Reihe nach beschreiben werde.
Die Code-Beispiele werde ich hier nur gekürzt einbetten, der vollständige Code ist dann im Textfile angefügt.
Achtung: Ich habe an einer Stelle das Unicode-Zeichen ⇨ verwendet, bitte den Text daher nicht als ASCII-File behandeln.

HACS - Browser_Mod Buttons.png

Der 1. Button (also der oberste im Screenshot) ist noch wirklich sehr einfach gestrickt und stellt daher einen guten Einstieg dar.
Zuerst einmal zeigt er 3 der erstellten Sensoren an: browser_id im Name und browser_width, browser_height im Label.

Zusätzlich lasse ich mir im Label auch noch das Seitenverhältnis eines Tablet-Displays berechnen, das am besten zum aktuellen Window passen würde.
Damit kann ich erkennen, ob mein Dashboard besser auf einem 16:9 oder einem 16:10 Display angezeigt werden kann.
Den Code musste ich natürlich nicht selbst tippen, den hat mir ChatGPT fehlerfrei erstellt.

type: custom:button-card
name: >
  [[[ return 'PC-Monitor: ' +
  states['sensor.browser_mod_0402ba9b_8c5e629b_browser_id'].state; ]]]
label: |
  [[[
    var width = states['sensor.browser_mod_0402ba9b_8c5e629b_browser_width'].state;
    var height = states['sensor.browser_mod_0402ba9b_8c5e629b_browser_height'].state;

    const standards = {
      "16:9": 16 / 9,
      "16:10": 16 / 10,
      "4:3": 4 / 3,
      "3:2": 3 / 2,
      "1:1": 1 / 1,
      "21:9": 21 / 9
    };
    
    if (isNaN(width) || isNaN(height)) {
      return 'Information nicht verfügbar';
    }
    else {
      var ratio = width / height;
      var closest = null;
      var minDiff = Infinity;

      for (const [label, value] of Object.entries(standards)) {
        const diff = Math.abs(ratio - value);
        if (diff < minDiff) {
          minDiff = diff;
          closest = label;
        }
      }
      return `Breite: ${width} px / Höhe: ${height} px ⇨ Format: ${closest}`;
    }
  ]]]

Produktiv kann ich diesen Button aber nicht wirklich verwenden, denn es wäre sinnlos auf allen Geräten die Abmessungen dieses einen Windows-PCs anzuzeigen.
Daher habe ich einen weiteren Button (der mittlere im Screenshot) erstellt, der als Popup die Abmessungen des aktuellen Gerätes anzeigen soll, auf dem der User den Button geklickt hat.

HACS - Browser_Mod Popup.png

Um diesen Code besser zu verstehen, sollte man die Dokumentation der Browser Mod Services durchgelesen und auch verstanden haben.

HA berechnet ja das meiste was die Anzeige betrifft im Backend, und dieses Backend hat keine Ahnung vom Frontend und daher auch keine Information über den Browser und seine Bildschirm-Auflösung. Daher muss beim Code immer zwischen Server call und Browser call unterschieden werden.

Beginnen wir mit einem Code-Auszug der 2. Karte (also dem Frontend Code) mit dem Ziel, die aktuelle browser_id in einem Popup anzuzeigen.
Der vollständige Code ist wie gesagt im Attachment zu finden.

type: button
name: show browser_id
icon: mdi:identifier
tap_action:
  action: fire-dom-event
  browser_mod:
    service: script.browser_mod_show_browser_id
    data:
      browser_id: THIS
      user_id: THIS
​

Die Action fire-dom-event ist eine Spezial-Aktion von browser_mod, um die jeweils aktuellen ID-Werte über THIS ans Backend zu übergeben.
Der Backend-Code in Form eines Scripts nimmt diese Werte entgegen und öffnet ein Popup-Window, wo sie dargestellt werden.
Hier wieder ein gekürzter Script-Code, auch dieser Code ist vollständig im Attachment eingefügt.

browser_mod_show_browser_id:
  sequence:
    - action: python_script.aspect_ratio
      data:
        width: "{{ states('sensor.' ~ browser_id ~ '_browser_width') }}"
        height: "{{ states('sensor.' ~ browser_id ~ '_browser_height') }}"
      response_variable: python_script_output
    - action: browser_mod.popup
      data:
        title: "browser_mod infos"
        icon: mdi:information-variant
        timeout: 60000
        content: >
          <font color="darkgrey">browser_id: </font>{{browser_id}}<br>
          <font color="darkgrey">user_id: </font>{{user_id}}<br>
          <font color="darkgrey">User-Name: </font>{{ states('sensor.' ~ browser_id ~ '_browser_user') }}<br>
          <br>
          <font color="darkgrey">Fenster-Breite/Höhe: </font>{{ states('sensor.' ~ browser_id ~ '_browser_width') }} px / {{ states('sensor.' ~ browser_id ~ '_browser_height') }} px<br>
          <font color="darkgrey">Seitenverhältnis: </font>{{ python_script_output.aspect_ratio }}<br>

In der 2. Action öffnet browser_mod.popup ein nach 60s automatisch schließendes Popup (das laut Doku noch viel mehr Gestaltungsmöglichkeiten bietet) und stellt im Content die übergebenen Sensor-Werte als HTML Text dar.

Ich hatte jedoch hier ein Problem mit der Berechnung des Seitenverhältnisses, da ich direkt im Skript diese Berechnung nicht durchführen konnte, und einem Template-Sensor wiederum die Werte nicht übergeben könnte. Als beste Lösung dafür erschien mir der Aufruf eines Python Scripts. Wenn jemand dafür andere Lösungen kennt wäre es interessant, diese hier zu vergleichen.

Wer bis jetzt Python in HA noch nicht installiert hat findet in folgendem Beitrag eine Anleitung dazu: HA Python Scripts
Das Python-Script selbst hat mir wieder ChatGPT erstellt und ich zeige zum Verständnis der Aufrufes nur einen stark gekürzten Code-Auszug, da es hier ja nicht um Python geht. Wer sich doch dafür interessiert, in meinem Python Beitrag hab ich's genauer erklärt.

width = float(data.get("width", 0))
height = float(data.get("height", 0))

if width == 0 or height == 0:
    return_string = "unbekannt"
else:
    # hier erfolgt in einer Schleife die Berechnung mit dem Ergebnis in closest
    return_string = closest

# return_string über die output Variable in eine response_variable schreiben
output["aspect_ratio"] = return_string
​

Damit ist jetzt auch klar, was in der 1. Action oben passiert. Da wird einfach das Python Script aufgerufen, die beiden Parameter width & height übergeben, und das Ergebnis als JSON-String in die Response-Variable 'python_script_output' geschrieben. Mit {{ python_script_output.aspect_ratio }} wird aus dem JSON-Objekt dann der (übrigens einzige) Wert für aspect_ratio geholt und angezeigt.

Da ich mit dem Ergebnis immer noch nicht zufrieden war, hab ich noch eine dritte Lösung erstellt, die jetzt keinen Button mehr benötigt.

Auf meinem Windows-PC möchte ich bei jeder Änderung des Browser-Fensters die neuen Abmessungen automatisch eingeblendet bekommen, ohne dass ich auf mein Test-Dashboard mit den Dummy-Buttons navigieren muss. Auch das ist mit browser_mod sehr einfach umsetzbar. Es gibt ja die von browser_mod erstellen Sensoren für width & height und ein Automation-Trigger kann auf deren Änderung reagieren.

HACS - Browser_Mod Notification.png

Hier wieder der leicht gekürzte Code der Automation:

- id: benachrichtigung_bei_fenstergroessenaenderung
  trigger:
    - platform: state
      entity_id: sensor.browser_mod_0402ba9b_8c5e629b_browser_width
  variables:
    browser_id: "browser_mod_0402ba9b_8c5e629b"
    user_id: "9b1ccef039234a6688d73ccadd48b097"
  action:
    - action: python_script.aspect_ratio
      data:
        width: "{{ states('sensor.' ~ browser_id ~ '_browser_width') }}"
        height: "{{ states('sensor.' ~ browser_id ~ '_browser_height') }}"
      response_variable: python_script_output
    - service: browser_mod.notification
      data:
        browser_id: "{{ browser_id }}"
        duration: 5000
        message: >
          Neue Fenstergröße: {{ states('sensor.' ~ browser_id ~ '_browser_width') }}
          x {{ states('sensor.' ~ browser_id ~ '_browser_height') }}
          ⇨ {{ python_script_output.aspect_ratio }}
        action_text: "Popup"
        action:
          service: script.browser_mod_show_browser_id
          data:
            browser_id: "{{ browser_id }}"
            user_id: "{{ user_id }}"
​

Die 1. Action ruft auch hier wieder das Python Script auf. In der 2. Action wird jetzt eine browser_mod.notification verwendet. Entgegen einem Popup am oberen Bildschirmrand, das per Default ewig stehen bleiben würde, wird eine Notification am unteren Rand und meist nur wenige Sekunden eingeblendet. Mit action_text und action hab ich noch die Möglichkeit, das Popup Fenster zusätzlich anzeigen zu lassen, wenn ich die kurze Zeit nutze, um da draufzuklicken.

Das war das Ergebnis meines ersten Kennenlernens dieser außergewöhnlichen Integration und wer die Dokumentation aufmerksam durchliest wird noch viele weitere spannende Möglichkeiten von browser_mod entdecken.

browser_mod.navigate: Um z.B. anhand eines Ereignisses (auf einem bestimmten Gerät oder für einen bestimmten User) eine definierte Seite anzusteuern.

browser_mod.more_info: Öffnet den More-Info Dialog einer bestimmten Entity.

browser_mod.close_popup: schließt ein zuvor geöffnetes Popup wieder.

browser_mod.set_popup_style: Die Möglichkeiten zu Popups muss man in der Doku nachlesen, da gibt es wirklich viele Einstellungen.

browser_mod.set_theme: Kann das Thema umschalten, z.B. tagsüber auf Hell, in der Nacht auf Dark.

browser_mod.sequence: Wenn man mehrere browser_mod Aktionen hintereinander ausführen möchte, dann muss man diese mit einer Sequence klammern, damit die Parameterübergabe klappt. Ich hab oben in den Beispielen aber immer nur eine browser_mod.action verwendet, daher war das nicht notwendig.

browser_mod.delay: für eine Pause zwischen den sequence-actions.

browser_mod.console: Debug-Text in der Javascript Console.

browser_mod.javascript: Um beliebigen Javascript Code im Browser laufen zu lassen. Ein User hat im Forum nach einem Beispiel gefragt aber keine Antwort bekommen. ChatGPT war da schon etwas kreativer als die Community und hat vorgeschlagen, mit window.scrollTo eine Seite nach längerer Inaktivität nach oben zu scrollen.

browser_mod.change_browser_id: Im Forum wird berichtet, dass der Browser seine ID vergessen kann, damit kann man sie dann wieder auf den alten Wert setzen.
Ich hab dafür sogar einen Service-Button erstellt, das ist jetzt der unterste im Screenshot.

type: button
description: Rücksetzen der browser_id
name: change browser_id
tap_action:
  description: nach einem Clear-Browser-Cache kann damit die alte ID neu ausgewählt werden
  action: call-service
  service: browser_mod.change_browser_id
​

Es gibt auch noch Funktionen für einen Media-Player, für den Fully-Kiosk-Browser und weiteres, aber das hebe ich mir alles für später auf.

So, das war's, jetzt seid ihr dran, von euren Erfahrungen mit browser_mod zu berichten.

Weitere Beiträge dieser Serie:

HACS Wetterkarte
HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
HACS Schieberegler (inkl. Möglichkeiten der Icon Farbanpassung & erste Vorstellung Farbschema)
HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)
HACS stack-in-card für Raum-Card
HACS Graph-Cards
HACS Thermostat-Cards
HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)
HACS Reminder (trash-card, atomic-calendar-revive)
HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)
HA-Behaglichkeits-Diagramm
HA Kurzeinführung
HACS Sidebar & Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana

[Tru]

Hinweis: wenn browser_mod verwendet wird, unbedingt das automatische Erstellen der Entitäten deaktivieren. Ich musste nach einer Weile Hunderte von Browser Entitäten löschen und das System wurde seeeehr langsam ...

[scw2wi]

Meinst du die Auto-Register Funktion?

HACS - Browser_Mod - Auto-Register.png

Die ist eigentlich per Default deaktiviert, zumindest kann ich mich nicht erinnern, die angefasst zu haben.

[Tru]

Die ist eigentlich per Default deaktiviert, zumindest kann ich mich nicht erinnern, die angefasst zu haben.

Das ist richtig. Besser nicht verändern.