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. ioBroker Allgemein
  4. Welche iOBroker Items für Custom Widget shutter HabPanel

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    16
    1
    1.0k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    698

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.0k

Welche iOBroker Items für Custom Widget shutter HabPanel

Geplant Angeheftet Gesperrt Verschoben ioBroker Allgemein
habpanelsonoff-adapter
3 Beiträge 3 Kommentatoren 2.2k Aufrufe 4 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.
  • L Offline
    L Offline
    larsiwitschino2003
    schrieb am zuletzt editiert von
    #1

    Hallo Kollegen,

    ich habe mal eine Frage was die Custom Widget Anlage beim HabPanel angeht. ich habe schon vieles probiert und ermöglicht, hänge aber allerdings bei dem Custom Widget zum Rollershutter, welches ich gerne einsetzen möchte.
    In dem Quellcode unten, aus welchem ich das Custom Widget erstellt habe, funktionieren leider meine sonoff.0 ITEMS aus den Datenpunkten meines Sonoff Adapters zum jeweiligen Rollladen (Shelly Modul mit Tasmota).

    Rollershutter_Custom.PNG

    Ich gehe direkt auf Power1 (Rollladen hoch) und Power2 (Rollladen runter).

    Anbei noch ein Bild meines verwendeten Datenpunktes.

    Sonoff_Rollershutter_DP.jpg

    Hier der verwendete Custom Widget Java Script Code:

    <style>
    div.shutterWidget {
    border: 1px solid white;
    border-radius: 15px;
    display: flex;
    position: absolute;
    background-color: initial;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    align-items: center;
    }

    div.shutterWidget div {
        border: 0px solid white;
        width: 100%;
        text-align: center;
        align-items: center;
        background-color: inherit;
        display: flex;
        justify-content: center;
        font-size: 2em;
    }
    
    div.shutterWidget button {
        border: 0px solid white;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        height: 1.5em;
        width: 1.5em;
        float: left;
        font-size: 3em;
        margin-right: 12px;
        line-height: 50%;
        padding: 0 0 0 0;
    }
    
    div.shutterWidget span {
        border: 0px solid white;
        width: 100%;
        height: 75%;
        align-items: center;
        display: flex;
        padding-right: 12px;
    }
    

    </style>
    <div class="shutterWidget">
    <div> {{ngModel.name}}</div>
    <span>
    <button ng-click="sendCmd(sonoff.0.Shelly25-EG-Rolladen-Terasse.Power1, 'True')"> <i class="glyphicon glyphicon-menu-up"></i> </button>
    <button ng-click="sendCmd(config.blind_item, 'STOP')">
    <widget-icon iconset="'eclipse-smarthome-classic'" icon="'blinds'" size="45"
    state="itemValue(config.blind_item)" />

        </button>
        <button style="margin-right: 0" ng-click="sendCmd(sonoff.0.Shelly25-EG-Rolladen-Terasse.POWER2, 'True')"> <i class="glyphicon glyphicon-menu-down"></i>    </button>
    </span>
    

    </div>

    Z 1 Antwort Letzte Antwort
    0
    • L larsiwitschino2003

      Hallo Kollegen,

      ich habe mal eine Frage was die Custom Widget Anlage beim HabPanel angeht. ich habe schon vieles probiert und ermöglicht, hänge aber allerdings bei dem Custom Widget zum Rollershutter, welches ich gerne einsetzen möchte.
      In dem Quellcode unten, aus welchem ich das Custom Widget erstellt habe, funktionieren leider meine sonoff.0 ITEMS aus den Datenpunkten meines Sonoff Adapters zum jeweiligen Rollladen (Shelly Modul mit Tasmota).

      Rollershutter_Custom.PNG

      Ich gehe direkt auf Power1 (Rollladen hoch) und Power2 (Rollladen runter).

      Anbei noch ein Bild meines verwendeten Datenpunktes.

      Sonoff_Rollershutter_DP.jpg

      Hier der verwendete Custom Widget Java Script Code:

      <style>
      div.shutterWidget {
      border: 1px solid white;
      border-radius: 15px;
      display: flex;
      position: absolute;
      background-color: initial;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      align-items: center;
      }

      div.shutterWidget div {
          border: 0px solid white;
          width: 100%;
          text-align: center;
          align-items: center;
          background-color: inherit;
          display: flex;
          justify-content: center;
          font-size: 2em;
      }
      
      div.shutterWidget button {
          border: 0px solid white;
          background: rgba(0, 0, 0, 0.5);
          color: white;
          height: 1.5em;
          width: 1.5em;
          float: left;
          font-size: 3em;
          margin-right: 12px;
          line-height: 50%;
          padding: 0 0 0 0;
      }
      
      div.shutterWidget span {
          border: 0px solid white;
          width: 100%;
          height: 75%;
          align-items: center;
          display: flex;
          padding-right: 12px;
      }
      

      </style>
      <div class="shutterWidget">
      <div> {{ngModel.name}}</div>
      <span>
      <button ng-click="sendCmd(sonoff.0.Shelly25-EG-Rolladen-Terasse.Power1, 'True')"> <i class="glyphicon glyphicon-menu-up"></i> </button>
      <button ng-click="sendCmd(config.blind_item, 'STOP')">
      <widget-icon iconset="'eclipse-smarthome-classic'" icon="'blinds'" size="45"
      state="itemValue(config.blind_item)" />

          </button>
          <button style="margin-right: 0" ng-click="sendCmd(sonoff.0.Shelly25-EG-Rolladen-Terasse.POWER2, 'True')"> <i class="glyphicon glyphicon-menu-down"></i>    </button>
      </span>
      

      </div>

      Z Offline
      Z Offline
      zgadgeter
      schrieb am zuletzt editiert von
      #2

      @larsiwitschino2003 Hallo, ich bin gerade dabei das auch zu machen, komme aber mit shelly und diesem widget nicht weiter. Kann Du, oder jemand anders mir sagen wie ich das einstelle das ich den shelly rolladen mit dem widget steuern kann? danke.

      S 1 Antwort Letzte Antwort
      0
      • Z zgadgeter

        @larsiwitschino2003 Hallo, ich bin gerade dabei das auch zu machen, komme aber mit shelly und diesem widget nicht weiter. Kann Du, oder jemand anders mir sagen wie ich das einstelle das ich den shelly rolladen mit dem widget steuern kann? danke.

        S Offline
        S Offline
        Stiffler679
        schrieb am zuletzt editiert von
        #3

        @zgadgeter said in Welche iOBroker Items für Custom Widget shutter HabPanel:

        @larsiwitschino2003 Hallo, ich bin gerade dabei das auch zu machen, komme aber mit shelly und diesem widget nicht weiter. Kann Du, oder jemand anders mir sagen wie ich das einstelle das ich den shelly rolladen mit dem widget steuern kann? danke.

        Hallo, falls es noch aktuell ist. Ich hatte das selbe Problem und konnte es über einen neuen Code lösen.

        VG

        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
        FAQ Cloud / IOT
        HowTo: Node.js-Update
        HowTo: Backup/Restore
        Downloads
        BLOG

        376

        Online

        32.6k

        Benutzer

        82.0k

        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