Test Adapter minuvis v0.0.x

SVallant

@Pischleuder Ja, wir wissen auch, dass wir das Fehlerhandling verbessern müssen.
Ausserdem werden wir in Zukunft auch den Typ des States im Builder anzeigen (Boolean, String .... usw.)

Pischleuder

@SVallant said in Test Adapter minuvis v0.0.x:

Du kannst mit dem HTML-Widget so guzt wie alles darstellen.
Packe einfach dein HTML in einen State (mit js-Adapter) und rufe den State im HTML-Widget auf.

Bei Openliga speichert er dies in einen state beim Datenpunkt:

[{"TeamInfoId":40,"TeamName":"FC Bayern","ShortName":"FC Bayern","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Logo_FC_Bayern_M%C3%BCnchen_%282002%E2%80%932017%29.svg/240px-Logo_FC_Bayern_M%C3%BCnchen_%282002%E2%80%932017%29.svg.png","Points":61,"OpponentGoals":28,"Goals":80,"Matches":27,"Won":19,"Lost":4,"Draw":4,"GoalDiff":52},{"TeamInfoId":7,"TeamName":"Borussia Dortmund","ShortName":"Dortmund","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Borussia_Dortmund_logo.svg/240px-Borussia_Dortmund_logo.svg.png","Points":57,"OpponentGoals":33,"Goals":74,"Matches":27,"Won":17,"Lost":4,"Draw":6,"GoalDiff":41},{"TeamInfoId":6,"TeamName":"Bayer Leverkusen","ShortName":"Leverkusen","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/de/thumb/f/f7/Bayer_Leverkusen_Logo.svg/1280px-Bayer_Leverkusen_Logo.svg.png","Points":53,"OpponentGoals":32,"Goals":52,"Matches":27,"Won":16,"Lost":6,"Draw":5,"GoalDiff":20},{"TeamInfoId":87,"TeamName":"Borussia Mönchengladbach","ShortName":"Gladbach","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/8/81/Borussia_Mönchengladbach_logo.svg","Points":52,"OpponentGoals":34,"Goals":53,"Matches":27,"Won":16,"Lost":7,"Draw":4,"GoalDiff":19},{"TeamInfoId":1635,"TeamName":"RB Leipzig","ShortName":"RBL Leipzig","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/en/thumb/0/04/RB_Leipzig_2014_logo.svg/800px-RB_Leipzig_2014_logo.svg.png","Points":51,"OpponentGoals":27,"Goals":63,"Matches":26,"Won":14,"Lost":3,"Draw":9,"GoalDiff":36},{"TeamInfoId":131,"TeamName":"VfL Wolfsburg","ShortName":"Wolfsburg","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Logo-VfL-Wolfsburg.svg/1024px-Logo-VfL-Wolfsburg.svg.png","Points":39,"OpponentGoals":33,"Goals":36,"Matches":27,"Won":10,"Lost":8,"Draw":9,"GoalDiff":3},{"TeamInfoId":112,"TeamName":"SC Freiburg","ShortName":"SC Freiburg","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/de/thumb/f/f1/SC-Freiburg_Logo-neu.svg/739px-SC-Freiburg_Logo-neu.svg.png","Points":37,"OpponentGoals":37,"Goals":35,"Matches":27,"Won":10,"Lost":10,"Draw":7,"GoalDiff":-2},{"TeamInfoId":9,"TeamName":"FC Schalke 04","ShortName":"Schalke 04","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/6/6d/FC_Schalke_04_Logo.svg","Points":37,"OpponentGoals":41,"Goals":33,"Matches":27,"Won":9,"Lost":8,"Draw":10,"GoalDiff":-8},{"TeamInfoId":175,"TeamName":"TSG 1899 Hoffenheim","ShortName":"Hoffenheim","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/6/64/TSG_Logo-Standard_4c.png","Points":36,"OpponentGoals":47,"Goals":36,"Matches":27,"Won":10,"Lost":11,"Draw":6,"GoalDiff":-11},{"TeamInfoId":54,"TeamName":"Hertha BSC","ShortName":"Hertha BSC","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Hertha_BSC_Logo_2012.svg/2858px-Hertha_BSC_Logo_2012.svg.png","Points":34,"OpponentGoals":48,"Goals":39,"Matches":27,"Won":9,"Lost":11,"Draw":7,"GoalDiff":-9},{"TeamInfoId":65,"TeamName":"1. FC Köln","ShortName":"1. FC Köln","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/en/thumb/5/53/FC_Cologne_logo.svg/901px-FC_Cologne_logo.svg.png","Points":33,"OpponentGoals":47,"Goals":41,"Matches":26,"Won":10,"Lost":13,"Draw":3,"GoalDiff":-6},{"TeamInfoId":80,"TeamName":"1. FC Union Berlin","ShortName":"Union Berlin","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/1._FC_Union_Berlin_1966_-_1990.gif/320px-1._FC_Union_Berlin_1966_-_1990.gif","Points":30,"OpponentGoals":47,"Goals":32,"Matches":27,"Won":9,"Lost":15,"Draw":3,"GoalDiff":-15},{"TeamInfoId":95,"TeamName":"FC Augsburg","ShortName":"Augsburg","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/de/b/b5/Logo_FC_Augsburg.svg","Points":30,"OpponentGoals":54,"Goals":38,"Matches":27,"Won":8,"Lost":13,"Draw":6,"GoalDiff":-16},{"TeamInfoId":91,"TeamName":"Eintracht Frankfurt","ShortName":"Frankfurt","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Eintracht_Frankfurt_Logo.svg/1024px-Eintracht_Frankfurt_Logo.svg.png","Points":28,"OpponentGoals":49,"Goals":41,"Matches":26,"Won":8,"Lost":14,"Draw":4,"GoalDiff":-8},{"TeamInfoId":81,"TeamName":"1. FSV Mainz 05","ShortName":"FSV Mainz","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Logo_Mainz_05.svg/1099px-Logo_Mainz_05.svg.png","Points":27,"OpponentGoals":55,"Goals":36,"Matches":26,"Won":8,"Lost":15,"Draw":3,"GoalDiff":-19},{"TeamInfoId":185,"TeamName":"Fortuna Düsseldorf","ShortName":"Düsseldorf","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Fortuna_D%C3%BCsseldorf.svg/150px-Fortuna_D%C3%BCsseldorf.svg.png","Points":23,"OpponentGoals":50,"Goals":27,"Matches":26,"Won":5,"Lost":13,"Draw":8,"GoalDiff":-23},{"TeamInfoId":134,"TeamName":"Werder Bremen","ShortName":"Bremen","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/SV-Werder-Bremen-Logo.svg/681px-SV-Werder-Bremen-Logo.svg.png","Points":21,"OpponentGoals":59,"Goals":29,"Matches":26,"Won":5,"Lost":15,"Draw":6,"GoalDiff":-30},{"TeamInfoId":31,"TeamName":"SC Paderborn 07","ShortName":"Paderborn","TeamIconUrl":"https://upload.wikimedia.org/wikipedia/commons/e/e3/SC_Paderborn_07_Logo.svg","Points":18,"OpponentGoals":55,"Goals":31,"Matches":27,"Won":4,"Lost":17,"Draw":6,"GoalDiff":-24}]

