Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[carsten04]

Es gibt eine neue Version v2.2.1. Ich habe die Widgets insgesamt noch optimiert, an einigen Stellen verbessert und ein paar kleinere Bugs behoben. Das GitHub-Wiki ist ebenfalls aktuell. Das Sliderwidget hat noch einige weitere Einstellungsmöglichkeiten erhalten, insbesondere für Thumb, Track und Rail. Damit ist dann z.B. so etwas (neben vielen anderen Möglichkeiten ) schnell zu realisieren:

Animation:

Widgetexport:

[
  {
    "tpl": "tplSliderCollectionWidget",
    "data": {
      "bindings": [],
      "enableIconColorMask": false,
      "g_common": true,
      "iconXOffset": "-24px",
      "iconYOffset": "-12px",
      "noHeaderIcon": false,
      "header": "Rollo Wohnzimmerfenster",
      "footer": "",
      "textColor": "linear-gradient(90deg,    RGBA(78, 0, 0, 1) 0%, rgba(248,115,18,1) 35%, rgba(84,255,0,1) 100%)",
      "basePadding": 0,
      "baseElevation": 1,
      "oid": "0_userdata.0.slider_example",
      "unit": "",
      "g_slider": true,
      "values_count": 6,
      "sampleInterval": false,
      "sampleIntervalValue": 200,
      "delay": 300,
      "sliderSize": "medium",
      "sliderOrientation": "horizontal",
      "sliderGap": "",
      "valueLabelDisplay": "off",
      "labelPosition": "-5px",
      "sliderColor": "",
      "sliderPadding": 7.7,
      "thumbWidth": 90,
      "thumbHeight": 90,
      "thumbColor": "rgba(179, 203, 36, 0.22)",
      "thumbBorderWidth": 10,
      "thumbBorderColor": "rgba(179, 203, 36, 0.55)",
      "trackLength": 48,
      "trackBackgroundColor": "linear-gradient(90deg, rgba(78,0,0,0.59) 0%, rgba(248,115,18,0.6) 35%, RGBA(84, 255, 0, 0.65) 100%)",
      "trackBorderWidth": 0,
      "trackBorderColor": "",
      "railLength": 70,
      "railBackgroundColor": "linear-gradient(90deg, rgba(78,0,0,0.59) 0%, rgba(248,115,18,0.6) 35%, RGBA(84, 255, 0, 0.65) 100%)",
      "railBorderWidth": 0,
      "railBorderColor": "",
      "markWidth": 0,
      "markHeight": 0,
      "markBackgroundColor": "",
      "minValue": 0,
      "maxValue": 100,
      "step": 10,
      "onlyStates": true,
      "marks": true,
      "markPosition": "-12px",
      "markStep": 10,
      "markerTextColor": "",
      "iconSizeStart": "48px",
      "iconSizeEnd": "24px",
      "enableIconColorMaskActive": false,
      "g_active": true,
      "iconXOffsetActive": "0px",
      "iconYOffsetActive": "5px",
      "headerActive": "",
      "aliasActive": "",
      "footerActive": "",
      "textColorActive": "",
      "backgroundActive": "",
      "frameBackgroundActive": "",
      "oidObject": {
        "_id": "0_userdata.0.slider_example",
        "name": "slider_example",
        "type": "number",
        "icon": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCI+DQogICAgPGcgZmlsbD0iY3VycmVudENvbG9yIj4NCiAgICAgICAgPHBhdGggZD0iTTE5LDV2MTRINVY1SDE5IE0xOSwzSDVDMy45LDMsMywzLjksMyw1djE0YzAsMS4xLDAuOSwyLDIsMmgxNGMxLjEsMCwyLTAuOSwyLTJWNUMyMSwzLjksMjAuMSwzLDE5LDNMMTksM3oiLz4NCiAgICAgICAgPHBhdGggZD0iTTE0LDE3SDd2LTJoN1YxN3ogTTE3LDEzSDd2LTJoMTBWMTN6IE0xNyw5SDdWN2gxMFY5eiIvPg0KICAgIDwvZz4NCjwvc3ZnPg==",
        "write": true,
        "onlyDisplay": false,
        "unit": "",
        "minValue": 0,
        "maxValue": 100,
        "commonStates": {
          "0": "0",
          "20": "20",
          "40": "40",
          "60": "60",
          "80": "80",
          "100": "100"
        }
      },
      "icon": "",
      "write": true,
      "onlyDisplay": false,
      "value1": 0,
      "alias1": "0",
      "value2": 20,
      "alias2": "20",
      "value3": 40,
      "alias3": "40",
      "value4": 60,
      "alias4": "60",
      "value5": 80,
      "alias5": "80",
      "value6": 100,
      "alias6": "100",
      "iconMin": "",
      "iconSmallMin": "",
      "icon1": "../vis-icontwo/Doors_Windows/Shutter/blinds2_0.png",
      "iconColor1": "rgba(255,5,10,1)",
      "enableIconColorMask1": true,
      "icon2": "../vis-icontwo/Doors_Windows/Shutter/blinds2_20.png",
      "icon3": "../vis-icontwo/Doors_Windows/Shutter/blinds2_40.png",
      "icon4": "../vis-icontwo/Doors_Windows/Shutter/blinds2_60.png",
      "icon5": "../vis-icontwo/Doors_Windows/Shutter/blinds2_80.png",
      "icon6": "../vis-icontwo/Doors_Windows/Shutter/blinds2_100.png",
      "iconColor": "",
      "markerTextSize": 0,
      "markerIconSize": 160,
      "markerIconColor": "",
      "iconColor2": "rgba(175,3,7,1)",
      "enableIconColorMask2": true,
      "enableIconColorMask3": true,
      "iconColor3": "rgba(168,71,3,1)",
      "enableIconColorMask4": true,
      "iconColor4": "rgba(30,127,9,1)",
      "enableIconColorMask5": true,
      "iconColor5": "rgba(47,191,15,1)",
      "enableIconColorMask6": true,
      "iconColor6": "rgba(48,230,8,1)",
      "outlined": false,
      "outlinedFrame": false,
      "iconSize": 160,
      "noHeader": false,
      "noFooter": true,
      "noCard": true,
      "iconColorActive": "",
      "iconSizeActive": 230,
      "valueSizeActive": "",
      "g_css_font_text": true,
      "g_css_border": true
    },
    "style": {
      "bindings": [],
      "left": "25px",
      "top": "46px",
      "width": "724.967px",
      "height": "187.939px",
      "position": "",
      "text-align": "center",
      "font-family": "\"Comic Sans MS\", cursive",
      "font-variant": "small-caps",
      "font-size": "x-large",
      "letter-spacing": "1px",
      "word-spacing": "4px",
      "border-width": "2px",
      "border-style": "solid",
      "border-color": "rgba(230,11,15,0.65)",
      "line-height": "2"
    },
    "widgetSet": "vis-2-widgets-collection",
    "_id": "i000001"
  }
]

