Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. ioBroker Allgemein
    4. Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Der "ultimative" ioBroker Lovelace Leitfaden/Dokumentation

    This topic has been deleted. Only users with topic management privileges can see it.
    • theknut
      theknut @Swisslizard last edited by

      @swisslizard danke für deine Hilfestellung! Ich habe das Problem gefunden. Das Problem war, dass ich die Aliase via JS erstellt habe und im Common-Teil read: true vergessen hatte.

      1 Reply Last reply Reply Quote 1
      • theknut
        theknut last edited by

        Hat jemand Erfahrung mit Grafana und weiß, wie man das als iframe integrieren kann? Wenn ich das im Lovelace mache, dann bekomme ich einen Fehler 192.168.*.* hat die Verbindung abgelehnt.

        c62d0fa5-6080-476a-9cb8-02043fe804eb-image.png

        type: iframe
        url: http://*******:3000/public-dashboards/f299197c61ac********f637601427a8a
        title: Grafana
        

        Wie kann man das integrieren?

        David G. 1 Reply Last reply Reply Quote 1
        • David G.
          David G. @theknut last edited by

          @theknut

          Evtl hilft das.
          Erste Treffer beim googlen mit "grafana iframe".
          Ich selber nutze es nicht.

          1 Reply Last reply Reply Quote 0
          • H
            hammerhead86 last edited by

            Vielleicht gibt es die Möglichkeit schon und ich bin einfach blind.
            Gibt es die Möglichkeit, eine einfache digitale Uhr anzuzeigen?
            Finde da keinen Weg zu.

            Außerdem wäre es cool, wenn man bei Lampen per Slider die Farbe ändern könnte (ähnlich wie Helligkeit etc).
            Aber auch da blicke ich nicht durch.

            Könnte jemand nem Anfänger einen Denkanstoß und Hilfe geben?

            Garfonso theknut 2 Replies Last reply Reply Quote 0
            • Garfonso
              Garfonso Developer @hammerhead86 last edited by

              @hammerhead86
              es gibt eine clock card oder so, die eine Uhr anzeigt.

              Sonst ist der homeAssistant weg ein sensor-Entity, glaube ich, wo die Uhrzeit drinnen steht. Das gibt's im iobroker nicht per default, müsstest du ein Skript für basteln, wenn man das wirklich will (steht dann relativ viel netzwerk traffic dahinter, für Sekundenanzeige würde ich das nicht empfehlen). Aber die Uhrzeit kann das frontend auch ruhig vom Browser bekommen, nicht?

              Zu den Lampen:
              wenn die im ioBroker vernünftig als RGB Lampen erkannt werden, geht das auch. Setz dich mal mit dem Geräte-Tab auseinander, da müsste im Leitfanden auch was zu stehen. Wenn die da als RGB auftauchen, automatisches entity erzeugen lassen und dann gibt es ein Farbauswahl-Rad im UI.

              1 Reply Last reply Reply Quote 0
              • theknut
                theknut @hammerhead86 last edited by

                @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
                fb8e10e5-8154-4ace-9b0a-66a91276be7f-image.png

                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.

                1 Reply Last reply Reply Quote 1
                • U
                  Ulfhednir last edited by

                  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.
                  swipe.png

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

                  David G. Garfonso 2 Replies Last reply Reply Quote 0
                  • David G.
                    David G. @Ulfhednir last edited by

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

                    1 Reply Last reply Reply Quote 0
                    • Garfonso
                      Garfonso Developer @Ulfhednir last edited by

                      @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.

                      U 1 Reply Last reply Reply Quote 0
                      • U
                        Ulfhednir @Garfonso last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • T
                          tomwarrent1 last edited by 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. Swisslizard Garfonso 3 Replies Last reply Reply Quote 0
                          • David G.
                            David G. @tomwarrent1 last edited by

                            @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.

                            1 Reply Last reply Reply Quote 0
                            • Swisslizard
                              Swisslizard @tomwarrent1 last edited by

                              @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).

                              1 Reply Last reply Reply Quote 1
                              • Garfonso
                                Garfonso Developer @tomwarrent1 last edited by

                                @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. 🙂

                                D 1 Reply Last reply Reply Quote 0
                                • D
                                  dan11hh @Garfonso last edited by

                                  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. 1 Reply Last reply Reply Quote 0
                                  • David G.
                                    David G. @dan11hh last edited by

                                    @dan11hh

                                    Https in http eingebunden?

                                    1 Reply Last reply Reply Quote 1
                                    • J
                                      JohnDenver0815 last edited by 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. J 2 Replies Last reply Reply Quote -1
                                      • David G.
                                        David G. @JohnDenver0815 last edited by 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

                                        ipod86 created this issue in ioBroker/ioBroker.echarts

                                        closed Transparent background #8

                                        0 GermanBluefox committed to ioBroker/ioBroker.echarts
                                        chore: release v0.4.0
                                        
                                        Added new option: no background
                                        1 Reply Last reply Reply Quote 1
                                        • J
                                          JohnDenver0815 @JohnDenver0815 last edited by

                                          @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 1 Reply Last reply Reply Quote 0
                                          • SKB
                                            SKB Developer Most Active @JohnDenver0815 last edited by

                                            @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. 1 Reply Last reply Reply Quote 3
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate
                                            FAQ Cloud / IOT
                                            HowTo: Node.js-Update
                                            HowTo: Backup/Restore
                                            Downloads
                                            BLOG

                                            527
                                            Online

                                            31.6k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            anleitung dokumentation hilfe leitfaden lovelace
                                            28
                                            188
                                            34515
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo