Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. neue Visualisierung "webui" (alternative zu vis & vis-2)

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    neue Visualisierung "webui" (alternative zu vis & vis-2)

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

      @smilie108

      schau in meiner beispiel visu: http://129.159.205.3:8082/webui/index.html
      im screen dashOffset.

      gibts gerade noch ein paar probleme in der ui:
      1.) dashoffset war nicht in der property liste
      2.) wenn man sie unter "styles" angelegt hat, und ein binding erzeugt hat, hat er ein binding auf eine property und nicht auf css erzeugt.

      Die 2 dinge fixe ich. Aber nutzen kann man es trotzdem schon

      1 Reply Last reply Reply Quote 0
      • jogibear9988
        jogibear9988 last edited by jogibear9988

        neue version ist gepusht.
        damit solltest du im "styles" view die css properties binden können. Und bei svg's sollte dashoffset in der liste sein

        afb3e2d8-bd1a-4d6d-92c7-b32ef2cc3c02-image.png

        1 Reply Last reply Reply Quote 0
        • jogibear9988
          jogibear9988 @Smilie108 last edited by

          @smilie108

          wenn du so einen view fertig hast, wäre es cool wenn du ihn in das beispiel system einbinden würdest

          Smilie108 1 Reply Last reply Reply Quote 0
          • Smilie108
            Smilie108 @jogibear9988 last edited by Smilie108

            @jogibear9988
            😉 sorry das is noch vis-2 aber wollte eben versuchen das so ähnlich in ui zu machen der es gewisse vorteile hätte 😉 Wenn ich soweit bin dann gerne derzeit
            Screenshot 2023-12-10 045058.png

            @Wal Screenshot 2023-12-10 045051.png
            Da must du zb scale-start usw selbst anlegen die sind nicht drin wenn den reinziehst 😉
            zb infos zu dieser Gauge https://github.com/smontanus/dial-gauge

            jogibear9988 Wal B 3 Replies Last reply Reply Quote 0
            • jogibear9988
              jogibear9988 @Smilie108 last edited by

              @smilie108 said in neue Visualisierung "webui" (alternative zu vis):

              zb infos zu dieser Gauge https://github.com/smontanus/dial-gauge

              i've added a bug report there: https://github.com/smontanus/dial-gauge/issues/1

              jogibear9988 created this issue in smontanus/dial-gauge

              closed Small issues using it in a designer #1

              1 Reply Last reply Reply Quote 0
              • Wal
                Wal Developer @Smilie108 last edited by Wal

                @smilie108 sagte in neue Visualisierung "webui" (alternative zu vis):

                Da must du zb scale-start usw selbst anlegen die sind nicht drin wenn den reinziehst

                Diese Gauge funktioniert ja auch, ich bekomme es nur mit der node-webcomponents-css-gauge nicht hin.
                Hätte das Teil gerne wie im Demo anstatt 50-150 -> 0-8300.

                Smilie108 jogibear9988 2 Replies Last reply Reply Quote 0
                • B
                  Blockmove @Smilie108 last edited by

                  @jogibear9988

                  Screenshot 2023-12-10 045051.png
                  Da must du zb scale-start usw selbst anlegen die sind nicht drin wenn den reinziehst 😉
                  zb infos zu dieser Gauge https://github.com/smontanus/dial-gauge

                  Mal ne Frage von nem Laien:
                  Automatisiert kann man das bei Webkomponenten nicht anlegen?

                  jogibear9988 1 Reply Last reply Reply Quote 0
                  • Smilie108
                    Smilie108 @Wal last edited by

                    @wal
                    Schau mal in den code ich glaube da war was drin mit min und max. Bin aber grad unterwegs kann daher nicht nachschauen
                    Schau dann wenn ich wieder am oc sitz nach.
                    mfg smilie108

                    1 Reply Last reply Reply Quote 0
                    • jogibear9988
                      jogibear9988 @Wal last edited by

                      @wal

                      die kann das nicht.
                      node-webcomponents-css-gauge kann nur 0-100 aber du kannst das ja einfach umrechnen

                      1 Reply Last reply Reply Quote 0
                      • jogibear9988
                        jogibear9988 @Blockmove last edited by

                        @blockmove

                        es gibt eine customelements.json, in der steht welche properties und attribute es gibt. Und in der custom-elements.json der dial gauge, fehlt eben die zuordnung welche Property zu welchem attribut gehört.

                        Ich hab dafür dort ein pull req. gemacht.

                        Bei Frameworks wie polymer, lit oder z.B. meiner BaseCustomWebcomponent gibt es in der Komponente eine Liste der Properties & Attribute, daher geht es dort auch ohne customelements.json, aber bei anderen brauche ich diese.

                        Wal 1 Reply Last reply Reply Quote 1
                        • Wal
                          Wal Developer @jogibear9988 last edited by

                          @jogibear9988 ,
                          kannst du die Logstufe bei Änderungen von Objektwerten auf debug ändern, das Protokoll läuft ziemlich voll.

                          webui.jpg

                          jogibear9988 2 Replies Last reply Reply Quote 0
                          • jogibear9988
                            jogibear9988 @Wal last edited by

                            @wal

                            kp. ich wüsste nicht wo ich das logge. state change geht ja gar nicht über meinen adapter.

                            jogibear9988 1 Reply Last reply Reply Quote 0
                            • jogibear9988
                              jogibear9988 @jogibear9988 last edited by

                              @jogibear9988

                              uuups.... ist doch bei mir, ich mach das raus

                              1 Reply Last reply Reply Quote 0
                              • jogibear9988
                                jogibear9988 @Wal last edited by

                                @wal
                                warum legst du die states eig. unter webui an?

                                Wal 1 Reply Last reply Reply Quote 0
                                • Wal
                                  Wal Developer @jogibear9988 last edited by

                                  @jogibear9988 ,
                                  weil ich den nur für webui nutze, ist die Umrechnung von Liter auf Prozent für die Gauge.

                                  jogibear9988 Smilie108 2 Replies Last reply Reply Quote 0
                                  • jogibear9988
                                    jogibear9988 @Wal last edited by

                                    @wal

                                    du kannst auch im binding in der "formula" umrechnen, siehe hier: https://forum.iobroker.net/post/1092710

                                    Wal 1 Reply Last reply Reply Quote 1
                                    • Smilie108
                                      Smilie108 @Wal last edited by

                                      @jogibear9988
                                      😉 danke muss jetz dann grad noch alles andere unterbringen normalerweise schaut das so aus 😉

                                             	<style>
                                       	.loadingFullWPA {
                                          animation: strokeFullWPA .6s infinite linear;
                                          }
                                              .loadingFull1WPA {
                                          animation: strokeFull1WPA .6s infinite linear;
                                          }
                                         @keyframes strokeFullWPA {
                                         0% {
                                         	stroke-dashoffset: -({0_userdata.0.Wärmepumpe.Istwerte.Umwälzpumpe_Soll_%}/2);
                                         }
                                         100% {
                                         	stroke-dashoffset: -{v:0_userdata.0.Wärmepumpe.Istwerte.Umwälzpumpe_Soll_%;v >= 10 ? 20 : 0}; 
                                         }
                                         }
                                            @keyframes strokeFull1WPA {
                                         0% {
                                         	stroke-dashoffset: ({0_userdata.0.Wärmepumpe.Istwerte.Umwälzpumpe_Soll_%}/2);
                                         }
                                         100% {
                                         	stroke-dashoffset: {v:0_userdata.0.Wärmepumpe.Istwerte.Umwälzpumpe_Soll_%;v >= 10 ? 20 : 0}; 
                                         	                	}
                                         }
                                        </style>	
                                      }
                                      

                                      und der gesammte normalerweise so
                                      Habe dazu in vis2 eigentlich ein html wideget in dem dann :

                                      <svg width="600" height="600" >
                                         <defs>    
                                         <linearGradient id='MyGradientFullWPA' x1="0%" y1="0%" x2="0%" y2="100%">
                                          <stop offset='0%' stop-color='blue' />
                                          <stop offset='50%' stop-color='lightblue' />
                                           <stop offset='100%' stop-color='red' />
                                         </linearGradient>
                                          </defs>
                                          <g transform="scale(1)" >
                                             <g  >
                                              <path  class="loadingFullWPA" d="M110,10  
                                                                            L320,10  
                                                                             A10,10 0 0,0 320,10 
                                                                             A10,10 0 0,0 320,10 l50 0
                                                                             A10,10 0 1,1 370,31 l-50 0
                                                                             A10,10 0 0,0 320,54 l50 0
                                                                             A10,10 0 1,1 370,76 l-50 0
                                                                             A10,10 0 0,0 320,95 l50 0
                                                                             A10,10 0 1,1 370,118 l-195 0
                                                                             
                                                                             "
                                                  fill= "none" stroke-width="8" stroke-dasharray="15 5" 	
                                                  stroke="url(#MyGradientFullWPA)"								 
                                                     />
                                           
                                             
                                         </g>   
                                        </g> 
                                        </svg>
                                         	<style>
                                       	.loadingFullWPA {
                                          animation: strokeFullWPA .6s infinite linear;
                                          }
                                              .loadingFull1WPA {
                                          animation: strokeFull1WPA .6s infinite linear;
                                          }
                                         @keyframes strokeFullWPA {
                                         0% {
                                         	stroke-dashoffset: -({0_userdata.0.Wärmepumpe.Istwerte.Umwälzpumpe_Soll_%}/2);
                                         }
                                         100% {
                                         	stroke-dashoffset: -{v:0_userdata.0.Wärmepumpe.Istwerte.Umwälzpumpe_Soll_%;v > 10 ? 20 : 0}; 
                                         }
                                         }
                                            @keyframes strokeFull1WPA {
                                         0% {
                                         	stroke-dashoffset: ({0_userdata.0.Wärmepumpe.Istwerte.Umwälzpumpe_Soll_%}/2);
                                         }
                                         100% {
                                         	stroke-dashoffset: {v:0_userdata.0.Wärmepumpe.Istwerte.Umwälzpumpe_Soll_%;v >= 10 ? 20 : 0}; 
                                         	                	}
                                         }
                                        </style>	
                                      
                                        
                                        
                                      

                                      Da muss ich mal schauen wie ich das unterbringe 😉 habe da alleine bei der heizung dann mind. 4 solche drin die auch verschiedene atrribute haben zwecks geschwindigkeit usw.
                                      danke mal vorab.
                                      MFg smilie108

                                      1 Reply Last reply Reply Quote 0
                                      • Wal
                                        Wal Developer @jogibear9988 last edited by

                                        @jogibear9988 ,
                                        funktioniert, danke.
                                        webui2.jpg

                                        jogibear9988 1 Reply Last reply Reply Quote 0
                                        • Smilie108
                                          Smilie108 last edited by Smilie108

                                          @jogibear9988
                                          kannst du damit was anfangen ?console-export-2023-12-10_19-46-59.txt

                                          da sind ganz viele js fehlermeldungen drin. weis aber nicht ob die von mir sindweil es da sachen geht die ich garnicht drin habe?
                                          ganz viele
                                          Uncaught (in promise) TypeError: 404 Not Found http://192.168.1.91:8082/webui.0.widgets/node_modules/@fluentui/web-components/dist/esm/checkbox/

                                          Zu den Animationen er zeigt mir zwar jetzt mehr an aber laufen hab ichs noch nicht.
                                          geht das mit den bindings so wie ich im vorherigen post drin habe oder gibt es da eine andere schreibweise ? kann ich die direkt in den styles verwenden oder muss ich die irgendwie mappen ?

                                          Mfg Smilie108

                                          jogibear9988 2 Replies Last reply Reply Quote 0
                                          • jogibear9988
                                            jogibear9988 @Smilie108 last edited by jogibear9988

                                            @smilie108

                                            Die vielen Fehler kommen von fluent-ui, muss ich mal schauen ob da bei dem NPM package etwas nicht mehr geht. Wenn es nicht nutzt, entferne es einfach wieder.

                                            in dem log steht, dein binding sieht so aus:

                                             bind-css:stroke-dashoffset="{}"
                                            

                                            das ist nicht wirklich richtig, bei mir sieht das so aus:

                                              bind-css:stroke-dashoffset='{"signal":"0_userdata.0.random","converter":{"&gt;50":"0","&lt;=50":"4"}}' 
                                            

                                            leider muss größer und kleiner in html escaped werden, sonst würde das so aussehen:

                                              bind-css:stroke-dashoffset='{"signal":"0_userdata.0.random","converter":{">50":"0","<=50":"4"}}'
                                            Smilie108 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            979
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            20
                                            1074
                                            282465
                                            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