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
      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
                          • U
                            UlliJ @io2345 last edited by

                            @io2345 sagte in Anfängerfragen VIS-2:

                            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?

                            mit Binding in einer HTML vorlage, Inhalt:

                            <span>{0_userdata.0.Test.Stunde}:{0_userdata.0.Test.Minute}</span>
                            

                            Ersetzen von Punkt durch Komma (ebenfalls HTML Vorlage)

                            {v:0_userdata.0.4000_EnergieErzeugung.Zaehler.NetzbezugTotalTag;parseFloat(v).toFixed(1).replace('.',',')} kWh
                            
                            I OliverIO 2 Replies Last reply Reply Quote 0
                            • I
                              io2345 @UlliJ last edited by io2345

                              @ullij Puuh. Diese Verbindung ist mir jetzt nicht auf Anhieb klar, da habe ich jetzt erst Mal keinen Plan, wie das zu machen wäre. Also jedenfalls nicht direkt im Widget eintragen, sondern die Daten über dieses Binding von woanders her reinladen - stimmt das so ungefähr?

                              Ich frag mich bei sowas immer, woher ihr sowas wisst. Gibt es denn irgendwo eine Anleitung, die ich bisher noch nicht entdeckt habe? Irgendwie muss doch jeder mal den Einstieg gefunden haben...

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

                                @ullij

                                Das kann man schon so machen und ist für das einzelne Szenario bei einem persönlich auch ok so.
                                Die korrekte Form eine number auszugeben wäre allerdings

                                https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

                                Wenn JavaScript und die Umgebung richtig konfiguriert ist, weiß das System, das deutsch oder entsprechend eine andere locale ist.
                                Wenn ihr eine große fliesskomma Zahl international ausgeben wollt wäre es dann schon komplizierter.
                                In US ist es genau andersrum wie in DE.
                                DE: 1.234.456,78
                                US: 1,234,456.78

                                Das selbe gibt es für Date auch
                                https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
                                https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString

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

                                  @oliverio sagte in Anfängerfragen VIS-2:

                                  Die korrekte Form eine number auszugeben wäre allerdings

                                  Danke☺
                                  wieder etwas dazu gelernt. Der Laie nimmt halt die Lösung die als erste gefunden wird und das gewünschte Ergebnis liefert... wird bei Gelegenheit korrigiert

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

                                    @io2345 sagte in Anfängerfragen VIS-2:

                                    Wollte halt möglichst einen Mix aus mehreren Widget-Arten vermeiden, aber geht wohl nicht anders.

                                    wird Dir nicht gelingen ... sonst gäbe es vermutlich genau einen widget-typ.

                                    Es geht auch mit dem "Istwert mit Diagramm" (links) und dem "Schalter oder Knöpfe" widgets. Unter allgemein-Name das obige Binding eintragen.
                                    95486593-32ae-4b1c-8de9-7faaff59e2b2-image.png

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

                                      @ullij Unter "Name" eintragen. Hah, da muss man auch erst mal draufkommen. Hab es natürlich unter "Objekt Identifikation" eingetragen gehabt. Danke für den Tipp!
                                      Man kann es auch bei "Schalter oder Knopf" unter "Titel" eintragen. Hab halt den Namen davor geschrieben.
                                      Etwas länger habe ich noch gebraucht, um die ankommenden Zahlen im Uhrzeitformat anzeigen zu lassen. Aber schließlich doch noch geschafft:
                                      Restlaufzeit {x:<DP1>; x<10?"0"+x:x}:{y:<DP2>;y<10?"0"+y:y}

                                      Sieht momentan so aus:
                                      af102f67-a0f6-4604-b217-e27939e6ff9f-image.png

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

                                        Ich habe seit heute ein Problem mit meinem vis2 Projekt.
                                        Ich kann es nicht mehr editieren. Der Vis2 Editor ignoriert die Änderungen.
                                        Habe nur die neuen ivento icons installiert und iobroker neu gestartet. Jetzt hakt es da.
                                        Der Vis2 Editor ignoriert nur in meinem Hauptprojekt die änderungen.
                                        Hat da jemand einen Tipp für mich?

                                        Edit: Ok habe web.0 wieder auf integriert eingestellt. jetzt funzt es wieder.
                                        habe es auf socket umgestellt gehabt, weil vis in einer dauer neulade schleife war

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

                                          Ich habe eine Steckdose die ich visualisieren möchte - gerne mit dem vis-2 Material Universal Widget. Die Dose hat zwei Datenpunkte, die ich verwenden möchte: Zum einen den .../0/set Datenpunkt, der 0 oder 1 sein kann. Damit kann man die Dose schalten. Zum anderen einen Datenpunkt .../power/get , in dem die Wattzahl des Verbrauchs angezeigt wird.
                                          Da sollte in dem Widget also ein Schalter und eine Zahl auftauchen.
                                          Wie macht man das am geschicktesten?

                                          Ich hatte das probiert - aber da erscheint gar nichts:
                                          Hauswasserwerk {mqtt.0.SmartPlug1_Hauswasserwerk.0.set;} {mqtt.0.SmartPlug1_Hauswasserwerk.power.get;} Watt

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

                                            @io2345 sagte in Anfängerfragen VIS-2:

                                            vis-2 Material Universal Widget

                                            Du meinst den Inventwo Universal Schalter?
                                            Dann vielleicht so ausgeschaltet:
                                            1550afaa-e75e-40fd-9bdf-28a09f225e08-image.png
                                            unter Zustand 1 eingeschaltet
                                            5be923f2-57e7-4da6-acb9-fc4168550887-image.png
                                            Bei Text steht dann etwas HTML für das Symbol und den Verbrauchswert

                                             <span class="mdi mdi-fountain"></span><br><span>{v:alias.0.5000_EnergieVerbrauch.Terrasse.Leistung;Math.round(v)}W</span>
                                            

                                            und Datenpunkte entsprechend anpassen
                                            oder wenn Du das eher den Material Widget Schalter&Knöpfe meintest
                                            7306af37-72d7-4347-9dfd-a39c5351f99a-image.png
                                            glaube der funktioniert jedoch nur mit "true/false" im Schalterzustand, bei meinem Alias mit derzeit "on/off" über mqtt geht es so nicht. Da muss der Alias umsetzen... mal im Forum suchen

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            890
                                            Online

                                            32.1k
                                            Users

                                            80.7k
                                            Topics

                                            1.3m
                                            Posts

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