Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[theknut]

@hammerhead86 Es gibt eine Karte, aber die wurde schon ewig nicht mehr geupdated und die zeigt noch andere Zeitzonen an, was ich nicht gebraucht habe. Ich hab es bei mir so gemacht:
Karte in Lovelace (du brauchst noch card_mod)

type: vertical-stack
cards:
  - type: markdown
    content: <center class='time'><h1>{0_userdata.0.States.Time}</h1></center>
    card_mod:
      style: |
        ha-card {      
          height: 260px !important;
          transform: translateY(0px);
          z-index: 1;
        }
        * {
          transform: translateY(-100px);
          font-size: 70px;
        }
  - type: markdown
    content: <center>{0_userdata.0.States.DateDisplayText}</center>
    card_mod:
      style: |
        ha-card {
          transform: translateY(-90px);
          z-index: 2;
          background: transparent;
          border-color: transparent;
        }
        * {
          font-size: 38px;
          margin: 0px 0px -100px 0px;
        }

TS in ioBroker

schedule('* * * * *', () => {
    writeDateTime()
});

const options: any = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

function writeDateTime() {
    const date = new Date();    
    setState('0_userdata.0.States.Time', date.toLocaleTimeString('de-DE', { hour: "2-digit", minute: "2-digit" }), true);    
    setState('0_userdata.0.States.DateDisplayText', date.toLocaleDateString("de-DE", options), true);
}

Sieht dann so aus

Ist vllt nicht die schönste Lösung, funktioniert aber echt gut und es muss natürlich immer alles maximal kompliziert sein. Also Donnerstag, 31. Dezember 2024 passt nicht mit der Schriftgröße, aber da kann man ja noch bisschen an den Größen spielen.

[Ulfhednir]

Nachdem sich jetzt langsam die ioBroker-Visu-App macht, ist Lovelace jetzt wieder für mich ein spannend geworden. Also habe ich mich jetzt auch mal rangemacht und habe mir mal 2-3 Übersichten zusammengeklickert. Was mich jetzt in der App jedoch etwas stört, ist die fehlende Möglichkeit per Swipe zu navigieren. Es soll für HASS eine Erweiterung geben:
https://github.com/zanna-37/hass-swipe-navigation

Scheinbar funktioniert der angepriesene Weg nicht mehr.

Hat jemand eine Idee, wie man die Swipe-Navigation trotzdem einbauen kann?

[David G.]

@ulfhednir
Ich hatte lange diese Karte in Verwendung
https://github.com/bramkragten/swipe-card

[Garfonso]

@ulfhednir

Der Fehler, den du da siehst, ist aber egal. Trag die Karte da nicht ein (grundsätzlich da keine Karten mehr eintragen). Einfach zu den custom cards ziehen, adapter neustarten, Frontend neuladen, dann sollte sie gehen. Falls nicht in Browserkonsole nach Fehlern gucken und gucken, ob es für neuere HASS Versionen vielleicht nen fork gibt oder so.

[Ulfhednir]

@garfonso Danke, ich bin eine Erkenntnis reicher. Die swipe-navigation funktioniert jetzt.

[tomwarrent1]

Gibt es eine Möglichkeit Teile einer View in einer anderen View wiederzuverwenden?
Hintergrund: Es sollen mehrere nahezu identische Views erstellt werden mit leicht unterschiedlichen Anpassungen oder anderen Themes.

[David G.]

@tomwarrent1

So wie du es möchtest leider nicht.
Ich Pflege auch 2 views für meine Frau und mich.

Man könnte höchstens Seiten von view A und view B integrieren. Da ist aber dann nichts mit eigenem Theme oder Anpassungen.

[Swisslizard]

@tomwarrent1
Ich mogle mich mit Javascript um das Problem rum resp. ich erzeuge die ähnlichen Views per Script. Unter lovelace.0.configuration sind die ganzen Views abruf- und auch änderbar (per getObject und setObject).

[Garfonso]

@tomwarrent1
Es gibt irgendwie so template gedöns... da hab ich mich aber noch nie mit auseinander gesetzt und weiß nicht, wie viel davon in iobroker läuft bzw. was fehlen würde. Kann gerne mal jemand machen. :-)

[dan11hh]

Hallo @garfonso ,

ich versuche ein Grafana Dashboard als iFrame einzubinden. Leider meldet Lovelace immer Verbindung abgelehnt. ioBroker und Grafana laufen im Docker und können an sich auch miteinander sprechen. Im normalen Browser funktioniert er auch.