Ich habe noch an vielen Stellen einen Colorpicker, der auch sehr gut für Gradienten genutzt werden kann, eingebaut.

Wenn ihr Bugs findet bitte hier posten.

[topsurfer]

Hallo,
kann man auch einen Schieberegler erstellen, der neben der direkten "Schiebefunktion" noch eine Plus / Minus Taste hat zum "feinen" einstellen?
Oder geht so was nur über extra zu erstellende Buttons ?

[carsten04]

Es gibt eine neue Version v2.3.0. In der Version habe ich noch viel "unter der Haube" optimiert und einige kleinere Bugs behoben. Das GitHub-Wiki wurde ebenfalls in Teilen überarbeitet. Die v2.3.0 sollte dann auch in zwei Wochen ins Stable-Repo gehen. Von daher: wer Lust und Zeit hat bitte testen und hier ggf. Fehler posten und Feedback geben, auch wenn noch etwas fehlt.

[sigi234]

@carsten04
Der Github Link ist nicht verlinkt.

[carsten04]

@sigi234 Was meinst Du? Wo nicht verlinkt?

[Negalein]

@sigi234 sagte in vis-2-widgets-collection:

Der Github Link ist nicht verlinkt.

[sigi234]

@carsten04 sagte in vis-2-widgets-collection:

auch wenn noch etwas fehlt.

Na da fallen mir einige ein:

Table Widget
Plump Widget
Windows and Shutter Widgets
Door Widget
Thermostat Widget
Cam Widget

[carsten04]

@sigi234 Ich meinte auch eher bei den vorhandenen Widgets :-). Neue Widgets kommen dann immer mal wieder dazu . . .

[Mirtl]

Ich bin gerade auf diese Widget-Sammlung gestoßen. Sieht generell super aus.
Ein Frage hätte ich allerdings. Ich bin auf der Suche nach einem Dropdown-Widget, deren Listenwerte nicht starr am Widget hinterlegt sein müssen, sondern dynamisch aus seiner JSON gelesen werden können.
Hintergrund ist der, dass ich eine Vielzahl dieser dropdown benötige, welche aber eigentlich die gleichen Listenpunkte benötigt. Wenn hier einer dazukommt oder wegfällt, so müssen derzeit alle Widgets händisch angepasst werden. Das macht auf Dauer keinen Spaß.

