Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Anfängerfragen VIS-2

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    Anfängerfragen VIS-2

    This topic has been deleted. Only users with topic management privileges can see it.
    • U
      UlliJ @io2345 last edited by

      @io2345
      ich versuchs mal mit einem kleinen video

      • neue Seite anlegen
      • unter Register "Seite - Navigation"
      • Navi aktivieren
      • Name eintragen
      • Position im Menü festlegen
      • Symbol anlegen
        fertig...
        Navigation.gif

      wenn Du schon eine Seite im Menü hast, kannst Du auch die kopieren, umbenennen und in die vorhandenen "in widgets anzeigen" die neuen views (cards) einbinden. Hoffe ist jetzt etwas klarer🤔

      I 1 Reply Last reply Reply Quote 0
      • I
        io2345 @UlliJ last edited by

        @ullij So hatte ich es gemacht. Allerdings hat jede Karte, bei der ich "Navigation" aktiviere, nun auch das Navigationsmenü auf der Karte selbst mit drauf. Schau mal:
        f7599e3b-de84-42be-b104-d7ed17b5bb69-image.png

        U 1 Reply Last reply Reply Quote 0
        • U
          UlliJ @io2345 last edited by

          @io2345

          verstanden, Vis macht genau was Du eingestellt hast.
          f4e06c06-0a32-4cea-961a-f5be910b2428-image.png
          Du hast bei jeder "Karte" die Navigation aktiv. Der Aufbau dieser Vis besteht aber aus Seiten die den Inhalt einzelner/mehrerer Karten darstellen, also Seiten innerhalb einer Seite. Die Navigation wird ausschließlich für die Hauptseiten aktiviert und nicht für jede Karte. Die Karten sind in der Vis-Struktur natürlich auch Seiten, haben aber keine Navigation.
          b7539905-6e84-45b1-823b-e2362ab72dbe-image.png

          Du willst andere Bereiche in der Vis anlegen.
          2 Möglichkeiten:

          • eine neue Seite mit aktiver Navigation anlegen, widgets zur Anzeige einer anderen view ("Karten")auf der Seite einfügen, die views zuweisen, alles so hinschieben bis es Dir gefällt

          oder

          • deine Seite EnergieMain kopieren, ein neuer Name für die Seite muß beim kopieren ohnehin vergeben werden, die Einstellungen bei der Navigation (Symbol, Position im Menü, etc) anpassen. Auf dieser neuen Seite den bereits vorhandenen "Karten" die neuen views/Seiten zuweisen.

          Letztere hat den Vorteil des minimalen Aufwandes für die Formatierung der Seite selbst und die Seiten unterscheiden sich nur durch den Inhalt, aber nicht in der Ansicht.

          Besser? ist wohl missverständlich mit den Seiten, views und cards/Karten😬

          I 1 Reply Last reply Reply Quote 0
          • I
            io2345 @UlliJ last edited by

            @ullij said in Anfängerfragen VIS-2:

            Auf dieser neuen Seite den bereits vorhandenen "Karten" die neuen views/Seiten zuweisen.

            An der Stelle klemmts. Ich habe "EnergieMain" nach "Übersicht" kopiert. Da liegen dann schon drei Widgets auf der Seite, die drei verschiedene Karten repräsentieren - nämlich die, die in "Allgemein" -> "Aussicht" eingestellt sind.
            Aber wie bringe ich die in die linke Navigationsspalte?

            U 1 Reply Last reply Reply Quote 0
            • U
              UlliJ @io2345 last edited by

              @io2345
              stell doch bitte mal einen export des projektes hier rein. Ansonsten auch gerne meeting wie bereits angeboten.
              Die Zusammenfassung, für die Beginner, schreibst Du😊

              I 1 Reply Last reply Reply Quote 0
              • I
                io2345 @UlliJ last edited by

                @ullij Der Export, falls das so geklappt hat...
                2025-08-02-Dashboard.zip

                U 1 Reply Last reply Reply Quote 0
                • U
                  UlliJ @io2345 last edited by

                  @io2345
                  hat geklappt

                  Habe scheinbar noch nicht richtig verstanden, wie Deine Anordnung der Seiten/"cards" aussehen soll🤔

                  I 1 Reply Last reply Reply Quote 0
                  • I
                    io2345 @UlliJ last edited by io2345

                    @ullij Das weiß ich selber noch nicht so genau. Habe halt jetzt mal mit den vier Karten auf der Übersichtsseite angefangen:

                    3d7cceb6-305f-462f-a1b0-274c34f18a70-image.png

                    Balkonkraftwerk, PV und Jalousiensteuerung sind weitgehend fertig und einsatzbereit, die "Info"-Seite ist als Platzhalter da und wird später mit Werten zur Wärmepumpe und Heiz-/Kühlkreis befüllt.

                    In der linken Spalte der Übersichtsseite soll man dann eben zu den einzelnen Karten navigieren können.

                    U 2 Replies Last reply Reply Quote 0
                    • U
                      UlliJ @io2345 last edited by

                      @io2345 sagte in Anfängerfragen VIS-2:

                      Das weiß ich selber noch nicht so genau

                      kann Jahre dauern...

                      Die einzige Möglichkeit, die mir einfällt. Jede Karte die einen eigenen Menüeintrag hat muss es 2x geben

                      1. als Karte für das view in widget anzeigen
                      2. als Seite (wegen dem Menüeintrag) mit aktiver Navigation.
                        fb1c6ffb-5bff-4871-868b-4eac5b486566-image.png

                      Die Seiten sehen etwas leer aus... aber das wird, wenn Info's dazu kommen.
                      Weiter kannst Du für die Übersichtsseite die Spaltenbreite auf 4 Karten anpassen. Dann werden die "cards" nicht so klein.

                      1 Reply Last reply Reply Quote 0
                      • U
                        UlliJ @io2345 last edited by

                        @io2345
                        es gäbe noch
                        In der Übersichtsseite ein "inventwo universal widget" über jede Karte legen.
                        Konfiguration:

                        [
                          {
                            "tpl": "tplInventwoWidgetUniversal",
                            "data": {
                              "bindings": [],
                              "type": "viewInDialog",
                              "g_common": true,
                              "mode": "singleButton",
                              "direction": "row",
                              "oid": "nothing_selected",
                              "httpType": "send",
                              "buttonSize": 110,
                              "btnSpacing": 10,
                              "countStates": 1,
                              "dialogWidth": 500,
                              "g_attr_group_type_view_in_dialog": true,
                              "dialogHeight": 300,
                              "dialogPadding": 10,
                              "dialogBackground": "rgb(18, 18, 18)",
                              "dialogTitleColor": "rgb(255,255,255)",
                              "dialogTitleSize": 20,
                              "dialogCloseButtonBackground": "rgba(255,255,255,0)",
                              "dialogCloseButtonColor": "rgba(255,255,255,1)",
                              "dialogCloseButtonSize": 14,
                              "dialogBorderRadiusTopLeft": 12,
                              "dialogBorderRadiusTopRight": 0,
                              "dialogBorderRadiusBottomRight": 12,
                              "dialogBorderRadiusBottomLeft": 0,
                              "feedbackDuration": 0,
                              "g_attr_group_click_feedback": true,
                              "backgroundFeedback": "rgba(69, 86, 24, 1)",
                              "outerShadowColorFeedback": "rgba(0, 0, 0, 1)",
                              "contentBlinkInterval": 0,
                              "g_attr_group_state_default": true,
                              "outerShadowColor": "rgba(0, 0, 0, 1)",
                              "colorPickerColorModel": "hex",
                              "g_attr_content_color_picker": true,
                              "colorPickerWidth": 200,
                              "colorPickerHandleSize": 8,
                              "colorPickerHandleMargin": 6,
                              "colorPickerComponentsSpace": 12,
                              "colorPickerDirection": "vertical",
                              "colorPickerBorderWidth": 0,
                              "colorPickerShowWheel": true,
                              "colorPickerShowSaturation": true,
                              "colorPickerShowValue": true,
                              "textDecoration": "none",
                              "g_attr_group_css_text": true,
                              "textMarginTop": 0,
                              "textMarginBottom": 0,
                              "textMarginLeft": 0,
                              "textMarginRight": 0,
                              "contentType": "icon",
                              "g_attr_group_css_content": true,
                              "contentMarginTop": 0,
                              "contentMarginBottom": 0,
                              "contentMarginLeft": 0,
                              "contentMarginRight": 0,
                              "contentSize": 40,
                              "contentRotation": 0,
                              "contentMirror": false,
                              "flexDirection": "column",
                              "g_attr_group_css_alignment": true,
                              "alignItems": "space-between",
                              "textAlign": "start",
                              "contentAlign": "center",
                              "backgroundOpacity": 1,
                              "g_attr_group_css_transparency": true,
                              "contentOpacity": 1,
                              "paddingLeft": 10,
                              "g_attr_group_css_spacing": true,
                              "paddingRight": 10,
                              "paddingTop": 10,
                              "paddingBottom": 10,
                              "borderRadiusTopLeft": 12,
                              "g_attr_group_css_border_radius": true,
                              "borderRadiusTopRight": 0,
                              "borderRadiusBottomRight": 12,
                              "borderRadiusBottomLeft": 0,
                              "borderSizeTop": 0,
                              "g_attr_group_css_border": true,
                              "borderSizeBottom": 0,
                              "borderSizeLeft": 0,
                              "borderSizeRight": 0,
                              "borderStyle": "none",
                              "outerShadowX": 2,
                              "g_attr_group_css_outer_shadow": true,
                              "outerShadowY": 2,
                              "outerShadowBlur": 2,
                              "outerShadowSize": 1,
                              "innerShadowX": 0,
                              "g_attr_group_css_inner_shadow": true,
                              "innerShadowY": 0,
                              "innerShadowBlur": 0,
                              "innerShadowSize": 0,
                              "view": "cardBalkonkraftwerk",
                              "valueTrue": "1",
                              "dialogFullscreen": true,
                              "name": "navBKW",
                              "comment": null,
                              "class": null,
                              "filterkey": null,
                              "multi-views": null,
                              "locked": null,
                              "g_fixed": true
                            },
                            "style": {
                              "bindings": [],
                              "left": "21px",
                              "top": "20px",
                              "width": "532px",
                              "height": "352px",
                              "position": "absolute",
                              "overflow": "visible",
                              "z-index": 35,
                              "opacity": "0.5"
                            },
                            "widgetSet": "vis-2-widgets-inventwo",
                            "_id": "i000001"
                          }
                        ]
                        

                        Der z-Index muss größer sein als der der anderen widgets und die opacity auf 0 setzen.
                        Anzeigt wird die Seite als Dialog im Vollbild

                        als Alternative
                        ein "inventwo universal widget" über jede Karte legen.
                        Konfiguration:

                        [
                         {
                           "tpl": "tplInventwoWidgetUniversal",
                           "data": {
                             "bindings": [
                               "dialogWidth",
                               "dialogHeight"
                             ],
                             "type": "viewInDialog",
                             "g_common": true,
                             "mode": "singleButton",
                             "direction": "row",
                             "oid": "nothing_selected",
                             "httpType": "send",
                             "buttonSize": 110,
                             "btnSpacing": 10,
                             "countStates": 1,
                             "dialogWidth": "calc(100% - 50px)",
                             "g_attr_group_type_view_in_dialog": true,
                             "dialogHeight": "calc(100% - 50px)",
                             "dialogPadding": 0,
                             "dialogBackground": "rgb(18, 18, 18)",
                             "dialogTitleColor": "rgb(255,255,255)",
                             "dialogTitleSize": 0,
                             "dialogCloseButtonBackground": "rgba(255,255,255,0)",
                             "dialogCloseButtonColor": "rgba(255,255,255,1)",
                             "dialogCloseButtonSize": 0,
                             "dialogBorderRadiusTopLeft": 12,
                             "dialogBorderRadiusTopRight": 0,
                             "dialogBorderRadiusBottomRight": 12,
                             "dialogBorderRadiusBottomLeft": 0,
                             "feedbackDuration": 0,
                             "g_attr_group_click_feedback": true,
                             "backgroundFeedback": "rgba(69, 86, 24, 1)",
                             "outerShadowColorFeedback": "rgba(0, 0, 0, 1)",
                             "contentBlinkInterval": 0,
                             "g_attr_group_state_default": true,
                             "outerShadowColor": "rgba(0, 0, 0, 1)",
                             "colorPickerColorModel": "hex",
                             "g_attr_content_color_picker": true,
                             "colorPickerWidth": 200,
                             "colorPickerHandleSize": 8,
                             "colorPickerHandleMargin": 6,
                             "colorPickerComponentsSpace": 12,
                             "colorPickerDirection": "vertical",
                             "colorPickerBorderWidth": 0,
                             "colorPickerShowWheel": true,
                             "colorPickerShowSaturation": true,
                             "colorPickerShowValue": true,
                             "textDecoration": "none",
                             "g_attr_group_css_text": true,
                             "textMarginTop": 0,
                             "textMarginBottom": 0,
                             "textMarginLeft": 0,
                             "textMarginRight": 0,
                             "contentType": "icon",
                             "g_attr_group_css_content": true,
                             "contentMarginTop": 0,
                             "contentMarginBottom": 0,
                             "contentMarginLeft": 0,
                             "contentMarginRight": 0,
                             "contentSize": 40,
                             "contentRotation": 0,
                             "contentMirror": false,
                             "flexDirection": "column",
                             "g_attr_group_css_alignment": true,
                             "alignItems": "space-between",
                             "textAlign": "start",
                             "contentAlign": "center",
                             "backgroundOpacity": 1,
                             "g_attr_group_css_transparency": true,
                             "contentOpacity": 1,
                             "paddingLeft": 10,
                             "g_attr_group_css_spacing": true,
                             "paddingRight": 10,
                             "paddingTop": 10,
                             "paddingBottom": 10,
                             "borderRadiusTopLeft": 12,
                             "g_attr_group_css_border_radius": true,
                             "borderRadiusTopRight": 0,
                             "borderRadiusBottomRight": 12,
                             "borderRadiusBottomLeft": 0,
                             "borderSizeTop": 0,
                             "g_attr_group_css_border": true,
                             "borderSizeBottom": 0,
                             "borderSizeLeft": 0,
                             "borderSizeRight": 0,
                             "borderStyle": "none",
                             "outerShadowX": 2,
                             "g_attr_group_css_outer_shadow": true,
                             "outerShadowY": 2,
                             "outerShadowBlur": 2,
                             "outerShadowSize": 1,
                             "innerShadowX": 0,
                             "g_attr_group_css_inner_shadow": true,
                             "innerShadowY": 0,
                             "innerShadowBlur": 0,
                             "innerShadowSize": 0,
                             "view": "cardBalkonkraftwerk",
                             "valueTrue": "1",
                             "dialogFullscreen": false,
                             "name": "navBKW",
                             "comment": null,
                             "class": null,
                             "filterkey": null,
                             "multi-views": null,
                             "locked": null,
                             "g_fixed": true,
                             "dialogCloseOnClickOutside": true
                           },
                           "style": {
                             "bindings": [],
                             "left": "21px",
                             "top": "20px",
                             "width": "532px",
                             "height": "352px",
                             "position": "absolute",
                             "overflow": "visible",
                             "z-index": 35,
                             "opacity": "0.5"
                           },
                           "widgetSet": "vis-2-widgets-inventwo",
                           "_id": "i000001"
                         }
                        ]
                        


                        Unterschied
                        gerechnete Dialoggröße (annähernd Vollbild)
                        ohne Kopfbereich und close-button
                        Klick neben dem Dialog schließt den wieder

                        1 Reply Last reply Reply Quote 0
                        • I
                          io2345 last edited by io2345

                          Ich hätte jetzt ein Design gefunden das mich anspricht. Allerding weiß ich nicht, welche Widget-Familie das ist. Kann mir da einer helfen?
                          b0d273de-ff92-43d7-ac41-2a606bbb5cdc-image.png

                          sigi234 1 Reply Last reply Reply Quote 0
                          • sigi234
                            sigi234 Forum Testing Most Active @io2345 last edited by sigi234

                            @io2345

                            Vis 2 - Material-Widgets
                            Schalter oder Knöpfe

                            Vis 2 - Material-Widgets
                            Thermostat

                            E-Charts

                            I 1 Reply Last reply Reply Quote 1
                            • I
                              io2345 @sigi234 last edited by io2345

                              @sigi234 Danke dir. Ich bin wohl zu doof (oder jedenfalls zu unerfahren) dafür. Wie bringt man alleine das mit den Farben hin?
                              Könntest du eventuell eine klitzekleine Testseite erstellen, auf der nur das Bad- oder Gartenelement liegt und das von den Farben her so ähnlich aussieht wie im Screenshot? Natürlich nur, wenn's nicht viel Arbeit ist. Den Export dieser Seite wenn du mir zur Verfügung stellen könntest, dann komme ich vermutlich alleine weiter. Die anderen Elemente funktionieren ja wohl analog dazu.

                              sigi234 1 Reply Last reply Reply Quote 0
                              • sigi234
                                sigi234 Forum Testing Most Active @io2345 last edited by

                                @io2345 sagte in Anfängerfragen VIS-2:

                                Könntest du eventuell eine klitzekleine Testseite erstellen

                                Bitte sehr.

                                VIEW_Test1_VIS2.txt

                                I 1 Reply Last reply Reply Quote 1
                                • I
                                  io2345 @sigi234 last edited by io2345

                                  @sigi234 Ja super, das sieht schon mal gut aus!
                                  Ein Problem hab ich noch. Wie bekomme ich da ein Komma rein, wenn der Wert aus dem Datenpunkt ohne ankommt? Da sollte 24,7 stehen, nicht 247:
                                  9713dde3-2da2-4344-88e0-2eb570e08ddf-image.png

                                  I 1 Reply Last reply Reply Quote 0
                                  • I
                                    io2345 @io2345 last edited by

                                    @io2345 Das zweite, was noch nicht klappt, ist die Sache mit dem Hintergrund. Ich kann eine Farbe einstellen. Aber keine Farbverläufe und auch kein Hintergrundbild. Der Pfad zum Bild müsste stimmen, den kopiere ich mir ja direkt aus dem vis-2-Punkt "Dateien" raus. Und auch wenn das PNG direkt im Projektverzeichnis liegt und ich den Pfad ganz weglasse - also nur den Dateinamen eintrage - geht es nicht.
                                    Gibt's da einen "magic trick"?

                                    U 1 Reply Last reply Reply Quote 0
                                    • U
                                      UlliJ @io2345 last edited by

                                      @io2345 sagte in Anfängerfragen VIS-2:

                                      Das zweite, was noch nicht klappt, ist die Sache mit dem Hintergrund.

                                      zeigen, bitte

                                      I 1 Reply Last reply Reply Quote 0
                                      • I
                                        io2345 @UlliJ last edited by io2345

                                        @ullij said

                                        zeigen, bitte

                                        Du meinst als Screenshot? Was genau sollte darauf zu sehen sein? Ich hab mal das hier genommen:
                                        7bb6c3a0-e30d-4678-a198-2543d90bf33c-image.png

                                        Wobei "star-sky.png" das hier ist: star-sky.zip

                                        U 1 Reply Last reply Reply Quote 0
                                        • U
                                          UlliJ @io2345 last edited by

                                          @io2345
                                          ja.
                                          Hilft Dir jetzt nicht weiter, hier geht das mit dem Hintergrund
                                          2087136f-3eb4-40c4-adb6-adf09cc8ad2f-image.png

                                          Das mit dem Hintergrundbild geht so bei mir auch nicht.
                                          Du kannst ein basic image widget nehmen und das auf die volle Anzeigegröße "ziehen"
                                          c5421e0f-28d0-4231-9acd-f05ea663eab2-image.png

                                          I 1 Reply Last reply Reply Quote 0
                                          • I
                                            io2345 @UlliJ last edited by io2345

                                            @ullij Danke, so bekomme ich nun zumindest mal was angezeigt:
                                            b88f2d82-239c-4f59-a6f8-75c63c6f566c-image.png
                                            Wollte halt möglichst einen Mix aus mehreren Widget-Arten vermeiden, aber geht wohl nicht anders.

                                            Jetzt hab ich noch ein weiteres Problemchen: Ich würde gerne in einem weiteren Material2 Universal-Widget eine Restlaufzeit anzeigen im Format "hh:mm". Die Werte für Stunden und Minuten liegen aber in zwei unterschiedlichen Datenpunkten. Wie bekomme ich das in einer Zeile des Widgets angezeigt? Oder geht das so gar nicht?
                                            (Vielleicht komme ich auf diesem Weg auch auf den Dreh, wie man das Komma in einen angelieferten Wert bekommt)

                                            U 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            912
                                            Online

                                            32.1k
                                            Users

                                            80.7k
                                            Topics

                                            1.3m
                                            Posts

                                            6
                                            102
                                            5897
                                            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