SVallant

@Pischleuder das ist gar nicht so schwierig

http://94.130.57.38:8082/minuvis/app/?url=http%3A%2F%2F94.130.57.38%3A8082&file=demo_READWRITE.json&forceUpdate

Guck mal hier:

Auf dieser Maschine läuft eine ioBroker-Instanz: http://94.130.57.38:8081

Loginname: demo
Kennwort: demo

hier mein js für ein js-Skript:

    let StateIdJson = "0_userdata.0.openliga.data";
    let StateIdHtml = "0_userdata.0.openliga.html";
    
   //############################################################################ 
    
   
        var objData = JSON.parse(getState(StateIdJson).val);
        // console.log("objData");
        // console.log(objData);

        let i = 1;
        let html = "";

        // add Style

        html += `
            <style>
                .teamcol {
                    background-color: #222;
                    color: #fff;
                }
                .teamrow {
                    display: inline-block;
                    border: 1px solid #ccc;
                    line-height: 30px;
                    text-align: center;
                    vertical-align: middle;
                    width: 30px;
                    height: 30px;
                }
                .teamname {
                    width: 300px;
                }
                .teamiconurl img {
                    height: 30px;
                    width: 30px;
                }
            </style>
        `;

        objData.forEach(team => {
            //console.log(team);
            html += "<div class='teamcol'>";
            html += "<div class='teamrow place'>" + i + "</div>";
            for (let [key, value] of Object.entries(team)) {
                console.log(`${key}: ${value}`);
                if (key === "TeamIconUrl") {
                    html += "<div class='teamrow " + key.toLowerCase() + "'><img src='" + value + "'/></div>"
                }
                else if (key === "TeamInfoId" || key === "ShortName") {
                    html += "";
                } else {
                    html += "<div class='teamrow " + key.toLowerCase() + "'>" + value + "</div>";
                }
            }

            html += "</div>";
            i++;

        });

        setState(StateIdHtml,html);

Pischleuder

Hi,

ja, großartig - das funktioniert prima. Ich bin leider in java ein unbeschriebenes Blatt, von daher vielen Dank.

Hoffe, Du machst hier weiter und es kommen noch Ergänzungen

SVallant

@Pischleuder Nur wenn Werder Bremen nicht absteigt

Pischleuder

Na, hoffen wir mal .....

PS: die Überschrift fehlt noch

Neuschwansteini

@SVallant Hi, gute Idee, toll umgesetzt!

Ich teste gerade mal, die Bundesliga-Tabelle funktioniert ja schonmal ganz gut

Allerdings kommt bei mir ab und zu ( öfters bei Firefox, bei Chrome weniger ) eine weisse Seite, wenn ich was geändert habe, in der Vorschau...

SVallant

@ilovegym Die weisse Seite kommt meistens wenn ein State nicht vorhanden ist. Am Besten in der Console gucken und im Zweifel hier posten.
Getestet ist minuvis von uns aus nur im Chrome, alles andere würde den Umfang sprengen (es gab auch schon eine Anfrage bzgl. Internet Explorer ....)
Es gibt übrigens eine neue Beta-Version des Adapters:
https://github.com/minukodu/ioBroker.minuvis/tree/dev/V110

dh. installiere von:
https://github.com/minukodu/ioBroker.minuvis/tarball/dev/V110

Noch ein Tipp zum Debuggen kannst du auch "&debug=true" an die App-Url anhängen, dann lädt minvis eine Konsole nach. Sehr praktisch am Handy oder Tablet ..

BlueSnake

Erst mal ein großes Lob für eure Visu. Ich habe inzwischen eine Zeit lang damit rumgespielt und finde, dass sie sehr viel Potential hat.

Einen Verbesserungsvorschlag hätte ich zum Widget "Indicator":
Es wäre super, wenn man für den Wert "true" und "false" jeweils auch noch ein anderes Icon setzen könnte. Z.B. Fensterkontakt. Fenster offen und geschlossen Icon.

SVallant

@BlueSnake Danke für die Blumen

du wirst lachen: gerade vorgestern hat mir das ein Arbeitskollege auch gesagt.
Wir wollen jetzt folgendes machen:

Indicator auch für Zahlen oder Strings
ValueSwitcher READ-ONLY dh. maximal 4 Zustände NUR anzeigen

Values-Switcher ist einfacher, ich gehe davon aus, dass wir das kurzfristig machen
Indicator dann im Herbst

MichMein

Hi,

ich habe am Sonntag mal kleine Visualisierung mit dem minuVis angefangen. Als erstes mal, er ist ziemlich gut gelungen, mein höchster Respekt.
Ein paar Kleinigkeiten habe ich da allerdings, mir fehlen zum Beispiel ein Icon für "Geld".
Und wenn man den "compactMode" nutzt soll man einen Titel eingeben, dieser taucht aber nirgends auf, ist das so gewollt?
Mir würde ebenfalls ein "Überschrifts-Widget" fehlen.
Ich nutze einige Aqara Multisensoren, es wäre sehr cool wenn man z.B. das "Output-Widget" um weitere "States" erweitern könnte um Temperatur, Luuftfeuchtigkeit usw. in einem Widget anzeigen lassen könnte.
Beim "Indicator-Widget" wäre es ebenfalls ganz cool wenn zusätzlich zu den beiden Farben auch zwei unterschiedliche Icons auswählen könnte z.B. für Fensterkontakte, oder gar drei Stück für einen Batteriestatus.