Ist diese Funktion bei Dir implementiert? Hab jetzt so weiter nix gefunden. Danke Dir schon mal.

[carsten04]

@Mirtl Das können die Widgets noch nicht, da es ein ganz anderer Ansatz wäre. Aber es gibt ja noch viele andere Widgets für vis-2, z.B. die inventwo. Da kenne ich mich aber zu wenig aus, um dir jetzt konkret sagen zu können, ob das geht oder nicht.

[Mirtl]

@carsten04 Danke für die Antwort. Die gängigen Widgets habe ich alle durch. Da ist kein einziges dabei, das meine Wünsche unterstützen würde (oder ich bin zu doof, es zu kapieren).
Dann bleibt mir halt nur der Weg des händischen anpassens.

[sigi234]

@carsten04

Hallo, kannst du beim Auswahlwidget nur lesen einbauen?

{
  "type": "state",
  "common": {
    "name": "552",
    "type": "number",
    "role": "level",
    "write": false,
    "read": true,
    "def": 0,
    "states": {
      "0": "Inactive",
      "1": "Ready",
      "2": "DelayedStart",
      "3": "Run",
      "4": "Pause",
      "5": "ActionRequired",
      "6": "Finished",
      "7": "Error",
      "8": "Aborting"
    }
  },
  "native": {},
  "from": "system.adapter.cloudless-homeconnect.0",
  "user": "system.user.admin",
  "ts": 1740755632019,
  "_id": "cloudless-homeconnect.0.xxxxxxxxxxx.Status.OperationState",
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  }
}

Ist ein GS und ich möchte den Status angezeigt bekommen.

[carsten04]

@sigi234 Wenn es Dir nur um den Status geht, dann nehme doch das State Widget mit "Nur Anzeige" aktiviert, oder habe ich Dich falsch verstanden?

[sigi234]

@carsten04 sagte in vis-2-widgets-collection:

@sigi234 Wenn es Dir nur um den Status geht, dann nehme doch das State Widget mit "Nur Anzeige" aktiviert, oder habe ich Dich falsch verstanden?

Diese Option habe ich bei mir nicht. Ich habe mal nur Zustände genommen.

[carsten04]

@sigi234 "Nur Anzeige" wird dann dargestellt, wenn common.write=true. Wenn write in common fehlt, oder auf false gesetzt ist, fehlt die Checkbox. Ich werde bei einem der nächsten Patches es so machen, dass die Checkbox immer dargestellt wird. Das Problem mit read und write in common ist, dass es leider nicht durchgänig bei allen States durch die zugehörigen Adapter richtig gesetzt wird (manchmal fehlen die Einträge komplett) und ioBroker macht hier auch keine Vorgaben. Man kann sich auf die Einträge in common daher leider nicht verlassen, ansonsten wären read und write natürlich für das Verhalten eines Widgets perfekt nutzbar.

[Merlin123]

Irgendwie hat sich das Verhalten des Licht Widgets geändert....
Ich schaffe es bei den Hue Leuchten nicht mehr, dass bei
hue.0.xxx.on = false Bild 1
und bei
hue.0.xxx.on = true Bild 2
angezeigt wird.
Bei dem wird immer das Bild der eingeschaltenen Lampe angezeigt. Hat vor kurzem (weiß aber nicht bei welcher Version) noch geklappt. Ist mir nur erst gestern aufgefallen

