Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. SvgHmi Komponente

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    SvgHmi Komponente

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

      Hallo,

      ich arbeite gerade an einer Webcomponente für SvgHmi support. Diese wird dann in WebUi eingebaut.
      (https://github.com/node-projects/svghmi.webcomponent). Vlt. kann diese ja dann auch in Vis/Vis2 genutzt werden.

      Wollte mal wissen, was haltet Ihr von dem Format? Ich finde es eigentlich ganz nützlich für dynamische Grafiken.

      Siehe Infos hierzu:
      http://wtt.vanse.de/2021/10/27/svghmi-dateien-erstellen/
      https://www.youtube.com/watch?v=EHxW9MD5r2Q

      Hoffe bis spätestens Mittwoch was funktionierendes zu haben. Was mi im Moment nicht klar ist, was ist z.B. der Namspace xmlns:hmi-event? Kann das auch schon auf events reagieren?

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

        @jogibear9988

        Aber kann man svg nicht ohne diese Erweiterung bereits dynamisieren?
        Die Eigenschaften von svg Grafiken sind ja ebenfalls mit css Anweisungen bspw mit animate erreichbar

        Wo hätte diese Erweiterung dann seine Vorteile?
        Im Beispiel wird ja einfach nur die Farbe gesetzt.

        Auch svg Elemente und glaube auch die Elemente innerhalb einer svg Grafik
        Können jeweils unterscheidbare Events erhalten gemäß dem normalen Event Modell
        https://wiki.selfhtml.org/wiki/SVG_und_JavaScript/DOM-Scripting

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

          @oliverio

          ja aber nur wenn du SVGs direkt in deinen HTML code einbettest. Und diese SVGs sind dann im Endeffekt auch Komponenten, die spezielle Eigenschaften zur Dynamisierung bereitstellen.

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

            @oliverio

            Im Beispiel ja, aber schau dir die Doku an. Da sind auch mathematischen Formeln möglich usw.

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

              @jogibear9988

              Dafür gibt es mathML
              https://wiki.selfhtml.org/wiki/MathML/Geometrie_mit_MathML,_SVG_und_JavaScript#MathML_in_SVG

              XML ist ja so offen definiert, das ja jeder Erweiterungen definieren kann.
              Wenn dann würde ich aber eher die verfolgen die auch durch das www Konsortium präferiert werden.
              Diese Standards haben eher die Chance auch in den Browsern standardmäßig unterstützt zu werden.

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

                @oliverio said in SvgHmi Komponente:

                @jogibear9988

                Dafür gibt es mathML
                https://wiki.selfhtml.org/wiki/MathML/Geometrie_mit_MathML,_SVG_und_JavaScript#MathML_in_SVG

                XML ist ja so offen definiert, das ja jeder Erweiterungen definieren kann.
                Wenn dann würde ich aber eher die verfolgen die auch durch das www Konsortium präferiert werden.
                Diese Standards haben eher die Chance auch in den Browsern standardmäßig unterstützt zu werden.

                Mathematische Formeln in den Bindings, nicht zur Darstellung.

                Von Siemens gibts zumindest einige in TIA Portal, und ich will Usern ermöglichen diese weiter zu nutzen.

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

                  @jogibear9988

                  Wenn du da spezielle Anwender hast.
                  Aber keine Ahnung wie offen das Scada Umfeld da ist.

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

                    Komponente geht nun...

                    Demo hier: https://node-projects.github.io/web-component-designer-demo/index.html?npm=@node-projects/svghmi.webcomponent@1.0.0&html=<node-projects-svghmi src="https://raw.githubusercontent.com/node-projects/svghmi.webcomponent/refs/heads/main/sample/BatteryCharge.svghmi" -value="60" style="width:331px;height:175px;position:absolute;left:40px;top:74px;"></node-projects-svghmi> <node-projects-svghmi src="https://raw.githubusercontent.com/node-projects/svghmi.webcomponent/refs/heads/main/sample/RegenerativeBlower_WithBox.svghmi" style="width:512px;height:515px;position:absolute;left:456px;top:65px;"></node-projects-svghmi>

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

                    Support us

                    ioBroker
                    Community Adapters
                    Donate

                    717
                    Online

                    31.7k
                    Users

                    79.6k
                    Topics

                    1.3m
                    Posts

                    2
                    8
                    231
                    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