Test lovelace 4.x

[Garfonso]

@david-g

Hilft dir das
https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md#browser_modpopup

bzw., die Beispiele hier:
https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/popups.md
(musst du allerdings, soweit ich mich entsinne, in JSON "übersetzen", also überall " drum herum und die Neuzeilen durch {}-Klammern ersetzen, bzw. wenn was ne Liste mit - ist, []-Klammern)

[David G.]

@garfonso

Habe grad hier im Thread von @XBiT das gefunden:

show_name: true
show_icon: true
type: button
entity: alarm_control_panel.defaultAlarm
icon: mdi:lightbulb
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Tescht
      content:
        type: markdown
        content: >
          # <center>Haustür</center>

          <a href="/lovelace/kamera-haustuer"><img
          src='{synology.0.SurveillanceStation.cameras.Haustür.linkMjpegHttpPath}'
          />
name: Email abholbereit

Klappt auch.

Bei meiner Abwandlung bleit das Popup aber leer:

show_name: true
show_icon: true
type: button
entity: alarm_control_panel.defaultAlarm
icon: mdi:lightbulb
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      type: button
      show_name: true
      show_icon: true
      tap_action:
        action: toggle
      entity: alarm_control_panel.defaultAlarm
name: Email abholbereit

[XBiT]

@david-g

kann es sein, dass du es einfach so machen kannst?

show_name: true
show_icon: true
type: button
entity: alarm_control_panel.defaultAlarm
icon: mdi:lightbulb
name: Email abholbereit

[Garfonso]

@david-g

Ja, vergleich mal genau was nach dem ersten "data:" kommt. Da hat @XBiT zuerst "titel: Tescht" und dann "content: " und dann die Karte.

Du fängst aber direkt mit der Karte an. Da muss mindestens noch ein "content:" davor und das ganze eine Ebene tiefer.

[David G.]

@garfonso @XBiT

Das war mir vorhin auch schon aufgefallen.
Bleibt aber noch immer leer das popup.

show_name: true
show_icon: true
type: button
entity: alarm_control_panel.defaultAlarm
icon: mdi:lightbulb
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Tescht
      content:
        show_name: true
        show_icon: true
        type: button
        tap_action:
        action: toggle
        entity: alarm_control_panel.defaultAlarm
name: Email abholbereit

Wenn ich den Button für das Popup falsch konfigurie, bekomme ich auch schön die rote Fehlermeldung im popup.

[XBiT]

@david-g

ist der "mini Code" von mir oben nicht das was du willst?

[David G.]

@xbit

Tatsache.
Hab gedacht das wäre eine Ergänzung für den Service call......

Für das was ich vor habe reicht es in der Tat.
Aber ich stehe grad am Schlauch...
Wo ist definiert, dass er ein Popup macht?
Wenn ich den DP anpassen geht es nicht mehr.
Aber der Ansatz mit more_info klappt. Manchmal denkst man viel zu kompliziert...

Dass ich in meinem Beispiel die selbe entity schalte wie im button war aber Zufall
Wo ich einmal dran bin, würde ich gerne auch eine eigene Karte (außer Markdown) ins Popup bekommen.

P. S.
Mich würde ja brennend interessieren, was sich hinter dem Steak 🥩 (falls es eins ist ^^) in deiner Navigation verbirgt

[XBiT]

@david-g

Erstmal das wichtigste sicher ist es ein Steak aber leider ist die Ansicht seit Jahren nicht fertig... es werden alle Daten von einen Meater Block und Meater+ angezeigt aber wenn man am Grill steht kann man leider keine View bauen...

Mit der normalen Button Card und Popup tue ich mich schwer... die hat ja einen Visuellen Editor mit Popup Integration klappt bei mir auch nicht so richtig...

ich bin ja ein Freund von der "custom:button-card"

hier mal ein Bsp. mit kurzen und langen drücken... vielleicht kannst du da ja was von gebrauchen...

Spoiler

type: custom:button-card
aspect_ratio: 2.5/1
variables:
 name: TV + STB Schlafzimmer
 icon_on: mdi:power-socket-de
 icon_off: mdi:power-plug-off
 entity_switch: switch.TV_STB_Schlafzimmer_DG_Switch
 confirm_text_switch_off: TV + STB Schlafzimmer wirklich ausschalten?
 confirm_text_switch_on: TV + STB Schlafzimmer wirklich einschalten?
 titel_popup: TV und STB Schlafzimmer
 titel_diagramm: Diagramm
 titel_verbrauch: History
 pfad_verbrauch: >-
   sourceanalytix.0.alias__0__TV + STB Schlafzimmer
   DG__Power.currentYear.consumed
 sensor_graph: sensor.TV_und_STB_Schlafzimmer_DG_Power
 sensor_power: sensor.TV_und_STB_Schlafzimmer_DG_Power
triggers_update:
 - '[[[ return variables.sensor_power ]]]'
entity: '[[[ return variables.entity_switch ]]]'
name: '[[[ return variables.name ]]]'
icon: '[[[ return variables.icon_on ]]]'
show_last_changed: true
state:
 - value: 'off'
   icon: '[[[ return variables.icon_off ]]]'
   color: var(--XBiT-icon-color-off)
 - value: 'on'
   icon: '[[[ return variables.icon_on ]]]'
   color: var(--XBiT-icon-color-on)
styles:
 icon:
   - width: 20%
 card:
   - border-radius: 0px
 name:
   - font-size: 12px
   - font-family: Helvetica
   - justify-self: center
 label:
   - font-size: 7px
   - font-family: Helvetica
 grid:
   - grid-template-areas: '"n" "i" "power" "l"'
   - grid-template-columns: 1fr
   - grid-template-rows: min-content 1fr min-content min-content
 custom_fields:
   power:
     - background-color: transparent
     - font-size: 12px
     - font-family: Helvetica
tap_action:
 action: toggle
 service_data:
   entity_id: '[[[ return variables.entity_switch ]]]'
 confirmation:
   text: |
     [[[ 
     if (states[variables.entity_switch].state == 'off')
     return variables.confirm_text_switch_on;
     return variables.confirm_text_switch_off; ]]]
hold_action:
 action: fire-dom-event
 browser_mod:
   service: browser_mod.popup
   data:
     title: '[[[ return variables.titel_popup ]]]'
     content:
       type: custom:button-card
       styles:
         card:
           - border-radius: 0px
           - background-color: rgba(51, 72, 125, 1)
           - opacity: 1
         name:
           - font-size: 15px
           - font-family: Helvetica
           - justify-self: center
         grid:
           - background-color: transparent
           - grid-template-areas: '"n" "graph_gesamt" "verbrauch_gesamt"'
         custom_fields:
           verbrauch_gesamt:
             - background-color: rgba(0, 0, 0, 0)
             - font-size: 15px
           graph_gesamt:
             - background-color: transparent
             - background: transparent
       custom_fields:
         graph_gesamt:
           card:
             type: custom:mini-graph-card
             name: '[[[ return variables.titel_diagramm ]]]'
             entities:
               - entity: '[[[ return variables.sensor_graph ]]]'
             hour24: true
             unit: Watt
             icon: mdi:flash
             hours_to_show: 12
             update_interval: 0
             points_per_hour: 60
             decimals: 1
             line_width: 2
             align_state: center
             aggregate_func: max
             smoothing: false
             show:
               graph: linie
               line_color: var(--accent-color)
               icon: false
               state: true
               points: false
               animate: true
               name: true
               labels: false
               labels_secondary: false
               name_adaptive_color: true
               icon_adaptive_color: true
               fill: true
               extrema: true
         verbrauch_gesamt:
           card:
             type: markdown
             title: '[[[ return variables.titel_verbrauch ]]]'
             content: >-
               [[[ return "<center><table width=100%><tr><td
               align=´left´>heute: </td><td align=´right´> {"
               +[variables.pfad_verbrauch +".01_currentDay}"] + "
               kWh</td></tr><tr><td align=´left´>gestern: </td><td
               align=´right´> {" +[variables.pfad_verbrauch
               +".01_previousDay}"] + " kWh</td></tr><tr><td align=´left´>diese
               Woche: </td><td align=´right´> {" +[variables.pfad_verbrauch
               +".02_currentWeek}"] + " kWh</td></tr><tr><td
               align=´left´>vorige Woche: </td><td align=´right´> {"
               +[variables.pfad_verbrauch +".02_previousWeek}"] + "
               kWh</td></tr><tr><td align=´left´>diesen Monat: </td><td
               align=´right´> {" +[variables.pfad_verbrauch
               +".03_currentMonth}"] + " kWh</td></tr><tr><td
               align=´left´>vorigen Monat: </td><td align=´right´>{"
               +[variables.pfad_verbrauch +".03_previousMonth}"] + "
               kWh</td></tr><tr><td align=´left´>dieses Quartal: </td><td
               align=´right´> {" +[variables.pfad_verbrauch
               +".04_currentQuarter}"] + " kWh</td></tr><tr><td
               align=´left´>voriges Quartal: </td><td align=´right´> {"
               +[variables.pfad_verbrauch +".04_previousQuarter}"] + "
               kWh</td></tr><tr><td align=´left´>dieses Jahr: </td><td
               align=´right´> {" +[variables.pfad_verbrauch
               +".05_currentYear}"] + " kWh</td></tr><tr><td
               align=´left´>voriges Jahr: </td><td align=´right´> {"
               +[variables.pfad_verbrauch +".05_previousYear}"] + "
               kWh</td></tr></table></center>"; ]]]
custom_fields:
 power: |
   [[[ 
   if (states[variables.sensor_power].state == '0')
   return ' 0 Watt';
   if (states[variables.sensor_power].state == 'on')
   return ' ';
   return + states[variables.sensor_power].state + " Watt"; ]]]

[David G.]

@xbit sagte in Test lovelace 4.x:

aber wenn man am Grill steht kann man leider keine View bauen...

Da muss man eindeutig Prioritäten setzen ^^.

Die custom button card hab ich mir noch nie so genau angeschaut.
Wenn ich das sehe, sollte ich das wohl mal machen.

Danke fürs Beispiel.

[David G.]

@xbit

Hab das jetzt mal mit der confirmation gemacht.
Das finde ich klasse.

type: custom:button-card
aspect_ratio: 2.5/1
entity: input_boolean.xxx_Versand_Heft_abholbereit
name: Hefte abholbereit
icon: mdi:check
confirmation:
  text: '[[[ return `Soll die Mail wirklich an xxx versendet werden?` ]]]'

Die Karte kann ja echt derbe viel.

Bist du "fit" mit Ihr?

Weist du üb ich unter den Namen der Schaltfläche noch den Text anzeigen lassen kann:
"Mail zuletzt versendet am 18.10 8:44"

Also den ts der letzten Änderung mit einem Text vor.

EDIT
Hab es jetzt so, allerdings fehlt jetzt das Icon

type: custom:button-card
aspect_ratio: 2.5/1
entity: input_boolean.xxx_Versand_Heft_abholbereit
name: Hefte abholbereit
icon: mdi:check
confirmation:
  text: '[[[ return `Soll die Mail wirklich an xxx versendet werden?` ]]]'
custom_fields:
  text: |
    Lalalalala
styles:
  grid:
    - grid-template-areas: '"i" "n" "text"'
    - grid-template-rows: min-content 1fr min-content
    - grid-template-columns: 1fr

Edit 2:
Hab es jetzt so gelöst:

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: false
  border_radius: false
  outer_padding: false
cards:
  - type: custom:button-card
    aspect_ratio: 2.5/1
    entity: input_boolean.xxx_Versand_Heft_abholbereit
    name: Hefte abholbereit!
    icon: mdi:check
    confirmation:
      text: '[[[ return `Soll die Mail wirklich an xxx versendet werden?` ]]]'
  - type: markdown
    content: >-
      <center>Mail zuletzt
      gesendet:<br>{0_userdata.0.xxx.Versand.Heft_abholbereit.lc;
      date(DD.MM.YYYY hh:mm)}

Wenn ich das Binding in die custom button card einaue schreibt er das Binding als Text anstatt den Inhalt des DPs.

[XBiT]

@david-g

Kannst du mir dein Datenpunkt 0_userdata.0.xxx.Versand.Heft_abholbereit mal zeigen, dass ich ihn mir anlegen kann zum testen also den Inhalt im Objektbaum.
Und vielleicht ein Screenshot vom ersten Edit und wo der Test hin soll..

[David G.]

@xbit

Der DP ist nur ein einfacher bool.
Wenn er auf true geht, wird eine Mail versendet und dann wieder auf false gesetzt.

So sieht es mir dem Code aus Edit 1 aus:

xxx ist ein Platzhalter. Da steht eigentlich ein Kundenname.

EDIT
So, wenn ich die 2 untersten Zeilen unten lösche, dann verliert das Icon die Farbe.

Edit zu meinem vorherigen Beitrag.
Das Binding soll nicht den Inhalt zeigen sondern den TS mit

{0_userdata.0.xxx.Versand.Heft_abholbereit.lc;
      date(DD.MM.YYYY hh:mm)}

[XBiT]

@david-g

bin noch nicht so ganz fertig oder reicht es dir so ?

[David G.]

@xbit

Cooler wäre schon, wenn da das Datum mit Uhrzeit steht.
Wie zahlt er das hoch? Steht da irgendwann 2 Wochen etc?

Vermutlich schon. Dann reicht es so eigentlich.

Die Mail darf nur in gewissen Abständen (1x im Monat) versendet werden.
Dazu soll es als Kontrolle dienen, dass Kollege A das nicht macht obwohl B es bereits erledigt hat.

So hab ich es mit dem vertical stack:

Wird Zeit, dass ich auf der Arbeit mal ein ordentliches Theme hinterlege ^^.

Eigentlich total übertrieben für eine Mail.
Ich hasse es nur Dinge die regelmäßig gemacht werden müssen manuell zu erledigen.
Und da ich bei dem Monatlichen Job eh in einer View für den Auftrag unterwegs bin ^^.

[XBiT]

@david-g

das war nicht so einfach weil ich es so noch nie gebraucht habe...
Hier ein Beispiel:

Spoiler

type: custom:button-card
variables:
 icon_on: mdi:check
 icon_off: mdi:check
entity: input_boolean.Forum_XBiT_Versand_Heft_abholbereit
name: Hefte abholbereit!
icon: '[[[ return variables.icon_on ]]]'
state:
 - value: 'off'
   icon: '[[[ return variables.icon_off ]]]'
   color: white
 - value: 'on'
   icon: '[[[ return variables.icon_on ]]]'
   color: black
confirmation:
 text: '[[[ return `Soll die Mail wirklich an xxx versendet werden?` ]]]'
styles:
 grid:
   - grid-template-areas: '"n" "i" "Timestap"'
   - grid-template-columns: 1fr
   - grid-template-rows: min-content 1fr min-content min-content
custom_fields:
 Timestap: |
   [[[
      return "Mail zuletzt gesendet: " + helpers.formatDateTime(states[entity.entity_id].last_changed);
   ]]]

[David G.]

@xbit

Vielen Dank.
Das ist perfekt.

Die Karte ist mir mal noch eine Nummer zu hoch
Muss ich mich mal einarbeiten.

[Erstam]

Hallo zusammen!

Ich bekomme die Services input_number.decrement und input_number.increment nicht wie in der Doku beschrieben ans Laufen, sondern erhalte die folgende Fehlermeldung.

Hat irgendwer eine Idee, woran das liegt?

Unknown service: increment ({"type":"call_service","domain":"input_number","service":"increment","service_data":{"step":5},"id":363}) 

Hier der Auszug aus der YAML:

    tap_action:
      action: call-service
      service: input_number.increment
      service_data:
        entity_id: input_number.Haus_Energie_Wallbox_evChargeLimitSOCSet
        step: 5

input_number.set_value funktioniert hingegen problemlos mit folgender YAML:

    tap_action:
      action: call-service
      service: input_number.set_value
      service_data:
        entity_id: input_number.Haus_Energie_Wallbox_evChargeLimitSOCSet
        value: 50

[David G.]

@erstam

Evtl ist das in unserer Version von Lovelace nicht drinnen.
In der Gui gibt es das nicht.

Das letzte Update ist ja schon was her. In Lovelace kommen ja ständig neue Sachen.

[Garfonso]

@david-g
Ja, da will ich mich mal wieder ran setzen. Müsste in den nächsten Wochen klappen.

[Swisslizard]

Im ioBroker-lovelace ist die browser_mod Erweiterung drin. Leider ist es eine Version bei der auf mobilen Endgeräten die Popup viel zu hoch/lang dargestellt werden.

Ist ein bekannter Bug (https://github.com/thomasloven/hass-browser_mod/pull/619) und es gibt auch einen Fix dazu. Wäre cool, wenn der Fix ins iobroker.lovelace integriert werden könnte.

raymercury created this issue in thomasloven/hass-browser_mod

closed mobile popup fix for HA 2023.7.3 #619