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

[0018]

@Scrounger Hast du ein Beispiel dafür damit es passen würde?

[bommel_030]

@Scrounger
Nachdem ich meinen Farbflash überwunden habe, habe ich mal versucht mir das passende JSON für meine Tabelle aus nem Skript zu erstellen.
Der Zeilenumbruch in einer Zelle hat mich ein wenig zur Verzweifelung gebracht. Im Wohnzimmer gibt es halt Tür und Fenster...

Spoiler

{
                       Raum: name1,
                       Temperatur: temp1 +' °C',
   					Luftfeuchte: feuchte1 + '%',
   					Ventilstand: ventil1 + '%',
   					Fenster: [fenster1,  "\n" + tuer1],
   					Lüften:	empfehlung1,
   					Zustand: zustand1,
                    } ,

Jetzt hänge ich aber an der Spaltenbreite... Egal was ich im Widget eintrage, die Spalte bleibt so wie sie ist...
Hätte die Spalten gerne so breit, dass der Sortierpfeil keine zweite Zeile erzeugt. Und um zu sehen ob mein JSON Zeilenumbruch auch wirklich funktioniert ^^
Da ich für wechselnde Farben quasi für jede Zelle nen DP erzeugen muss bleibt sie jetzt erstmal einfarbig.
Und dank eines findigen Entwicklers übernimmt LinkedDevices die Übersetzung von Fenter true/false in offen/geschlossen von alleine...

[sigi234]

@Scrounger sagte in Test Adapter Material Design Widgets v0.2.x:

Es gibt jetzt ein neues Select Widget

Der Intervall reagiert nicht in der Chart Line. Was mache ich Falsch?
Info: geht mit der alten Version auch nicht mehr?

[Scrounger]

@bommel_030
Stell Mal bitte den Wert des Datenpunkt und das Widget zur verfugung, dann schau ich es mir an.

@sigi234
Muss Englisch sein, 30 Sekunden muss als wert 30 seconds bekommen. Schau bitte in die Doku.

[Scrounger]

@darkiop sagte in Test Adapter Material Design Widgets v0.2.x:

@Scrounger Klasse die neuen selects!

So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

Müsste jetzt behoben sein, aktuellen master testen -> v0.2.47

[intruder7]

@Scrounger
Hallo, bei mir funktioniert das neue select widget überhaupt nicht (Crome)
Bei Werten über den Editor gehts. Aber sobald ich auf Werteliste umstelle und dort was eingebe verschwinden alle anderen Einstellungen( Farbe,Text usw.)

in der Konsole tauchen auch Fehler auf.

Vuetify Select]: error: Cannot read property 'split' of undefined, stack: TypeError: Cannot read property 'split' of undefined
    at Object.generateItemList (http://192.168.100.85:8082/vis/widgets/materialdesign/js/widgets.min.js:1:22620)
    at Object.vis.binds.materialdesign.select (http://192.168.100.85:8082/vis/widgets/materialdesign/js/widgets.min.js:5:5371)
    at Object.eval (tplVis-materialdesign-Select.js:29:86)
    at Function.<anonymous> (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:64:6166)
    at Object.a.each (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:24:294)
    at http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:64:6147
    at HTMLDivElement.<anonymous> (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1841)
    at Object.a.each (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:24:294)
    at Function.hookup (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1751)
    at Function.frag (http://192.168.100.85:8082/vis/lib/js/can.custom.min.js:58:1344) 
vis.binds.materialdesign.select @ widgets.min.js:5

[Scrounger]

@intruder7

Ja das passiert wenn man für Label und Icon nichts eingibt. Muss ich noch einbauen das das abgefangen wird.

[0018]

@Scrounger sagte in Test Adapter Material Design Widgets v0.2.x:

@0018
Musst nen <font> Tag um den Text setzen.

Hast du dafür ein Beispiel? Bin leider nicht so fit in html tags

[bommel_030]

@Scrounger
Ich nehme alles zurück und behaupte das Gegenteil...
Hab die Version mal aktualisiert, jetzt klappt es auch mit der Spaltenbreite. Damit habe ich dann wieder das Problem, dass ich keinen Zeilenumbruch im JSON hinbekomme ^^
Aber mal was anderes... NavBar...

1. Ist es möglich, dass sich Menüpunkt [6] automatishc zusammenklappt wenn ein anderer Menüpunkt ausgewählt wird (abgesehen von den Untermenüs 7-9)?
2. Man kann für Punkt 6 zwar eine View hinterlegen, bei klick auf Punkt 6 wird aber "nur" das Untermenü aufgeklappt. Soll das so sein, oder kann man das ändern?
   

[sigi234]

@Scrounger

Kann ich die Zeilenhöhe im Spaltenlayout beeinflussen? Möchte den Abstand verkleinern.

[intruder7]

@Scrounger :+1:
gut zu wissen. Habs jetzt auch am laufen.
Das Table Widget bereitet mir noch Schwierigkeiten. Habe eine Object ID mit Daten im JSON Format eingebunden. Er zeigt auch alles super an. Nur bei Änderung der Daten im JSON werden sie in der Anzeige nicht aktualisiert.:disappointed:

[Scrounger]

@0018 sagte in Test Adapter Material Design Widgets v0.2.x:

Hast du dafür ein Beispiel? Bin leider nicht so fit in html tags

https://www.w3schools.com/tags/tag_font.asp

@bommel_030 sagte in Test Adapter Material Design Widgets v0.2.x:

@Scrounger
Ich nehme alles zurück und behaupte das Gegenteil...
Hab die Version mal aktualisiert, jetzt klappt es auch mit der Spaltenbreite. Damit habe ich dann wieder das Problem, dass ich keinen Zeilenumbruch im JSON hinbekomme ^^

Muss auch für die Spalte aktiviert bzw. deaktiviert sein:

Aber mal was anderes... NavBar...

1. Ist es möglich, dass sich Menüpunkt [6] automatishc zusammenklappt wenn ein anderer Menüpunkt ausgewählt wird (abgesehen von den Untermenüs 7-9)?

Nein

2. Man kann für Punkt 6 zwar eine View hinterlegen, bei klick auf Punkt 6 wird aber "nur" das Untermenü aufgeklappt. Soll das so sein, oder kann man das ändern?

Ja soll so sein und kann man auch nicht ändern.

@sigi234 sagte in Test Adapter Material Design Widgets v0.2.x:

Kann ich die Zeilenhöhe im Spaltenlayout beeinflussen? Möchte den Abstand verkleinern.

In deinem konkreten Fall kannst du sie nur vergrößern. Verkleinern geht nur über die Schriftgröße und per css überschreiben des padding

[darkiop]

@Scrounger sagte in Test Adapter Material Design Widgets v0.2.x:

@darkiop sagte in Test Adapter Material Design Widgets v0.2.x:

@Scrounger Klasse die neuen selects!

So auf die Schnelle, ich glaube die Textfarbe wird nicht übernommen:

Müsste jetzt behoben sein, aktuellen master testen -> v0.2.47

Passt noch nicht:

[Buddinski88]

@Scrounger, gibt es die Möglichkeit noch ein "Feld" für den iCal-Adapter einzubauen, in welchem ich sagen kann, wenn "ical_Oelkuchs" dann "Oelkuchs"?

Ich habe schon versucht auf Basis des Beispiels für den Enigma-Adapter ein Skript zu schreiben, aber ich scheitere schon daran, welches Node_Module ich für die constate als require nehmen muss :-(

Oben auf dem Bild sieht man den Kalender aus dem MaterialDesign von Uhula. Dieser Zeigt in der ersten Spalte auch die Kalenderfarbe aus dem iCal-Adapter an. Geht sowas auch?
Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde. Gerne auch gegen Einwurf von Geld.

[Scrounger]

@darkiop

Doch das geht, gibt zwei farben:

select ist leer:

select hat nen wert:

@Buddinski88

Aktuell geht das nur per Skript. Vielleicht mach ich die Tage mal ein Beispiel dafür.

Und für ical hab ich noch eine viel bessere idee ;)
https://vuetifyjs.com/en/components/calendars#usage

Steht schon auf meiner Todo Liste.

[Scrounger]

@Buddinski88 sagte in Test Adapter Material Design Widgets v0.2.x:

Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde.

Hier das Beispielskript:

on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
    let icalObj = obj.state.val;
    let calList = [];

    for (var i = 0; i <= icalObj.length - 1; i++) {
        let item = icalObj[i];

        // Kalendername extrahieren
        let kalenderName = item._class.split(' ')[0].replace('ical_', '');

        // Objekt für Tabelle erzeugen
        calList.push({
            farbe: `<div style="background: ${getMyKalenderFarbe(kalenderName)}; width: 3px; height: 20px"></div>`,
            zeit: item.date,
            termin: item.event,
            kalender: kalenderName,
            timestamp: Date.parse(item._date) 
        })
    }

    function getMyKalenderFarbe(kalenderName) {
        // Farben über die Kalendernamen zuordnen, Kalendername wie in ical eingestellt verwenden
        if (kalenderName === 'calendar1') {
            return 'red';
        } else if (kalenderName === 'calendar2') {
            return '#44739e'
        }
    }

    // Hier den Ziel Datenpunkt eingeben, der als Objekt ID im Widget verwendet werden soll
    setState('0_userdata.0.ical', JSON.stringify(calList), true);
});

Widget dazu:

Spoiler

[{"tpl":"tplVis-materialdesign-Table","data":{"oid":"0_userdata.0.ical","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","countCols":"3","tableLayout":"standard","showHeader":"true","headerTextSize":"headline6","showColumn0":"true","colType0":"text","textAlign0":"left","showColumn1":"true","colType1":"text","textAlign1":"left","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,"showColumn2":"true","colType2":"text","textAlign2":"left","showColumn3":"true","colType3":"text","textAlign3":"left","label0":" ","label1":"Zeit","label2":"Termin","label3":"Kalender","columnWidth0":"0","sortKey1":"timestamp"},"style":{"left":"163px","top":"67px","width":"692px","height":"341px"},"widgetSet":"materialdesign"}]

Und so sieht das dann aus:

[intruder7]

ich wollte es nochmal hochbringen.

Bzw. @all ,hat dieses Problem auch jemand anders oder stimmt bei mir etwas nicht?
@Scrounger 👍
gut zu wissen. Habs jetzt auch am laufen.
Das Table Widget bereitet mir noch Schwierigkeiten. Habe eine Object ID mit Daten im JSON Format eingebunden. Er zeigt auch alles super an. Nur bei Änderung der Daten im JSON werden sie in der Anzeige nicht aktualisiert.😞

[Scrounger]

@intruder7 sagte in Test Adapter Material Design Widgets v0.2.x:

Nur bei Änderung der Daten im JSON werden sie in der Anzeige nicht aktualisiert.😞

Das funktioniert auch nicht beim tabl - basic Widget. Schätze das das Problem im vis Adapter liegt bei aktualiserung von Datenpunkten des typ objekts. Hab ich mich aber noch nicht beschäftigt und werde ich sicher in naher Zukunft auch nicht, weil ich mir meine Daten für Tabellen immer per skript aufbereitet und dann als json string speichere.
Kannst dazu aber gerne ein git issue erstellen, dann gerät es nicht in vergessenheit.

[intruder7]

@Scrounger sagte in Test Adapter Material Design Widgets v0.2.x:

@Buddinski88 sagte in Test Adapter Material Design Widgets v0.2.x:

Ich vermute das dir viele sehr dankbar wären, wenn es zu den zwei Themen eine Lösung geben würde.

Hier das Beispielskript:

on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
    let icalObj = obj.state.val;
    let calList = [];

    for (var i = 0; i <= icalObj.length - 1; i++) {
        let item = icalObj[i];

        // Kalendername extrahieren
        let kalenderName = item._class.split(' ')[0].replace('ical_', '');

        // Objekt für Tabelle erzeugen
        calList.push({
            farbe: `<div style="background: ${getMyKalenderFarbe(kalenderName)}; width: 3px; height: 20px"></div>`,
            zeit: item.date,
            termin: item.event,
            kalender: kalenderName,
            timestamp: Date.parse(item._date) 
        })
    }

    function getMyKalenderFarbe(kalenderName) {
        // Farben über die Kalendernamen zuordnen, Kalendername wie in ical eingestellt verwenden
        if (kalenderName === 'calendar1') {
            return 'red';
        } else if (kalenderName === 'calendar2') {
            return '#44739e'
        }
    }

    // Hier den Ziel Datenpunkt eingeben, der als Objekt ID im Widget verwendet werden soll
    setState('0_userdata.0.ical', JSON.stringify(calList), true);
});

Du bist der Beste. genau da lag der Fehler. Ich habe das reine JSON als Objekt genutzt. Habe in deinem Skript gesehen dass du

stringify

nutzt. Habs damit probiert. Jetzt aktualisiert er auch.:clap: :grin:

[Buddinski88]

@Scrounger, auch hier noch mal einen großen Dank an dich! (Spende ging raus) :-)
Ich habe die Abfrage des Kalenders für dessen Farbe noch etwas erweitert, damit mehrere/beliebig viele Kalender abgefragt werden können.

Hier mein Code:

on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
    let icalObj = obj.state.val;
    let calList = [];
 
    for (var i = 0; i <= icalObj.length - 1; i++) {
        let item = icalObj[i];
 
        // Kalendername extrahieren
        let kalenderName = item._class.split(' ')[0].replace('ical_', '');
 
        // Objekt für Tabelle erzeugen
        calList.push({
            farbe: `<div style="background: ${getMyKalenderFarbe(kalenderName)}; width: 3px; height: 20px"></div>`,
            zeit: item.date,
            termin: item.event,
            kalender: kalenderName,
            timestamp: Date.parse(item._date) 
        })
    }
 
    function getMyKalenderFarbe(kalenderName) {
        // Farben über die Kalendernamen zuordnen, Kalendername wie in ical eingestellt verwenden
        switch (kalenderName){
            case 'Abfall':
                return '795548';
                break;
            case 'Familie':
                return '#0b8044';
                break;
            case 'Familie Arbeit':
                return '#f6c226';
                break;
            case 'Geburtstage':
                return '#d50000';
                break;
            case 'Aquascape':
                return '#1baade';
                break;
            default:
                return '#000000'
                break;
        }
    }
 
    // Hier den Ziel Datenpunkt eingeben, der als Objekt ID im Widget verwendet werden soll
    setState('javascript.0.variables.vis.ical.convertedData', JSON.stringify(calList), true);
});