Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Vis Image auf vis Button

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    Vis Image auf vis Button

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

      über den z-Index kannst du das beeinflussen.

      je kleiner desto weiter im Hintergrund. Der größte ist im Vordergrund

      1 Reply Last reply Reply Quote 0
      • D
        DrFirebird last edited by

        ja aber, über den z-index kann ich ja nur die sichtbarkeit regeln.

        Lege ich ein image (z-index 1) auf einen Button (z-index 0), kann ich beide Objekte sehen,

        aber das Image reagiert nicht auf ein Click-Event.

        Ist ja soweit auch logisch und richtig, mein Ziel ist es aber, wenn mehrere Ebenen übereinander liegen,

        daß diese als ein Objekt behandelt werden.

        Im Prinzip möchte ich erreichen, daß 2 oder 3 oder 4 Objekte, die übereinander liegen, zu einem verschmelzen.

        1 Reply Last reply Reply Quote 0
        • N
          Nippy last edited by

          du möchtest also mit zwei übereinander / nebeneinander gelegten Widgets z.b. zwei Lampen gleichzeitig schalten, verstehe ich das richtig?

          1 Reply Last reply Reply Quote 0
          • htrecksler
            htrecksler Forum Testing last edited by

            > Im Prinzip möchte ich erreichen, daß 2 oder 3 oder 4 Objekte, die übereinander liegen, zu einem verschmelzen
            Ich befürchte, das wird nicht gehen.

            Aber wenn Du (unterstützt durch Screenshots) beschreibst was du eigenlich erreichen willst, vielleicht kann geholfen werden.

            1 Reply Last reply Reply Quote 0
            • N
              Nippy last edited by

              Da ich Java / JS nicht so mächtig bin, würde ich mir in diesem Fall mit NodeRed behelfen.

              • Leg dir die passenden Icons nebeneinander, Z-Index=1

              • Darüber einen durchsichtigen Rahmen bzw. durchsichtigen Schalter / Taster der mit einer CUxD Funktion / Programmexecute / Taster o.ä. verknüpft ist, Z-Index = 2

              • Unter NodeRed liest du den Status von diesem Rahmen bzw. der verknüpften Aktion aus

              • Als Ausgang schaltest du dann dementsprechend viele Funktionen

              1 Reply Last reply Reply Quote 0
              • M
                MrLee last edited by

                Moin!

                Wenn ich das richtig verstehe willst Du eine Aktion auslösen wenn Du auf ein Bild klickst…

                Das löse ich (für Navigation) zum Beispiel so:

                image z-Index=1

                Button, transparent, z-Index=2

                Der Buttun ist damit oben und klickbar, das Bild ist aber zu sehen da der button transparent ist.

                bis denne

                Mr.Lee

                1 Reply Last reply Reply Quote 0
                • D
                  DrFirebird last edited by

                  @MrLee

                  Genau so etwas habe ich gemeint. Vielen Dank für den Tip.

                  Funktioniert so, wie ich es grundsätzlich haben wollte, nur das Bild, bzw. der Button wirken dann ziemlich blass.

                  Habe mit allen Möglichen Transparentwerten getestet,

                  1 Reply Last reply Reply Quote 0
                  • M
                    MrLee last edited by

                    Moin!

                    Also bei mir ist durchsichtig = durchsichtig 🙂

                    anbei wie ich es mache
                    311_unbenannt.png

                    für den durchsichtigen overlay

                    1 Reply Last reply Reply Quote 0
                    • D
                      DrFirebird last edited by

                      liegt wahrscheinlich an meinem individuelen CSS Style, daß es bei mir anders aussieht.

                      1 Reply Last reply Reply Quote 0
                      • P
                        pgBroker last edited by

                        Der Topic ist uralt aber ich stand gerade vor demselben Problem und habe eine Lösung gefunden:

                        Im CSS Reiter des oben liegenden Bilds eingeben:

                        .noclick{pointer-events: none }

                        Im Reiter des Widgets unter Generell bei CSS Klasse eingeben:

                        noclick

                        fertig.

                        Der Klick geht jetzt quasi durch das Bild hindurch auf den darunter liegenden Button.

                        Vielleicht hilft es zukünftig jemandem.

                        M R 2 Replies Last reply Reply Quote 2
                        • M
                          madkaz @pgBroker last edited by

                          @pgBroker Super, danke.

                          1 Reply Last reply Reply Quote 0
                          • R
                            ravenmaster887 @pgBroker last edited by

                            @pgbroker

                            Hallo zusammen, das Thema ist zwar schon etwas älter, aber ich versuche grade auf Vis 2 umzusteigen. Dort funktioniert genau der beschriebene Wert noclick in der CSS Klasse unter Generell nicht mehr. Habt ihr eine Idee, wie man genau die Funktion auf in Vis 2 hingekommen?

                            Hintergrund nochmal kurz erklärt.

                            Ich habe einen Switch über dem ein Bild liegt. Klicke ich nun auf das Bild passiert nichts mit dem Schalter dahinter. Mit den Wert noclick in der CSS-Klasse hat das Bild vor dem Schalter gelegen, konnte aber nicht eigens angeklickt werden und es wurde der Schalter betätigt, wenn man auf das Bild geklickt hat. 🙂 Hoffe das war irgendwie verständlich.

                            Codierknecht BananaJoe 2 Replies Last reply Reply Quote 0
                            • Codierknecht
                              Codierknecht Developer Most Active @ravenmaster887 last edited by Codierknecht

                              @ravenmaster887 sagte in Vis Image auf vis Button:

                              Ich habe einen Switch über dem ein Bild liegt

                              Das kann eigentlich aus Prinzip nicht funktionieren.
                              Wenn ein Bild (mit höherem Z-Index) über einem anderen Element liegt, kriegt dieses Element nix von einem Klick mit.

                              Ich würde dem Button per CSS ein Bild verpassen statt etwas darüber zu legen.

                              Ich muss aber zugeben, dass meine HTML-Kenntnisse durchweg älter sind.

                              Edit
                              Mit CSS3 scheint das tatsächlich vorgesehen zu sein. Allerdings nur im Draft.
                              a12a4c42-82c0-4554-8fdd-1b1aca0df3f0-image.png

                              @ravenmaster887
                              Zeig mal, wie Du das implementiert hast.
                              https://forum.iobroker.net/topic/51555/hinweise-für-gute-forenbeiträge

                              R 1 Reply Last reply Reply Quote 0
                              • BananaJoe
                                BananaJoe Most Active @ravenmaster887 last edited by

                                @ravenmaster887 also für meinen Grundriss (in VIS1) habe ich das Bild als Hintergrund genommen und die Buttons darüber gelegt (basic - Bulb on/off). Den Buttons habe ich schlichtweg ein Transparentes .png als Bild gegeben (nur 1 Pixel groß), bei eingeschaltet ein Bild wo der Raum beleuchtet ist.

                                So in der Art, sollte das doch auch in VIS 2 noch funktionieren, die "Basic - Bulb on/off" gibt es auch dort noch

                                b1017f25-847d-4272-b946-f38249bf013a-image.png
                                f3573b74-86ee-4a55-921e-a96a580706b5-image.png
                                011ff4e9-75b8-4f11-8863-36a62ac1e88f-image.png

                                1 Reply Last reply Reply Quote 0
                                • R
                                  ravenmaster887 @Codierknecht last edited by

                                  @codierknecht

                                  Ich habe so etwas erstellt: cc684f5e-f461-46c8-aec9-f1e34f2cad3f-grafik.png
                                  Der Button hat quasi ein Bild und zur Verdeutlichung und Unterscheidung habe ich eine weiteres Bild drübergelegt und in VIS1 - wie gesagt - mit dem Wert noclick in CSS-Klasse unter 2c24c2a1-3d8e-4f55-b23b-e471534b8f7d-grafik.png quasi so umgestellt, dass beim Draufklicken der Button darunter betätigt wird.

                                  Und genau dieser noclick Parameter funktioniert in VIS2 nicht mehr.

                                  Danke für eure Hilfe. 🙂

                                  Codierknecht 1 Reply Last reply Reply Quote 0
                                  • Codierknecht
                                    Codierknecht Developer Most Active @ravenmaster887 last edited by

                                    @ravenmaster887 sagte in Vis Image auf vis Button:

                                    mit dem Wert noclick in CSS-Klasse

                                    Eine entsprechende Klasse hast Du im CSS auch angelegt und mit den passenden Einstellungen versehen?

                                    .noclick {
                                       pointer-events: none;
                                    }
                                    
                                    R 1 Reply Last reply Reply Quote 0
                                    • R
                                      ravenmaster887 @Codierknecht last edited by

                                      @codierknecht sagte in Vis Image auf vis Button:

                                      .noclick {

                                      Genau diese Info war die die mir gefehlt hat. Damit geht es. Super Danke. 🙂

                                      1 Reply Last reply Reply Quote 0
                                      • R
                                        ravenmaster887 last edited by

                                        Verdammt, das stand oben ja bereits. Habe ich überlesen. Mist.

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

                                        Support us

                                        ioBroker
                                        Community Adapters
                                        Donate

                                        475
                                        Online

                                        31.8k
                                        Users

                                        80.0k
                                        Topics

                                        1.3m
                                        Posts

                                        9
                                        19
                                        6592
                                        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