Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter Material Design Widgets v0.2.x

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Test Adapter Material Design Widgets v0.2.x

    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      tazdevil20 @Scrounger last edited by

      @Scrounger
      Meine Idee dabei ist, dass ich ein Line Chart für viele Temperaturen habe und mich aber auch die letzte Temperatur interessiert. Dabei möchte ich nicht erraten wie hoch die Temperatur ist, da die Achse zwischen -5 und + 25 °C ist.
      Habe das jetzt aber anders gelöst (was mir bisher auch gut gefällt). Habe einfach unterhalb der Legende zu jedem Raum die Temperatur geschrieben. Habe noch ein paar Formatierungsprobleme, die bekomme ich aber noch in den Griff.

      1 Reply Last reply Reply Quote 0
      • A
        Adnim @Scrounger last edited by

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

        Calendar Widget ist fertig:

        Alle infos dazu findet ihr in der Doku:
        https://github.com/Scrounger/ioBroker.vis-materialdesign#calendar
        inkl. einem Skript wie ihr das ical Object in ein json string umwandelt, damit es mit dem Widget funktioniert. Online Beispiel mach ich die Tage dann mal.
        wer es testen möchte, aktuellen master ziehen -> v0.2.50

        Geile Sache Danke!

        Habe aber noch ein Thema mit Ganztägigen Termin die werden bei mir in 2 Tagen von 12 bis 12 angezeigt, das ist etwas verwirrend.

        Kann man da noch was machen?

        Scrounger sigi234 2 Replies Last reply Reply Quote 0
        • Scrounger
          Scrounger Developer @Adnim last edited by

          @Adnim
          Verwendest du das ical zu Vallendar Widget Skript aus der Doku?

          A 1 Reply Last reply Reply Quote 0
          • sigi234
            sigi234 Forum Testing Most Active @Adnim last edited by sigi234

            @Adnim

            Hallo, wie hast du es gemacht? Bei mir geht es nicht.
            Geht doch, dauerte nur eine Zeit.

            1 Reply Last reply Reply Quote 0
            • A
              Adnim @Scrounger last edited by

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

              @Adnim
              Verwendest du das ical zu Vallendar Widget Skript aus der Doku?

              ja

              Aktualisieren tut es sich erst nach Ical.0 data changed. Neustart ICal und alles ist direkt da.
              Maybee kannst du auch noch einbauen das das skript auch einmalig bei start läuft.

              1 Reply Last reply Reply Quote 0
              • sigi234
                sigi234 Forum Testing Most Active @Scrounger last edited by

                @Scrounger

                Wie bekomme ich mehrere Kalender rein?

                A Scrounger 2 Replies Last reply Reply Quote 0
                • sigi234
                  sigi234 Forum Testing Most Active @Scrounger last edited by sigi234

                  @Scrounger

                  Hallo, die Rahmenfarbe wird bei mir nur Horizontal gesetzt . Ich habe keine Vertikale. (nur in Monatsansicht)

                  Screenshot (1520).png

                  1 Reply Last reply Reply Quote 0
                  • A
                    Adnim @sigi234 last edited by

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

                    Wie bekomme ich mehrere Kalender rein?

                    Das könnte man doch bei Google lösen. Hier kannst du ja einstellen welche kalender zusammen angezeigt werden sollen

                    1 Reply Last reply Reply Quote 0
                    • Scrounger
                      Scrounger Developer @sigi234 last edited by

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

                      @Scrounger

                      Wie bekomme ich mehrere Kalender rein?

                      Das könnt ihr im ical Adapter konfigurieren, wie viele Kalender es gibt. Ich hab es mit zwei getestet die ich aus meiner nextcloud hole, funktioniert einwandfrei.

                      sigi234 1 Reply Last reply Reply Quote 0
                      • sigi234
                        sigi234 Forum Testing Most Active @Scrounger last edited by

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

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

                        @Scrounger

                        Wie bekomme ich mehrere Kalender rein?

                        Das könnt ihr im ical Adapter konfigurieren, wie viele Kalender es gibt. Ich hab es mit zwei getestet die ich aus meiner nextcloud hole, funktioniert einwandfrei.

                        Ja, aber ich habe aber mehrer Kalender und die entsprechende Ical-Instanzen dazu.

                        Scrounger 1 Reply Last reply Reply Quote 0
                        • Scrounger
                          Scrounger Developer @sigi234 last edited by

                          @sigi234

                          Achso du hast mehrere Instanzen. Ja dann musst des Skript halt entsprechend um diese Instanzen erweitern und am Ende alles in ein Datenpunkt schreiben.

                          1 Reply Last reply Reply Quote 0
                          • A
                            Adnim last edited by Adnim

                            Hi!
                            Kann mir wer auf die Sprünge helfen mit dem Skript für den Kalender. Möchte gerne das wenn Daten aus Kalender 1 Start Zeit =End Zeit.

                            Habe mir dazu die Funktion "getmyend" eingerichtet aber irgendwie will das nicht. Kann man das so nicht machen?

                            // momentjs is required as dependecies in javascript adapter
                            const moment = require("moment");
                            
                            on({ id: 'ical.0.data.table', change: 'any' }, function (obj) {
                                try {
                                    let icalObj = obj.state.val;
                                    let calList = [];
                            
                                    if (icalObj) {
                                        for (var i = 0; i <= icalObj.length - 1; i++) {
                                            let item = icalObj[i];
                            
                                            // extract calendar color
                                            let calendarName = item._class.split(' ')[0].replace('ical_', '');
                            
                                            // create object for calendar widget
                                            calList.push({
                                                name: item.event,
                                                color: getMyCalendarColor(calendarName),
                                                colorText: getMyCalendarTextColor(calendarName),
                                                start: moment(item._date).format("YYYY-MM-DD hh:mm"),
                                                end: getMyEnd(calenderName)
                                            })
                             function getMyEnd(calendarName) {
                                          
                                            if (calendarName === 'calendar1') {
                                                return 'moment(item._date).format("YYYY-MM-DD hh:mm")';
                                            } else if (calendarName === 'calendar2') {
                                                return 'moment(item._end).format("YYYY-MM-DD hh:mm")'
                                            }
                                        }
                            
                                    }
                            
                                        function getMyCalendarColor(calendarName) {
                                            // assign colors via the calendar names, use calendar name as set in ical
                                            if (calendarName === 'calendar1') {
                                                return '#FF0000';
                                            } else if (calendarName === 'calendar2') {
                                                return '#44739e'
                                            }
                                        }
                            
                                        function getMyCalendarTextColor(calendarName) {
                                            // assign colors via the calendar names, use calendar name as set in ical
                                            if (calendarName === 'calendar1') {
                                                return '#FFFFFF';
                                            } else if (calendarName === 'calendar2') {
                                                return '#FFFFFF'
                                            }
                                        }
                            
                                        // Enter the destination data point that is to be used as object ID in the widget
                                        setState('javascript.0.System.ioBroker.fuervis.kalender', JSON.stringify(calList), true);
                                    }
                                } catch (e) {
                                    console.error(`ical2MaterialDesignCalendarWidget: message: ${e.message}, stack: {e.stack}`);
                                }
                            });
                            
                            1 Reply Last reply Reply Quote 0
                            • S
                              sveni_lee last edited by

                              Ich habe irgendwie das proplem, das die Start- und Endzeiten durch das script zwar übernommen werden aber irgendwie wird aus 17:45 -> 5:45 gemacht...

                              [{"name":"Training","start":"2020-01-31 05:45","end":"2020-01-31 07:30"}]
                              

                              Ich bekomme auch keinerlei Daten angezeigt... irgendwo muß ich noch einen Denkfehler haben.

                              [{"tpl":"tplVis-materialdesign-Calendar","data":{"oid":"0_userdata.0.materialdesignwidgets.ical3Calendar","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","calendarView":"month","vibrateOnMobilDevices":"50","calendarWeekdays":"1,2,3,4,5,6,0","calendarDayButtonMonthViewGoTo":"week","calendarDayButtonWeekViewGoTo":"day","calendarDayButtonDayViewGoTo":"week","controlShow":"true","controlButtonLayout":"text","controlPosition":"stretch","controlShowLabel":"true","calendarTimeAxisShortIntervals":"true","calendarEventOverlapMode":"column","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,"calendarTimeAxisStartTime":"8","calendarTimeAxisEndTime":"18","calendarTimeAxisIntervalMinutes":"30"},"style":{"left":"145px","top":"481px","width":"932px","height":"222px"},"widgetSet":"materialdesign"}]
                              
                              1 Reply Last reply Reply Quote 0
                              • Scrounger
                                Scrounger Developer last edited by

                                Bitte alle Fragen bzgl. Skripte und Einstellung zum Calendar Widget ab sofort hier posten:
                                https://forum.iobroker.net/topic/29600/material-design-widgets-calendar-widget

                                Ich werde jetzt sukzessive für die einzelnen Widgets eigene Threads erstellen, damit der Testing thread nicht mehr so überladen wird und auch die erkenntnisse, fragen, skripte, etc entsprechend dokumentiert werden.

                                1 Reply Last reply Reply Quote 1
                                • P
                                  PatrickFro last edited by

                                  Ich habe gestern die bisher wunderbar funktionierende Top App Bar (mit integriertem View in Widget 😎 aktualisiert. Ohne über die Navigationsleiste eine Seite auszuwählen funktioniert alles, wähle ich jedoch eine andere Seite über die Navigationsleiste aus, ist keine Eingabe, touch etc möglich.

                                  Hat jemand vielleicht das selbe Problem gehabt?

                                  1 Reply Last reply Reply Quote 0
                                  • B
                                    BobBruni last edited by

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

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

                                    Ich möchte gerne meinen Grundriss als Responsive-Card mit Masonry View erstellen.
                                    Leider werden die restlichen Widgets (Lampen) zum Grundriss nicht richtig skaliert / verschoben...

                                    Lampen Widgets müssen dann relative werte für left, top, with, etc. haben, dann gehts.

                                    Das habe ich gemacht.

                                    Unbenannt.PNG

                                    M.m.n liegt das Problem dass das Masonry View nur in der Breite und nicht in der Höhe relativ gestaltet werden kann... In der X-Achse werden die Symbole richtig platziert. Es fehlt nur in der Höhe.

                                    Unbenannt2.PNG

                                    Generell hätte es doch Vorteile, wenn man die Höhe der Cards auch relativ angeben könnte.
                                    Dann würden Widgets, die einen Zeilenumbruch erlauben auch richtig dargestellt werden.

                                    Was ebenfalls noch genial wäre, wenn man für die Sichbarkeit für einzelne Cards einstellen könnte.
                                    Z.b. bestimmte Cards könnte man, abhängig von einer Bedingungen, anzeigen oder ausblenden.

                                    Besten Dank für deine tolle Arbeit!!!

                                    Scrounger 1 Reply Last reply Reply Quote 0
                                    • Scrounger
                                      Scrounger Developer @BobBruni last edited by

                                      @BobBruni
                                      Bitte verschieb deine Frage nach
                                      https://forum.iobroker.net/topic/29621/material-design-widgets-masonry-views-widget, weil wir die Fragen zu Einstellung suzessive aus dem Testing Thread raus halten sollten.

                                      Und poste gleich einen export deiner view inkl. der verwendeten Grafiken. Das geht, du hast da aber paar einstellungsfehler drin.

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

                                      Generell hätte es doch Vorteile, wenn man die Höhe der Cards auch relativ angeben könnte.

                                      Das geht aber nicht!
                                      Warum, weil z.B. die Höhe bei Desktop Auflösung 1000px beträgt. Wenn du jetzt 10 Views mit einer relativen Höhe von 10% hast, dann würde jede View eine Höhe von 100px haben.
                                      Aber z.B. auf dem Handy entspricht die 100% Höhe z.B. 500px, d.h. die Views würden alle auf eine Höhe von 50px gestaucht werden und es würde kein scrollbalken angezeigt werden. Deshalb muss man die Höhe fix gestalten.
                                      Sollte jemand wissen wie man das umsetzen könnte, lass ich mich natürlich gerne belehren 😉

                                      Z.b. bestimmte Cards könnte man, abhängig von einer Bedingungen, anzeigen oder ausblenden.

                                      Tolle Idee, gefällt mir. Bitte schreib dazu ein Issue auf gihub, damit es nicht in vergessenheit gerät!

                                      Scrounger 1 Reply Last reply Reply Quote 0
                                      • Scrounger
                                        Scrounger Developer @Scrounger last edited by Scrounger

                                        @BobBruni
                                        Bitte verschieb deine Frage nach
                                        https://forum.iobroker.net/topic/29621/material-design-widgets-masonry-views-widget, weil wir die Fragen zu Einstellung suzessive aus dem Testing Thread raus halten sollten.

                                        Und poste gleich einen export deiner view inkl. der verwendeten Grafiken. Das geht, du hast da aber paar einstellungsfehler drin.

                                        @BobBruni sagte in Test Adapter Material Design Widgets v0.2.x:
                                        Generell hätte es doch Vorteile, wenn man die Höhe der Cards auch relativ angeben könnte.

                                        Das geht aber nicht!
                                        Warum, weil z.B. die Höhe bei Desktop Auflösung 1000px beträgt. Wenn du jetzt 10 Views mit einer relativen Höhe von 10% hast, dann würde jede View eine Höhe von 100px haben.
                                        Aber z.B. auf dem Handy entspricht die 100% Höhe z.B. 500px, d.h. die Views würden alle auf eine Höhe von 50px gestaucht werden und es würde kein scrollbalken angezeigt werden. Deshalb muss man die Höhe fix gestalten.
                                        Sollte jemand wissen wie man das umsetzen könnte, lass ich mich natürlich gerne belehren 😉

                                        Z.b. bestimmte Cards könnte man, abhängig von einer Bedingungen, anzeigen oder ausblenden.

                                        Tolle Idee, gefällt mir. Bitte schreib dazu ein Issue auf gihub, damit es nicht in vergessenheit gerät!

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

                                        @Scrounger

                                        Hallo, die Rahmenfarbe wird bei mir nur Horizontal gesetzt . Ich habe keine Vertikale. (nur in Monatsansicht)

                                        Screenshot (1520).png

                                        Stimmt, allerdings nur wenn man die Hintergrundfarbe ändert wird die Rahmenfarbe nicht mehr übernommen. Schau ich mir an.

                                        1 Reply Last reply Reply Quote 0
                                        • Scrounger
                                          Scrounger Developer last edited by

                                          Ich habe jetzt für hoffentlich alle Widgets eigene Themen im Bereich Visualisierung erstellt:
                                          Material Design Widgets Themen

                                          Ich bitte Euch zukünftig alle Fragen bzgl. Einstellungen, Verständnis, Skripte, etc. im entsprechenden Thema des zugehörigen Widgets zu posten!

                                          Hintergrund ist, dass ich den Testing Thread entlasten möchte und nur noch für Fragen zur Fehlerbehebung, Testen neuer Widgets (Widgets mit Beta Label) und Funktionen verwenden möchte.

                                          Denke das wird allen helfen, schneller Fragestellungen zu beantworten.
                                          Bedeutet aber auch, dass alle etwas mehr Disziplin haben müssen 😉

                                          In der kommenden Version (latest) könnt ihr dann auch direkt aus dem VIS Editor per link zu dem entsprechenden Thema des Widgtes hier im Forum springen, sofern Eure Sprache auf Deutsch eingestellt ist:

                                          q&a.png

                                          1 Reply Last reply Reply Quote 0
                                          • I
                                            intruder7 last edited by

                                            @Scrounger
                                            Hallo, die Idee mit der bedingten Sichtbarkeit im Mansory View finde ich gut nur bekomme ich sie bei mir nicht zum laufen. Hab als Beispiel ein Projekt angehangen.
                                            Was möchte ich erreichen....
                                            Ich habe eine Spalte und 2 Views. Im Querformat lasse ich die Views mit einer Breite von 20% und 79% anzeigen damit sie nebeneinander angezeigt werden. Im Hochformat sollen die beiden Views ausgeblendet und zwei andere( eigentlich die selben) nur mit 100% angezeigt werden Damit sie untereinander erscheinen. Ich bekomme dies einfach nicht hin. Bei den entwicklertools werden die Container auch angezeigt nur ohne Inhalt. dort hat er auch einen Fehler in der Console

                                            jquery-1.11.2.min.js:3 GET http://192.168.100.85:8082/vis/undefined 404 (Not Found)
                                            Jb @ jquery-1.11.2.min.js:3
                                            css @ jquery-1.11.2.min.js:3
                                            U @ jquery-1.11.2.min.js:3
                                            Vb @ jquery-1.11.2.min.js:3
                                            show @ jquery-1.11.2.min.js:3
                                            m.fn.<computed> @ jquery-1.11.2.min.js:4
                                            (anonymous) @ jquery-ui-1.11.4.full.min.js:13
                                            (anonymous) @ vis.js:921
                                            renderViews @ vis.js:754
                                            (anonymous) @ vis.js:760
                                            (anonymous) @ vis.js:943
                                            setTimeout (async)
                                            (anonymous) @ vis.js:941
                                            subscribeStates @ vis.js:2714
                                            renderView @ vis.js:797
                                            renderViews @ vis.js:759
                                            (anonymous) @ vis.js:760
                                            (anonymous) @ vis.js:943
                                            setTimeout (async)
                                            (anonymous) @ vis.js:941
                                            subscribeStates @ vis.js:2714
                                            renderView @ vis.js:797
                                            renderViews @ vis.js:759
                                            (anonymous) @ vis.js:760
                                            (anonymous) @ vis.js:943
                                            setTimeout (async)
                                            (anonymous) @ vis.js:941
                                            (anonymous) @ vis.js:2738
                                            (anonymous) @ conn.js:730
                                            n.onack @ universalModuleDefinition:3
                                            n.onpacket @ universalModuleDefinition:3
                                            (anonymous) @ universalModuleDefinition:3
                                            n.emit @ universalModuleDefinition:2
                                            n.ondecoded @ universalModuleDefinition:1
                                            (anonymous) @ universalModuleDefinition:3
                                            r.emit @ universalModuleDefinition:1
                                            s.add @ universalModuleDefinition:1
                                            n.ondata @ universalModuleDefinition:1
                                            (anonymous) @ universalModuleDefinition:3
                                            n.emit @ universalModuleDefinition:2
                                            n.onPacket @ universalModuleDefinition:2
                                            (anonymous) @ universalModuleDefinition:2
                                            n.emit @ universalModuleDefinition:2
                                            n.onPacket @ universalModuleDefinition:2
                                            n.onData @ universalModuleDefinition:2
                                            ws.onmessage @ universalModuleDefinition:3
                                            


                                            Probiert habe ich es mit Tab A (1280x800) sowie am Rechner und Handy

                                            2020-02-03-test2.zip

                                            Scrounger 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            957
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            adapater material vis visualization widget
                                            77
                                            902
                                            172599
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo