Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. HTML/CSS Radio Button mit Datenpunkt verbinden

    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

    HTML/CSS Radio Button mit Datenpunkt verbinden

    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      rudi123 @OliverIO last edited by rudi123

      @oliverio

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

      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.

      OliverIO 1 Reply Last reply Reply Quote 0
      • Z
        Zyan last edited by

        @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?

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

          @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 2 Replies Last reply Reply Quote 1
          • OliverIO
            OliverIO @Zyan last edited by OliverIO

            @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.

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

              @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 Reply Last reply Reply Quote 0
              • R
                rudi123 @OliverIO last edited by

                @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.

                OliverIO 1 Reply Last reply Reply Quote 0
                • OliverIO
                  OliverIO @rudi123 last edited by 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 2 Replies Last reply Reply Quote 2
                  • R
                    rudi123 @OliverIO last edited by

                    @oliverio

                    Hi, hatte wenig Zeit die letzten Tage.

                    Funktioniert soweit Optimal vielen Dank !

                    1 Reply Last reply Reply Quote 2
                    • R
                      rudi123 @OliverIO last edited by

                      @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"}]
                      

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

                        @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.

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

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        547
                        Online

                        31.8k
                        Users

                        80.0k
                        Topics

                        1.3m
                        Posts

                        5
                        16
                        990
                        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