Tile: cv-small-status

[mivola]

Hallo,

ich versuche aktuell an meiner Visu mit Tile-Design weiter zu basteln. Dazu ein paar Fragen zum cv-small-status, welches ich wie in der Demo für das Schalten der Lichter nutze:
- kann man die Templates auch außerhalb eines cv-small-status definieren? Ich würde diese gern in mehreren cv-small-status-Elementen (zB Lichter pro Etage) nutzen und möchte vermeiden den Code zu duplizieren und dann später ggf mehrmals ändern zu müssen
- könnte man das Popup auch scrollbar machen? Auf dem Handy sehe ich im Querformat sonst nur die ersten 4 Elemente

Danke und VG
Micha

[peuter]

- kann man die Templates auch außerhalb eines cv-small-status definieren? Ich würde diese gern in mehreren cv-small-status-Elementen (zB Lichter pro Etage) nutzen und möchte vermeiden den Code zu duplizieren und dann später ggf mehrmals ändern zu müssen

Das geht mit diesen Templates nicht, für sowas sind die Widgets gedacht. Von denen kannst Du auch eigene definieren, wie das geht steht hier: https://www.cometvisu.org/CometVisu/...ets-definieren

Du kannst allerdings nicht andere, vordefinierte Widgets in eigenen Widgets benutzen (zumindest ist es nicht so gedacht, ausprobiert hab ich es nie, gehe aber davon aus dass das nicht funktioniert). Daher würde ich raten einfach das original Small-Status-Widget als Vorlage zu kopieren (https://github.com/CometVisu/CometVi....xml#L354-L371) und dass dann für die eigenen Bedürfnisse anzupassen.

- könnte man das Popup auch scrollbar machen? Auf dem Handy sehe ich im Querformat sonst nur die ersten 4 Elemente

Das wird in zukünftigen Versionen so ein, bis dahin kannst Du das selbst ändern indem Du in Deiner Config im <cv-meta> Bereich folgendes einfügst:

<style>
cv-list {
    overflow: auto;
}
</style>​

[mivola]

Das geht mit diesen Templates nicht, für sowas sind die Widgets gedacht. Von denen kannst Du auch eigene definieren, wie das geht steht hier: https://www.cometvisu.org/CometVisu/...ets-definieren

Du kannst allerdings nicht andere, vordefinierte Widgets in eigenen Widgets benutzen (zumindest ist es nicht so gedacht, ausprobiert hab ich es nie, gehe aber davon aus dass das nicht funktioniert). Daher würde ich raten einfach das original Small-Status-Widget als Vorlage zu kopieren (https://github.com/CometVisu/CometVi....xml#L354-L371) und dass dann für die eigenen Bedürfnisse anzupassen.

Danke für die Hinweise bzgl der Templates. Allerdings bin ich mir unsicher ob ich meine Idee tatsächlich korrekt beschrieben habe. Tatsächlich will ich wahrscheinlich ein eigenes Template in einer cv-list nutzen (um dieses dann auch in anderen cv-list Elementen wiederzuverwenden).

Nach einigem Probieren bin ich nun bei dieser Version gelandet:

my-templates.xml

<templates structure="tile">
    <template id="light-on-off">
        <cv-listitem>
            <cv-button class="round-button" mapping="tile-light" size="small">
                <slot name="read-address" transform="DPT:1.001" mode="read"></slot>
                <slot name="write-address" transform="DPT:1.001" mode="write"></slot>
                <cv-icon class="value" />
            </cv-button>
            <div class="content">
                <label class="primary"><slot name="label"/></label>
            </div>
        </cv-listitem>
    </template>
</templates>​​​​

config.xml

                <cv-popup slot="popup" modal="true">
                    <cv-list rowspan="3" colspan="3">
                        <model>
                            <cv-data label="tr('alles')" write-address="1/2/0" read-address="1/2/0"/>
....
                        </model>
                        <header>
                            <h4 tr="true">Alle OG Lichter</h4>
                        </header>
                        <template>
                            <custom>
                                <cv-light-on-off>
                                    <cv-address slot="read-address">${read-address}</cv-address>
                                    <cv-address slot="write-address">${write-address}</cv-address>
                                    <span slot="label">${label}</span>
                                </cv-light-on-off>
                            </custom>
                        </template>​
                    </cv-list>
                </cv-popup>​​

Leider wird das ganze nicht korrekt dargestellt:
image.png

Hier das Element in der Developer Console:
image.png

Der Fehler liegt offensichtlich an class="cv-widget", denn wenn ich diesen Teil über die Developer Console entferne, sieht es wieder aus wie vorher. Nur: wie bekomme ich es hin, dass diese Klasse im Template nicht zugewiesen wird ?

Danke,
Micha

PS: in der Beispiel-Config fürs Tile Design gibt es in dem Popup noch folgendes Template:

<template when="empty">
<li><label class="primary" tr="true">Currently no lights are switched on</label></li>
</template>​

Der Text ist mMn irreführend, denn die Bedingung when=empty sorgt ja dafür, dass der Text angezeigt wird, wenn das Model leer ist, d.h. gar keine Lichter definiert sind...

[peuter]

Ich hab das schon verstanden, was Du vorhast, hier gibt nur nur leider ein Missverständnis was die Templates angeht.
Die Widget-Templates sind was anderes als die Templates die in einer Liste zum Einsatz kommen. Du kannst ein Widget-Template auch nur benutzen um ein Widget zu erstellen, nicht um etwas innerhalb eines anderen Widgets wiederverwenden zu können. Wenn ich später noch Zeit finde versuche ich mal ein kleines Beispiel von dem was ich meinte. Das lässt sich leider nur schwer verständlich erklären.

PS: in der Beispiel-Config fürs Tile Design gibt es in dem Popup noch folgendes Template:

<template when="empty">
<li><label class="primary" tr="true">Currently no lights are switched on</label></li>
</template>​

Der Text ist mMn irreführend, denn die Bedingung when=empty sorgt ja dafür, dass der Text angezeigt wird, wenn das Model leer ist, d.h. gar keine Lichter definiert sind...

Stimmt in der Vorlage aus der ich das kopiert habe, gab es noch einen Filter, der nur eingeschaltete Lampen anzeigt, damit machte das Label Sinn, ohne Filter allerdings nicht.

[peuter]

So dieses hier wäre das Widget, also der Teil der in die my-templates.xml gehört:

<template id="small-light-status" size="button">
        <cv-tile style="grid-template-rows: auto 1fr auto;">
            <cv-value slot-styling="tile-button" slot-mapping="" slot-value-format=":target=format" row="2" colspan="3" style="align-self: end">
                <cv-icon>ri-lightbulb-line</cv-icon>
                <slot name="address">NEEDS ADDRESS</slot>
            </cv-value>
            <cv-popup modal="true">
                <cv-list rowspan="3" colspan="3">
                    <slot name="model">NEEDS MODEL</slot>
                    <header>
                        <slot name="title"/>
                    </header>
                    <template>
                        <cv-listitem>
                            <cv-button class="round-button" mapping="tile-light" size="small">
                                <cv-address mode="read" transform="DPT:1.001">${read-address}</cv-address>
                                <cv-address mode="write" transform="DPT:1.001">${write-address}</cv-address>
                                <cv-icon class="value" />
                            </cv-button>
                            <div class="content">
                                <label class="primary">${label}</label>
                            </div>
                        </cv-listitem>
                    </template>
                </cv-list>
            </cv-popup>
            <slot name="tileAddress">NEEDS ADDRESS</slot>
        </cv-tile>
        <footer>
            <slot name="label" replaces="footer > cv-value"/>
            <cv-value slot-format="">
                <slot name="address">NEEDS ADDRESS</slot>
                <label class="value secondary" style="font-size: 14px"/>
            </cv-value>
        </footer>
    </template>​

Dann kannst Du das so in Deiner Config benutzen:

     <custom>
                <cv-small-light-status format="%d an">
                    <cv-address slot="address" transform="DPT:5.001" mode="read">1/4/0</cv-address>
                    <label slot="title">Alle Lichter</label>
                    <model sort-by="label" slot="model">
                        <cv-data label="Office" write-address="4/5/0" read-address="4/5/0"/>
                        <cv-data label="Bathroom" write-address="4/6/0" read-address="4/6/0"/>
                        <cv-data label="Living room" write-address="3/1/0" read-address="3/1/0"/>
                        <cv-data label="Kitchen" write-address="3/2/2" read-address="3/2/2"/>
                    </model>
                </cv-small-light-status>
    </custom>​

Das template für die Liste ist mit im Widget und du gibts in der Config nur noch das Model an. Kann man natürlich noch beliebig modifizieren, aber das Prinzip sollte klar sein.

Noch ein kurzer Hinweis, da Du Dinge aus der Demo-Config kopierst. Diese ist mehrsprachig, das wirst Du wohl kaum benötigen, d.h. bei allem was Du rüber kopierst kannst Du die `tr="true"` und bei den Werte von Attributen das "tr('...')" um den Text löschen. tr steht für translate, schätze mal das brauchst Du nicht.

[mivola]

Hallo,

danke für das Beispiel! Das funktioniert an sich gut und zeigt sehr gut wie man ein Template nutzen soll.

Allerdings zeigt es auch ein gravierendes Problem. Und zwar werden die GAs, die jetzt in dem Model definiert werden einfach nicht mehr abgefragt. Also die initiale Abfrage der GAs mittels http://server:8097/cgi-bin/r?t=0&s=SESSION&a=.... beinhaltet alle GAs der "normalen" Widgets, aber die Model-GAs aus dem Template nicht.

Falls notwendig kann ich morgen mal eine Minimal-Config erstellen und recorden ...

Danke und VG
Micha

[peuter]

Falls notwendig kann ich morgen mal eine Minimal-Config erstellen und recorden ...

Danke, ist nicht nötig, ich sehe das Problem.

[peuter]

Allerdings zeigt es auch ein gravierendes Problem. Und zwar werden die GAs, die jetzt in dem Model definiert werden einfach nicht mehr abgefragt. Also die initiale Abfrage der GAs mittels http://server:8097/cgi-bin/r?t=0&s=SESSION&a=.... beinhaltet alle GAs der "normalen" Widgets, aber die Model-GAs aus dem Template nicht.

Das sollte mit der 0.13.0-dev126 gefixt sein.

[mivola]

Funktioniert, Danke!