Test Adapter Material Design Widgets v0.3.x

[Oli]

@Scrounger

funktioniert wieder, danke

[Scrounger]

@exv2 sagte in Test Adapter Material Design Widgets v0.3.x:

Beim Tooltip Layout kann ja die min und max Text Dezimalstellen eingestellt werden.
Es funktioniert auch solange das Kommer als Dezimaltrenner verwendet wird.

Da ich unter OID's den Datensatz mit 0.000016666666666667 multipliziere ist natürlich der Dezimltrennen ein Punkt. Damit stehen im Tolltip dann ewig lange Zahlen.

Gibt es eine Möglichkeit den Punkt als Dezimaltrennen zu setzen?

Das ist ein Bug. Bitte schreib auf github ein Issue für en Fehler, dann schau ich mir das mal an.

[sainthein]

Hier mal das Logfile.

VIS Chart-3.log

Edit: Verschoben, da Frage Fehler betrifft und nicht Widget Einstellung

[Scrounger]

@sainthein
Du hast beim Chart nicht den debug modus aktiviert. Somit sehe ich in deinem log auch nicht was das Problem sein könnte.

[sainthein]

2. Versuch

VIS Chart-4.log

Edit: Verschoben, da Frage Fehler betrifft und nicht Widget Einstellung

[Scrounger]

@sainthein

index.html#Chart_test:1 Refused to load the font 'data:font/otf;base64,T1RUTwAMAIAAAwBAQ0ZGIAJ+0GsAAPQoAACL3kRTSUdVV1WLAAIZmAAAAChHUE9TdvgO2gABgAgAAH0yR1NVQpUrlQQAAf08AAATmE9TLzJq5jOJAAABMAAAAGBjbWFw1pF+NgAA7cAAAAZIaGVhZA+HuhQAAADMAAAANmhoZWEHdwULAAABBAAAACRobXR4hO5drgACENQAAAjCbWF4cAI5UAAAAAEoAAAABm5hbWWHA9ilAAABkAAA7C5wb3N0/8gAQgAA9AgAAAAgAAEAAAABAEF/DeK5Xw889QADA+gAAAAA1naXkAAAAADWdt3h/xX/HwRuBGMAAAADAAIAAAAAAAAAAQAAAyn/QQDIBIz/Ff8VBG4AAQAAAAAAAAAAAAAAAAAAAigAAFAAAjkAAAADAhkB9AAFAAQCigJYAAAASwKKAlgAAAFeAEIBOQAAAgsGAwMCAgYCA6AAAC9AAARaAAAAAAAAAABDT01NAA...wADwFIABQBXQAbASoAEgFUABgBXQAZAVoAJwFaACcBXQAWAo4AFgFiABYDBwAuApMAUgInAFIC6QBSAo8AUgJ8ACYCSAAaAnkAJQIcAEgBDwBJAmAASAGNAEgB7gAfAXEAFgDyAC0A8gAtAbUALQG1AC0A8gAtAbUALQEhAEEBKQBFAYgAiwJvACYCbwAmAm8AJgJvACYCbwAmAm8AJgJvACYCbwAmAm8AJgJvACYCbwAmAWIAFgFiABYBYgAWAoUASAFiABYBkACqA0sAMAGQAIkBLAAAAlgALAJYAGICWAAjAlgAIwJYACACWAArAlgAKwJYADoCWAArAlgAJgEsAC0BLAAQASwAPAEsABwBLAAWASwAHAMgACYD6AAkASwARgEsAB8BLABGASwADQJYAEYARQBDAEMAUABWAFwAZQBfAGoATgBTABkAMQAfACYADgBlAAAAAAABAAEAAQAAAAEAAAAUAAAAFAAAAAAAAAAM0000000100000000' because it violates the following Content Security Policy directive: "default-src 'self' * 'unsafe-eval' 'unsafe-inline'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Der meckert wegen ner Schriftart rum.
Am besten mal das Widget löschen und nochmal einfügen und nur datensätze einstellen. Schauen ob es zur Runtime geht.

Debug Modus war leider nicht an. Hier aktivierst du den:

[sainthein]

Ja das mit der Schriftart habe ich auch vermutet, habe alle ersetzt, aber keine Änderung.

Der debug modus war definitv beide male aktiv. Seltsam das das nicht hinhaut.

Habe jetzt eine neues Projekt erstellt, hier läuft alles bestens.

[AxelF1977]

Hi zusammen,

ich glaube ich stelle ich ein wenig blöd an. Ich bin gerade dabei auf die Material Design Widgets umzusteigen.

Bei der Navigation in der Top App Bar bekomme ich keine Links hin. Beschriftung etc. ist klar. In der Beispiel VIS bezieht sich das Widget auf eine Datei 0_userdata.0.materialdesignwidgets.topappbar

Wurde diese manuell angelegt? Wenn ja, wie? Die ganze Ordnungsstruktur gibt es bei mir nicht, und ja, der Adapter ist installiert

[Glasfaser]

@AxelF1977

Alles gut ... hast bis jetzt alles richtig gemacht !

Für die Top App Bar brauchst du einen selbst erstellten Datenpunkt vom Typ Number , gemeinsam für beide Widgets ( view in widget8/Top App Bar) .
Du kannst es du so strukturiert wie im Screenshot anlegen , aber kein muss oder in javascript.0 .

Die anderen Datenpunkte im Screenshot sind teilweise von Scripts die Scrounger hier veröffenlicht für seine vielen Widgets.

hier der Thread dazu : top-app-bar-widget

hier auch zum schauen wie es geht : Link Text

[AxelF1977]

@Glasfaser sagte in Test Adapter Material Design Widgets v0.3.x:

@AxelF1977

Alles gut ... hast bis jetzt alles richtig gemacht !

Für die Top App Bar brauchst du einen selbst erstellten Datenpunkt vom Typ Number , gemeinsam für beide Widgets ( view in widget8/Top App Bar) .
Du kannst es du so strukturiert wie im Screenshot anlegen , aber kein muss oder in javascript.0 .

Die anderen Datenpunkte im Screenshot sind teilweise von Scripts die Scrounger hier veröffenlicht für seine vielen Widgets.

hier der Thread dazu : top-app-bar-widget

hier auch zum schauen wie es geht : Link Text

Großartig, vielen Dank! Das hat geholfen.

Allerdings habe ich mit dem View in Widget 8. Stellt der views anders dar?

So sieht es mit View in Widget 8 aus

so soll es aussehen

Richtig angezeigt wird es mit widget in view, es ist die selbe View die jeweils angezeigt wird, sehr merkwürdig

[AxelF1977]

Nach einigem Tüfteln habe ich rausgefunden was los ist. Da ich hier noch mit Float arbeite, wegen den verschiedenen Höhen habe ich es bisher weder mit Grid noch Masonry Layouts hinbekommen, wird das in View in Widget 8 nicht richtig dargestellt. Wenn ich aber meine cont Datei mit Floats in View in Widget lade, und das dann wiederum und View in Widget 8 einbinde, geht es.

Also kann View in Widget 8 keine Float Layouts darstellen? Wo ist der Unterschied zu View in Widget, außer dass ich mehrere Quellen einbinden kann?

[jobe451]

@Scrounger
Vielen dank für den Hinweis. Das war der Trick, hätte ich eigentlich selber drauf kommen müssen. Ich hatte noch nie mit rohen CSS-Variablen gearbeitet.

Ich hätte da noch eine Frage: Wie kann sich eine HTML-Card dynamisch an die Höhe eines dynamischen Inhalts anpassen?

Ich finde dazu keine Lösung. Als Inhalt kann ich nur ein fixes HTML definieren. Evtl kann darin zwar per "Object Binding" Datenpunkte referenzieren (nicht ausprobiert). Ich suche aber viel eher aber einen Weg, wie ich eine beliebige "view" als Inhalt konfigurieren könnte. So dass der Inhalt zum Beispiel eine dynamische Icon-List ist oder wie in meinem Screenshot unten eine ganze Hirarchie von verschachtelten Details-Views.

Aktuell positioniere ich einfach absolut Elemente über der Card.

Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

[Scrounger]

@jobe451
Kannst du mit Grid View Widget oder Masonry Widget realisieren.
Schau Dir am besten dazu das Online Beispiel und die Doku an.
https://github.com/Scrounger/ioBroker.vis-materialdesign

Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

[jobe451]

@jobe451 said in Material Design Widgets: Top App Bar Widget:

@Scrounger

Ich hab nun den ganzen Abend rumprobiert, Dokus angeschaut und die Beispiel-App und kriegs nicht hin. Bei allen verfügbaren Beispielen zu Grid und Masonry wurden die Höhe der einzelnen views explizit mit einem Pixelwert definiert. Wenn sich dann bei Masonry die "Höhe der view[0]" auf leer setze, dann findet sich im entsprechenden DIV dennoch ein Default Wert von 100px im Style des entsprechenden divs.

Ich suche hingegen eine Möglichkeit, dass die Höhe sich dynamisch an den Inhalt der View anpasst. Wenn ich nun über die Browser-F12-Dev-Tools manuell auf dem entsprechenden View-Div-Style (.materialdesign-masonry-item) dann style="height: 100px;" entferne, dann krieg ich genau das Verhalten, was ich Suche.

Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

[jobe451]

Ich hab mich selber an einem Fix des Problemes versucht und einen Fork erstellt:
https://github.com/jobe451/ioBroker.vis-materialdesign/blob/master/widgets/materialdesign/js/widgets/materialdesign.views.js

Statt einfach einen 100px default zu setzen

style="height: ${myMdwHelper.getNumberFromData(data.attr('viewsHeight' + i), 100)}px; ${viewWidth}; display: none;">

Mach ich darin vorgängig:

                let viewHeightValue = myMdwHelper.getNumberFromData(data.attr('viewsHeight' + i), -1);
                let viewHeight = "";
                if (viewHeightValue !== -1) {
                    viewHeight = "height: " + viewHeightValue.toString() + "px; ";
                }

Obs funktioniert, ich glaubs. Ich kriegs aber nicht getestet. Ich installier zwar den Adapter von meinem Fork, aber irgendwo bleibt das alte Script im cache. Alle iobroker uploads und restarts bringen nichts.

Anyway, damit würde das Problem gelöst sein. Vorher:

Nachher:

Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

[Scrounger]

@jobe451
Mach Mal bitte nen Export von der View die du anbinden möchtest, oder besser vom ganzen Projekt. Variable Höhe hat bei mir nie funktioniert. Muss das testen.

Dein Foto geht deshalb nicht, weil du sämtliche Dateien minifiy erstellen musst.

Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

[jobe451]

Okey, ich hab mal einen "export (anonymized)" gemacht:
[entfernt]

Kommentare zum aktuellen Stand:

• Wenn du die 4 "height: 100px" entfernst, passen sich die Höhen am Inhalt an, am einfachsten in der Konsole mit:
  $(".materialdesign-masonry-item").attr("style", "");
• Aktuell fehlt noch die vertikale Scrollbar, warum, muss ich erst noch rausfinden
• In der Endversion sollten sämtliche absoluten positionierungen wegfallen

Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

[Scrounger]

@jobe451
Scrollbar musst du overlay Auto beim grid / masonry aktivieren.

Und ob die absoluten Höhe Angabe wegfallen kann muss ich erstmal im Detail anschauen, weil es muss mit widgets funktionieren und nicht mit selbstgebauten HTML Elementen!

Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft

[Scrounger]

@jobe451 sagte in Test Adapter Material Design Widgets v0.3.x:

• In der Endversion sollten sämtliche absoluten positionierungen wegfallen

Mega, das war genau das was ich immer noch gesucht hatte

Wenn man das Wigdet mit der größten Höhe im eingebundenen view auf relative stellt, klappt es.

An diesen Lösungsweg hatte ich noch nie gedacht. Dann werd ich die Höhe optional machen.

[jobe451]

@Scrounger
Danke! Dank dem Tipp mit dem Minify hab ich nun auch meinen Fork zum laufen gebracht und hab nun alle cards mit adaptiver Höhe am funktionieren.

Den card-look erreiche ich mit

.materialdesign-masonry-item > div > div.vis-view  {
    padding:  1rem 0.5rem;
    border-radius: 4px;
    background-color: var(--materialdesign-color-card-background);
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
}