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. Welches Widget für einfachen Button

NEWS

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.2k

Welches Widget für einfachen Button

Geplant Angeheftet Gesperrt Verschoben Visualisierung
3 Beiträge 2 Kommentatoren 1.9k Aufrufe
  • Ä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.
  • coyoteC Offline
    coyoteC Offline
    coyote
    Most Active
    schrieb am zuletzt editiert von
    #1

    Hi Leute,

    irgendwie steh ich gerade auf dem Schlauch.

    Ich bräuchte einen einfachen Button wie im Screenshot zu sehen, der mir true/false schaltet und die Anzeige AN/AUS wechselt. Wenn möglich in diesem Stil und wenn der Text "An" ist sollte der Hintergrund eine andere Farbe haben.

    Eine Möglichkeit wäre das HQWidget im jQuery Stil, aber wie bekomme ich da den Radius der Ränder kleiner??

    Oder vielleicht jqui-control-icon-State, aber wie trage ich einen Wert dort ein der true/false togglen kann :?:
    536_button.png

    1 Antwort Letzte Antwort
    0
    • P Offline
      P Offline
      pix
      schrieb am zuletzt editiert von
      #2

      Hallo,

      auch, wenn das schon ein wenig her ist. Hier ein Widget mit passenden CSS Einstellungen. Datenpunkt eintragen, wird getoggelt (true/false). Bei true grün, bei false rot. Schrift im Label vergrößert und manuell zentriert. Zur Veranschaulichung Rahmen zugefügt.

      [{"tpl":"tplMetroTileBool","data":{"oid":"","visibility-cond":"==","visibility-val":1,"hover":"true","label_false":"Aus","label_true":"An","bg_class_false":"bg-red","bg_class_true":"bg-green","icon_class_false":"","icon_class_true":"","icon_badge_false":"","icon_badge_true":"","badge_bg_class_false":"","badge_bg_class_true":"","badge_top":"0","badge_left":"0","brand_bg_class_false":"","brand_bg_class_true":"","gestures-offsetX":0,"gestures-offsetY":0,"class":"button_coyote","name":"Toggle Button mit Custom CSS"},"style":{"left":"364px","top":"731px","z-index":"20","width":"134px","height":"86px","text-align":"center"},"widgetSet":"metro"}]
      

      CSS (in Reiter CSS kopieren und nach Bedarf anpassen). Die Farben sind extra kräftig, damit man sieht, welche Parameter zu ändern sind.
      261_bildschirmfoto_2016-04-20_um_16.29.05.jpg

      .button_coyote .metro {
          border: 6px solid yellow;
          text-align: center;
      
      }
      
      .button_coyote .metro .badge {
          display: none;
      }
      
      .button_coyote .metro .label {
          border: 2px solid blue;
          height: 30px;
          padding-bottom: 23px;
          padding-left: 25px;
          font-size: 40px !important;
      }
      

      Gruß

      Pix

      ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

      1 Antwort Letzte Antwort
      0
      • coyoteC Offline
        coyoteC Offline
        coyote
        Most Active
        schrieb am zuletzt editiert von
        #3

        Hi Pix,

        damit bin ich schon fast zufrieden und kann damit arbeiten.

        Wenn du mir jetzt noch sagst wie ich, wie in meinem ersten Post, den Verlauf vom Hintergrund so hinbekomme und wenn möglich bei "An/Aus" ein leichtes grün oder rot, wäre echt Top ;)
        536_an.png
        536_aus.png

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


        Support us

        ioBroker
        Community Adapters
        Donate

        763

        Online

        32.4k

        Benutzer

        81.5k

        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