Ich glaube das war es erstmal von meiner Seite.

Diesen Beitrag habe ich dem folgenden Thread ebenfalls schon gepostet, aber leider ohne Reaktion [Vorstellung] neue Visualisierung :: minuVis

SVallant

@MichMein Was meinst du mit "Überschrifts-Widget" ? Ein Indicator-Widget ohne das eingefärtbet Icon auf der rechten Seite ?

Wir sind auch gerade dabei die über 5000 Icons von https://materialdesignicons.com/ einzubinden, und dem Value-Switcher die Option read-Only beizubringen
Derzeit läuft der Alpha-Test ...
.. hier: http://dev.builder.minukodu.de/

rudiraz

Hallo,
ich habe den Adapter mal getestet, weil ich genau nach so etwas gesucht habe.

Installation hat auch geklappt. Ich habe eine Testseite erstellt, allerdings flackert diese nur kurz auf, wenn ich die Preview ansehen möchte.
Danach bleibt das Fenster weiß/leer

Woran kann das liegen?

Grüße

SVallant

@rudiraz nach unserer Erfahrung hast du einen nicht vorhandenen State ausgewählt. Bitte prüfe nochmal die Konfiguration auf allen Pages.

Das Error-Handling steht auch noch auf unserer Liste...
Sepp

rudiraz

@SVallant Ich habe einen Test-Taster ausgewählt. Den State gibt es also..

Muss ich mal weiter schauen ...

SVallant

@rudiraz Du kannst der URL der App auch ein "&debug=true" anhängen.
Dann öffnet bei Fehler eine Konsole deren Inhalt du hier posten könntest.

Mit "&debug=true" fügt rechts unten ein Zahnrad-Icon dazu damit kann die Console auch im mobilen Browser geöffnet werden

rudiraz

@SVallant sagte in Test Adapter minuvis v0.0.x:

&debug=true

Ah ich habe den Fehler, Dank des Debug

Der Test-State war leer, deswegen wurde eine leere Seite angezeigt.
Im Debug-Modus hab ich es dann erkannt

Edit:
Was ich nicht bedacht hatte vorher:
Um MinuVis zu nutzen, braucht man nachher einen Webserver?
Muss also im schlechtesten Fall einen Raspi als Webserver konfigurieren?
Grüße

MichMein

@rudiraz sagte in Test Adapter minuvis v0.0.x:

Edit:
Was ich nicht bedacht hatte vorher:
Um MinuVis zu nutzen, braucht man nachher einen Webserver?
Muss also im schlechtesten Fall einen Raspi als Webserver konfigurieren?
Grüße

Hi,

nein das brauchst Du nicht.
Minuvis Adapter im ioBroker installieren > Visualisierung erstellen > auf den Preview Button klicken, dann erscheint im Browser die Visualisierung. Das ganze machst Du so beschrieben auf Deinem Handy und/oder Tablet je nachdem wo Du es haben möchtest.
Auf meinen Apple Geräten kann ich dann die angezeigte Webseite meinem Home-Bildschirm hinzufügen und schon erscheint ein Icon und darüber kann das ganze dann wie eine App genutzt werden. Wie es mit anderen Betriebssystemen auf mobilen Geräten ist kann ich leider nicht sagen, aber vermutlich sehr ähnlich.

Viel Erfolg

rudiraz

@MichMein Ok. Super Danke. Ich war schon länger auf der Suche nach so etwas Ähnlichem.

Eine Frage dann noch: Ich habe ein wenig auf der Homepage gelesen.
Wofür ist denn dann die "minuvis-webapp.iobroker"?

Grüße

MichMein

@rudiraz sagte in Test Adapter minuvis v0.0.x:

Wofür ist denn dann die "minuvis-webapp.iobroker"?

Das kann ich Dir leider nicht beantworten, vielleicht meldet @SVallant sich ja zu Wort.

NEWS

Test Adapter minuvis v0.0.x

Support us

845
Online

31.7k
Users

79.8k
Topics

1.3m
Posts

NEWS

Test Adapter minuvis v0.0.x

Support us

845Online

31.7kUsers

79.8kTopics

1.3mPosts

845
Online

31.7k
Users

79.8k
Topics

1.3m
Posts