Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Creaven]

Hallo zusammen,

ich habe folgendes Problem:

Ich habe eine Map erstellt, um die Szenen meiner Huelampe nachzubilden.

<!-- Defined scenes -->
<div ng-init="sceneMap={
              'true': 'scene_konzentrieren',
              'true': 'scene_energie_tanken',
              'true': 'scene_entspannen',
              'true': 'scene_frühlingsblüten',
              'true': 'scene_gedimmt',
              'true': 'scene_hell',
              'true': 'scene_lesen',
              'true': 'scene_nachtlicht',
              'true': 'scene_nordlichter', 
              'true': 'scene_tropendämmerung', 
              'true': 'scene_tv_licht'
             }" />

Diese habe ich von der Vorlage "Hue Color Light Controller" kopiert:

<!-- Defined scenes -->
<div ng-init="sceneMap={
              '81,56,100': 'Normal',
              '5,91,78': 'Savanna Sunset',
              '37,47,48': 'Tropical Twilight', 
              '225,99,53': 'Arctic Aurora', 
              '320,57,84': 'Spring Blossom', 
              '74,78,56': 'Relax', 
              '84,47,100': 'Read', 
              '181,21,100': 'Concentrate', 
              '187,98,100': 'Energize', 
              '82,55,100': 'Bright', 
              '82,55,30': 'Dimmed', 
              '82,55,0': 'Nightlight'
             }" />

Ändert man nun von drei Zahlen auf ein "true", wird nur noch die letzte Szene angezeigt. Funktionalität ist aber gegeben. Die Szene wird angeschaltet.

Version Web-Adapter: 3.0.12
Version HABpanel: 0.4.3

Hat jemand eine Idee was ich stattdessen ändern könnte damit alle Einträge aus der Map angezeigt werden?

Hardcodiert funktioniert es auch nicht:

<li role="menuitem"><a ng-click="sendCmd(config.folder + '.scene_konzentrieren', 'true')">{{scene_konzentrieren}}</a></li>
<li role="menuitem"><a ng-click="sendCmd(config.folder + '.scene_energie_tanken', 'true')">{{scene_energie_tanken}}</a></li>

Kompletter Code:

<style>
.icon-tile.colorize {
  filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
-webkit-filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
}
.hue-controller-table {
  width: 100%;
  border-collapse: separate; 
  border-spacing: 8px;
  border: 2px solid #76899e; 
  border-radius: 10px;  
} 
.hue-rounded-border {
  border: 2px solid #76899e; 
  border-radius: 10px;  
}
#dimmer-slider .rz-bubble {
  color: #FFAA00;
}
#dimmer-slider .rz-pointer {
  background-color: #FFAA00;
}
#dimmer-slider .rzslider .rz-bar.rz-selection {
  background-color: #FFAA00;
}
.caret#hue-controller-caret {
  position: absolute;
  left: 95%;
  top: 45%;
  color: white;  
}
.hue-select {
  padding-right: 10px;
}
.action-button#single-button {
  color: #FFAA00;
  background-color: rgb(95,95,95);
  border: 1px solid #76899e;
  overflow: hidden;
  width: 100%;
  border-radius: 5px;
  font-size: 18px;
  font-weight: normal;
}
ul.dropdown-menu#hue-controller-dropdown {
  background-color: rgb(200,200,200);
  text-align: center;
  border: 0px;
  border-radius: 5px;
  width: 100%;
} 
ul.dropdown-menu#hue-controller-dropdown li {
  color: #000;
  border-collapse: separate;
  padding: 5px;
  border-radius: inherit;  
} 
  
</style>

<!-- Defined scenes -->
<!--div ng-init="testMap={
              'true': 'scene_konzentrieren',
              'true': 'scene_energie_tanken',
              'true': 'scene_entspannen',
              'true': 'scene_frühlingsblüten',
              'true': 'scene_gedimmt',
              'true': 'scene_hell',
              'true': 'scene_lesen',
              'true': 'scene_nachtlicht',
              'true': 'scene_nordlichter', 
              'true': 'scene_tropendämmerung', 
              'true': 'scene_tv_licht'
             }" />-->

<table class="hue-controller-table">
  <tr>
    <td ng-if="config.showTitle == true" colspan="2">
      <h3 style="color: #ffaa00; line-height: .5em;">{{config.title}}</h3>
    </td>
  </tr>
  <tr>
    <td width="20%" class="hue-rounded-border">
      <table style="width: 100%;">
        <tr>
          <td style="padding: 0px; padding-top: 10px; padding-bottom: 10px;">
            <div ng-init='onoff={"name": "OnOff",
                          "item": config.light,
                          "hidelabel": true,
                          "hideonoff": true,
                          "iconset": "smarthome-set",
                          "icon": "bulb",
                          "icon_size": "36" }'>
              <widget-switch   ng-model="onoff" />
            </div>
          </td>
        </tr>
      </table>
    </td>
    <td width="80%" class="hue-rounded-border">
      <div class="slider-div" ng-init='dimmerModel={"name": "dimmer", "item": config.dimmer, 
                          "floor" : 0, "ceil": 100, "step": 1,
                          "hidelabel" : "true", "hidelimits": "true" }'>
        <widget-slider ng-model="dimmerModel" id="dimmer-slider"/>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <table width="100%">
        <tr>
          <td><div style="font-size: 15px; color: #FFAA00; font-weight: bold;"><u>Scene</u></div></td>
        </tr>
        <tr>
          <td>
            <div style="width: 100%;" class="btn-group" uib-dropdown>
              <button id="single-button" type="button" class="action-button" uib-dropdown-toggle>
               <span id="hue-select">{{testMap[itemValue(config.folder)]}}</span><span class="caret" id="hue-controller-caret"></span>
               <span id="hue-select" ng-if="testMap[itemValue(config.folder)]== NULL">Unbekannte Szene ({{itemValue(config.folder)}})</span>
              </button>
              <ul class="dropdown-menu" id="hue-controller-dropdown" uib-dropdown-menu role="menu" aria-labelledby="single-button">
                <!--<li role="menuitem"><a ng-click="sendCmd(config.folder + '.scene_konzentrieren', 'true')">{{scene_konzentrieren}}</a></li>
                <li role="menuitem"><a ng-click="sendCmd(config.folder + '.scene_energie_tanken', 'true')">{{scene_energie_tanken}}</a></li>-->
                <li role="menuitem" ng-repeat="(state, label) in testMap">
                  <a ng-click="sendCmd(config.folder + '.' + label, state)">{{label}}</a>
              </ul>
            </div>
          </td>
        </tr>
      </table>          
    </td>
  </tr>
</table>

Besten Dank vorab!