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

    • Wir empfehlen: Node.js 22.x

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker goes Matter ... Matter Adapter in Stable

    Anfängerfragen VIS-2

    This topic has been deleted. Only users with topic management privileges can see it.
    • 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 0
                  • 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 ohne ankommt?:
                        9713dde3-2da2-4344-88e0-2eb570e08ddf-image.png

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        896
                        Online

                        32.0k
                        Users

                        80.4k
                        Topics

                        1.3m
                        Posts

                        5
                        72
                        2243
                        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