Danke für die Hilfe!

[David G.]

@dan11hh

Https in http eingebunden?

[JohnDenver0815]

Gibts aktuell eine Möglichkeit, die iFrame-Kachel (Webseite heissts glaube ich in der Übersicht) zu zwingen, die Themeeinstellungen zu nutzen? Ich binde darüber aktuell die erzeugte Webseite vom Adapter "Energiefluss-erweitert" ein (die Hintergrundeinstellungen stehen auf volle Transparenz), der Inhalt der iFrame-Kachel wird aber leider nicht transparent, sondern weiß (so wird die Page auch bei Direktaufruf angezeigt, da der Browser ja "irgendwas" anzeigen muss). Der Adapterentwickler vermutet die Ursache des Anzeigeproblems in der iFrame-Kachel.

[David G.]

@johndenver0815

Leider nein.
Das muss der dev vom Energiefluss-erweitert anpassen. Da muss er was in seiner html anpassen.
Kannst ja ein Issue auf git zu erstellen.

Ich erinnere mich, dass das Anfang auch bei echarts war. Dann hatte ich da ein Issue zu aufgemacht und es wurde eine Option für einen transparenten Hintergrund hinzugefügt.

Evtl. Kann der dev ja von hier ab was ableiten
https://github.com/ioBroker/ioBroker.echarts/issues/8
Evtl kann das mit ins Issue
https://github.com/ioBroker/ioBroker.echarts/commit/d89142ec1d932a9c75b65ffb92b4cde86d24a697

Das waren die Änderungen in der Version wo das mit dem Hintergrund gekommen ist

[JohnDenver0815]

@SKB Möchtest du da vorher noch drüber schauen, ob es tatsächlich deine Baustelle ist oder soll ich das Issue ohne vorherige Prüfung einkippen?

@johndenver0815 sagte in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

Gibts aktuell eine Möglichkeit, die iFrame-Kachel (Webseite heissts glaube ich in der Übersicht) zu zwingen, die Themeeinstellungen zu nutzen? Ich binde darüber aktuell die erzeugte Webseite vom Adapter "Energiefluss-erweitert" ein (die Hintergrundeinstellungen stehen auf volle Transparenz), der Inhalt der iFrame-Kachel wird aber leider nicht transparent, sondern weiß (so wird die Page auch bei Direktaufruf angezeigt, da der Browser ja "irgendwas" anzeigen muss). Der Adapterentwickler vermutet die Ursache des Anzeigeproblems in der iFrame-Kachel.

@david-g sagte in Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation:

@johndenver0815

Leider nein.
Das muss der dev vom Energiefluss-erweitert anpassen. Da muss er was in seiner html anpassen.
Kannst ja ein Issue auf git zu erstellen.

Ich erinnere mich, dass das Anfang auch bei echarts war. Dann hatte ich da ein Issue zu aufgemacht und es wurde eine Option für einen transparenten Hintergrund hinzugefügt.

Evtl. Kann der dev ja von hier ab was ableiten
https://github.com/ioBroker/ioBroker.echarts/issues/8
Evtl kann das mit ins Issue
https://github.com/ioBroker/ioBroker.echarts/commit/d89142ec1d932a9c75b65ffb92b4cde86d24a697

Das waren die Änderungen in der Version wo das mit dem Hintergrund gekommen ist

[SKB]

@johndenver0815 Nach meinem Urlaub kann ich bei mir mal den Lovelace Adapter installieren und schauen, ob das Problem zu diesem oder zum EF gehört.

[David G.]

@skb

Hab es grad mal in Lovelace getestet mit einer einfachen HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Transparenter Hintergrund</title>
    <style>
        body {
            background-color: rgba(0, 0, 0, 0);
            color: white;
        }
    </style>
</head>
<body>
    <h1>Hallo, transparenter Hintergrund!</h1>
</body>
</html>

Ergebnis

[SKB]

@david-g Das hat der User ja als Hintergrund auch beim EF eingestellt.

Funktioniert dies auch bei Apple?

[David G.]

@skb
Leider nur Android im Haus. Den Energieflussadapter ist auch nicht vorhanden zum testen.

[SKB]

@david-g Danke für den Hinweis. Schaue ich mir dann nächste Woche mal an - am Lovelace scheint es ja dann nicht zu liegen.

Ich teste mal durch und melde mich zurück.

[David G.]

@skb

Wo stelle ich es denn im Adapter ein?
Hier?

Eigentlich müsste das hier mal ein Modul abtrennen oder?