Wie erstelle ich ein interaktives Hilfe System für Benutzer?

Dashboard/Cards/Frontend
1

Hallo zusammen,

meine Idee ist es, dem Anwender kleine Hilfetexte oder weiter Informationen innerhalb des Dashboards zu Schaltern, Karten, Statistiken usw. bereitzustellen, die über Pop-ups oder Flyout usw. angezeigt werden sollen. Ich stelle mir das so vor, dass ich die über eine Tastenkombination oder kleinen Icons aufrufe und irgendwo zentral alle Hilfstexte verwalten kann.

Klar, man könnte sich da etwas selber bauen, aber schöner wäre es ja, wenn es da schon was gibt, was ich noch nicht gefunden habe. Hat da schon mal jemand was umgesetzt oder kennt ein passende HACS Erweiterung?

2

Yup. Z.B. mit Markdown-Cards. Die scheinen prädestiniert dafür zu sein. :wink:

Falls Du etwas findest sag Bescheid. :blush:

3

Moin,

mir ist der gesamte Umfang, den Du anstrebst, noch nicht klar und deswegen behaupte ich mal, dass es da noch keine Out of the Box Lösung gibt!

Aber die Bubble Cards haben glaube ich schon Tab/Navigate Aktions, die man dann auf Pop-Up Karten, auch von Bubble, legen kann.
Da kann man dann entweder Markdown Karten nehmen, um da Informationen anzuzeigen, oder ein Linkt zu einer Wiki-Seite einbinden.

VG
Bernd

4

Zur Ideefindung:

Ich nutze auf bestimmten Seiten Info-Abschnitte, die per default eingeklappt sind.
image
Per Klick kommt dann eine Erklärung

image
image619×225 18.3 KB

Als Karte wird die Markdown verwendet, wie Vorredner schon empfohlen hat.

3 „Gefällt mir“
5

Sehr gute Idee, würdest du den Code teilen?

6

Hier der Abschnittscode:

type: grid
cards:
  - type: heading
    heading: Info
    heading_style: title
    icon: mdi:information
    tap_action:
      action: perform-action
      perform_action: input_boolean.toggle
      target:
        entity_id: input_boolean.dashboard_raum_menue_sonstiges
  - type: markdown
    content: >
      <b><font color=#009AC7>Einführung</font></b>


      Unsere Wohnung wird über eine ...


    visibility:
      - condition: state
        entity: input_boolean.dashboard_raum_menue_sonstiges
        state: "on"
    card_mod:
      style: |
        ha-card {
          --ha-card-background: #E5E5E5;
          font-size: 10pt;
          color: #595959;
          line-height: normal;
          border: 1px solid white;
        }

Was Du zusätzlich machen kannst, ist über eine Automatisation die Karte nach bestimmter Zeit wieder zuklappen.

  • Trigger: Status boolean von Aus → An für xxx Sekunden
  • action: input_boolean.turn_off
2 „Gefällt mir“
7

Super! Vielen Dank, auch für den Tipp am Ende.

8

@dp20eic um deine Frage zu beantworten, ich dachte, dass man im Backende eine Liste mit den Texten hat. Jeder Texte hat eine ID und ggf. ein paar Optionen wie er angezeigt werden soll. Markdown nutzen ist nice, aber ggf. nicht jedermanns Sache

Die Texte sollte man schon beim Erstellen den unterschiedlichen Integrationen und manuell anzulegenden Gruppen zuordnen können, um beim Einsetzten im Dashbord diese als Filterung nutzen zu können.

Im Dashboard soll dann quasi über eine Auswahl die ID mit einem mini Icon oder einem anderen Aufrufmechanismus eingesetzt, um den Text aufrufen zu können. Der Text sollte dann der Einfachheit halber überlagernd als PopUp oder was ähnlichen angezeigt werden.

Da man bestimmt Probleme mit einem sinnvoll kontextbezogenen Positionierung der Icons gibt, wäre das optimale, was sich aber wahrscheinlich nicht umsetzten lässt, ein PlugInPlugIn. Also quasi ein PlugIn, was sich in alle Plugins einpflanzt, um eine Hilfefunktion bereitstellen zu können, die man von außen mit Text befüllen kann.

Das wäre dann wahrscheinlich eine globale Hilfefunktionalität, die nur der Core umsetzten könnte.