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

[Thomas Braun]

@ab-bro sagte in Material Design Widgets: IconList Widget:

Ich kann aber wahrscheinlich kurzfristig auf "Latest" umstellen, den Adapter installieren und dann wieder zu "Stable" zurückkehren, oder?

Das wäre meine Empfehlung, wenn es denn unbedingt der Adapter sein soll.

[ab-bro]

@thomas-braun
Prima! Vielen Dank für eure Erklärungen!
Die Geschwindigkeit, mit dem geholfen wird, ist in diesem Forum noch besser als in allen anderen Communities, die ich kenne. Klasse!

[micklafisch]

Hallo zusammen,
ich habe mich mit dem Icon List Widget etwas auseinandergesetzt um meine vielen State-Buttons für die Rollladensteuerung sowie für die Heizungssteuerung etwas zu verschlanken und pro Gerät nur noch ein Icon List Widget zu haben.

Bei einem Reload bzw. öffnen der Seite werden die Icon List Widgets erst mit einer deutlichen Verzögerung angezeigt. Ein GIF davon ist im Spoiler. Das Verhalten tritt im Browser sowie in der iPhone App auf. Hat das Widget noch wer in dieser Art eingebunden und kann das auch bestätigen? Sonstige Performanceprobleme gibt es in meiner VIS nicht, es ist lediglich nur das Icon List Widget was eine Verzögerung aufweist.

Spoiler

[micklafisch]

ich habe jetzt auch testweise einmal die aktuellste Version 0.5.9 installiert, dort ist das Verhalten identisch zur meiner bisherigen 0.5.5 Version.

Kann jemand die Verzögerung bei den IconList Widgets bestätigen?

[micklafisch]

Guten Morgen,
ich muss das Thema Verzögerung noch einmal ansprechen. Aktuell habe ich nur 3 Ideen:

1. ihr habt keine Verzögerung wie ich - dann muss ich suchen warum
2. ihr findet euch damit ab weil ist nicht so schlimm - dann müsste ich mich anpassen und damit abfinden
3. es nutzt von euch keiner das IconList Widget - das wäre sehr unglaubwürdig weil es ein super Widget ist

Vielleicht kann @scrounger hierzu etwas sagen. Im Grunde gefällt mir das sehr gut aber beim reload der VIS ist das schnelle Rollladensteuern ausgehebelt, da ich die 3-4 Sekunden erst warten muss bis die Buttons sichtbar werden.

[gender]

Ich hatte auch das Problem, dass Teile der IconList erst nach einiger Zeit geladen wurden.

Ich hatte das hier beschrieben https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/145 und war dann irgendwann auf den Fehler gekommen.

Vielleicht hilft das ja weiter.

[Scrounger]

@gender
Sieht so aus als ob er einen Datenpunkt nicht findet.
Schau mal in die console (F12) da steht das sicher und welcher Datenpunkt es ist.

[micklafisch]

@scrounger
Ich hab die Konsole mal angesehen, er bekommt zu jedem IconList einen Eintrag " [waitForOid] stop waiting for value of oid '' after 500 retries"

Hier ein Auszug aus den ganzen Meldungen

Spoiler

[IconList w00296] [waitForOid] stop waiting for value of oid '' after 500 retries
(anonym) @ instrument.ts:129
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
setTimeout (asynchron)
(anonym) @ trycatch.ts:119
waitForOid @ widgets.min.js:1
(anonym) @ widgets.min.js:1
sentryWrapped @ helpers.ts:87
instrument.ts:129 

Ich vermute das erzeugt die Wartezeit bis er für jedes Element das durch hat. Ich hab das Widget aus dem Log oben hier exportiert, die Werte für die Liste habe ich über den Editor eingegeben.

Spoiler

