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

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Welche iOBroker Items für Custom Widget shutter HabPanel

Scheduled Pinned Locked Moved ioBroker Allgemein
habpanelsonoff-adapter
3 Posts 3 Posters 2.2k Views 4 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.
  • L Offline
    L Offline
    larsiwitschino2003
    wrote on last edited by
    #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 Reply Last reply
    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
      wrote on last edited by
      #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 Reply Last reply
      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
        wrote on last edited by
        #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 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
        FAQ Cloud / IOT
        HowTo: Node.js-Update
        HowTo: Backup/Restore
        Downloads
        BLOG

        312

        Online

        32.6k

        Users

        82.2k

        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