Doku für index_m & widgets gesucht

[lugge86]

Servus zusammen,
ich versuche mich momentan auch mal an einem Adapter und konnte bisher alles soweit umsetzen wie geplant.

Nun gehts darum dem Benutzer im Admin-Bereich (Tab "Instanzen/Adaptername") eine komfortable GUI zur konfiguration bereit zu stellen. D.h.: index_m.html bearbeiten.

Ich finde dazu nur kaum Infos, alles was ich mache copy&paste ich mir aus anderen Adaptern zusammen.
Beispielsweise brauche ich eine Tabelle der man per "+"-Button Einträge hinzufügen kann.
Ich hab aus dem iCal-Adapter viel übernommen, deswegen klappt es auch:

<div id="tab-colors" class="col s12 page">
            <div class="col s12" id="colors">
            <a class="btn-floating waves-effect waves-light blue table-button-add"><i class="material-icons">add</i></a>
                <div class="table-values-div">
                    <table class="table-values">
                        <thead>
                            <tr>
                                <th data-name="name" class="translate">Name</th>
                                <th data-name="comment" class="translate">Priority</th>
                                <th data-name="color" data-type="color" class="translate">color</th>
                                <th data-buttons="delete up down"></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

Ferner benutze ich noch die Funktionen values2table() und table2values().

Das Problem: ich hab keine Ahnung wieso es läuft, ich hab keine Ahnung was die css-Klassen (z.B. class="table-values") bedeuten, ich hab nur ne grobe Idee was die genannten JS-Funktionen machen.
Und schon garnicht wär ich in der Lage neue GUI-Elemente selbstständig einzufügen, ich müsste mir alles aus irgendwelchen Repos zusammen copy&pasten.

Gibt es da irgendwo ne Doku dazu?
Woher kommen diese Klassen und Funktionen überhaupt? Werden die von ioBroker zur Verfügung gestellt? Kommt das von material-UI?
Wo kann ich mich informieren welche GUI-Elemente es noch gibt und wie ich deren Features nutze?
Wie macht ihr das wenn ihr mehr als nur simple Textfelder braucht, woher holt ihr euch die Infos?

Als Jemand der sehr gerne das f*** manual liest ist die Situation momentan etwas unbefriedigend

Viele Grüße,
lugge

[lugge86]

Hm, entwickelt ihr alle ohne Doku?
Woher wisst ihr denn welche widgets euch für eure Konfig-Tabs zur Verfügung stehen und wie diese zu benutzen sind?
Einfach alles irgendwoher zusammenkopieren?

OK, ich versuche mal meine Frage zu präzisieren:
Über die Zeile

<th data-name="color" data-type="color" class="translate">color</th>

kann ich einen Tabelleneintrag mit Farb-Auswahlfeld erzeugen.
Vermutlich wegen dem data-type="color".
Aber woher weiß ich das? Wo ist das dokumentiert? Eine Websuche nach "materializecss data-type="color"" fördert schon mal nichts brauchbares zu Tage.

Ich würd ja gerne solche Probleme selbstständig lösen, aber wenn man nicht mal weiß wo was dokumentiert ist bzw. welches Feature von welchem Framework stammen tut man sich da schwer...

Einfach irgendwas zusammenkopieren und hoffen dass es irgendwie läuft ist nicht mein Anspruch.

[Jey Cee]

@lugge86 sagte in Doku für index_m & widgets gesucht:

Einfach irgendwas zusammenkopieren und hoffen dass es irgendwie läuft ist nicht mein Anspruch.

Dann wirst du dich tief rein Knien müssen.
Verwendete Techniken/Frameworks: HTML, CSS, JS, JQuery, Materializecss und ioBroker Admin.
Als minimum sollte man den Zusammenhang von HTML, CSS und JS verstehen. Dann ist es viel leichter zu erkennen woher die Funktionen kommen und was passiert.
Aufgrund der vielen verschiedenen Techniken würde eine Vollständige Dokumentation jeden Rahmen sprengen.

Du kannst deine Config so Bauen wie du willst da gibt es nichts fertiges bis auf ein paar Funktionen, die aber nur im code selbst Dokumentiert sind.
Die Elemente wie Eingabefelder, Buttons und so weiter kommen aus Materializecss.
Der Blick in andere Adapter hilft.

Schau auch mal den Adapter an: https://github.com/Jey-Cee/ioBroker.examples
Da habe ich angefangen einen Beispiel Adapter zu Bauen der möglichst viel Funktionen in Funktion zeigt, damit man das noch vollziehen kann. Wenn du Verbesserungen hast oder neue Funktionen erstell gerne einen PR dann nehme ich ihn auf.
Die Tabelle in dem Adapter ist eine Alternative zu table2values/values2table.

Du bist Herzlich eingeladen deine Erkenntnisse in die Doku ein zu bringen.

[lugge86]

@Jey-Cee said in Doku für index_m & widgets gesucht:

Aufgrund der vielen verschiedenen Techniken würde eine Vollständige Dokumentation jeden Rahmen sprengen.

Das ist klar.
Es geht eher darum dem Entwicklungsnovizen einen Überblick über die Techniken zu geben und wie eine GUI aufgebaut ist und welche Möglichkieten man hat.
Dann kann man immer noch auf die verschiedenen externen Dokus verweisen.
Dass man nicht jedes MaterialCss-Widget im Detail erklären kann ist mir klar.

Deinen Beispiel-Adapter finde ich sehr gut, da kann man sich einiges abschauen.
Ich finde auch gut dass du eigene Tabellenfunktionen nutzt, dadurch wird das zusammenspiel zwischen MaterializeCss, jQuery, html und Js viel klarer.

Mittlerweile habe ich viele Adapter durchgesehen und versteh das zusammenspiel langsam.
Ein weiteres Beispiel: es ist nirgends direkt dokumentiert dass die index_m.html und die main.js über sendTo() kommunizieren müssen um Daten auszutauschen (von config-Daten abgesehen).
Das war mir bisher garnicht bewusst dass ich dafür onMessage-Handler implementieren muss um bestimmte Infos in die GUI reinzukriegen.

@Jey-Cee said in Doku für index_m & widgets gesucht:

Du bist Herzlich eingeladen deine Erkenntnisse in die Doku ein zu bringen.

Das werd ich wohl tatsächlich machen, ich hab hier einige Notizen.
Aber erstmal muss ich meinen Adapter einigermaßen sauber kriegen bevor ich gefährliches Halbwissen unters Volk bringe