[{"tpl":"tplVis-materialdesign-Icon-List","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","wrapItems":false,"vibrateOnMobilDevices":"50","listLayout":"card","containerBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.icon_list.background","itemBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.icon_list.background_items","itemLayout":"vertical","buttonLayout":"full","buttonColorPress":"#mdwTheme:vis-materialdesign.0.colors.icon_list.button_hover","labelFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.icon_list.text","labelFontFamily":"RobotoCondensed-Bold","labelFontColor":"#mdwTheme:vis-materialdesign.0.colors.icon_list.text","subLabelFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.icon_list.subText","subLabelFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.icon_list.subText","subLabelFontColor":"#mdwTheme:vis-materialdesign.0.colors.icon_list.subText","valueFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.icon_list.value","valueFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.icon_list.value","valueFontColor":"#mdwTheme:vis-materialdesign.0.colors.icon_list.value_text","titleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.title","showScrollbar":"true","titleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.title","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background","colorTitleSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_title","colorTextSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_body","colorTitle":"#mdwTheme:vis-materialdesign.0.colors.card.title","autoLockAfter":"10","lockIconTop":"5","lockIconLeft":"5","lockIconColor":"#mdwTheme:vis-materialdesign.0.colors.icon_list.lock_icon","lockFilterGrayscale":"30","lockApplyOnlyOnImage":"true","listItemDataMethod":"inputPerEditor","countListItems":"1","listType0":"buttonState","showValueLabel0":false,"buttonBgColor0":"#mdwTheme:vis-materialdesign.0.colors.icon_list.button","listImageColor0":"#mdwTheme:vis-materialdesign.0.colors.icon_list.icon","listType1":"buttonState","showValueLabel1":false,"buttonBgColor1":"#mdwTheme:vis-materialdesign.0.colors.icon_list.button","listImageColor1":"#mdwTheme:vis-materialdesign.0.colors.icon_list.icon","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"maxItemsperRow":"4","oid0":"0_userdata.0.vis.alexa.Rollo_KiZi","listTypeButtonStateValue0":"false","oid1":"0_userdata.0.vis.alexa.Rollo_KiZi","listTypeButtonStateValue1":"true","label1":"zu","label0":"auf","listType2":"buttonState","showValueLabel2":false,"buttonBgColor2":"#mdwTheme:vis-materialdesign.0.colors.icon_list.button","listImageColor2":"#mdwTheme:vis-materialdesign.0.colors.icon_list.icon","oid2":"hm-rpc.1.CUX4000001.8.LEVEL","listTypeButtonStateValue2":"0","label2":"zu","itemGaps":"2","buttonHeight":"25","subLabel0":"","buttonBgColorActive0":"","buttonBgColorActive1":"","buttonBgColorActive2":"#abc3d8","iconHeight":"","verticalIconContainerHeight":"4","cardUse":false,"listImage0":"","listImageActiveColor0":"","statusBarColor0":"","statusBarText0":"","json_string_oid":"","typeButtonToggleValueTrue2":"","typeButtonToggleValueFalse2":"","listTypeButtonNav2":"","listTypeButtonLink2":"","lockEnabled2":false,"readOnly2":false,"listType3":"buttonState","showValueLabel3":false,"buttonBgColor3":"#mdwTheme:vis-materialdesign.0.colors.icon_list.button","listImageColor3":"#mdwTheme:vis-materialdesign.0.colors.icon_list.icon","oid3":"hm-rpc.1.CUX4000001.8.STOP","buttonBgColorActive3":"#abc3d8","label3":"Stopp"},"style":{"left":"144px","top":"194px","width":"142px","height":"35px","z-index":"15"},"widgetSet":"materialdesign"}]

Kannst du da einen Fehler sehen oder soll ich noch mehr bereitstellen?

[Scrounger]

@micklafisch
Ist leider ein bug, habs behoben gibts dann in der nächsten Version - das dauert leider noch, hab grad nicht soviel Zeit.

Kurzfristiger fix wäre einfach bei JSON-String: Objekt ID einen existierenden Datenpunkt rein schreiben, in deinem Fall z.B.:

[micklafisch]

@scrounger
Merci!

Der Workaround funktioniert, die Widgets sind nun gewohnt Pfeilschnell geladen und sichtbar.

[Supermicha]

@Scrounger
kleine Anmerkung:

Ich habe grade Stunden damit verbracht, eine Icon-List zum laufen zu bringen...
Die wollte sich einfach nicht schalten lassen.

Erst als ich in den "manuellen" Einstellungen 'Button Toggle Wert für an' und 'Button Toggle Wert für aus' gesehen habe, und die entsprechenden Werte in meiner JSON-Liste hinzugefügt habe, lief es....
Das Verhalten hat mich überrascht, denn in dem einfachen List-Widget ist das nicht notwenig.

Vielleicht wäre es eine Überlegung wert, wenn du mal die Doku anfasst, bei den JSON Properties zuzuschreiben welcher Wert zwingend notwendig ist und welcher "freiwillig"?

[Mr. AK]

Hallo zusammen

Gerne möchte ich in meiner View für das Smartphone eine Icon-List (o.ä.) erstellen, welche sich horizontal und nicht vertikal scrollen lässt. Ich habe dies mit der Icon-List und mit x-overflow: scroll versucht, leider ohne Erfolg.

Hat jemand eine Idee, wie man dies umsetzen könnte?

Schonmal Danke für eure Hilfe und ein schönes Weekend

[Supermicha]

ich weiß nicht, ob die Frage hier schon kam. Habe die 123 Post vormir nur überflogen...

Ist es möglich, das die Buttons in der Letzten Zeile nicht auf die volle Breite es Widgets ausgedehnt werden

sondern linksbündig in der gleichen Breite wie die Widgets in den "vollen" Zeilen angezeigt werden?

[sigi234]

@supermicha

3 Dummy Button einfügen?

[Supermicha]

das wäre wohl eine Möglichkeit, aber maximal ein Workaround...

ich probiere grade mit eigenem CSS, aber bin da noch nicht so wiklich weitergekommen, da ich von SCC doch nicht so wirklich Ahnung habe...

mein Ansatz bisher

max-width: calc(100% / var(--materialdesign-icon-list-items-per-row));

das verschiebt mir aber auch alle anderen Zeilen dadrüber...

wenn ich eine feste Breite angebe. z.B

max-width: 150px

dann klappt es, müsste ich dann nur für jede Liste anpassen... auch nicht so toll

[dos1973]

@bobbruni sagte in Material Design Widgets: IconList Widget:

@Scrounger said in Material Design Widgets: IconList Widget:

Alternativ kann man sich das mit weniger Funktion auch per Editor zusammen klicken.

Wenn es für jedes Listenelement die Option "Bedingung für Sichtbarkeit" geben würde, könnte man es sich mit dem Editor zusammen klicken... Oder gibt es eine andere Möglichkeit?

@Scrounger
Hi, ist diese Funktion implementiert? ich hab zwar das gefunden
https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/118

aber ich stehe irgendwie auf dem Schlauch mit den Settings. Eine Doku dazu konnte ich leider nicht finden. Könntest du mal ein Screenshot der Setting machen. Ich bekomme es einfach nicht hin.

bei mir toggle er einfach - aber verschwindet nicht.
und wie kann ich denn die Symbolgröße verändern / größer machen

[dos1973]

@dos1973 sagte in Material Design Widgets: IconList Widget:

und wie kann ich denn die Symbolgröße verändern / größer machen

ok, da hatte ich echt Tomaten auf den Augen, hab es in den Settings gefunden.

Aber die Liste bekomme ich nicht erstellt, dass er das Icon ausblendet...
oder, muss ich für jedes Icon (Lampe) ein eigenes Icon List Widget erstellen und mittels der Sichtbarkeit steuern??

Helft mir doch mal au der Klemme...Thx

[dos1973]

habs gefunden, :eyeglasses: musste erst ein Update auf die Beta machen...

[dos1973]

Hi zusammen,

ich habe nochmals eine Frage zum icon List widget. ich möchte das mit der Funktion "zeige nur eingeschaltete Lichter" nachbauen.

Soweit so gut, das läuft, aber ich finde kein Wert um die max. Breite festzulegen.
ich find es einfach nicht, falls es das gibt - wäre wirklich dankbar für einen Hinweis.

so schaut's aus:

aber wenn ich die Lampen dann ausschalte, werden die Buttons immer Breiter

ich würde mir ein feste Breite wünschen, egal wieviele Elemente aktiv sind.

geht das? hat jemand eine Tipp für mich?

Thx

[dos1973]

@dos1973
niemand eine Idee

@Scrounger : könntest du mir helfen?