[
  {
    "tpl": "tplLight2CollectionWidget",
    "data": {
      "bindings": [],
      "iconXOffset": "0px",
      "g_common": true,
      "iconYOffset": "0px",
      "noHeaderIcon": false,
      "header": "",
      "footer": "",
      "basePadding": 0,
      "baseElevation": 0,
      "background": "",
      "frameBackground": "",
      "sampleInterval": false,
      "g_light": true,
      "sampleIntervalValue": 200,
      "delay": 300,
      "colorLightButton": true,
      "colorLightDelayLongPress": 500,
      "colorLightModalHeight": 300,
      "colorLightSliderWidth": 1,
      "colorLightBorderWidth": 3,
      "colorLightPadding": 1,
      "colorLightUIComponent": "wheel",
      "colorWheelLightness": false,
      "colorLightType": "h/s/v/cct",
      "colorLightCtMin": 2000,
      "colorLightCtMax": 6500,
      "colorLightSwitchOid": "hue.0.Esstisch.on",
      "colorLightBrightnessOid": "hue.0.Esstisch.level",
      "colorLightHueOid": "hue.0.Esstisch.hue",
      "colorLightSaturationOid": "hue.0.Esstisch.sat",
      "colorLightTemperatureOid": "hue.0.Esstisch.ct",
      "colorLightRedOid": "hue.0.Esstisch.r",
      "colorLightGreenOid": "hue.0.Esstisch.g",
      "colorLightBlueOid": "hue.0.Esstisch.b",
      "colorLightSwitchOidObject": {
        "_id": "hue.0.Esstisch.on",
        "name": "Esstisch.on",
        "type": "boolean",
        "icon": null,
        "write": true,
        "onlyDisplay": false,
        "unit": "",
        "minValue": 0,
        "maxValue": 100
      },
      "icon": "_PRJ_NAME/bulb_on.png",
      "write": true,
      "onlyDisplay": false,
      "minValue": 0,
      "maxValue": 100,
      "values_count": 2,
      "value1": "false",
      "alias1": "FALSE",
      "value2": "true",
      "alias2": "TRUE",
      "iconSize": 0,
      "iconSmall1": "",
      "iconColor1": "red",
      "iconSize1": 100,
      "iconSmall2": "",
      "iconColor2": "green",
      "iconSize2": 100,
      "colorLightBrightnessOidObject": {
        "_id": "hue.0.Esstisch.level",
        "name": "Esstisch.level",
        "type": "number",
        "icon": null,
        "write": true,
        "onlyDisplay": false,
        "unit": "",
        "minValue": 0,
        "maxValue": 100
      },
      "colorLightHueOidObject": {
        "_id": "hue.0.Esstisch.hue",
        "name": "Esstisch.hue",
        "type": "number",
        "icon": null,
        "write": true,
        "onlyDisplay": false,
        "unit": "°",
        "minValue": 0,
        "maxValue": 360
      },
      "colorLightSaturationOidObject": {
        "_id": "hue.0.Esstisch.sat",
        "name": "Esstisch.sat",
        "type": "number",
        "icon": null,
        "write": true,
        "onlyDisplay": false,
        "unit": "",
        "minValue": 0,
        "maxValue": 254
      },
      "colorLightTemperatureOidObject": {
        "_id": "hue.0.Esstisch.ct",
        "name": "Esstisch.ct",
        "type": "number",
        "icon": null,
        "write": true,
        "onlyDisplay": false,
        "unit": "°K",
        "minValue": 2000,
        "maxValue": 6536
      },
      "colorLightRedOidObject": {
        "_id": "hue.0.Esstisch.r",
        "name": "Esstisch.r",
        "type": "number",
        "icon": null,
        "write": true,
        "onlyDisplay": false,
        "unit": "",
        "minValue": 0,
        "maxValue": 255
      },
      "colorLightGreenOidObject": {
        "_id": "hue.0.Esstisch.g",
        "name": "Esstisch.g",
        "type": "number",
        "icon": null,
        "write": true,
        "onlyDisplay": false,
        "unit": "",
        "minValue": 0,
        "maxValue": 255
      },
      "colorLightBlueOidObject": {
        "_id": "hue.0.Esstisch.b",
        "name": "Esstisch.b",
        "type": "number",
        "icon": null,
        "write": true,
        "onlyDisplay": false,
        "unit": "",
        "minValue": 0,
        "maxValue": 255
      },
      "noHeader": true,
      "noFooter": true,
      "iconSmall": "",
      "background1": "rgba(0,0,0,0)",
      "backgroundColor1": "rgba(0,0,0,0)",
      "frameBackground1": "rgba(0,0,0,0)",
      "frameBackgroundColor1": "rgba(0,0,0,0)",
      "background2": "rgba(0,0,0,0)",
      "backgroundColor2": "rgba(0,0,0,0)",
      "frameBackground2": "rgba(0,0,0,0)",
      "frameBackgroundColor2": "rgba(0,0,0,0)",
      "noCard": true,
      "backgroundColor": "rgba(0,0,0,0)",
      "frameBackgroundColor": "rgba(0,0,0,0)",
      "colorLightBorderColor": "rgba(0,0,0,0)",
      "icon1": "_PRJ_NAME/bulb_off.png",
      "icon2": "_PRJ_NAME/bulb_on.png",
      "name": "Licht Estisch",
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true
    },
    "style": {
      "bindings": [
        "z-index"
      ],
      "left": "325px",
      "top": 44,
      "width": "100px",
      "height": "100px",
      "position": "",
      "z-index": "3"
    },
    "widgetSet": "vis-2-widgets-collection",
    "_id": "i000001"
  }
]