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

[carsten04]

@Merlin123 Die Aktualisierung in vis-2 bei Änderung

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

@carsten04 OK. Danke für die Info. Dann probiere ich das mal.
Aber da sollte wirklich eine Meldung kommen. Ich kann im Editor ja nicht mal manuell den Wert für "colorLightSwitchOidObject" ändern oder sehen. Sonst könnte ich den ja manuell anpassen.

Nachtrag: Mit der anderen Rolle geht es.
Kleines Aber:
Es reicht nicht, den DP neu auszuwählen. Da scheint er nicht automatisch alle anderen DPs zu aktualisieren.
Ich musste erst ne andere Lampe auswählen, erst dann hat er beim Zurückschalten den "fehlerhaften" DP aktualisiert.

zum kleinen Aber: das hat nichts mit den Widgets zu tun, sondern ist vis-2 imanent und liegt an der Implementierung der Attribute unter vis-2. Wenn Du vorher das Feld geleert hättest und dann ausgewählt, hätte vis-2 das mitbekommen, so war der oid-String identisch und es gab keine Veranlassung die internen Strukturen neu zu generieren und ein Rerendering des Widgets durchzuführen.
Generell gilt immer: wenn Du am Objektbaum irgendetwas änderst, was für ein Widget relevant ist, musst Du immer das zugehörige Objekt im vis-2 Widget löschen und dann wieder zuweisen, sonst bekommt vis-2 das nicht mit.

[Merlin123]

@carsten04 Das ist irgendwie ein fieses Verhalten ;) Zumindest in dem speziellen Fall, wo man nicht direkt sieht, ob was passiert ist oder nicht.... (Ja, nicht Deine Baustelle :) )

Woran ich jetzt scheitere:
Die Hue RGB Lampen gehen super.
Was muss ich aber bei Hue Lampen einstellen, die nur eine Helligkeitsregelung haben?
Das Verhalten soll so sein wie bei den farbigen Lampen. Kurzer Klick on/off, langer Klick öffnet ein Popup wo dann in diesem Fall halt nur die Helligkeitsregelung ist. Mit cct erscheint ja trotzdem noch die Farbtemperatur

[carsten04]

@Merlin123 Das wäre ein neuer Lichttyp white der bisher noch nicht implementiert ist. Das wäre ein neues Feature. Kannst Du gerne auf GitHub einstellen, dann werde ich das demnächst nachziehen.
Noch ein Hinweis, da viele das glaube ich noch gar nicht mitbekommen haben: Du kannst bei allen Widgets (insbesondere sinnvoll für Slider und Lichter) unter Wert schreiben eine Verzögerung bzw. Intervallwert einstellen.

Bewirkt, dass ein neuer Wert erst mit einer Verzögerung von 300ms (default) geschrieben wird.

Bewirkt, dass bei z.B. Sliderbewegungen, oder auch bei z.B. kontinuierlicher Farbauswahl im Lichterwidget während der Bewegung alle 200ms (default) der neue Wert geschrieben wird. Damit kannst Du z.B. das HUE-App verhalten nachahmen und die Farbe kontinuierlich ändern, ohne das die Farbe "nachläuft". Wenn Du z.B. ein "Nachlaufen" feststellst kannst Du den Intervallwert um z.B. 50ms schrittweise erhöhen bis das "Nachlaufen" aufhört. Welcher Wert für Dich der Richtige ist musst Du ausprobieren, da jedes Heimnetz seine eigene "Trägheit" hat.

[Merlin123]

@carsten04 Issue ist erstellt.

Und danke für den Hinweis, schau ich mir mal an, wie das für mich Sinn macht.

[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?