Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread)

    NEWS

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    Test Adapter iQontrol 2.0.x Vis (Entwicklungs-Thread)

    This topic has been deleted. Only users with topic management privileges can see it.
    • dslraser
      dslraser Forum Testing Most Active @blackeagle998 last edited by

      @blackeagle998
      da in dem Editor geht es (aber ich habe leider keine Ahnung von html)

      https://codepen.io/msiggi/pen/aybQxX

      Siehe Spoiler


      Bildschirmfoto 2020-07-01 um 22.56.51.png

      B 1 Reply Last reply Reply Quote 0
      • B
        blackeagle998 @dslraser last edited by

        @dslraser
        Also bei mir geht es, wenn ich den HTML Code aus meinem letzten Post in ein Popup (HTML = Konstante) einfüge:

        Screenshot_20200701-230630.png

        dslraser 2 Replies Last reply Reply Quote 0
        • dslraser
          dslraser Forum Testing Most Active @blackeagle998 last edited by

          @blackeagle998
          merkwürdig...bei mir nicht

          1 Reply Last reply Reply Quote 0
          • dslraser
            dslraser Forum Testing Most Active @blackeagle998 last edited by

            @blackeagle998
            ich habe jetzt die Kachel nochmal neu angelegt (vorher hatte ich eine bestehende kopiert, so wie sonst auch, da geht es nicht)
            Mit der neuen Kachel geht es jetzt. Danke

            1 Reply Last reply Reply Quote 1
            • B
              blackeagle998 last edited by

              Es gibt sogar die Möglichkeit, die Bundesliga (und andere Ligen) als iFrame mit Navigationsmenü einzubinden (News, Spieltag, Tabelle, Torjäger etc.):

              Screenshot_20200701-235327.png

              Code für 1. Bundesliga:

              <iframe src='https://www.fupa.net/fupa/widget.php?p=iframe_widget&typ=liga&value_id=73940&div_id=widget_73940&start=index&header=1&navi=1&module_liga=0&start_liga=1&spieltag_liga=1' frameBorder='0' style='width:100%;height:100%;'></iframe>
              

              Code für LaLiga (Spanien):

              <iframe src='https://www.fupa.net/fupa/widget.php?p=iframe_widget&typ=liga&value_id=73980&div_id=widget_73980&start=index&header=1&navi=1&module_liga=0&start_liga=1&spieltag_liga=1' frameBorder='0' style='width:100%;height:100%;'></iframe>
              
              dslraser B 3 Replies Last reply Reply Quote 1
              • dslraser
                dslraser Forum Testing Most Active @blackeagle998 last edited by

                @blackeagle998 sagte in Test Adapter iQontrol 1.1.x:

                <iframe src='https://www.fupa.net/fupa/widget.php?p=iframe_widget&typ=liga&value_id=73940&div_id=widget_73940&start=index&header=1&navi=1&module_liga=0&start_liga=1&spieltag_liga=1' frameBorder='0' style='width:100%;height:100%;'></iframe>

                hast Du da irgendwas mit Gladbach hinterlegt ? (weil da immer ein Fotoapperat zu sehen ist und man dann direkt auf Bilder kommt ?)

                B 1 Reply Last reply Reply Quote 0
                • dslraser
                  dslraser Forum Testing Most Active @blackeagle998 last edited by

                  @blackeagle998
                  Übrigens gibt es da auch Teamseiten....
                  Mit der letzten Änderung von @s-bormann geht damit sicher noch ne Menge mehr 👍 👍 👍

                  1 Reply Last reply Reply Quote 1
                  • B
                    blackeagle998 @dslraser last edited by

                    @dslraser
                    Ich vermute mal du meinst die Startseite, das sind die News der gesamten Bundesliga, inkl. Fotos.
                    Auf die Tabelle, den Spieltag etc. kommst du über die Navigation ganz oben.

                    1 Reply Last reply Reply Quote 0
                    • s.bormann
                      s.bormann Most Active last edited by s.bormann

                      Hab gerade was cooles herausgefunden:

                      Man kann eine runde Fortschrittsanzeige als Icon oder Kachelhintergrund mittels eines SVG erstellen:

                      3c5de120-5d72-49f9-b097-a6e1e051215f-image.png

                      Als Icon trägt man dazu folgendes ein:

                      |data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 40 40"><path fill="none" stroke="grey" stroke-width="4" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path><path fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-dasharray="{javascript.0.Test.LEVEL}, 100" transform="rotate(-90 18 18)" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path></svg>

                      • javascript.0.Test.LEVEL muss dabei durch den gewünschten Datenpunkt ersetzt werden.
                      • Die Farben grey und red kann man natürlich auch entsprechen anpassen, wie man es gerne hätte.
                      • Auch der Startpunkt kann durch Anpassung des Ausdrucks "rotate(-90 18 18)" angepasst werden. Ersetzt man die "-90" z.B. durch "0", beginnt der Kreis oben, statt (um -90° gedreht) links.

                      Auf ähnliche Art- und Weise lassen sich bestimmt noch viele coole Sachen realisieren.

                      Ich fände es gut, wenn man so was im wiki auf Github sammeln könnte. Wer also was tolles entdeckt hat, bitte hier oder gleich im Wiki posten, dann haben alle was davon.

                      Viel Spaß beim Testen!

                      VG!

                      Edit: Habe noch minimale Anpassungen vorgenommen, um etwas Abstand zum Rand zu erhalten.

                      liv-in-sky 1 Reply Last reply Reply Quote 5
                      • B
                        biker1602 @blackeagle998 last edited by

                        @blackeagle998 said in Test Adapter iQontrol 1.1.x:

                        <iframe src='https://www.fupa.net/fupa/widget.php?p=iframe_widget&typ=liga&value_id=73940&div_id=widget_73940&start=index&header=1&navi=1&module_liga=0&start_liga=1&spieltag_liga=1' frameBorder='0' style='width:100%;height:100%;'></iframe>

                        Das ist ja der Hammer!!Gibt es das auch für die 2. Bundesliga?

                        dslraser 1 Reply Last reply Reply Quote 0
                        • dslraser
                          dslraser Forum Testing Most Active @biker1602 last edited by dslraser

                          @biker1602 sagte in Test Adapter iQontrol 1.1.x:

                          Das ist ja der Hammer!!Gibt es das auch für die 2. Bundesliga?

                          https://www.fupa.net/widget.html

                          Screenshot_20200703-093654_Chrome.jpg

                          B 1 Reply Last reply Reply Quote 1
                          • B
                            biker1602 @dslraser last edited by

                            @dslraser said in Test Adapter iQontrol 1.1.x:

                            @biker1602 sagte in Test Adapter iQontrol 1.1.x:

                            Das ist ja der Hammer!!Gibt es das auch für die 2. Bundesliga?

                            https://www.fupa.net/widget.html

                            Screenshot_20200703-093654_Chrome.jpg

                            Einfach nur der Hammer!!!!!! Vielen Dank

                            1 Reply Last reply Reply Quote 0
                            • B
                              bug77 last edited by bug77

                              Hallo Leute, ich habe leider immer noch Probleme mit dem View.
                              Wenn ich ihn unter iOS auf dem Homescreen speichere und ihn dann beim ersten mal öffne gehts.
                              Ab dem zweiten öffnen pocht die Anzeige, bzw flackert von scharf zu unscharf, jede sekunde.

                              Auch die Option "Immer Zeit statt druck benutzen" ist aktiviert, aber das Problem bleibt.

                              Hat das noch jemand???
                              Es nervt sehr, jedesmal die App aus dem hintergrund zu löschen und neu zu starten.

                              1 Reply Last reply Reply Quote 0
                              • liv-in-sky
                                liv-in-sky @s.bormann last edited by

                                @s-bormann sagte in Test Adapter iQontrol 1.1.x:

                                Hab gerade was cooles herausgefunden:

                                Man kann eine runde Fortschrittsanzeige als Icon oder Kachelhintergrund mittels eines SVG erstellen:

                                3c5de120-5d72-49f9-b097-a6e1e051215f-image.png

                                Als Icon trägt man dazu folgendes ein:

                                |data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="none" stroke="grey" stroke-width="4" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path><path fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-dasharray="{javascript.0.Test.LEVEL}, 100" transform="rotate(-90 18 18)" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path></svg>

                                • javascript.0.Test.LEVEL muss dabei durch den gewünschten Datenpunkt ersetzt werden.
                                • Die Farben grey und red kann man natürlich auch entsprechen anpassen, wie man es gerne hätte.
                                • Auch der Startpunkt kann durch Anpassung des Ausdrucks "rotate(-90 18 18)" angepasst werden. Ersetzt man die "-90" z.B. durch "0", beginnt der Kreis oben, statt (um -90° gedreht) links.

                                Auf ähnliche Art- und Weise lassen sich bestimmt noch viele coole Sachen realisieren.

                                Ich fände es gut, wenn man so was im wiki auf Github sammeln könnte. Wer also was tolles entdeckt hat, bitte hier oder gleich im Wiki posten, dann haben alle was davon.

                                Viel Spaß beim Testen!

                                VG!

                                konnte das einbinden - habe aber frage dazu

                                wollte mal ein anderes svg nutzen - wie muss der eintrag aufgebaut werden ?

                                <svg width="40" height="11"><rect width="30" height="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></svg>
                                

                                habe

                                |data:image/svg+xml;charset=UTF-8,
                                

                                noch davor gesetzt

                                funktioniert leider nicht - hast du eine idee, was ich falsch mache

                                s.bormann H 2 Replies Last reply Reply Quote 0
                                • s.bormann
                                  s.bormann Most Active @liv-in-sky last edited by

                                  @liv-in-sky sagte in Test Adapter iQontrol 1.1.x:

                                  @s-bormann sagte in Test Adapter iQontrol 1.1.x:

                                  Hab gerade was cooles herausgefunden:

                                  Man kann eine runde Fortschrittsanzeige als Icon oder Kachelhintergrund mittels eines SVG erstellen:

                                  3c5de120-5d72-49f9-b097-a6e1e051215f-image.png

                                  Als Icon trägt man dazu folgendes ein:

                                  |data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="none" stroke="grey" stroke-width="4" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path><path fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-dasharray="{javascript.0.Test.LEVEL}, 100" transform="rotate(-90 18 18)" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path></svg>

                                  • javascript.0.Test.LEVEL muss dabei durch den gewünschten Datenpunkt ersetzt werden.
                                  • Die Farben grey und red kann man natürlich auch entsprechen anpassen, wie man es gerne hätte.
                                  • Auch der Startpunkt kann durch Anpassung des Ausdrucks "rotate(-90 18 18)" angepasst werden. Ersetzt man die "-90" z.B. durch "0", beginnt der Kreis oben, statt (um -90° gedreht) links.

                                  Auf ähnliche Art- und Weise lassen sich bestimmt noch viele coole Sachen realisieren.

                                  Ich fände es gut, wenn man so was im wiki auf Github sammeln könnte. Wer also was tolles entdeckt hat, bitte hier oder gleich im Wiki posten, dann haben alle was davon.

                                  Viel Spaß beim Testen!

                                  VG!

                                  konnte das einbinden - habe aber frage dazu

                                  wollte mal ein anderes svg nutzen - wie muss der eintrag aufgebaut werden ?

                                  <svg width="40" height="11"><rect width="30" height="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></svg>
                                  

                                  habe

                                  |data:image/svg+xml;charset=UTF-8,
                                  

                                  noch davor gesetzt

                                  funktioniert leider nicht - hast du eine idee, was ich falsch mache

                                  Hi, irgendwo musst Du noch die Variable in geschweiften Klammern einbauen: {datenpunkt.0.irgendwas}, z.B. so:

                                  |data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect y="40" width="{javascript.0.Test.Testblind.LEVEL}" height="20" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></svg>

                                  liv-in-sky 1 Reply Last reply Reply Quote 0
                                  • liv-in-sky
                                    liv-in-sky @s.bormann last edited by

                                    @s-bormann

                                    aahhh - tausend dank

                                    smart42.gif

                                    s.bormann 1 Reply Last reply Reply Quote 0
                                    • s.bormann
                                      s.bormann Most Active @liv-in-sky last edited by

                                      @liv-in-sky Probier mal folgendes:

                                      |data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 110 110"><rect y="40" width="100" height="20" rx="8" ry="8" fill="grey" stroke-width="0" ></rect><rect y="40" width="{javascript.0.Test.Testblind.LEVEL}" height="20" rx="8" ry="8" fill="red" stroke-width="0" ></rect></svg>

                                      f99a6896-1145-4888-a53a-d89de5ab1629-image.png

                                      s.bormann liv-in-sky 2 Replies Last reply Reply Quote 0
                                      • s.bormann
                                        s.bormann Most Active @s.bormann last edited by

                                        Habe ein Wiki angelegt:

                                        Progress Bars

                                        • It is possible, to use SVG-Definitions in combination with variables instead of imagefiles to display progress-bars
                                        • See Wiki wiki.
                                        1 Reply Last reply Reply Quote 2
                                        • liv-in-sky
                                          liv-in-sky @s.bormann last edited by

                                          @s-bormann sieht natürlich besser aus, aber ich wollte nur mal wissen, wie es theoretisch aufgebaut sein muss - wollte eine online-uhr einbauen -oder erstmal schauen, was man mit svg noch so zaubern kann

                                          1 Reply Last reply Reply Quote 0
                                          • V
                                            vepman last edited by

                                            @s-bormann
                                            Könnte man damit auch einen Volume-Slider realisieren?
                                            Eventuell in dieser Art:
                                            Clipboard 1.jpg

                                            Ich brauch so etwas, um die Lautstärke zweier Fernseher zu regeln.

                                            s.bormann 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            325
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

                                            app dark-mode iqontrol responsive vis visualisierung visualization widget
                                            295
                                            7633
                                            5538014
                                            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