Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. HTML/CSS Radio Button mit Datenpunkt verbinden

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.1k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.1k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.4k

HTML/CSS Radio Button mit Datenpunkt verbinden

Geplant Angeheftet Gesperrt Verschoben Visualisierung
16 Beiträge 5 Kommentatoren 1.4k Aufrufe 5 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • OliverIOO OliverIO

    @rudi123

    grundsätzlich ja, aber
    das html widget kann zwar daten lesen, aber
    nur mit zusätzlichem javascript code auch daten schreiben .
    dann müssen die datenpunkte die gelesen und geschrieben werden beim start von vis bekannt sein und
    bei Änderung des datenpunkts wird der komplette inhalt des html widgets entfernt und wieder neu in den dom-baum eingefügt. bei komplexen strukturen kann es zu flackern führen und da der ggfs. enthaltene javascript code ebenfalls entfernt wird, müssen ein paar sachen in funktionen im skript tab oder ein weiteres html widget ausgelagert werden, da variablen und codeausführen den tausch nicht überleben.

    Ideal dafür wäre ein eigener adapter oder
    du designst ein vorhandenes widget mit css soweit um, das es so aussieht wie du es haben möchtest.

    ich habe vor längerer zeit mal sowas gebastelt, was dann aber in meinen adapter als eigenes widget gewandert ist

    hier der script-anteil zum setzen eines wertes, wenn die radio buttons geändert werden

    <script>
    var adapter = "squeezeboxrpc.0.";
    function setzeWert(variablenName, Wert){
       this.servConn._socket.emit('setState', variablenName, Wert);
    }
    $("input[name=station]").change(function(){
        var station=this.value;
        var playername = $("input[name=squeeze]:checked").val();
        setzeWert(adapter+"Players"+"."+playername+".cmdPlayFavorite",station);
    });
    </script>
    

    das ist der html-anteil für die radiobuttons

    <div class="stations">
      <div>
        <input type="radio" id="s0" name="station" value="0">
        <label for="s0">
          <span>
            <img src="https://static-media.streema.com/media/cache/c7/c0/c7c0f0ec0d30e31f767a66d9885a6142.jpg">
          </span>
        </label>
      </div>
      <div>
        <input type="radio" id="s1" name="station" value="1">
        <label for="s1">
          <span>
            <img src="https://static-media.streema.com/media/cache/05/28/0528562ca58fa89c312c503af6df02b0.jpg">
          </span>
        </label>
      </div>
      <div>
        <input type="radio" id="s8" name="station" value="8">
        <label for="s8">
          <span>
            <img src="https://static-media.streema.com/media/cache/fb/77/fb771acac3e61dde61dc7b77589a5e88.jpg">
          </span>
        </label>
      </div>
      <div>
        <input type="radio" id="s6" name="station" value="6">
        <label for="s6">
          <span>
            <img src="https://static-media.streema.com/media/cache/07/4f/074f619b04a8312e13a09b05794b823a.jpg">
          </span>
        </label>
      </div>
      <div>
        <input type="radio" id="s13" name="station" value="13">
        <label for="s13">
          <span>
            <img src="https://static-media.streema.com/media/cache/fb/e2/fbe29704dbf571a9ad441713120d41f2.jpg">
          </span>
        </label>
      </div>
    </div>
    
    
    <style>
    body {
      background-color: black;
      color: white;
    }
    
    .stations div {
       display: inline-block; 
    }
    
    .stations input[type="radio"] {
      display: none;
    }
    
    .stations img {
      opacity: 0.5;
      width: 50px;
      height: 50px;
      border: 2px solid #2e2e2e;
    }
    .stations canvas {
      opacity: 0.5;
      width: 50px;
      height: 50px;
      border: 2px solid #2e2e2e;
    }
    
    .stations img:active {
    /*  transform: translateY(5px); */
      transform: scale(0.9, 0.9);
      opacity: 1;
      border: 2px solid #87ceeb;
      border-radius: 5px;
    }
    .stations canvas:active {
    /*  transform: translateY(5px); */
      transform: scale(0.9, 0.9);
      opacity: 1;
      border: 2px solid #87ceeb;
      border-radius: 5px;
    }
    
    .stations input[type="radio"]:checked + label img {
      opacity: 1;
      border: 2px solid #87ceeb;
      border-radius: 5px;
    }
    .stations input[type="radio"]:checked + label canvas {
      opacity: 1;
      border: 2px solid #87ceeb;
      border-radius: 5px;
    }
    </style>
    

    R Offline
    R Offline
    rudi123
    schrieb am zuletzt editiert von rudi123
    #7

    @oliverio

    Danke werde mir das mal angucken, glaube aber das wird mit meinen Kenntnissen sehr schwierig :D

    Edit:

    das Script kommt in die Vis in die Script Spalte?

    wenn ich einen Datenpunkt einsetzen möchte wo etwas reingeschrieben wird ist es so falsch denke ich ?

    <script>
    var adapter = "0_userdata.0.test";
    function setzeWert(variablenName, Wert){
       this.servConn._socket.emit('setState', variablenName, Wert);
    }
    $("input[name=station]").change(function(){
        var station=this.value;
        var playername = $("input[name=squeeze]:checked").val();
        setzeWert(adapter+"Players"+"."+playername+".cmdPlayFavorite",station);
    });
    </script>
    
    
    

    habe jetzt nur bei Adapter meinen Test Datenpunkt eingebunden.

    Ich wusste nichtmal das man die CSS Spalte auch direkt ins HTML einbinden kann mit <style> das hilft mir auch ein bischen mehr Ordnung rein zu bekommen.

    OliverIOO 1 Antwort Letzte Antwort
    0
    • Z Offline
      Z Offline
      Zyan
      schrieb am zuletzt editiert von
      #8

      @OliverIO

      datenpunkt muss bei Start von Vis bekannt sein bedeutet einfach das wenn er geändert wird der Vis Adapter neu gestartet werden muss oder komplett Iobroker?

      OliverIOO 1 Antwort Letzte Antwort
      0
      • R rudi123

        @oliverio

        Danke werde mir das mal angucken, glaube aber das wird mit meinen Kenntnissen sehr schwierig :D

        Edit:

        das Script kommt in die Vis in die Script Spalte?

        wenn ich einen Datenpunkt einsetzen möchte wo etwas reingeschrieben wird ist es so falsch denke ich ?

        <script>
        var adapter = "0_userdata.0.test";
        function setzeWert(variablenName, Wert){
           this.servConn._socket.emit('setState', variablenName, Wert);
        }
        $("input[name=station]").change(function(){
            var station=this.value;
            var playername = $("input[name=squeeze]:checked").val();
            setzeWert(adapter+"Players"+"."+playername+".cmdPlayFavorite",station);
        });
        </script>
        
        
        

        habe jetzt nur bei Adapter meinen Test Datenpunkt eingebunden.

        Ich wusste nichtmal das man die CSS Spalte auch direkt ins HTML einbinden kann mit <style> das hilft mir auch ein bischen mehr Ordnung rein zu bekommen.

        OliverIOO Offline
        OliverIOO Offline
        OliverIO
        schrieb am zuletzt editiert von
        #9

        @rudi123 sagte in HTML/CSS Radio Button mit Datenpunkt verbinden:

        ich habe es in einem weiteren html widget stehen.
        in den script tab kannst du es ebenfalls reinkopieren, dann müssen aber die script-tags weg

        ich habe dir mal das script ein wenig angepasst, das es klarer wird wo was reinkommt.
        allerdings solltest du es schon auf deine gegebenheiten noch anpassen. aber zum testen müsste es erste einmal reichen.
        den datenpunkt 0_userdata.0.test muss als erstes von dir manuell angelegt werden. das macht das script nicht

        <script>
        var datenpunktname= "0_userdata.0.test";
        function setzeWert(variablenName, Wert){
           this.servConn._socket.emit('setState', variablenName, Wert);
        }
        $("input[name=station]").change(function(){
            var station=this.value;
            var playername = $("input[name=squeeze]:checked").val();
            setzeWert(datenpunktname,station);
        });
        </script>
        

        Meine Adapter und Widgets
        TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
        Links im Profil

        R 2 Antworten Letzte Antwort
        1
        • Z Zyan

          @OliverIO

          datenpunkt muss bei Start von Vis bekannt sein bedeutet einfach das wenn er geändert wird der Vis Adapter neu gestartet werden muss oder komplett Iobroker?

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von OliverIO
          #10

          @zyan sagte in HTML/CSS Radio Button mit Datenpunkt verbinden:

          @OliverIO

          datenpunkt muss bei Start von Vis bekannt sein bedeutet einfach das wenn er geändert wird der Vis Adapter neu gestartet werden muss oder komplett Iobroker?

          ja, im normalfall ändert man aber den datenpunktnamen auch nicht.
          ich erwähnte es, weil im forum immer wieder mal die frage nach dynamischen datenpunkten kommt. d.h. der datenpunktname wird erst zur laufzeit zusammen gesetzt.

          vis sammelt bei start alle datenpunktnamen ein und "abonniert" diese.
          dadurch teilt der server dann vis mit, wenn sich an diesen datenpunkten was geändert hat. sonst müssten ja ständig sämtliche werte an alle Clients (browser) verteilt werden. das wäre ineffizient.

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          1 Antwort Letzte Antwort
          0
          • OliverIOO OliverIO

            @rudi123 sagte in HTML/CSS Radio Button mit Datenpunkt verbinden:

            ich habe es in einem weiteren html widget stehen.
            in den script tab kannst du es ebenfalls reinkopieren, dann müssen aber die script-tags weg

            ich habe dir mal das script ein wenig angepasst, das es klarer wird wo was reinkommt.
            allerdings solltest du es schon auf deine gegebenheiten noch anpassen. aber zum testen müsste es erste einmal reichen.
            den datenpunkt 0_userdata.0.test muss als erstes von dir manuell angelegt werden. das macht das script nicht

            <script>
            var datenpunktname= "0_userdata.0.test";
            function setzeWert(variablenName, Wert){
               this.servConn._socket.emit('setState', variablenName, Wert);
            }
            $("input[name=station]").change(function(){
                var station=this.value;
                var playername = $("input[name=squeeze]:checked").val();
                setzeWert(datenpunktname,station);
            });
            </script>
            
            R Offline
            R Offline
            rudi123
            schrieb am zuletzt editiert von
            #11

            @oliverio

            Jetzt kommt was an meinem Test Datenpunkt, vielen dank nun habe ich ein Grundgerüst wo ich dran rum basteln kann.

            Allerdings nur wenn ich es in ein html widget packe, aber das ist ja kein Problem.

            1 Antwort Letzte Antwort
            0
            • OliverIOO OliverIO

              @rudi123 sagte in HTML/CSS Radio Button mit Datenpunkt verbinden:

              ich habe es in einem weiteren html widget stehen.
              in den script tab kannst du es ebenfalls reinkopieren, dann müssen aber die script-tags weg

              ich habe dir mal das script ein wenig angepasst, das es klarer wird wo was reinkommt.
              allerdings solltest du es schon auf deine gegebenheiten noch anpassen. aber zum testen müsste es erste einmal reichen.
              den datenpunkt 0_userdata.0.test muss als erstes von dir manuell angelegt werden. das macht das script nicht

              <script>
              var datenpunktname= "0_userdata.0.test";
              function setzeWert(variablenName, Wert){
                 this.servConn._socket.emit('setState', variablenName, Wert);
              }
              $("input[name=station]").change(function(){
                  var station=this.value;
                  var playername = $("input[name=squeeze]:checked").val();
                  setzeWert(datenpunktname,station);
              });
              </script>
              
              R Offline
              R Offline
              rudi123
              schrieb am zuletzt editiert von
              #12

              @oliverio

              Hallo ich hätte da nochmal eine Frage, erstmal danke für die Hilfe ich habe es tatsächlich geschafft es auf einen anderen Button anzuwenden.

              Wie könnte ich das Script erweitern bzw. ein zusätzliches hinzufügen das nach 3 Sekunden der Button wieder zurück auf Off geht

              <p class="btn-switch">					
               <input type="radio" id="yes" value="0" name="station" class="btn-switch__radio btn-switch__radio_yes" />
               <input type="radio" value="55" checked id="no" name="station" class="btn-switch__radio btn-switch__radio_no" />		
               <label for="yes" class="btn-switch__label btn-switch__label_yes"><span class="btn-switch__txt">ON</span></label>								  <label for="no" class="btn-switch__label btn-switch__label_no"><span class="btn-switch__txt">OFF</span></label>							
              </p>
              
              <style>
              
              html {
               text-align: center;
               font-family: Georgia, "Times New Roman", serif;
              }
              .btn-switch {
               font-size: 6em;
                 position: relative;
                 display: inline-block;		
                 -webkit-user-select: none;
                 -moz-user-select: none;
                 -ms-user-select: none;
                 user-select: none;
              }
              .btn-switch__radio {
                 display: none;
              }
              .btn-switch__label {
                 display: inline-block;	
                 padding: .75em .5em .75em .75em;
                 vertical-align: top;
                 font-size: 1em;
                 font-weight: 700;
                 line-height: 1.5;
                 color: #666;
               cursor: pointer;
                 transition: color .2s ease-in-out;
              }
              .btn-switch__label + .btn-switch__label {
               padding-right: .75em;
                 padding-left: 0;
              }
              .btn-switch__txt {
                 position: relative;
                 z-index: 2;
               display: inline-block;
                min-width: 1.5em;
                 opacity: 1;
                 pointer-events: none;
                 transition: opacity .2s ease-in-out;
              }
              .btn-switch__radio_no:checked ~ .btn-switch__label_yes .btn-switch__txt,
              .btn-switch__radio_yes:checked ~ .btn-switch__label_no .btn-switch__txt {
                 opacity: 0;
              }
              .btn-switch__label:before {
                 content: "";
                 position: absolute;
                 z-index: -1;
                 top: 0;
                 right: 0;
                 bottom: 0;
                 left: 0;
                 background: #f0f0f0;
                 border-radius: 1.5em;
                 box-shadow: inset 0 .0715em .3572em rgba(43,43,43,.05);
                 transition: background .2s ease-in-out;
              }
              .btn-switch__radio_yes:checked ~ .btn-switch__label:before {
                 background: #6ad500;
              }
              .btn-switch__label_no:after {
                 content: "";
                 position: absolute;
                 z-index: 2;
                 top: .5em;
                 bottom: .5em;
                 left: .5em;
                 width: 2em;
                 background: #fff;
                 border-radius: 1em;	
                 pointer-events: none;
                 box-shadow: 0 .1429em .2143em rgba(43,43,43,.2), 0 .3572em .3572em rgba(43,43,43,.1);
                 transition: left .2s ease-in-out, background .2s ease-in-out;
              }
              .btn-switch__radio_yes:checked ~ .btn-switch__label_no:after {
                 left: calc(100% - 2.5em);
                 background: #fff;
              }
              .btn-switch__radio_no:checked ~ .btn-switch__label_yes:before,
              .btn-switch__radio_yes:checked ~ .btn-switch__label_no:before {
                 z-index: 1;
              }
              .btn-switch__radio_yes:checked ~ .btn-switch__label_yes {
                 color: #fff;
              }
              
              

              Mein Button, nutze das Script umgeändert wie es war.

              OliverIOO 1 Antwort Letzte Antwort
              0
              • R rudi123

                @oliverio

                Hallo ich hätte da nochmal eine Frage, erstmal danke für die Hilfe ich habe es tatsächlich geschafft es auf einen anderen Button anzuwenden.

                Wie könnte ich das Script erweitern bzw. ein zusätzliches hinzufügen das nach 3 Sekunden der Button wieder zurück auf Off geht

                <p class="btn-switch">					
                 <input type="radio" id="yes" value="0" name="station" class="btn-switch__radio btn-switch__radio_yes" />
                 <input type="radio" value="55" checked id="no" name="station" class="btn-switch__radio btn-switch__radio_no" />		
                 <label for="yes" class="btn-switch__label btn-switch__label_yes"><span class="btn-switch__txt">ON</span></label>								  <label for="no" class="btn-switch__label btn-switch__label_no"><span class="btn-switch__txt">OFF</span></label>							
                </p>
                
                <style>
                
                html {
                 text-align: center;
                 font-family: Georgia, "Times New Roman", serif;
                }
                .btn-switch {
                 font-size: 6em;
                   position: relative;
                   display: inline-block;		
                   -webkit-user-select: none;
                   -moz-user-select: none;
                   -ms-user-select: none;
                   user-select: none;
                }
                .btn-switch__radio {
                   display: none;
                }
                .btn-switch__label {
                   display: inline-block;	
                   padding: .75em .5em .75em .75em;
                   vertical-align: top;
                   font-size: 1em;
                   font-weight: 700;
                   line-height: 1.5;
                   color: #666;
                 cursor: pointer;
                   transition: color .2s ease-in-out;
                }
                .btn-switch__label + .btn-switch__label {
                 padding-right: .75em;
                   padding-left: 0;
                }
                .btn-switch__txt {
                   position: relative;
                   z-index: 2;
                 display: inline-block;
                  min-width: 1.5em;
                   opacity: 1;
                   pointer-events: none;
                   transition: opacity .2s ease-in-out;
                }
                .btn-switch__radio_no:checked ~ .btn-switch__label_yes .btn-switch__txt,
                .btn-switch__radio_yes:checked ~ .btn-switch__label_no .btn-switch__txt {
                   opacity: 0;
                }
                .btn-switch__label:before {
                   content: "";
                   position: absolute;
                   z-index: -1;
                   top: 0;
                   right: 0;
                   bottom: 0;
                   left: 0;
                   background: #f0f0f0;
                   border-radius: 1.5em;
                   box-shadow: inset 0 .0715em .3572em rgba(43,43,43,.05);
                   transition: background .2s ease-in-out;
                }
                .btn-switch__radio_yes:checked ~ .btn-switch__label:before {
                   background: #6ad500;
                }
                .btn-switch__label_no:after {
                   content: "";
                   position: absolute;
                   z-index: 2;
                   top: .5em;
                   bottom: .5em;
                   left: .5em;
                   width: 2em;
                   background: #fff;
                   border-radius: 1em;	
                   pointer-events: none;
                   box-shadow: 0 .1429em .2143em rgba(43,43,43,.2), 0 .3572em .3572em rgba(43,43,43,.1);
                   transition: left .2s ease-in-out, background .2s ease-in-out;
                }
                .btn-switch__radio_yes:checked ~ .btn-switch__label_no:after {
                   left: calc(100% - 2.5em);
                   background: #fff;
                }
                .btn-switch__radio_no:checked ~ .btn-switch__label_yes:before,
                .btn-switch__radio_yes:checked ~ .btn-switch__label_no:before {
                   z-index: 1;
                }
                .btn-switch__radio_yes:checked ~ .btn-switch__label_yes {
                   color: #fff;
                }
                
                

                Mein Button, nutze das Script umgeändert wie es war.

                OliverIOO Offline
                OliverIOO Offline
                OliverIO
                schrieb am zuletzt editiert von OliverIO
                #13

                @rudi123

                hier ungetestet, eine überflüssige Zeile habe ich noch entfernt

                <script>
                var datenpunktname= "0_userdata.0.test";
                function setzeWert(variablenName, Wert){
                   this.servConn._socket.emit('setState', variablenName, Wert);
                }
                $("input[name=station]").change(function(){
                    var station=this.value;
                    setzeWert(datenpunktname,station);
                    var radio = this;
                    setTimeout(function() {
                        radio.checked = false;
                    }, 3000);
                });
                </script>
                

                Meine Adapter und Widgets
                TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                Links im Profil

                R 2 Antworten Letzte Antwort
                2
                • OliverIOO OliverIO

                  @rudi123

                  hier ungetestet, eine überflüssige Zeile habe ich noch entfernt

                  <script>
                  var datenpunktname= "0_userdata.0.test";
                  function setzeWert(variablenName, Wert){
                     this.servConn._socket.emit('setState', variablenName, Wert);
                  }
                  $("input[name=station]").change(function(){
                      var station=this.value;
                      setzeWert(datenpunktname,station);
                      var radio = this;
                      setTimeout(function() {
                          radio.checked = false;
                      }, 3000);
                  });
                  </script>
                  
                  R Offline
                  R Offline
                  rudi123
                  schrieb am zuletzt editiert von
                  #14

                  @oliverio

                  Hi, hatte wenig Zeit die letzten Tage.

                  Funktioniert soweit Optimal vielen Dank !

                  1 Antwort Letzte Antwort
                  2
                  • OliverIOO OliverIO

                    @rudi123

                    hier ungetestet, eine überflüssige Zeile habe ich noch entfernt

                    <script>
                    var datenpunktname= "0_userdata.0.test";
                    function setzeWert(variablenName, Wert){
                       this.servConn._socket.emit('setState', variablenName, Wert);
                    }
                    $("input[name=station]").change(function(){
                        var station=this.value;
                        setzeWert(datenpunktname,station);
                        var radio = this;
                        setTimeout(function() {
                            radio.checked = false;
                        }, 3000);
                    });
                    </script>
                    
                    R Offline
                    R Offline
                    rudi123
                    schrieb am zuletzt editiert von
                    #15

                    @oliverio

                    Hi , habe nochmal eine Frage habe dieses Navigationsdashboard gefunden.
                    Wäre es hier auch möglich wenn man durch die Navigationsbar klickt das man einen Input wie auch bei den Radio Buttons bekommt?

                    Habe es jetzt schon lange Probiert aber mehr als das eine kleine Checkbox irgendwo in einem Icon aufgetaucht ist hab ich nicht geschafft.

                    Das ist mein Widget mit HTML CSS und dem dazugehörigem Script:

                    [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"\n\n<menu class=\"menu\">\n    \n    <button class=\"menu__item active\" style=\"--bgColorItem: #ff8c00;\" >\n      <svg class=\"icon\"  viewBox=\"0 0 24 24\" >\n        <path d=\"M3.8,6.6h16.4\"/>\n        <path d=\"M20.2,12.1H3.8\"/>\n        <path d=\"M3.8,17.5h16.4\"/>\n      </svg>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #f54888;\">\n      <svg class=\"icon\" viewBox=\"0 0 24 24\">\n        <path  d=\"M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8\n        C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z\"/>\n        <path  d=\"M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6\"/>\n      </svg>\n    \n</button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #4343f5;\" >\n      <svg class=\"icon\" viewBox=\"0 0 24 24\">\n      <path  d=\"M3.4,11.9l8.8,4.4l8.4-4.4\"/>\n      <path  d=\"M3.4,16.2l8.8,4.5l8.4-4.5\"/>\n      <path  d=\"M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z\"/>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #e0b115;\" > \n      <svg class=\"icon\" viewBox=\"0 0 24 24\" >\n        <path  d=\"M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1\n          C3.9,4.4,4.4,3.9,5.1,3.9z\"/>\n        <path  d=\"M4.2,9.3h15.6\"/>\n        <path  d=\"M9.1,9.5v10.3\"/>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem:#65ddb7;\">\n      <svg class=\"icon\" viewBox=\"0 0 24 24\" >\n        <path  d=\"M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1\n          C3.9,4.4,4.4,3.9,5.1,3.9z\"/>\n        <path  d=\"M5.5,20l9.9-9.9l4.7,4.7\"/>\n        <path  d=\"M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z\"/>\n      </svg>\n    </button>\n\n    <div class=\"menu__border\"></div>\n\n  </menu>\n\n  <div class=\"svg-container\">\n    <svg viewBox=\"0 0 202.9 45.5\" >\n      <clipPath id=\"menu\" clipPathUnits=\"objectBoundingBox\" transform=\"scale(0.0049285362247413 0.021978021978022)\">\n        <path  d=\"M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7\n          c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5\n          c9.2,3.6,17.6,4.2,23.3,4H6.7z\"/>\n      </clipPath>\n    </svg>\n  </div>\n\n<style>\n\n\n\n\n\n\n\n\n\n\n\nhtml {\n\n    box-sizing: border-box;\n    --bgColorMenu : #1d1d27;\n    --duration: .7s;    \n\n}\n\nhtml *,\nhtml *::before,\nhtml *::after {\n\n    box-sizing: inherit;\n\n}\n\nbody{\n    \n    margin: 0;\n\n    height: 100vh;\n    overflow: hidden;\n    align-items: center;\n    justify-content: center;\n    background-color: #ffb457;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color var(--duration);\n\n}\n\n.menu{\n\n    margin: 0;\n    display: flex;\n    /* Works well with 100% width  */\n    width: 32.05em;\n    font-size: 1.5em;\n    padding:  1.6em;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--bgColorMenu);\n    \n}\n\n.menu__item{\n    \n    all: unset;\n    flex-grow: 1;\n    z-index: 100;\n    display: flex;\n    cursor: pointer;\n    position: relative;\n    border-radius: 50%;\n    align-items: center;\n    will-change: transform;\n    justify-content: center;\n    padding: 0.55em 0 0.85em;\n    transition: transform var(--timeOut , var(--duration));\n    \n}\n\n.menu__item::before{\n    \n    content: \"\";\n    z-index: -1;\n    width: 4.2em;\n    height: 4.2em;\n    border-radius: 50%;\n    position: absolute;\n    transform: scale(0);\n    transition: background-color var(--duration), transform var(--duration);\n    \n}\n\n\n.menu__item.active {\n\n    transform: translate3d(0, -.8em , 0);\n\n}\n\n.menu__item.active::before{\n    \n    transform: scale(1);\n    background-color: var(--bgColorItem);\n\n}\n\n.icon{\n    \n    width: 2.6em;\n    height: 2.6em;\n    stroke: white;\n    fill: transparent;\n    stroke-width: 1pt;\n    stroke-miterlimit: 10;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 400;\n    \n}\n\n.menu__item.active .icon {\n\n    animation: strok 1.5s reverse;\n    \n}\n\n@keyframes strok {\n\n    100% {\n\n        stroke-dashoffset: 400;\n\n    }\n\n}\n\n.menu__border{\n\n    left: 0;\n    bottom: 99%;\n    width: 10.9em;\n    height: 2.4em;\n    position: absolute;\n    clip-path: url(#menu);\n    will-change: transform;\n    background-color: var(--bgColorMenu);\n    transition: transform var(--timeOut , var(--duration));\n    \n}\n\n.svg-container {\n\n    width: 0;\n    height: 0;\n}\n\n\n@media screen and (max-width: 50em) {\n    .menu{\n        font-size: .8em;\n    }\n}\n\n</style>\n\n\n\n\n\n\n\n\n\n\n\n\n<script>\n\n// Designed by:  Mauricio Bucardo\n// Original image:\n// https://dribbble.com/shots/5619509-Animated-Tab-Bar\n\n\"use strict\"; \n\nconst body = document.body;\nconst bgColorsBody = [\"#ffb457\", \"#ff96bd\", \"#9999fb\", \"#ffe797\", \"#cffff1\"];\nconst menu = body.querySelector(\".menu\");\nconst menuItems = menu.querySelectorAll(\".menu__item\");\nconst menuBorder = menu.querySelector(\".menu__border\");\nlet activeItem = menu.querySelector(\".active\");\n\nfunction clickItem(item, index) {\n\n    menu.style.removeProperty(\"--timeOut\");\n    \n    if (activeItem == item) return;\n    \n    if (activeItem) {\n        activeItem.classList.remove(\"active\");\n    }\n\n    \n    item.classList.add(\"active\");\n    body.style.backgroundColor = bgColorsBody[index];\n    activeItem = item;\n    offsetMenuBorder(activeItem, menuBorder);\n    \n    \n}\n\nfunction offsetMenuBorder(element, menuBorder) {\n\n    const offsetActiveItem = element.getBoundingClientRect();\n    const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth  - offsetActiveItem.width) / 2) +  \"px\";\n    menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;\n\n}\n\noffsetMenuBorder(activeItem, menuBorder);\n\nmenuItems.forEach((item, index) => {\n\n    item.addEventListener(\"click\", () => clickItem(item, index));\n    \n})\n\nwindow.addEventListener(\"resize\", () => {\n    offsetMenuBorder(activeItem, menuBorder);\n    menu.style.setProperty(\"--timeOut\", \"none\");\n});"},"style":{"left":"142px","top":"412px","width":"772px","height":"175px"},"widgetSet":"basic"}]
                    

                    OliverIOO 1 Antwort Letzte Antwort
                    0
                    • R rudi123

                      @oliverio

                      Hi , habe nochmal eine Frage habe dieses Navigationsdashboard gefunden.
                      Wäre es hier auch möglich wenn man durch die Navigationsbar klickt das man einen Input wie auch bei den Radio Buttons bekommt?

                      Habe es jetzt schon lange Probiert aber mehr als das eine kleine Checkbox irgendwo in einem Icon aufgetaucht ist hab ich nicht geschafft.

                      Das ist mein Widget mit HTML CSS und dem dazugehörigem Script:

                      [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"\n\n<menu class=\"menu\">\n    \n    <button class=\"menu__item active\" style=\"--bgColorItem: #ff8c00;\" >\n      <svg class=\"icon\"  viewBox=\"0 0 24 24\" >\n        <path d=\"M3.8,6.6h16.4\"/>\n        <path d=\"M20.2,12.1H3.8\"/>\n        <path d=\"M3.8,17.5h16.4\"/>\n      </svg>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #f54888;\">\n      <svg class=\"icon\" viewBox=\"0 0 24 24\">\n        <path  d=\"M6.7,4.8h10.7c0.3,0,0.6,0.2,0.7,0.5l2.8,7.3c0,0.1,0,0.2,0,0.3v5.6c0,0.4-0.4,0.8-0.8,0.8H3.8\n        C3.4,19.3,3,19,3,18.5v-5.6c0-0.1,0-0.2,0.1-0.3L6,5.3C6.1,5,6.4,4.8,6.7,4.8z\"/>\n        <path  d=\"M3.4,12.9H8l1.6,2.8h4.9l1.5-2.8h4.6\"/>\n      </svg>\n    \n</button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #4343f5;\" >\n      <svg class=\"icon\" viewBox=\"0 0 24 24\">\n      <path  d=\"M3.4,11.9l8.8,4.4l8.4-4.4\"/>\n      <path  d=\"M3.4,16.2l8.8,4.5l8.4-4.5\"/>\n      <path  d=\"M3.7,7.8l8.6-4.5l8,4.5l-8,4.3L3.7,7.8z\"/>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem: #e0b115;\" > \n      <svg class=\"icon\" viewBox=\"0 0 24 24\" >\n        <path  d=\"M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1\n          C3.9,4.4,4.4,3.9,5.1,3.9z\"/>\n        <path  d=\"M4.2,9.3h15.6\"/>\n        <path  d=\"M9.1,9.5v10.3\"/>\n    </button>\n\n    <button class=\"menu__item\" style=\"--bgColorItem:#65ddb7;\">\n      <svg class=\"icon\" viewBox=\"0 0 24 24\" >\n        <path  d=\"M5.1,3.9h13.9c0.6,0,1.2,0.5,1.2,1.2v13.9c0,0.6-0.5,1.2-1.2,1.2H5.1c-0.6,0-1.2-0.5-1.2-1.2V5.1\n          C3.9,4.4,4.4,3.9,5.1,3.9z\"/>\n        <path  d=\"M5.5,20l9.9-9.9l4.7,4.7\"/>\n        <path  d=\"M10.4,8.8c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C7.3,8,8,7.3,8.9,7.3C9.7,7.3,10.4,8,10.4,8.8z\"/>\n      </svg>\n    </button>\n\n    <div class=\"menu__border\"></div>\n\n  </menu>\n\n  <div class=\"svg-container\">\n    <svg viewBox=\"0 0 202.9 45.5\" >\n      <clipPath id=\"menu\" clipPathUnits=\"objectBoundingBox\" transform=\"scale(0.0049285362247413 0.021978021978022)\">\n        <path  d=\"M6.7,45.5c5.7,0.1,14.1-0.4,23.3-4c5.7-2.3,9.9-5,18.1-10.5c10.7-7.1,11.8-9.2,20.6-14.3c5-2.9,9.2-5.2,15.2-7\n          c7.1-2.1,13.3-2.3,17.6-2.1c4.2-0.2,10.5,0.1,17.6,2.1c6.1,1.8,10.2,4.1,15.2,7c8.8,5,9.9,7.1,20.6,14.3c8.3,5.5,12.4,8.2,18.1,10.5\n          c9.2,3.6,17.6,4.2,23.3,4H6.7z\"/>\n      </clipPath>\n    </svg>\n  </div>\n\n<style>\n\n\n\n\n\n\n\n\n\n\n\nhtml {\n\n    box-sizing: border-box;\n    --bgColorMenu : #1d1d27;\n    --duration: .7s;    \n\n}\n\nhtml *,\nhtml *::before,\nhtml *::after {\n\n    box-sizing: inherit;\n\n}\n\nbody{\n    \n    margin: 0;\n\n    height: 100vh;\n    overflow: hidden;\n    align-items: center;\n    justify-content: center;\n    background-color: #ffb457;\n    -webkit-tap-highlight-color: transparent;\n    transition: background-color var(--duration);\n\n}\n\n.menu{\n\n    margin: 0;\n    display: flex;\n    /* Works well with 100% width  */\n    width: 32.05em;\n    font-size: 1.5em;\n    padding:  1.6em;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--bgColorMenu);\n    \n}\n\n.menu__item{\n    \n    all: unset;\n    flex-grow: 1;\n    z-index: 100;\n    display: flex;\n    cursor: pointer;\n    position: relative;\n    border-radius: 50%;\n    align-items: center;\n    will-change: transform;\n    justify-content: center;\n    padding: 0.55em 0 0.85em;\n    transition: transform var(--timeOut , var(--duration));\n    \n}\n\n.menu__item::before{\n    \n    content: \"\";\n    z-index: -1;\n    width: 4.2em;\n    height: 4.2em;\n    border-radius: 50%;\n    position: absolute;\n    transform: scale(0);\n    transition: background-color var(--duration), transform var(--duration);\n    \n}\n\n\n.menu__item.active {\n\n    transform: translate3d(0, -.8em , 0);\n\n}\n\n.menu__item.active::before{\n    \n    transform: scale(1);\n    background-color: var(--bgColorItem);\n\n}\n\n.icon{\n    \n    width: 2.6em;\n    height: 2.6em;\n    stroke: white;\n    fill: transparent;\n    stroke-width: 1pt;\n    stroke-miterlimit: 10;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 400;\n    \n}\n\n.menu__item.active .icon {\n\n    animation: strok 1.5s reverse;\n    \n}\n\n@keyframes strok {\n\n    100% {\n\n        stroke-dashoffset: 400;\n\n    }\n\n}\n\n.menu__border{\n\n    left: 0;\n    bottom: 99%;\n    width: 10.9em;\n    height: 2.4em;\n    position: absolute;\n    clip-path: url(#menu);\n    will-change: transform;\n    background-color: var(--bgColorMenu);\n    transition: transform var(--timeOut , var(--duration));\n    \n}\n\n.svg-container {\n\n    width: 0;\n    height: 0;\n}\n\n\n@media screen and (max-width: 50em) {\n    .menu{\n        font-size: .8em;\n    }\n}\n\n</style>\n\n\n\n\n\n\n\n\n\n\n\n\n<script>\n\n// Designed by:  Mauricio Bucardo\n// Original image:\n// https://dribbble.com/shots/5619509-Animated-Tab-Bar\n\n\"use strict\"; \n\nconst body = document.body;\nconst bgColorsBody = [\"#ffb457\", \"#ff96bd\", \"#9999fb\", \"#ffe797\", \"#cffff1\"];\nconst menu = body.querySelector(\".menu\");\nconst menuItems = menu.querySelectorAll(\".menu__item\");\nconst menuBorder = menu.querySelector(\".menu__border\");\nlet activeItem = menu.querySelector(\".active\");\n\nfunction clickItem(item, index) {\n\n    menu.style.removeProperty(\"--timeOut\");\n    \n    if (activeItem == item) return;\n    \n    if (activeItem) {\n        activeItem.classList.remove(\"active\");\n    }\n\n    \n    item.classList.add(\"active\");\n    body.style.backgroundColor = bgColorsBody[index];\n    activeItem = item;\n    offsetMenuBorder(activeItem, menuBorder);\n    \n    \n}\n\nfunction offsetMenuBorder(element, menuBorder) {\n\n    const offsetActiveItem = element.getBoundingClientRect();\n    const left = Math.floor(offsetActiveItem.left - menu.offsetLeft - (menuBorder.offsetWidth  - offsetActiveItem.width) / 2) +  \"px\";\n    menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;\n\n}\n\noffsetMenuBorder(activeItem, menuBorder);\n\nmenuItems.forEach((item, index) => {\n\n    item.addEventListener(\"click\", () => clickItem(item, index));\n    \n})\n\nwindow.addEventListener(\"resize\", () => {\n    offsetMenuBorder(activeItem, menuBorder);\n    menu.style.setProperty(\"--timeOut\", \"none\");\n});"},"style":{"left":"142px","top":"412px","width":"772px","height":"175px"},"widgetSet":"basic"}]
                      

                      OliverIOO Offline
                      OliverIOO Offline
                      OliverIO
                      schrieb am zuletzt editiert von OliverIO
                      #16

                      @rudi123

                      ja klar.
                      das Geheimnis liegt in der Funktion
                      clickItem

                      und das konkrete Element welches geklickt worden ist, ist index.
                      Anhand dessen kannst du entscheiden was in welchen Datenpunkt geschrieben werden soll.

                      Meine Adapter und Widgets
                      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                      Links im Profil

                      1 Antwort Letzte Antwort
                      1
                      Antworten
                      • In einem neuen Thema antworten
                      Anmelden zum Antworten
                      • Älteste zuerst
                      • Neuste zuerst
                      • Meiste Stimmen


                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      783

                      Online

                      32.5k

                      Benutzer

                      81.6k

                      Themen

                      1.3m

                      Beiträge
                      Community
                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                      ioBroker Community 2014-2025
                      logo
                      • Anmelden

                      • Du hast noch kein Konto? Registrieren

                      • Anmelden oder registrieren, um zu suchen
                      • Erster Beitrag
                        Letzter Beitrag
                      0
                      • Home
                      • Aktuell
                      • Tags
                      • Ungelesen 0
                      • Kategorien
                      • Unreplied
                      • Beliebt
                      • GitHub
                      • Docu
                      • Hilfe