Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Vorstellung] Shelly Style Widgets

NEWS

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

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

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

[Vorstellung] Shelly Style Widgets

Scheduled Pinned Locked Moved Visualisierung
how-toown projecttemplatevis
104 Posts 14 Posters 18.3k Views 28 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • CrunkFXC CrunkFX

    Mediaplayer V2

    Nachdem es mit dem ursprünglichen Widget einige Probleme mit dem HTML Widget gab, hab ich das Widget von Grund auf neu erstellt. Ebenso gibt es nun eine Version für Spotify.
    Das Widget benötigt nun den Metro Widgets Adapter!!! und einen CSS Eintrag.

    Installation:
    1. Metro Widgets Adapter installieren
    4b4817d0-ac54-43a0-be2c-99850fb7b209-image.png
    2. CSS ins Projekt oder Global CSS kopieren:

    /* ---- Shelly Styled Widgets CSS ---- */
    /*           @2021 CrunkFX             */
    
    /* ######     Slider Start      ###### */
    .shstyledwidgets-bar .metro .slider .complete {
    	-webkit-appearance: none;
    	background-color: #37d0fa;
    	-moz-border-radius: 2px 0 0 2px;
    	border-radius: 3px 0 0 3px;
    	-webkit-transition: .2s;
    	transition: opacity .2s;
    	-moz-box-shadow: inset 0 0 5px #000000;
    	-webkit-box-shadow: inset 0 0 5px #000000;
    	box-shadow: inset 0 0 5px #000000;
    }
    
    .shstyledwidgets-bar .metro .slider .marker:active {
    	outline: none;
    }
    
    .shstyledwidgets-bar .metro .slider .marker {
    	-webkit-appearance: none;
    	border-width: 0px;
    	top: -1px;
    	z-index: 2;
    	appearance: none;
    	height: 14px;
    	width: 22px;
    	background: #27506c;
    	cursor: pointer;
    	border-radius: 1px;
    	-moz-box-shadow: inset 0 0 0px #000000;
    	-webkit-box-shadow: inset 0 0 4px #000000;
    	box-shadow: inset 0 0 4px #000000;
    }
    
    .shstyledwidgets-bar .metro .slider {
    	background-color: transparent;
    }
    
    .shstyledwidgets-bar2 .metro .slider .complete {
        height: 10px;
    	-webkit-appearance: none;
    	background-color: #37d0fa;
    	-moz-border-radius: 2px;
    	border-radius: 2px 2px 2px 2px;
    	-webkit-transition: .2s;
    	transition: opacity .2s;
    	-moz-box-shadow: inset 0 0 5px #000000;
    	-webkit-box-shadow: inset 0 0 5px #000000;
    	box-shadow: inset 0 0 5px #000000;
    }
    
    .shstyledwidgets-bar2 .metro .slider .marker:active {
    	outline: none;
    }
    .shstyledwidgets-bar2 .metro .slider .marker {
    opacity:0;
    }
    .shstyledwidgets-bar2 .metro .slider {
    	background-color: transparent;
    }
    /* ######       Slider End      ###### */
    

    fd5187fd-cd37-400f-81ad-3e93f34828f1-image.png

    3. WebApp starten und
    Alexa: Playerpfad eingeben (mehr Info siehe Oben)
    Spotify: Instanznummer angeben
    Edit:
    a7b8469c-a640-4c61-b1ae-f7907272c541-image.png

    danach den Export kopieren und als Widget importieren.

    LatziL Online
    LatziL Online
    Latzi
    wrote on last edited by
    #101

    @crunkfx
    Vielen Dank dafür - einsame Spitze!

    1 Reply Last reply
    0
    • S Offline
      S Offline
      Snatch
      wrote on last edited by
      #102

      Hallo, super Anleitung um Widgets zu bauen. Vielen Dank!

      Ich habe es auch mal versucht und die Variablen wie in der Anleitung vergeben. Wenn ich nun aber Gruppiere, dann erscheinen die Optionen im Reiter "Allgemein" nicht. Auch scheint er nur temporär zu gruppieren, denn klicke ich nur 1x auf eines der beiden gruppierten Objekte, kann ich die einzeln wieder verschieben.

      Weis jemand was ich falsch mache?

      Grüße und Danke!

      CrunkFXC 1 Reply Last reply
      0
      • S Snatch

        Hallo, super Anleitung um Widgets zu bauen. Vielen Dank!

        Ich habe es auch mal versucht und die Variablen wie in der Anleitung vergeben. Wenn ich nun aber Gruppiere, dann erscheinen die Optionen im Reiter "Allgemein" nicht. Auch scheint er nur temporär zu gruppieren, denn klicke ich nur 1x auf eines der beiden gruppierten Objekte, kann ich die einzeln wieder verschieben.

        Weis jemand was ich falsch mache?

        Grüße und Danke!

        CrunkFXC Offline
        CrunkFXC Offline
        CrunkFX
        Forum Testing
        wrote on last edited by
        #103

        @snatch Wie gruppierst du denn? Kannst du ein Screenshot machen?

        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

        1 Reply Last reply
        0
        • H Offline
          H Offline
          h07d0q
          wrote on last edited by h07d0q
          #104

          Hallo zusammen,

          funktionieren die Widgets bei euch noch? Ich bekomme die bei mir nicht importiert, muss aber gestehen, dass ich es direkt in der Vis-2-beta probiere...
          Mir geht's speziell um den Shutter.

          Hat sich erledigt - in Vis 1 funktioniert der Import. Muss also an Vis-2 liegen.

          1 Reply Last reply
          0
          Reply
          • Reply as topic
          Log in to reply
          • Oldest to Newest
          • Newest to Oldest
          • Most Votes


          Support us

          ioBroker
          Community Adapters
          Donate

          943

          Online

          32.5k

          Users

          81.6k

          Topics

          1.3m

          Posts
          Community
          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
          ioBroker Community 2014-2025
          logo
          • Login

          • Don't have an account? Register

          • Login or register to search.
          • First post
            Last post
          0
          • Home
          • Recent
          • Tags
          • Unread 0
          • Categories
          • Unreplied
          • Popular
          • GitHub
          • Docu
          • Hilfe