Weiter zum Inhalt
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Hell
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dunkel
  • 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. [Vorstellung] Shelly Style Widgets

NEWS

  • Neues YouTube-Video: Visualisierung im Devices-Adapter
    BluefoxB
    Bluefox
    13
    1
    1.3k

  • Neuer ioBroker-Blog online: Monatsrückblick März/April 2026
    BluefoxB
    Bluefox
    8
    1
    2.1k

  • Verwendung von KI bitte immer deutlich kennzeichnen
    HomoranH
    Homoran
    11
    1
    1.0k

[Vorstellung] Shelly Style Widgets

Geplant Angeheftet Gesperrt Verschoben Visualisierung
how-toown projecttemplatevis
104 Beiträge 14 Kommentatoren 21.6k Aufrufe 28 Beobachtet
  • Ä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.
  • 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
    schrieb am zuletzt editiert von
    #101

    @crunkfx
    Vielen Dank dafür - einsame Spitze!

    1 Antwort Letzte Antwort
    0
    • S Offline
      S Offline
      Snatch
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        0
        • H Offline
          H Offline
          h07d0q
          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
          0

          Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.

          Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.

          Mit deinem Input könnte dieser Beitrag noch besser werden 💗

          Registrieren Anmelden
          Antworten
          • In einem neuen Thema antworten
          Anmelden zum Antworten
          • Älteste zuerst
          • Neuste zuerst
          • Meiste Stimmen


          Support us

          ioBroker
          Community Adapters
          Donate

          492

          Online

          32.9k

          Benutzer

          83.1k

          Themen

          1.3m

          Beiträge
          Community
          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
          ioBroker Community 2014-2026
          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